Mastercompu19

Web Site Desarrollado con Open Source

Administrar Muebleria

Ing. Byron Daniel Vaca Moreano

09/03/2011

Web Site desarrollado en HTML, CSS, PHP Y MYSQL, el cual administrar los usuario, proveedores, clientes, realiza facturas, hace pedidos y un catalogo acerca de los productos que oferta YOLIS MUEBLERIA, a la colectiviadad.

Tabla de contenidoPROLOGO.................................................................................................................................3

1. FUNDAMENTOS DE INTERNET....................................................................................4

INTRODUCCIÓN...................................................................................................................4

ESTRUCTURA DE LA RED.................................................................................................4

INTERNET: UN NUEVO MEDIO.........................................................................................6

ORIGEN Y DESARROLLO..................................................................................................6

BREVE LÍNEA DE TIEMPO DE LA INTERNET................................................................7

PROTOCOLOS DE COMUNICACIONES.........................................................................8

PILA DE PROTOCOLOS.....................................................................................................8

Protocolo TCP......................................................................................................................10

MODELO CLIENTE/SERVIDOR.......................................................................................11

TIPOS DE SERVIDORES..................................................................................................11

SERVIDORES DNS............................................................................................................13

Definición de Objetivos del Sitio...........................................................................................16

Definición de Audiencia.........................................................................................................17

• Por capacidad física: la audiencia del sitio incluirá personas con discapacidades físicas, por lo que una de las metas que debe tener todo sitio del Gobierno de Chile es permitir el acceso de ellos, a través del cumplimiento de las normas de Accesibilidad que se han recomendado como estándares internacionales. Para hacerlo se deben tomar las medidas correspondientes en la construcción del sitio, las que se describen en el título sobre Usabilidad y Accesibilidad del Capítulo 3...........................................................................17

• Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la experiencia técnica que tenga; por ello se deben plantear acceso simples mediante enlaces y otros más complejos, por ejemplo, mediante el uso de buscador. Es importante notar que en Chile desde hace algunos años se dobla la cantidad de personas que acceden a la Internet, por lo que cada año, al menos la mitad de la audiencia tiene poca o nula experiencia en el uso de Internet.......................................................................................17

• Por conocimiento de la institución: los usuarios del sitio se dividirán entre quienes conocen la institución y quienes no la conocen. Por lo anterior, los primeros siempre sabrán dónde buscar lo que necesitan usando la terminología, siglas y nombres de departamentos internos; los segundos, en tanto, no entenderán nada de la nomenclatura interna y les será muy difícil acceder a la información que se les ofrezca de esa manera. 17

• Por necesidades de información: los usuarios del sitio también se dividirán entre quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si existe algo que les pueda servir en lo que estén realizando................................................................17

2

• Por ubicación geográfica: dentro de la audiencia siempre habrá chilenos que ingresan al Sitio Web desde lugares diferentes a Santiago o incluso Chile, por lo que los contenidos deben responder también a esta diversidad......................................................................17

¿Cómo se llega a establecer la Audiencia?.........................................................................17

Estudiar Escenarios de Uso.................................................................................................18

Definición de Contenidos del Sitio.........................................................................................18

Servidores Web.....................................................................................................................150

Apache + PHP + MySql + PhpMyAdmin como módulo de Apache............................226

INTRODUCCION...............................................................................................................227

Instalación de PHP en Windows.........................................................................................257

PHP y HTML..........................................................................................................................259

PROLOGO.

El presente documento es un manual completo, que contine toda la información recopilada para el desarrollo de web site de la mueblería “YOLIS”, este documento estra estructurado por N capítulos, la información prodria ser usada como una Guia para el desarrollo de otros Web Site.

El capitulo 1 hace referencia a los fundamentos de Internet, su estructura, el origen, protocolos de comunicación, modelo cliente servidor, servidores DNS entre otros; con estos conceptos obtenemos los conocimientos fundamentales referente al Funcionamiento de Internet.

El capitrulo 2 en este capitulo

3

1. FUNDAMENTOS DE INTERNET.

INTRODUCCIÓN.

Internet, un concepto expresado con una palabra técnica, se ha introducido los últimos años como símbolo de una nueva revolución, abarcando todos los sectores.

Cada día oímos con más frecuencia noticias que hablan de ella, hablando de sus infinitas posibilidades o para criticarla. Ya es rara la Universidad, empresa o multinacional que no incluya un enlace a una página de Internet. Poco a poco en el ámbito de trabajo académico se introduce como un factor importante y un medio imprescindible. Hoy, en las universidades prestigiosas, la gran mayoría de los alumnos tienen acceso a Internet y buzón de correo electrónico particular.

A pesar que hace 5 años, muy pocos sabían que es “Internet” y su funcionamiento, hoy, somos testigos de la gran explosión de las redes y su interconexión que se denomina “Internet”. Las consecuencias de este fenómeno no se saben de ciencia exacta, sin embargo esta casi seguro que dominará al ámbito académico, de modo que el conocimiento de su operación será imprescindible para los profesores, investigadores y alumnos de la educación universitaria.

Pero, ¿Dónde reside el interés para conectarse a Internet?

Si analizamos el éxito vemos claramente dos factores que han sido cruciales:

Acceso ilimitado a información de cualquier tipo en cualquier parte del mundo.

Facilidad, versatilidad y productividad a la hora de comunicarla.

Si a todo esto añadimos el avance tecnológico a la comunicación inalámbrica, equipos de comunicaciones cada vez mejores (móviles GSM con ordenadores portátiles) junto a la facilidad de conectar con cualquier persona en cualquier parte del mundo para intercambiar ideas, cultura y conocimientos, obtenemos un mundo cada vez más cercano y una red a la que cada día más gente siente la necesidad de conectarse.

4

ESTRUCTURA DE LA RED

Pero, ¿Qué es Internet en realidad?

Podemos decir, que Internet son millones de ordenadores conectados a miles de redes. O, por decirlo de otras palabras, Internet es una meta-red, una red mayor (de área amplia) de redes menores (locales).

Evidentemente, no existe una red principal a la que todos los ordenadores se conectan, sino que son redes de ordenadores que se interconectan entre sí.

Este es un factor de éxito añadido. La inexistencia de una red principal, funciona como una defensa contra el malfuncionamiento. De hecho que si una red se "cae" (por algún razón deja de funcionar efectivamente) , el resto sigue funcionando aunque, evidentemente, no pudieran acceder a la red menor que esta fuera del servicio.

No obstante, aunque no haya una red primaria, sí hay una serie de redes, que por su localización, calidad e importancia, se consideran fundamentales. Son las que forman la "espina dorsal de Internet", que también se conocen como las “autopistas de Internet”, de la que "cuelgan" otras redes menos importantes.

Por ello, si no hay una red principal, no hay ordenadores principales, ni centros de control. Esto tiene sus ventajas y sus inconvenientes.

Ventajas:

1. Hay libertad total de expresión. 2. La legislación vigente para un país no tiene porqué coincidir con otros

países, por tanto, lo que en un país no está permitido, puede sí hacerlo en otros.

3. Hay un anonimato relativo, que junto a la libertad de expresión hacen muy atractiva a la Red.

Inconvenientes:

1. Hay demasiado libertinaje. Al no haber control sobre la información, podemos encontrarnos con información no deseada.

2. Lo que en países desarrollados no está permitido, puede sí estarlo en países de legislación atrasada (punto recíproco al 2 del apartado anterior).

3. El anonimato es objeto de abuso. Hay muchos contenidos “basura” (sin interés o de interés despreciable) introducidos por gente cuyo nombre oculta.

5

En resumen:

Internet la forman miles de redes de ordenadores de la que "cuelgan" miles de ordenadores en cada una de ellas.

 

INTERNET: UN NUEVO MEDIO

INTERNET es un nuevo MEDIO de comunicaciones, nunca un fin. Coexiste y se basa en otros medios de comunicación, existentes anteriormente, y su finalidad es gestionar el trafico de la información de modo más rápido, más eficaz y menos costoso que los medios anteriores. Por eso, no debemos confundirnos. Si tiene éxito o fracaso depende al 100 % del buen o mal uso que se le esté dando, igual que los tradicionales medios de comunicación. Es cierto que han salido a la luz de la prensa varios casos de uso ilegal de la Internet, generalmente de fines de pornografía infantil y estafas económicas. Sin embargo, estos crímenes, no llegan con Internet, sino con el mal uso de un medio barato de difusión de información. La pornografía infantil existía mucho antes que las redes, empleando para fines similares la fotografía y la prensa. Y, claro esta que donde haya dinero, haya estafas sea cual sea el medio usado.

Sin embargo, para no quedar con el sabor amargo que, desafortunadamente, se ha dado los últimos años a Internet, exponemos otro ejemplo, mucho más optimista: Se trata del caso de un minusválido que fue salvado de un ataque de epilepsia gracias a que estaba manteniendo una conversación escrita segundos antes con una amiga en otra parte del mundo. Pero esa conversación podía haber sido mantenida perfectamente vía telefónica, con iguales resultados. Otra vez, el éxito (en este caso) no fue de Internet, sino del amigo

.

En resumen:

Internet está de moda, es barato, fiable, divertido y sus posibilidades son infinitas, pero su reputación es la reputación de sus usuarios. Y si está bien o mal usada no depende de ningún ordenador ni de nadie en concreto, sino de todos los usuarios en todo el mundo.

 

ORIGEN Y DESARROLLO

6

Como la mayoría de los avances científicos y tecnológicos, Internet nació como un proyecto militar, que con el paso del tiempo ha sobrepasado su aplicación inicial.

Hace unos 40 años, y con la tensión de la Guerra Fría con la URSS, a los EEUU se les planteó un problema. ¿Cómo podrían mantener los ordenadores la comunicación de manera que todos fueran independientes? Así, si uno de ellos era destruido, el resto podría seguir comunicándose.

La primera propuesta fue de Paul Barán en 1964. Todos los ordenadores serían igual de importantes y todos tendrían el mismo papel. La información se dividiría en "paquetes" que, al igual que los paquetes en el mundo real, llevarían un remitente (origen) y un destinatario (destino). La ruta que el paquete tomara debería ser irrelevante, y los paquetes irían de ordenador a ordenador hasta llegar al destino.

La idea gustó y el ARPA (Advanced Reseach Projects Agency) decició respaldar el proyecto.

En 1971 había 15 nodos (ordenadores) y en el año siguiente 37. Al segundo año se descubrió que más de la mitad de los mensajes que se intercambiaban no eran de larga distancia. Casi todo eran mensajes personales.

A lo largo de los años 70, ARPA creció y se descentralizó el control, extendiéndose el número de nodos.

En 1996 se estimaban 80 millones de ordenadores conectados a Internet, mientras que hoy se encuentran conectados más de 260 millones de ordenadores.

BREVE LÍNEA DE TIEMPO DE LA INTERNET.

Aunque la historia de Internet es corta, sí han ocurrido muchos eventos. De los más importantes son:

1945: Lick..... ha tenido la primera concepción de maquinas de intercambio de documentación, lo que luego se conoció como “hipertexto”.

1957 : La URSS lanza el Sputnik y como respuesta, los EEUU forman el ARPA (Agencia de Proyectos de Investigación) dentro del DOD (Departamento de Defensa)

1970 : Los ordenadores (hosts) de ARPANET empiezan usando el protocolo de comunicaciones propuesto (NCP)

1971 : 15 nodos, con 23 ordenadores host. 1972 : Se inventa el programa de correo Electrónico

7

1981 : BITNET empieza como red corporativa en Nueva York. 1982 : Se idea el TCP/IP, protocolo actual de Internet. 1986 : Se crea el programa de News. 1988 : IRC (Internet Relay Chat) se pone en marcha. 1991 : Se crea el WWW (World Wide Web). 1992 : Se conectan las grandes Entidades (Casa Blanca, el Banco

Mundial,...) 1995 : Se ponen en marcha el resto de servicios adicionales: Java,

código móvil, etc ... 1996 : Se contabilizan alrededor de 80 millones de ordenadores en

Internet.

PROTOCOLOS DE COMUNICACIONES.

Definición del Protocolo:

Un protocolo es un conjunto de normas que especifican de qué modo ha de realizarse la transferencia de información de unos ordenadores a otros.

Determina también cómo se detectan y corrigen los errores en la transmisión, cómo son los mecanismos de confirmación de llegada de los paquetes, y todo ello independientemente de los fabricantes de ordenadores y del tipo de línea usados.

 

8

NIVEL 5: Sesión

NIVEL 4: Transporte TCP

NIVEL 3: Red IP

NIVEL 2: Enlace de datos

NIVEL 6: Presentación

NIVEL 1: Fisico

NIVEL 7: Aplicación

PILA DE PROTOCOLOS.Si dos ordenadores completamente distintos son capaces de entenderse es porque en algún punto de la trayectoria que sigue la información se deben poner de acuerdo.

Se recurrió a una inteligente estratagema consistente en 7 capas, llamadas NIVELES OSI, que tiene las siguientes características.

A cada nivel le corresponden el mismo conjunto de protocolos.

Una máquina recibe en un nivel determinado lo mismo que otra máquina

le envía por el mismo nivel.

El nivel más alto es el que ve el usuario, mientras que el más bajo es por el que las máquinas se comunican físicamente. Protocolo IP

 El protocolo IP (Internet Protocol) es el encargado de proporcionar los

mecanismos necesarios para poder direccionar los ordenadores.

Los datos se meten en paquetes, llamados “datagramas” que básicamente tienen la estructura de la figura, y que tienen la característica de que se envían, pero no es este protocolo el que se asegura de que lleguen (es decir, se lanza el paquete, pero no sabemos si llegará o no, aunque el protocolo asegura que sí será recibido).

IP también se asegura de que los paquetes no se queden por tiempo indefinido en la red, retirándolos en un periodo de tiempo determinado si no encuentra el destino.

Una consecuencia inmediata que se puede deducir es que todos los ordenadores tienen que tener números distintos, y no puede haber dos ordenadores en el mundo que a la misma hora tengan el mismo número. Las direcciones IP son grupos de cuatro números del 1 al 256. Por ejemplo, 195.53.83.2 es un número correcto.

9

Todos los ordenadores tienen números distintos que los identifican unívocamente.

Protocolo TCP

TCP es un protocolo encargado de velar por la correcta transmisión y recepción de los datos.

IP es un protocolo que se queda algo corto. Pertenece al nivel de red, y se limita a direccionar ordenadores, enviando los datos.

Sin embargo, TCP pertenece al nivel superior, al de transporte, y por tanto usa a IP, completándolo con tareas como el multireparto, el control de recepción del paquete y el control de errores.

Se encarga de tomar los datos, y meterlos en un paquete que va a ser enviado a un destinatario. El formato de un paquete es, a grandes rasgos el siguiente:

ORIGEN DESTINO ZONA DE DATOS

 

CENTROS PROVEEDORES

Generalmente, un individuo no puede acceder directamente a Internet. Si así fuera, el gran número de ordenadores que habría conectados a la Red imposibilitaría su manejo. Por ello se establecen unas puertas de acceso, que son los Centros Proveedores y que son ordenadores que sí están conectados a

10

Internet directamente, y que son ellos los que gestionan las peticiones de los usuarios.

Si cada ordenador en el mundo es unívocamente direccionado por un número, son los centros proveedores de acceso los que nos proporcionan momentáneamente un número IP, necesario para cualquier sesión de Internet.

MODELO CLIENTE/SERVIDOR

El modelo Cliente-Servidor es el que adoptan ordenadores conectados a Internet. De ese modo, los centros proveedores de acceso son Servidores, que ofrecen servicios a clientes, que somos nosotros con nuestros ordenadores.

Un Servidor puede tener varios clientes a la vez, a los que ofrece servicios de cualquier tipo. Esta es la

estructura en la que se basa todo el tráfico de información en Internet.

Un Servidor es aquél que era capaz de ofrecer servicios a los Clientes. Bien, supongamos que un Cliente le pide información que no posee el Servidor. Momentáneamente, este Servidor se convierte en Cliente de otro servidor, y

una vez obtenida la información deseada, volverá a ser el Servidor que era. Después le ofrece esta información al Cliente inicial.

De este modo, en Internet los Servidores pueden serlo por un instante y en otro momento, ser Clientes de otros Servidores. Esta estructura dinámica es uno de los puntos fuertes con los que cuenta Internet.

TIPOS DE SERVIDORES

Esta lista categoriza los diversos tipos de servidores del mercado actual.

Plataformas de Servidor (Server Platforms): Un término usado a menudo como sinónimo de sistema operativo, la plataforma es el hardware o software subyacentes para un sistema, es decir, el motor que dirige el servidor.

Servidores de Aplicaciones (Application Servers): Designados a veces como un tipo de middleware (software que conecta dos aplicaciones), los servidores de aplicaciones ocupan una gran parte del territorio entre los servidores de bases de datos y el usuario, y a menudo los conectan.

11

Servidores de Audio/Video (Audio/Video Servers): Los servidores de Audio/Video añaden capacidades multimedia a los sitios web permitiéndoles mostrar contenido multimedia en forma de flujo continuo (streaming) desde el servidor.

Servidores de Chat (Chat Servers): Los servidores de chat permiten intercambiar información a una gran cantidad de usuarios ofreciendo la posibilidad de llevar a cabo discusiones en tiempo real.

Servidores de Fax (Fax Servers): Un servidor de fax es una solución ideal para organizaciones que tratan de reducir el uso del teléfono pero necesitan enviar documentos por fax.

Servidores FTP (FTP Servers): Uno de los servicios más antiguos de Internet, File Transfer Protocol permite mover uno o más archivos.

Servidores Groupware (Groupware Servers): Un servidor groupware es un software diseñado para permitir colaborar a los usuarios, sin importar la localización, vía Internet o vía Intranet corporativo y trabajar juntos en una atmósfera virtual.

Servidores IRC (IRC Servers): Otra opción para usuarios que buscan la discusión en tiempo real, Internet Relay Chat consiste en varias redes de servidores separadas que permiten que los usuarios conecten el uno al otro vía una red IRC.

Servidores de Listas (List Servers): Los servidores de listas ofrecen una manera mejor de manejar listas de correo electrónico, bien sean discusiones interactivas abiertas al público o listas unidireccionales de anuncios, boletines de noticias o publicidad.

Servidores de Correo (Mail Servers): Casi tan ubicuos y cruciales como los servidores web, los servidores de correo mueven y almacenan el correo electrónico a través de las redes corporativas (vía LANs y WANs) y a través de Internet.

Servidores de Noticias (News Servers): Los servidores de noticias actúan como fuente de distribución y entrega para los millares de grupos de noticias públicos actualmente accesibles a través de la red de noticias USENET.

Servidores Proxy (Proxy Servers): Los servidores proxy se sitúan entre un programa del cliente (típicamente un navegador) y un servidor externo (típicamente otro servidor web) para filtrar peticiones, mejorar el funcionamiento y compartir conexiones.

12

Servidores Telnet (Telnet Servers): Un servidor telnet permite a los usuarios entrar en un ordenador huésped y realizar tareas como si estuviera trabajando directamente en ese ordenador.

Servidores Web (Web Servers): Básicamente, un servidor web sirve contenido estático a un navegador, carga un archivo y lo sirve a través de la red

No hay razón por la cual un ordenador sólo pueda tener un Servicio en marcha. Podemos encontrarnos con servidores Web y FTP en el mismo ordenador y ambos funcionarían correctamente, si bien un número elevado de Servicios en marcha podría ralentizar las respuestas a las peticiones de los clientes y aumentar el grado de insatisfacción de los mismos.

SERVIDORES DNSUn servidor DNS es un ordenador que traduce nombres de ordenadores en direcciones IP.

En Internet todos los ordenadores son referenciados por el protocolo IP por un grupo de cuatro números. Si todos los ordenadores fuesen referenciados de esa manera, y debido a la inmensa cantidad de Servidores que hay, sería fácil confundirnos de número e irnos a uno indeseado. Pues bien, si nosotros pudiéramos escribir el nombre del sitio donde queremos ir, sería más sencillo. De eso se trata. Nosotros escribimos un nombre, y el DNS traduce ese nombre en número y nos devuelve el número de dónde debemos ir.

El servidor DNS es tan importante que se tiende a duplicar, es decir, si nosotros accedemos a un Servidor DNS "caído", deberemos contemplar la posibilidad de acceder a otro.

Resolución de nombres

13

Cuando nos referimos a cualquier ordenador, lo primero que hace es conectar con el DNS. El único punto a destacar es que como es otro ordenador más, necesita un número IP.

Una vez accedido a él, le pasamos el nombre del ordenador al que queremos acceder, y él únicamente nos proporciona su dirección en número IP, pero no nos contacta con él.

Ejemplo. Queremos acceder a www.netvision.es. El DNS es el que nos traduce esa dirección a 195.53.83.2 y seremos nosotros (o el programa que estemos ejecutando) quienes accedamos a ese número IP.

 

 

 

Jerarquía de dominios

La distribución Jerárquica permite crear distintos niveles o dominios de responsabilidad, para garantizar la unicidad de los nombres; en el nivel superior se encuentran los dominios asociados a los distintos países junto con otros especiales; por debajo de estos suelen encontrarse los dominios correspondientes a las diferentes organizaciones conectadas a Internet dentro de cada país, que a su vez pueden estar estructurados en departamentos o secciones.

14

Dominios más utilizados

El último subdominio en un nombre determina el país al que pertenece. Aunque

no es demasiado fiable, ya que cualquiera puede ponerse cualquier nombre, sí

es orientativo.

Nombre Descripción Ejemplo

Com organizaciones comerciales www.ibm.com

Org Organizaciones no lucrativas www.acm.org

Mil Defensa y ordenadores militares navy.mil

Gov Organizaciones gubernamentales www.fbi.gov

Net Organizaciones vinculadas con Internet www.internic.net

Edu Instituciones educativas www.ucla.edu

Int Organismos internacionales nato.int

Dominios de países

Nombre Descripción Ejemplo

Es España www.udg.es

Fr Francia  www.louvre.fr

It Grecia  www.ntua.It

Ec Ecuador www.mercadolibre.com.ec 

.... ...  

INSTALACIÓN DE SERVER WAMP EN WINDOWS

15

Wamp Server, antes conocido como WAMP, es un completo paquete al estilo ’apachefriends’ que te permite instalar y configurar fácilmente en tu sistema lo último del servidor Web Apache, el lenguaje de programación PHP y el servidor de base de datos MySQL.

Las versiones que instala de esta aplicaciones son las siguientes: Apache 2.2.6, PHP5, MySQL database, PHPmyadmin y SQLitemanager.

Pero Wamp Server no es simplemente un paquete de programas, esta aplicación instala una interfaz residente en la barra de tareas que permite iniciar, supervisar y detener los distintos servicios.

Una de las ventajas de usar Wamp Server es que la instalación modificará los archivos de configuración (*.conf) con la ruta donde finalmente se ubicará el programa. También crea un directorio denominado ’www’ que será la raíz para tus documentos.

Un icono en la barra de tareas nos indicará al instante el estado de los diferentes servicios.

Wamp Server WAMP5 - Popularidad: 50% - Comentarios: 0 Existen muchos programas que nos facilitan la instalación de un paquete de software, y entre ellos encontramos Wamp5, Wamp5 incluye Apache, PHP5, MySQL. PHPMyAdmin, SQLiteManager y un interface para la barra de notificaciones del sistema.

Instalado Wamp, nos ahorramos todos los problemas para hacer funcionar PHP5 y MySQL juntos en un servidor Apache y además la instalación será mucho más sencilla y funcionamiento más práctico.

Paso 0: Descargar y ejecutar el archivo wampserver 2.1 ep .exe

Se pone en el gloogle o cualquier otro buscador “bajar gratis WAMP Server” y el buscador encontrara algunas otras paginas que permiten instalar online el Servidor Web.

16

Se escoge el tercer link “wamp-server-wamp5.uptpdown.com/” en este caso el tercero

Se hace clic en Descargar, se despliega una ventana la cual indica el lugar en donde se va a guardar el icono wamp-server-wamp5.2-0h.

17

Se hace clic en el botón Guardar archivo y en el escritorio se guarda el icono.

WAMP5 es un entorno de desarrollo para el Sistema Operativo Windows que permite crear aplicaciones web mediante bases de datos MYSQL, servidor web APACHE y el lenguaje de programación PHP.

Para instalar el paquete, sólo deberá hacerse iniciarse y seguir las indicaciones en pantalla. Nada más sencillo.

WAMP5 es el único ambiente de creación de utilidades que permite recrear el server donde se alojará el contenido elaborado.

Se hace clic en el icono de inmediato se inicia la descarga e instalación de Wamp Server WAMP5 2.0h

Se hace clic en el botón siguiente para continuar

18

Una vez que se ha descargo se empieza con la instalación de Wamp Server WAMP5 2.0h

Se hace clic en Next y se despliega la ventana acerca de la licencia

Una vez que se haga leído y aceptado la licencia se hace clic en el botón Next para continuar, se despliega la ventana que indica en donde se van alogar los archivos

19

Cuando se ha definido la carpeta en donde se intalará WampServer 2 se hace clic en siguiente. Y de despliega la ventana en donde se puede crear un icono en el escrotorio.

Se hacec clic en next

Se hace clic en install para comezar con la instalación

20

Se escoge el explorador de interenet que se ha de utilizar por defecto

21

22

23

WAMP5 incorpora un ícono en la barra de tareas desde el cual es factible controlar los ajustes del servidor, crear un alias, acceder a los reportes, conmutar entre “en línea” y “fuera de línea” (online/offline), cambiar el idioma del menú y administrar los servicios.

24

Una vez que se tiene toda la estructura de los servidores instalada y configurada asi de sencillo, Se ha configurado un Servidor de Aplicacion, Servidor Web, Servidor de Base de Datos, se necesita instalar un software para Diseño Web: html, css; un ide o editor de PHP y un IDE de MySql para SQL; aunque WAMP cuenta con un IDE para la administración de la base de Datos.

Se necesita instalar un IDE para programar. Se busca en gloogle

25

26

27

28

2. DEFINICIÓN DEL SITIO WEB

Arquitectura de Información

Entre las metodologías más útiles que tendrán los profesionales encargados de desarrollar un Sitio Web, se contarán las que aparecen descritas dentro de la Arquitectura de la Información, que es el conjunto de métodos y herramientas que permiten organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa.

29

La Arquitectura de Información estará cumpliendo sus objetivos cuando un usuario entre por primera vez al sitio y pueda reconocer a quién pertenece el Sitio Web; lo pueda entender en forma rápida y sin esfuerzo y encontrar la información ofrecida fácilmente. Adicionalmente eso entregará el beneficio de que quienes producen el sitio podrán ubicar la nueva información sin tener que crear nuevas estructuras y al mismo tiempo tendrán la libertad de incorporar nuevas iniciativas al sitio sin tener que partir de cero.

Los elementos que se muestran a continuación constituyen la metodología de la Arquitectura de Información, mediante la cual es posible conseguir las metas de organización y visibilidad de los contenido. Cada una de ellas debe ser investigada, desarrollada y documentada adecuadamente:

• Definición de Objetivos del Sitio• Definición de Audiencia• Definición de Contenidos del Sitio• Definición de la Estructura del Sitio• Definición de los Sistemas de Navegación• Definición del Diseño Visual

A continuación se entrega una explicación detallada de cada una de estas actividades.

Definición de Objetivos del Sitio

A través de esta etapa se busca definir cuáles serán los objetivos centrales que deberá tener elSitio Web y establecer la forma de cumplirlos.

Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos secundarios; no obstante lo anterior, es importante que estos objetivos sean explicitados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo tenga claro el horizonte que debe tener el proyecto.

Para generar objetivos que sean válidos y comprensibles, se aconseja escribirlos a través de frases que se inicien con verbos que expresen las acciones a realizar. Por ejemplo: «Recibir preguntas de los usuarios sobre las actividades de la institución» o «Presentar públicamente los informes más importantes de la institución».

Una forma de llegar más concretamente a los objetivos, es revisar la visión y la misión de la organización, desde la cual se pueden obtener las claves que permitan definirlos. De más está decir que los objetivos del sitio deberán estar en concordancia con las necesidades y planificación que haya hecho la institución en sus planes anuales.

Una de las primeras metas que se debe cumplir consiste en «tener presencia en Internet», siguiendo en este sentido el Instructivo Presidencial de Gobierno Electrónico. No obstante, se debe entender como tal la entrega de información actualizada de la institución, más la proposición de alguna actividad interactiva, mediante el aprovechamiento del estado actual de la tecnología. Por ejemplo, «ofrecer las respuestas de las principales Preguntas Frecuentes que se reciben en la institución» o «entregar la explicación detallada sobre los principales trámites», permiten cumplir con la idea de tener presencia, a través de una propuesta de contenido que ofrece un valor agregado a quienes ingresan al sitio.

Idealmente el listado de objetivos del sitio debe estar acotado y no llegar a más de cinco proposiciones. Este número, si bien es arbitrario, se indica como una forma de señalar que los objetivos no pueden ser tantos como para impedir su cumplimiento; ni tan pocos como para que el sitio sea poco ambicioso.

30

De cada uno de estos objetivos se pueden desprender tareas concretas que permitan avanzar en el cumplimiento de ellos.

Definición de Audiencia

Una vez que se ha terminado adecuadamente la etapa anterior con la generación de los objetivos del sitio, se debe dar un siguiente paso, que es el de determinar las principales audiencias (públicos) hacia las cuales se orientará el sitio.

Está claro que el Sitio Web no podrá atender al mismo público que atiende la institución, dado que el acceso a Internet se produce mayoritariamente en segmentos de ingresos medianos a altos. Sin embargo, hay varias consideraciones que tener en cuenta, al definir qué tipos de audiencia se atenderán desde las pantallas del sitio.

A continuación se hacen algunas definiciones de audiencia, las que, sin importar las características del sitio, siempre deberán estar presentes, y por lo mismo, deben traducirse en acciones para poder atenderlas adecuadamente.

• Por capacidad física: la audiencia del sitio incluirá personas con discapacidades físicas, por lo que una de las metas que debe tener todo sitio del Gobierno de Chile es permitir el acceso de ellos, a través del cumplimiento de las normas de Accesibilidad que se han recomendado como estándares internacionales. Para hacerlo se deben tomar las medidas correspondientes en la construcción del sitio, las que se describen en el título sobre Usabilidad y Accesibilidad del Capítulo 3.

• Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la experiencia técnica que tenga; por ello se deben plantear acceso simples mediante enlaces y otros más complejos, por ejemplo, mediante el uso de buscador. Es importante notar que en Chile desde hace algunos años se dobla la cantidad de personas que acceden a la Internet, por lo que cada año, al menos la mitad de la audiencia tiene poca o nula experiencia en el uso de Internet.

• Por conocimiento de la institución: los usuarios del sitio se dividirán entre quienes conocen la institución y quienes no la conocen. Por lo anterior, los primeros siempre sabrán dónde buscar lo que necesitan usando la terminología, siglas y nombres de departamentos internos; los segundos, en tanto, no entenderán nada de la nomenclatura interna y les será muy difícil acceder a la información que se les ofrezca de esa manera.

• Por necesidades de información: los usuarios del sitio también se dividirán entre quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si existe algo que les pueda servir en lo que estén realizando.

• Por ubicación geográfica: dentro de la audiencia siempre habrá chilenos que ingresan al Sitio Web desde lugares diferentes a Santiago o incluso Chile, por lo que los contenidos deben responder también a esta diversidad.

¿Cómo se llega a establecer la Audiencia?

Una de las formas más concretas de establecer la audiencia que tiene el sitio, es comenzar por investigar en la propia institución, para determinar a quiénes atienden sus diferentes reparticiones. Entrevistar especialmente a los funcionarios que atienden público (Oficina de Partes, Secretarias, Oficina de Información, Reclamos y Sugerencias (OIRS), Mesas de Ayuda, Centrales y Líneas telefónicas 600 y 800) es una fórmula que permitirá determinar con bastante exactitud qué está ocurriendo con la audiencia.

31

Una vez que se ha hecho ese trabajo, es interesante hablar con usuarios que llegan a la institución y hacerles preguntas muy simples y directas:

• ¿A qué vino a la institución?• ¿Tiene acceso a Internet?• ¿Propio o a través de Infocentros?• ¿Qué tipo de información en la Internet le habría evitado este viaje?• ¿Qué le gustaría ver en el sitio Internet de esta institución?

De las respuestas que se obtengan, se podrá hacer un muy buen resumen de tres elementos:

• Tipos de usuario que se podrían atender a través de Internet• Expectativas de los usuarios respecto del sitio• Necesidad de información de la institución

Estudiar Escenarios de Uso

Otra de las metodologías más efectivas, al momento de trabajar en el tema de las audiencias, tiene que ver con la forma en que el equipo de desarrollo responda a dos preguntas:

• ¿Cuáles son las audiencias previstas?• ¿Por qué la gente vendrá a su sitio?

Al responder la primera pregunta, será posible determinar hacia quiénes se deberá enfocar el sitio y, por lo mismo, comenzar a tomar decisiones respecto de la forma de navegación, servicios interactivos previstos y otros elementos de despliegue que tendrá el sitio.

Al responder la segunda pregunta lo que se busca es que basados en las audiencias posibles, sea factible imaginar los tipos de contenidos que ellos vendrán a buscar al sitio.

En este sentido, la expresión «Estudiar escenarios de uso», busca determinar situaciones de uso reales en el Sitio Web, basado en usuarios existentes que puedan llegar al sitio a buscar determinados tipos de información.

Por ejemplo, si nuestro Sitio Web se refiere a cotizaciones previsionales, se puede aplicar el caso don Juan Pérez, agricultor de Paine, que quiere saber qué puede hacer para pagar las imposiciones de su AFP en su comuna. ¿Existe en el sitio una respuesta para él? ¿Si llegara al sitio y viera la portada que se ha diseñado, encontraría la respuesta a su pregunta?

Al llegar a casos reales de uso del sitio, basado en las audiencias que se haya definido, es posible establecer con mucha mayor exactitud cómo esas personas (es decir casos reales) van a usar el sitio. Naturalmente, este tipo de revisiones permiten ratificar o modificar lo que se haya definido previamente como contenido del sitio, debido a que muchas veces la planificación inicial es hecha por personas que conocen la institución y dan por obvios muchos de los contenidos que para los usuarios normales no lo son tanto.

Definición de Contenidos del Sitio

Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las definiciones más concretas que permitan decidir qué contenidos son los que va a tener el Sitio Web que se desarrolle.

Para identificar contenidos, se deben utilizar como insumo los materiales que se hayan obtenido en la etapa de identificación de Objetivos y de Audiencias, ya que en ambos la búsqueda giró en torno a las necesidades que tenían los usuarios del sitio.

32

Para cumplir con una norma general respecto de qué debería contener un sitio, se pueden anotar las siguientes, como las más importantes:

• Acerca de la Institución: entregar la información completa referida a Autoridades, Organigrama, Normativa legal asociada, Oficinas, Horas de Atención, Teléfonos, etc.

• Productos / Servicios: destacar las actividades principales que el usuario puede hacer en la institución; puede incluir una guía de trámites que facilite las acciones de las personas que acudirán a la institución y que considere servicios interactivos para hacerlos desde el Sitio Web.

• Novedades de la Institución: últimas actividades, noticias, etc. Viendo esta lista mínima (que crecerá en la medida de las necesidades de entrega de información de la institución), hay que hacer énfasis en que el interés de los contenidos variará si se trata de un usuario interno o externo.

Por ejemplo, si miramos un Sitio Web desde el punto de vista del usuario externo de la institución, lo que más le interesará será la información referida a los trámites, seguida por la que informe acerca de cómo tomar contacto con la institución. Si la miramos desde el punto de vista del usuario interno, lo más importante será la información de Novedades, seguida por la de organigrama y presentación interna.

Por lo mismo, es muy relevante que tanto los objetivos como la audiencia del sitio se hayan definido muy bien en forma previa, porque de lo contrario no habrá posibilidad de atender a ambos usuarios de manera adecuada.

> Agrupar y Etiquetar el Contenido

Con las definiciones hechas hasta ahora, llega el momento de poner en práctica las metodologías que permiten ordenar los contenidos, agrupándolos en conjuntos coherentes y dándoles nombres que los identifiquen.

Probablemente la mejor técnica para hacerlo es hacer unas pequeñas tarjetas de papel, en las que se anotan las principales áreas de contenido que se hayan detectado y revisado en el paso anterior. Una vez hecho, las cartas se ponen sobre una mesa y se van agrupando, hasta formar conjuntos de elementos coherentes entre ellos. Luego, a cada conjunto se le pone un nombre (idealmente una sola palabra) que identifique a todos sus contenidos.

Con esas agrupaciones hechas, ya tendremos los elementos adecuados para generar posteriormente el árbol de contenidos que, a su vez, permitirá hacer el sistema de navegación.

Una vez que el proceso de Etiquetado ha concluido, es bueno hacer comprobaciones empíricas de la validez de los nombres escogidos. Para ello, se requiere que los elegidos sean mostrados a personas de diverso origen y que conozcan la institución, como también a quienes la desconozcan por entero. Ellos deben responder las siguientes preguntas:

• ¿Qué significa este nombre?• ¿Qué tipos de contenidos esperaría encontrar en esta área?

Con las respuestas obtenidas se podrá juzgar si los nombres que se han usado son los más adecuados o, bien, hay que introducir modificaciones.

Por ejemplo, dentro de los nombres más usados para una de las secciones habituales de un Sitio Web como es la de información corporativa, se cuenta «Acerca de», «Sobre...», «Quiénes Somos» e «Información Corporativa».

> Identificar Requerimientos Funcionales

Junto con la búsqueda de las áreas de contenido que deberá tener el sitio, se debe trabajar también en la definición de lo que se busca que el sitio «haga», es decir, los tipos de interacción que se busca incluir.

Dentro de los servicios interactivos más frecuentes se cuentan las siguientes:

33

• Formulario de Contacto para envío de mensajes electrónicos• Sistema de envío de una noticia por mail a un amigo• Formato de impresión de los contenidos• Mapa del Sitio

Dentro de las funcionalidades de mayor complejidad, pero a las que todo sitio debería aspirar, se cuenta:

• Buscador interno del Sitio Web• Área de acceso privado para usuarios registrados• Sistema de envío de boletines de noticias del sitio a usuarios registrados

Será importante que el sitio cuente con todos los servicios interactivos descritos como mínimos, para ofrecer una mejor experiencia al usuario que lo visita.

> Análisis de Sitios Similares

El último elemento que se debe desarrollar en esta etapa es la búsqueda de otros sitios en Internet que sean similares a nuestra institución, con el fin de revisar de qué manera han resuelto los mismos problemas que deberemos atender.

Esta actividad comparativa permitirá llegar a las «buenas prácticas» que es posible adaptar a las necesidades de nuestro sitio, con el fin de asegurarnos métodos de funcionamiento y despliegue de contenidos, que sean coherentes con los objetivos que se han planteado inicialmente.

Es importante que se haga una pauta previa de comparación, con el fin de saber de antemano cuáles son los parámetros que se medirán y gracias a eso, optimizar la revisión que se haga (ver ejemplo de Pauta de Comparación de Sitios Web en Anexo I).

Una vez que se ha hecho el trabajo de identificación de contenidos reseñado en las etapas anteriores de este documento, se debe avanzar hacia las definiciones relacionadas con la forma que tendrá el sitio que se está desarrollando. Ello implicará trabajar en tres áreas concretas, a través de las cuales se definirá la estructura del sitio, el árbol de contenidos y los sistemas de navegación que se ofrecerá a los usuarios para que avancen a través de sus contenidos.

Las tres etapas se explican a continuación:

> Creación de la Estructura

Se refiere al proceso de identificar la forma que tendrá el Sitio Web que se está desarrollando.

En este sentido es importante hacer una diferencia entre estructura y diseño (que será explicada gráficamente más adelante en este capítulo).

Estructura: se refiere a la forma que tendrá el Sitio Web en términos generales con sus secciones, funcionalidades y sistemas de navegación.No considera ni incluye elementos gráficos (logotipos, viñetas, etc.).

Diseño: se refiere a la solución gráfica que se creará para el sitio, en la cual aparecen colores, logotipos, viñetas, y otros elementos de diseño que permiten identificar visualmente al sitio.Dado lo anterior, cuando hablamos de la estructura nos estamos refiriendo básicamente a cuál será la «experiencia» que tendrá un usuario cuando accede al sitio. De esta manera podremos determinar dónde estarán ubicados los servicios interactivos (buscador, sistemas de encuestas, áreas de contenidos).

Gracias a la realización de esta etapa es posible discutir en términos muy prácticos cuál será la oferta de elementos de información e interacción que tendrá el usuario. Al no incluir elementos de diseño, se permite que la discusión sobre la estructura se desarrolle en aspectos concretos, sin que intervengan aún consideraciones estéticas que habitualmente atrasan la aprobación de esta etapa del desarrollo.

> Mapas «permanentes» del Sitio

34

Se refiere al proceso de crear un «árbol de contenido» en el que se muestre de manera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno.

Cuando se usa la idea de crear un árbol, se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irán incorporando.

En este sentido se debe evitar a toda costa que el «árbol de contenidos» represente la estructura de la organización, dado que ésta es conocida y comprendida internamente, pero constituye una barrera de entrada para usuarios externos. Si ellos llegan a buscar en una estructura de contenidos basada en la forma en que funciona la organización, primero deberán comprender cómo funciona la entidad para luego encontrar lo que les interesa.

En este sentido se sugiere el uso de dos tipos de «árboles» posibles, Arbol Organizacional(Figura 1) y Arbol Funcional (Figura 2)

Figura 2: Árbol Funcional, agrupa los contenidos de acuerdo a las tareas que se puedan realizar dentro del sitio;

Dado lo anterior, las recomendaciones para la generación de este «árbol» son las siguientes:

35

• Secciones: se debe intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas áreas; hay que considerar que cada una de las áreas a integrar en el árbol requerirá de mantenimiento posterior en contenidos, gráfica y funcionalidad, lo que encarecerá el costo final de operación del sitio. Dado lo anterior, se recomienda que las secciones se sitúen entre 5 y 7.

• Niveles: se debe intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. Por ello no se debería crear más de tres niveles de acceso; esto significa una Portada, una Portadilla de Sección y los Contenidos propiamente tales.

• Contenidos relacionados: se debe considerar que habrá funcionalidades que estén presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas Frecuentes y Formularios de Contacto. Se recomienda que este tipo de elementos quede fuera del «árbol» y «floten» sobre éste, con el fin de indicar que desde todas las páginas habrá enlaces a ellos.

> Definición de los Sistemas de NavegaciónUna vez que se cuenta con los «árboles de contenido» desarrollados en el paso anterior, la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el Sitio Web. A través de estos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse. En la generación de dichos sistemas se debe atender a dos elementos que serán muy importantes: • Textual: se refiere a que la navegación se hará a través de elementos concretos, tales como menús, guías, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Para generarlos se debe conseguir que cada uno de ellos represente claramente la función para la que fueron designados y no dejar lugar a dudas sobre su función ni sobre la acción que desarrollarán al ser usados. Es decir, un botón debe parecer tal y no sólo un «parche» de color sobre la pantalla. Adicionalmente, es muy importante que las palabras escogidas para indicar acciones, sean claras y precisas. En este sentido, si un botón necesita ser explicado, es mejor desecharlo y buscar otra solución.

• Contextual: es todo lo referido a cómo se presenta la información, utilizando para ellos elementos basados en texto, gráficos o bien de entorno. Los elementos relevantes en este caso, serán todos aquellos que permiten mostrar la navegación en la pantalla.

Entre ellos, la gráfica utilizada, la redacción de los textos que se muestran e incluso el nombre del dominio (URL) que permitirá que el usuario sienta que está en el lugar indicado.

Al generar el sistema de navegación, se deben tener en cuenta las siguientes características:

• Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas. Esto se aplica también a aquellas instituciones que pueden tener más de un Sitio Web.

• Uniforme: el sistema debe utilizar similares términos con el fin de que el usuario que lo vea en las páginas, confíe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio.

• Visible: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con él, como si se tratara de una guía permanente en el área en que se encuentre del sitio.

Se debe tener en cuenta que los buscadores de Internet tienen la capacidad de indexar e incluir en sus bases de datos, cualquier página del sitio, aún las más internas. Por ello, es de suma importancia que todas las páginas del sitio cuenten con el sistema de navegación, especialmente si el Sitio Web está desarrollado con «frames» (o marcos) que normalmente impiden que se indique claramente en cada página la información referida a la navegación general. De esta manera, si un usuario accede al sitio por una página interior que estaba indexada en un buscador, siempre contará con las herramientas adecuadas para ir a la portada o realizar cualquier otra acción que le interese.

Elementos de los Sistemas de NavegaciónEntre los elementos más relevantes que conforman el sistema de navegación se cuentan los siguientes:

• Menú General: siempre presente en todo el sitio, permite el acceso a cada una de las áreas del sitio.

36

• Pié de Página: usualmente ubicado en la parte inferior de cada página, indica el nombre de la institución, teléfonos, dirección física y de correo electrónico.

• Barra Corporativa: ofrece diversas opciones de información respecto del sitio y tal como el anterior, se muestra en todas las páginas.

• Ruta de Acceso: listado que aparece en la parte superior de cada página y que muestra el trazado de páginas que hay entre la Portada del sitio hasta la página actual que se esté revisando; cada una de ellas debe tener un enlace, para acceder al área de la cual depende la página. Cada uno de los elementos que conforman este «camino» debe tener un enlace que permita el acceso a esas áreas. En la literatura internacional en inglés sobre este tema, se llama a este elemento como «breadcrumbs».

• Fecha de publicación: para saber la vigencia de publicación del contenido desplegado.

• Botón Home: para ir a la portada

• Botón Mapa del sitio: para ver el mapa del Sitio Web

• Botón Contacto: para enviar un mensaje al encargado del sitio (o, de existir, a la OIRS).

• Buscador: presente en cada página si es que la funcionalidad existe en el sitio.

• Botón Ayuda: para recibir ayuda sobre qué hacer en cada pantalla del sitio.

• Botón Imprimir: para imprimir el contenido de la página; se espera que el formatode impresión del documento que se muestra en pantalla sea más simple que la página normal del Sitio Web, para dar la impresión al usuario de que hay una preocupación por ayudarle en la tarea de llevar impreso el contenido.

> Definición del Diseño Visual

Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los insumos suficientes como para avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que se utilizarán todos los insumos que se han ido generando en las etapas anteriores.

Para ello la recomendación es trabajar en cuatro etapas sucesivas e incrementales, que se describen a continuación:

> Diseño de las Estructuras de Páginas

Esta etapa considera la generación de dibujos sólo lineales que describen los componentes de cada una de las pantallas del sitio, con el objetivo de verificar la ubicación de cada uno de ellos.

El ideal es que se dibujen diagramas con todas las pantallas que tendrá el sitio, ya que de esta manera será posible que diseñadores y desarrolladores tengan un documento concreto de trabajo, a través del cual resuelvan todas las dudas de los elementos que componen esta página. Si bien este trabajo es largo y puede resultar tedioso, su ventaja es que ningún elemento en las páginas queda puesto al azar sino que responde a necesidades puntuales que se han detectado y que se resuelven por esta vía.

Nuevamente, tal como se planteó cuando se estaba presentando el tema de Estructura en las páginas anteriores, lo ideal es que estos dibujos no tengan ningún elemento gráfico o visual concreto, sino que sólo incluyan líneas y bloques que representen objetos de contenido (como logos, viñetas o fotos). Nuevamente, como en ese caso, el uso de estas imágenes ayudará a que la discusión sobre cada pantalla se centre en la funcionalidad y no en temas más subjetivos como colores o calidad de los elementos de diseño en la página.

37

Un elemento que se debe considerar junto con estos dibujos de estructura, es que en las pantallas que representen transacciones, se debe incluir un diagrama de flujo sencillo, mediante el cual se ejemplifique cuáles son las interacciones posibles y sus resultados. Naturalmente se deberá incluir las pantallas correspondientes cuando sea adecuado.

38

Figura 3: Estructura de páginas (Wireframe)Figura 4: Diagrama de Flujo

Gracias a estos diagramas en combinación con las páginas, tanto diseñadores comodesarrolladores podrán tener claro cuál es el trabajo que deben realizar en cada una de las áreas del sitio que se estén generando.

> Bocetos de Diseño

Esta etapa consiste en la generación de dibujos digitales acabados de la forma que tendrán las páginas principales del sitio que se desarrolla, considerando como tales la Portada, Portada de Sección y Página de despliegue de contenidos.

Figura 5: Boceto de diseñoMás información sobre la imagen corporativa del Gobieno en:www.gobiernodechile.cl/material_util.html

Los elementos que se deben tener presentes en esta etapa, son los siguientes:

• Imagen Corporativa de la institución: se deben seguir los lineamientos de uso de colores, textos y otros elementos definidos para la entidad.

• Imagen Corporativa del Gobierno: se deben seguir los lineamientos indicados por el Gobierno de Chile en este aspecto.

• Criterios de Usabilidad: se deben tener en cuenta los criterios que se dan a conocer en el capítulo siguiente de esta Guía.

• Criterios de Accesibilidad: se deben tener en cuenta los criterios que se dan a conocer en el capítulo siguiente de esta Guía.Para desarrollar los elementos gráficos se utilizan como insumos los dibujos de estructura que se han generado en la etapa anterior.

La idea es que en esta etapa se trabaje en software gráfico para facilitar el proceso de corrección, ya que habitualmente habrá mucha interacción con los usuarios.

39

> Borradores de PáginaUna vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño que hayan sido aprobados y se genera un prototipo (páginas «clickeables») mediante el cual se pueda comprobar directamente la forma en que se desempeñan, cuando se les aplica la tecnología HTML de construcción de páginas web.

La intención de esta etapa es «usar» el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la forma de usar sus atributos (cada enlace tiene los estados de Enlace, Flotante, Activo y Visitado) y revisar la forma en que se despliegan las páginas que se van a desarrollar.

Adicionalmente, en esta etapa será posible hacer la comprobación efectiva del peso de las páginas una vez construidas y se podrán optimizar los elementos que queden fuera de norma por peso o tamaño.

> Maqueta Web

Es la etapa final y consiste en generar todo el sitio en tecnología html utilizando imágenes y contenidos reales (figuras 6, 7 y 8).

En el caso de un sitio estático, esta etapa corresponderá a la construcción del sitio. En el caso de un sitio dinámico, las páginas que se generen permitirán que el diseñador genere las plantillas de trabajo y el desarrollador de software las utilice como elementos para introducir la programación que sea necesaria para la creación del sitio.

Es importante considerar que todas las tareas y actividades incluidas en esta etapa pueden ser abordadas por un diseñador que tenga experiencia en diseño web. Esto debe ser parte de los requerimientos solicitados a las empresas proveedoras de este tipo de servicios.

Figura 6: Borrador de PortadaFigura 7: Borrador Segundo NivelFigura 8: Borrador Tercer Nivel

40

Capítulo III

Diseño Web y Estándares

Resumen

En este capítulo se explica la importancia de realizar un diseño de las páginas del Sitio Web de acuerdo a normas estándares y a la importancia que se le debe conceder a la experiencia que tiene el usuario que lo visita.

Incluye además información de buenas prácticas sobre accesibilidad y para administrar la retroalimentación proporcionada por los usuarios, además de metodologías para realizar pruebas de usuarios orientadas a mejorar el sitio.

41

Capítulo IIIDiseño Web y EstándaresDiseño para el Acceso Rápido

Una de las características que hace tan popular a la tecnología web es su facilidad para mostrar contenidos de manera gráfica y para vincular de manera fácil documentos de diferentes orígenes.

No obstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollan sitios y contenidos en esta plataforma, cumplan con ciertos estándares que aseguren que la mayor parte de los usuarios podrán ver lo que se publica.

Para ello, es de suma importancia que los sitios que se construyan cumplan efectivamente con ciertas características de publicación que permitan conseguir dos objetivos muy concretos:

• Que las páginas se desplieguen rápidamente y sin dificultades técnicas en los computadores de los usuarios;

• Que las páginas puedan ser visualizadas por los usuarios de la misma manera en que sus autores las han construido.

Para conseguir ambos objetivos, es necesario que quienes construyan los sitios web hagan uso de un conjunto de buenas prácticas que se han obtenido de la experiencia en la construcción de este tipo de contenidos digitales, y también, que se aseguren de cumplir con estándares mundiales en este ámbito, los que serán presentados en este capítulo.

Buenas PrácticasAgrupamos en esta área una serie de recomendaciones extraídas de la experiencia en el desarrollo de sitios web de todo tipo, que permiten asegurar una buena experiencia de los usuarios que los visitan.

> Normas mínimas para facilitar el acceso vía conexión telefónica

La visualización de los sitios web depende de la transmisión de datos entre dos computadores, por lo que es importante optimizar la cantidad de información que se envía entre ambos, de tal manera que quien la recibe pueda verla adecuadamente.

Lo anterior se expresa en cinco áreas de recomendaciones muy concretas:

1. Peso de las Páginas

Los sitios web deben tener un peso máximo permitido por página que no supere una cantidad razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo «razonable» dependerá directamente del tipo de sitio que se esté desarrollando y de la conexión con la que cuente la mayor parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas que tienen una conexión muy lenta, 50 kb será un tamaño considerable, respecto de si se compara eso con usuarios que se conecten en una ciudad del centro del país.

No obstante, se puede estudiar cuánto se demora en que una página llegue completamente al computador de un usuario si se calcula lo siguiente:

A. Si un módem transmite a 56 kbps (kilobits por segundo) significa que por cada segundo de transmisión, en condiciones ideales, es capaz de enviar 7 kb (kilobytes) de información.B. Si una página pesa 70 kb, en condiciones ideales demorará 10 segundos en aparecer completa en el computador del usuario.C. Aunque no hay información técnica consistente para establecer la velocidad promedio de un módem, puesto que depende de diversas variables técnicas, la experiencia indica que éstos se conectan habitualmente a la mitad de su valor declarado. Entre las variables que afectan la

42

calidad de la conexión se cuentan la capacidad del computador, la congestión de las redes y el nivel de visitas del servidor, entre otras.D. Dado lo anterior, la página de 70 kb señalada en el ejemplo anterior, tardaría 20 segundos en desplegarse completamente.

Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si sus usuarios estarán dispuestos a esperar todo el tiempo que se demora una página web en bajar completamente.

Como lo más probable es que la paciencia de los usuarios se agotará más rápido que su deseo por acceder a la página que tarda en desplegarse, es necesario preocuparse de que el tamaño de las páginas siempre tienda a bajar y no a aumentar.

Las normas internacionales al respecto indican que un usuario no esperará más de:

• 5 segundos para que aparezca algo visible en la pantalla• 10 segundos para que aparezca algo legible en la pantalla• 30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio

Nota: El rendimiento de una conexión a Internet nunca es del 100%. Hay que tener en cuenta que en estos tipos de conexiones (Módem analógico, RDSI, ADSL) se utilizan diversos protocolos (PPP, TCP/IP) que ocupan ancho de banda (entre un 2% y un 20% del 100% total, según el tipo de conexión y protocolo utilizado), con lo que se reduce el ancho de banda útil para la descarga de datos. El resultado que se muestra en las pruebas de velocidad de conexión existentes (por ejemplo en http://testacceso.es.tdatacenter.com/) corresponde al ancho de banda útil, esto es, equivale a la velocidad de transferencia de información, y no a la velocidad de acceso. Adicionalmente, existen otros factores que no pueden ser medidos y que contribuyen a reducir la velocidad de la conexión, como son la congestión en la red, interferencias electromagnéticas, etc., que también afectan al resultado final.

2. Diagramación de las Páginas

Aunque existen nuevas tecnologías para la diagramación de las páginas web (como las Hojas de Cascadas de Estilo o CSS), lo habitual es que los contenidos que se muestran se dispongan en tablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.

Al respecto se recomienda construir una estructura de presentación de los contenidos que se pueda fragmentar en varias tablas.

De esa manera, cuando el sitio se presente en el programa visualizador del cliente, siempre mostrará la primera tabla (que normalmente llevará el logotipo y la identificación del sitio) de manera rápida, dando al usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se van poniendo los restantes elementos del sitio.

En la figura 1 se puede ver que el sitio está construido en tres tablas, de acuerdo al siguiente orden:

Tabla 1: Muestra el logotipo de la institución, la fecha y el menú del sitio.Tabla 2: Muestra las Secciones del Sitio más los contenidos de diferente nivel.Tabla 3: Muestra el pie de la página con la identificación corporativa de la institución.

43

Figura 1: Ejemplo de tablas para separar contenidos y conseguir despliegue rápido.

Hay que recordar que los estudios sobre acceso a Sitios Web indican que el usuario espera que al primer segundo después de haber hecho clic sobre un enlace o haber ingresado una dirección en un programa visualizador, ya quiere ver alguna reacción y notar que algo está ocurriendo.

Por lo anterior se debe evitar a todo lugar las tablas generales que incluyen en sí mismas a otras (tablas anidadas), ya que el programa visualizador usará una parte del tiempo en calcular esa relación de dependencia entre las tablas, antes de mostrar algo útil en la pantalla.

En la figura 2 se puede ver que el sitio está construido en tres tablas interiores, que son agrupadas por una tabla general; también en la zona de Contenido 1 se dispuso una tabla que permite incluir una foto junto al contenido:

3. Uso de Presentaciones en Flash

Si se desea hacer una presentación en tecnología Flash de Macromedia para la portada del sitio, se recomienda no hacerlo directamente en la portada. Un ejemplo concreto de hacerlo se muestra en la siguiente imagen:

44

Figura 2: Ejemplo de tablas anidadas que dificultan el despliegue rápido

Figura 3: Ejemplo de página inicial para evitar la Presentación en Flash

La razón para evitar el uso de Flash en la portada es que su uso recarga la presentación del sitio y si la presentación no está bien hecha, puede impedir el acceso de los robots de búsqueda al interior del mismo. Si eso ocurre, los contenidos del sitio no serán indexados en los buscadores que emplearán los usuarios para buscar información sobre los temas que la institución desea comunicar.

La buena práctica en este sentido es ofrecer una portada con la identificación de la institución y dos enlaces: uno para ver la presentación y otro para ingresar directamente al sitio.

Adicionalmente se debe ofrecer la información que sea necesaria para que los usuarios puedan ver el contenido sin experimentar problemas; dentro de esto se cuenta un enlace para obtener el plug-in necesario.

Dado lo anterior y como pocos usuarios estarán dispuestos a ver repetidamente la presentación, se recomienda utilizar esos recursos en el interior del sitio, para mostrar con una tecnología de animación aquellos contenidos en los que desee poner énfasis o para explicar procesos que gráficamente resulten atractivos y que en texto sea difícil dar a conocer.

4. Uso de Marcos o «Frames»

La tecnología de marcos o «frames» consiste en agrupar varios archivos para que se desplieguen de manera simultánea, permitiendo a los usuarios ver varios contenidos al mismo tiempo.

En el ejemplo siguiente se puede ver gráficamente cómo se hace el despliegue de dichos archivos:

45

Figura 4: Ejemplo de uso de frames para desplegar contenidos simultáneos

Esta tecnología tiene aspectos positivos y negativos, que detallamos brevemente:

Positivos:• Permite tener ciertos contenidos presentes todo el tiempo, como un cabezal o menú.• Facilita la navegación ya que el usuario nunca pierde de vista dónde se encuentra.

Negativos:• Impide que el usuario pueda marcar una página como «favorita» (bookmark) porque nunca se le muestra cuál es su dirección web.• Cuando un usuario llega a un contenido desde un enlace provisto por un buscador, verá el sitio sin los otros marcos y no sabrá cómo navegar en él.• La existencia de varios archivos en uno genera una carga mayor para el usuario que llega al sitio; eso lo obliga a esperar a que aparezcan todos los contenidos de los archivos para poder usarlo.

Debido a lo anterior y salvo que sea muy necesario, esta forma de organizar los sitios web debe desecharse para pasar a sitios de interfaz contenida en un solo archivo.

5. Uso de Imágenes de «background»Una tecnología muy popular que se puso de moda en el año 1996 cuando el software Netscape Navigator lo implementó, fue el uso de imágenes como fondos o «backgrounds» de las páginas web.

Salvo casos en que sea estrictamente necesario, esta práctica debe ser dejada de lado porque su único efecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y acceso a la información.

6. Uso de «meta tags» Adecuados

Los «meta tags» son marcas en lenguaje html que van en la parte superior del código fuente de cada página, a través de las cuales se entrega a los sistemas de indexación y búsqueda, la información mínima para hacer una correcta indexación del contenido que incluye.

Los «meta tags» son un conjunto de elementos que obedecen a un estándar definido por el World Wide Web Consortium (http://www.w3c.org) por lo que su uso está regulado y mediante los cuales redescribe información concreta sobre la página, tal como título, autor, descripción, idioma y otros. Los más importantes, aunque no los únicos, son los siguientes:

46

<title>Nombre del Sitio o Institución</title> <meta NAME=«title» CONTENT=«Nombre del Sitio o Institución»><meta NAME=«description» CONTENT=«Descripción del Sitio o Institución»><meta NAME=«keywords» CONTENT=«Palabras claves del Sitio o Institución»>

Adicionalmente sobre este tema se ha dado en los últimos años un trabajo de estandarización muy importante a través del grupo «Dublín Core» que ha definido los elementos «meta tags» a usar y que deben ser consultados en http://www.dublincore.org.

> Normas para Incorporar Elementos Gráficos y Multimediales

Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben seguir normas muy concretas para evitar que su peso afecte el desempeño de la página cuando sea solicitada por los usuarios del Sitio Web.

A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta inclusión de dichos elementos:

• Optimizar el peso de las imágenes: se debe bajar al máximo posible el peso de las imágenes; cuando esto no sea posible hacerlo por su tamaño, se debe reducir el número de colores disponibles y la resolución (72 dpi es la norma).

• Elegir el formato adecuado: ante un mismo tamaño de imagen, el peso varía dependiendo de si son procesadas para desplegarse en formato GIF respecto del formato JPG.

Normalmente una imagen con colores planos (como un icono) tendrá un peso menor si se guarda en GIF respecto de si es guardada en JPG. Lo contrario ocurrirá con una imagen con muchos colores diversos (como una foto). Se recomienda probar ambos formatos para determinar el óptimo.

• Ubicación de imágenes: se recomienda usar un solo directorio para almacenar las imágenes repetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentes páginas del sitio. Al ubicarlos en un directorio único se puede aprovechar la función de caché del programa visualizador para mejorar el rendimiento de las páginas. Para efectos de seguridad, se recomienda impedir que un programa visualizador pueda ver el contenido de dicho directorio o cualquier otro dentro del sitio.

• Usar el atributo ALT en imágenes: en el código HTML se debe usar el atributo ALT (texto alterno) en las imágenes para que éste se despliegue antes que las imágenes y facilite de esta forma la comprensión del contenido a los usuarios.

• Imágenes con alto y ancho: las imágenes (dibujos, fotos, iconos, botones) deben tener tamaño para el ancho y el alto, para que el programa visualizador pueda dejar reservado el espacio para dicho contenido antes de que se realice su despliegue visual.

• Ofrecer plug-ins: cuando se utilizan archivos multimediales que requieren el uso de plugins (programas visualizadores especiales) para revisarlos, se recomienda poner el programa para ser bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente válido en sitios que ofrecen presentaciones de portada en tecnología Flash, las cuales deben ser anunciadas para que el usuario tenga la opción de verlas o avanzar directo al sitio.

• Indicar el peso de los archivos: cuando se ofrecen elementos gráficos o audiovisuales para que sean bajados al computador personal por el usuario (especialmente en Video, Audio, Flash u otros), se recomienda indicar el peso de los mismos, con el objeto de ofrecerle información útil para efectuar la operación.

> InteroperabilidadDado que los sitios web pueden ser accedidos sin problemas desde computadores que utilizan diferentes sistemas operativos, en un sitio de Gobierno Electrónico se debe cuidar ese aspecto de la diversidad. Para ello se debe asegurar de que desde la mayor parte de ellos las páginas pueden verse sin mayores contratiempos.

47

Para asegurar esto, las recomendaciones son las siguientes:• Utilizar código html estándar, no mejorado para un visualizador en especial• Probar el sitio con las versiones para diferentes sistemas operativos de diversos visualizadores de páginas (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Netscape Communicator, Mozilla, Opera y Safari.• Asegurarse de que el sitio puede ser visualizado de alguna forma cuando no se cumplen ciertas condiciones mínimas, por ejemplo, cuando se usan versiones antiguas de un programa visualizador que no soporta las nuevas características del lenguaje html (por ejemplo Netscape Navigator versión 4.6).

Estándares Internacionales

Además de las buenas prácticas basadas en la experiencia, la tecnología web cuenta con un conjunto de estándares que deben ser respetados para obtener la certificación que acredita al sitio respecto de su conformidad con ellos.

La entidad encargada del tema es el Word Wide Web Consortium (http://www.w3c.org/) que se encarga de velar por las mejoras en la tecnología y por hacer avanzar los estándares y que los programas visualizadores cumplan efectivamente con mostrar lo que el lenguaje HTML permite construir.

Dentro de los estándares que más interesa cumplir, se cuentan dos que tienen que ver con la forma de hacer la presentación de contenidos en un Sitio Web y que se detallan a continuación:

Validación de HTML

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://validator.w3.org/) y que permite detectar errores en la forma de utilizar el lenguaje HTML y XML en la construcción de un Sitio Web. Lo interesante del programa es que muestra en detalle los errores del código en la página que se pruebe, con lo cual se puede llegar a una directa corrección de los problemas que se hayan detectado.

La importancia de tener un código correctamente validado es que se asegura, a partir de esa certificación, que la página web puede ser vista sin problemas, desde cualquier programa visualizador que cumpla con los estándares internacionales en la materia.

Validación de CSS

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://jigsaw.w3.org/css-validator/) mediante el cual se puede validar la sintaxis de una Hoja de Estilo en Cascada (Cascade Style Sheet o CSS, en inglés), mediante la cual se describe la forma de presentar contenidos en una página web.

Este programa muestra en detalle los errores del CSS en la página que se pruebe, con lo cual se pueden aislar los problemas y hacer la corrección correspondiente.

Cabe indicar que la ventaja de usar la tecnología CSS es que facilita la mantención de un sitio mediante la separación de la presentación (diseño) del contenido.

Diseño para la Accesibilidad

La accesibilidad de un Sitio Web se refiere a su capacidad para presentar contenidos a personas que cuentan con discapacidades físicas, que les impiden usar la información disponible de una manera tradicional y por ello emplean ayudas técnicas.

Un ejemplo de esto son el uso de un lector de voz o un magnificador de pantalla en el caso de los discapacitados visuales, que les permiten interpretar el texto que se muestra en la pantalla.

La accesibilidad corresponde a una de las tendencias que se ha impuesto con mucha fuerza en los últimos dos años, gracias especialmente a los avances conseguidos en los sitios del Gobierno de Estados Unidos (país que promulgó la Act 508 para reglamentar esta forma de mostrar los contenidos).

48

Esta tendencia se ha asociado mundialmente a la actividad de los sitios web de Gobierno Electrónico, debido a que, por el hecho de pertenecer a instituciones públicas, deben asegurarse de que todos los ciudadanos accedan a la información que se les ofrece por esta vía, sin que existan barreras para ello.

Para comprobar que un Sitio Web cumple con las normas de accesibilidad, la iniciativa WAI (Web Accesibility Initiative) de la W3C (World Wide Web Consortium) propone la realización de las siguientes pruebas:

• Verificar la accesibilidad con herramientas automáticas y revisión humana. Los métodos automáticos son generalmente rápidos y convenientes, pero no pueden identificar todos los problemas de accesibilidad. La revisión humana puede ayudar a garantizar la claridad del lenguaje y la facilidad de navegación.

• Utilizar los métodos de validación desde las primeras etapas del desarrollo. Los problemas de accesibilidad que se identifican temprano son fáciles de corregir y de evitar. Entre dichos métodos de validación, se cuentan los siguientes:

• Utilizar una herramienta automatizada de validación de la accesibilidad y la navegación. Se debe tener en cuenta que las herramientas o programas de revisión no contemplan todos los problemas de accesibilidad, como lo comprensible que puede ser un enlace de texto, o el contenido de un texto alterno, etc.

• Validar la sintaxis de programación de las páginas con las herramientas ofrecidas por el W3c; de esta manera se determinará si se utiliza apropiadamente el lenguaje que se haya elegido (Ej., HTML, XML, etc.).

• Validar las hojas de estilo (Ej., CSS).

• Utilizar un emulador o navegador solo-texto.- Utilizar varios navegadores gráficos, con:- sonidos y gráficos cargados- gráficos no cargados- sonidos no cargados- sin mouse- marcos, scripts, hojas de estilo, y applets sin cargar.

• Utilizar varios navegadores, antiguos y nuevos.

• Utilizar un navegador con conversión texto-voz, un lector de pantalla, un programa de magnificación, una pantalla pequeña, etc. Varios de esos software se pueden obtener desde el Sitio Web de Fonadis (http://www.fonadis.cl/index.php?seccion=25)

• Utilizar un revisor gramatical y ortográfico. Una persona que lee una página con un sintetizador de voz puede no ser capaz de descifrar la pronunciación que emite ese dispositivo de una palabra que tiene un error ortográfico. Eliminando los problemas gramaticales se aumenta la comprensión.

• Revisar el documento en cuanto a su claridad y simplicidad. Las estadísticas de legibilidad, como las que generan algunos procesadores de texto, pueden ser útiles indicadores de la claridad y simplicidad. Mejor aún, consulte con un editor (humano) experimentado para revisar el contenido escrito en cuanto a su claridad.

Los editores pueden también mejorar la usabilidad de los documentos, al identificar problemas potenciales de sensibilidad cultural que pueden presentarse, debido al uso del lenguaje o de los iconos.

• Invitar a personas con discapacidad a revisar los documentos. Los usuarios con discapacidad, noveles o expertos, proporcionan valiosa información sobre la existencia de problemas de accesibilidad o usabilidad y la seriedad de la falla.

Más información del tema en:• W3c.org: http://www.w3.org/TR/WAI-WEBCONTENT/

49

• Sidar.org (España): http://www.sidar.org/recur/desdi/wai/index.php• Fonadis (Chile): http://www.fonadis.cl/index.php?seccion=25

Buenas PrácticasLas buenas prácticas en el tema de la accesibilidad consisten en aplicar las «Directrices o Pautas de Accesibilidad para el Contenido de la Web», a través de las cuales es posible garantizar que se están cumpliendo las normas correspondientes, las cuales se explican en los siguientes títulos.

> Estándares Técnicos Recomendados

Las normas a cumplir para conseguir la Accesibilidad de un sitio, y por lo tanto atender a este tipo de audiencias, están separadas en tres áreas a las que se les asigna diferente nivel de Prioridad. Estas son consecutivas y pueden certificarse individualmente.

Prioridad 1:los puntos de verificación de esta prioridad tienen que ser satisfechos, porque, de lo contrario, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar estos documentos Web.

Prioridad 2:los puntos de verificación de esta prioridad deben ser satisfechos, porque, de lo contrario, uno o más grupos tendrán dificultades en el acceso a la información del documento. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web.

Prioridad 3:los puntos de verificación de esta prioridad pueden ser satisfechos, porque, de lo contrario, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. Satisfacer este punto de verificación mejorará la accesibilidad de los documentos Web.

Como se ve en la descripción anterior, cada una de las prioridades lleva asociado un tipo de obligación, siendo la primera la más perentoria de todas.

Para revisar los elementos contenidos en cada una de las Prioridades, ver Anexo I – Estándares técnicos de Accesibilidad.

> Estándares Internacionales

Con el fin de validar el cumplimiento de los estándares internacionales de accesibilidad reseñados previamente, en Internet existe una serie de sitios que permiten validar el cumplimiento de éstos.

Dentro de ellos recomendamos usar los siguientes:

BobbyEs un revisor de accesibilidad desarrollado por el Centro de Tecnología Especial Aplicada (Center for Applied Special Technology - CAST), ejecuta un test automático «on-line» de muchos de los puntos de verificación que forman parte de las «Pautas de Accesibilidad al Contenido en la Web 1.0». Visitar en http:// bobby.watchfire.com/bobby/html/en/index.jspTAWEs la primera herramienta de verificación de la accesibilidad de las páginas Web en castellano. Se trata del Test de Accesibilidad a la Web TAW, desarrollado por el Fondo Formación Asturias para el Centro Estatal de Autonomía Personal y Ayudas Técnica (CEAPAT) del Instituto de Migraciones y Servicios Sociales (IMSERSO) de España. Visitar en http://www.tawdis.net.

Diseño de la Experiencia del UsuarioEn forma paralela al desarrollo de las interfaces, todo proyecto web debe tener en cuenta la experiencia que vivirá el usuario al navegar por sus páginas. A ese concepto se le denomina «experiencia» del usuario y el objetivo siempre será el de que cada persona que visite el sitio encuentre lo que está buscando de manera simple, de tal manera que regrese al sitio y le cuente a otros sobre su contenido y funcionalidades.

50

Para conseguir lo anterior, es necesario hacer un trabajo muy acabado en lo que se refiere a la planificación y organización de los contenidos, como también definir cómo se van a mostrar y operar las funcionalidades. Sólo de esa manera habrá certeza de las operaciones que se pueden realizar en el sitio y los efectos administrativos que ello generará en la institución.

> Desarrollo de Diagrama de Interacción

Una de las metodologías más concretas para asegurar que la experiencia del usuario se está resguardando adecuadamente, es la generación los «diagramas de interacción» mediante los cuales se representan gráficamente las posibilidades de acción que tiene un usuario enfrentado a tomar una decisión en un Sitio Web.

Por ejemplo, el siguiente diagrama muestra las posibilidades de reacción que tiene un Sitio Web ante el ingreso de un usuario registrado en un sitio:

Como se puede apreciar, aparecen muy bien definidas en este esquema las acciones que pueda realizar un usuario que accede a un sitio y la forma en que el sistema reaccionará ante su presencia.

Lo anterior conduce a preocuparse de manera concreta de las pantallas a desarrollar y los elementos que hacen falta para atender adecuadamente a dicho usuario.

De allí que la existencia de estos diagramas, acompañados de las respectivas pantallas mediante las cuales se pueda describir gráficamente lo que se espera que ocurra en un sitio, son herramientas muy valiosas al momento de desarrollar los elementos de interacción que se pretende abordar en un sitio.

> Principales Actividades a Desarrollar en el Sitio

Es importante considerar que de acuerdo al Instructivo Presidencial de Gobierno Electrónico (2001), los sitios tienen un ciclo de vida que va enfatizando en su interactividad, de acuerdo al siguiente desglose:

• Presencia: en esta fase se provee básicamente información del Servicio al ciudadano.• Interacción: considera comunicaciones simples entre el Servicio y el ciudadano y la incorporación de esquemas de búsqueda básicas.• Transacción: incluye provisión de transacciones electrónicas al ciudadano por parte del Servicio, en forma alternativa a la atención presencial en las dependencias del órgano.• Transformación: considera cambios en los Servicios para proveer aquellas prestaciones que componen su misión crítica en forma electrónica, y la introducción de aplicaciones que administran la entrega de prestaciones a los ciudadanos.Lo anterior implica que cada Sitio Web que desee avanzar en su vida útil, como parte de la política de Gobierno Electrónico, tiene que ofrecer capacidades de interacción que sean cada vez más importantes para el grupo de usuarios hacia los cuales se dirige.

51

Figura 5: Ejemplo de Diagrama de Interacción

En este sentido, los sitios web deben ir incrementando su complejidad para ir haciéndose cargo de las necesidades de comunicación primero, y luego de las de atención, con el fin de brindar a los usuarios la posibilidad de eliminar etapas burocráticas en su relación con los servicios.

Las etapas que pueden ir marcando el avance de un Sitio Web podrían ser las siguientes:

• Comunicaciones: corresponde al estado de «Presencia» y consiste en que el sitio ofrezca la posibilidad de que los usuarios envíen correos electrónicos desde el sitio; al principio, con el uso del software de correo que tenga el computador; posteriormente desde formularios del sitio; finalmente, conectando los formularios con algún sistema de gestión para hacer seguimiento a las respuestas que se envíen a los usuarios.

• Trámites: corresponde al estado de «Interacción» y consiste en que el sitio ofrezca la posibilidad de que los usuarios puedan obtener información y realizar trámites del servicio a través del computador; al principio, recibiendo sólo información para hacer los trámites; finalmente, con la realización de la transacción mediante el sistema.

• Compras y Pagos: corresponde al estado de «Transacción» y consiste en que el sitio cumpla actividades transaccionales, que permitan a los ciudadanos ahorrar tiempo y dinero para realizar acciones ante los servicios.

Dado lo anterior, los sitios web de las instituciones públicas deben tener metas muy concretas a desarrollar en sus planes de trabajo anuales y esto debe estar expresado en el presupuesto de la institución, de tal manera que cuenten con los recursos necesarios para llevarlos adelante y darle sustentabilidad a la vida del proyecto.

> Pruebas de Sistemas e Interfaces

Cuando se han generado las interfaces de un Sitio Web y antes de hacer la puesta en marcha del mismo, es muy conveniente hacer una serie de pruebas que permita asegurarse, antes de la construcción del código, que los usuarios van a entender la forma en que está organizada la información y los contenidos y funcionalidades que se están ofreciendo a través del Sitio Web.

Para ello, se cuenta con dos tipos de prueba, que se describen a continuación y que son:

• Pruebas Heurísticas: consisten en análisis hechos por expertos respecto de las pantallas que se están ofreciendo en el sitio.

• Pruebas de Usabilidad: revisan una serie de factores con el fin de establecer si cumplen con las necesidades de los usuarios del sitio.

Con esta información, es posible rehacer partes del sitio antes de la construcción o desarrollo de las piezas de software que lo integran, facilitando de esa forma la siguiente etapa de trabajo.

Pruebas Heurísticas

Originalmente desarrolladas por Jakob Nielsen (http://www.useit.com/), las diez pruebas que se incluyen dentro de la heurística han sido aplicadas universalmente y se entienden como el conjunto más adecuado para medir las características de un Sitio Web.

La pauta de evaluación es la siguiente:

• Visibilidad del estado del sistema: la prueba mide si el usuario siempre sabe qué está haciendo el sistema. Se revisa si existen los diferentes elementos que ayudan a esto:

52

- Indicación gráfica de donde se encuentra (ruta de acceso desde portada)- Indicación de que ha visto (marcar los enlaces visitados)- Indicción de que hay un proceso en marcha (anunciando estado de avance...)- Indicación de cuántos pasos faltan para terminar (como en el caso de que ya a un proceso de registro en el Sitio Web)

• Similitud entre el sistema y el mundo real: la prueba mide si el sitio se expresa de una manera comprensible para el usuario. Para ello se revisa si se emplean las convenciones habituales y que le permiten operar en el Sitio Web.

• Control y libertad del usuario: la prueba mide si los usuarios que se equivocan al hacer algo tienen forma de recuperarse de esos errores. Se revisa si existen formas de hacerlo. Por ejemplo: ¿Se puede deshacer una operación? ¿Se puede rehacer una operación?

• Consistencia y cumplimiento de estándares: la prueba mide si se cumplen los estándares que se usan en la Internet en el Sitio Web. Para ello se debe validar y revisar el sitio con las herramientas que se ofrecen en http://www.w3c.org para HTML y CSS.

• Prevención de errores: la prueba permite validar si se cuenta con mecanismos que aseguren que el ingreso de cualquier información, por parte del usuario, permite evitarle errores.

Para ello, se verifica si en las áreas en que los usuarios deben interactuar con el sistema, se les explica claramente lo que se espera de ellos. Por ejemplo:

- Uso de Javascript para validar formularios: para que todos los campos obligatorios sean llenados, para que el número de RUT sea ingresado correctamente, etc.

- Uso de elementos destacados en los formularios: indicar los campos obligatorios con asteriscos (*) o, bien, campos obligatorios marcados con color.

• Preferencia al reconocimiento que a la memorización: la prueba permite revisar si el Sitio Web ayuda al usuario a recordar cómo se hacía una operación, o bien le obliga a aprenderse los pasos cada vez que ingresa. Para conseguir este objetivo se verifica la existencia de una línea gráfica uniforme en todo el Sitio Web (mediante la cual el usuario entiende lo que se le ofrece con sólo mirarlos) y si se cuenta con un sistema de navegación coherente.

• Flexibilidad y eficiencia de uso: la prueba permite revisar si se ofrecen soluciones diferentes de acceso a los contenidos, a los usuarios novatos respecto de los expertos. Por ejemplo, se puede contar con botones para los primeros y atajos de teclado para el experto. También es importante medir en esta prueba la carga rápida de los sitios mediante una buena construcción del código.

• Estética y diseño minimalista: la prueba pide que los elementos que se ofrezcan en la pantalla tengan una buena razón para estar presentes. Se verifica la existencia de elementos irrelevantes (texto, sonido e imagen), que no aportan ni ayudan a que el usuario distinga lo importante de lo superfluo. Para ello se verifica la existencia de:- Jerarquías visuales: que permiten determinar lo importante con una sola mirada.- Tamaño de imágenes: que no afectan la visión general de la información del Sitio Web; se verifica tanto tamaño como peso.• Ayuda ante errores: se verifica que el usuario sepa cómo enfrentar problemas en una página tanto online como offline; entre los elementos que se miden se cuentan:- Mensaje 404 personalizado, con el fin de ofrecer una información y navegación alternativa cuando una página no es encontrada. - Mensaje de falla ofrece una alternativa offline (teléfono, mesa de ayuda) que permite que el usuario mantenga su confianza en la institución.• Ayuda y documentación: se revisa que el Sitio Web ofrezca ayuda relevante de acuerdo al lugar en que el usuario esté visitando; también se revisa la existencia de sistemas de búsqueda que permiten al usuario encontrar los elementos de ayuda que sean relevantes de ofrecer (preguntas frecuentes; páginas de ayuda).

Pruebas de Usabilidad

53

Se trata de pruebas efectuadas con usuarios, con el objetivo de determinar si la organización de los contenidos y las funcionalidades que se ofrecen desde el Sitio Web son entendidas y utilizadas por los usuarios de manera simple y directa.

Las pruebas tradicionales son:

• Prueba Inicial: para ver cómo funciona la organización de contenidos y elementos iniciales de diseño (botones, interfaces). El material con que se prueba es una imagen dibujada del Sitio Web.

• Prueba de Boceto Web: para ver si se entiende la navegación, si se pueden cumplir tareas y si el usuario entiende todos los elementos que se le ofrecen. El material con que se prueba es una maqueta web semi funcional

En ambos casos la prueba consiste en mostrar a un grupo de personas el Sitio Web y hacerles preguntas sobre lo que ellos imaginan existe allí. Hay que recordar que en esta etapa del desarrollo las funcionalidades no existen como tales, aunque están definidas. Por lo mismo, todo el trabajo tiene que ver con los aspectos visuales y de organización de los contenidos.

Los resultados de cada una de esas etapas permitirán adecuar los elementos con los que se esté trabajando en esos momentos, con el fin de atender a los usuarios y ofrecerles una experiencia a la altura de sus expectativas.

Es importante enfatizar en estas pruebas, ya que generan insumos que serán muy útiles y permitirán darse cuenta a tiempo de errores conceptuales en la entrega de la información, que puedan ser remediados de manera temprana y sin afectar el desarrollo total del proyecto.

Cómo Atender a los Usuarios

Dado que la interacción y la comunicación de los usuarios a través del Sitio Web de la institución están entre los objetivos más importantes de un Sitio Web del Gobierno, se ha diseñado esta sección para tratar directamente el tema.

En ese sentido hay que indicar que la tecnología web está orientada a generar niveles de comunicación muy avanzados, de los cuales se espera respuestas rápidas e interacción permanente.

Se puede indicar incluso que el uso del computador permite establecer nuevas formas de atender la relación entre personas.

Por lo anterior, es importante reconocer los diversos sistemas que puede utilizar un Sitio Web para recibir «feedback» o retroalimentación de parte del usuario, de las cuales nombramos a continuación las principales.

• Sistemas de Correo Electrónico• Sistemas de Encuestas o Votaciones• Sistemas de Foros• Sistemas de Chat• Sistemas de Simulación

Es importante considerar que cada uno de ellos genera más información y conocimiento de la audiencia que visita el Sitio Web, por lo que siempre será interesante ver cómo reaccionan a los temas que se les planteen y, asimismo, administrar positivamente el mayor flujo de trabajo que pueden generar en un Sitio Web muy participativo.

> Sistemas para Generar FeedbackComo se planteó antes, un Sitio Web tiene diversos sistemas para recibir feedback o retroalimentación de parte del usuario, entre los que destacamos:

• Sistemas de Correo Electrónico: permite enviar mensajes a los encargados del sitio sobre temas puntuales. La premisa básica es que todo correo que llegue a la institución debe ser respondido adecuadamente y en el menor plazo posible, evitándose sólo las respuestas automáticas. En estos sistemas

54

se debe asegurar el funcionamiento de los servidores de correo electrónico asociado, con el fin de que los mensajes sean enviados exitosamente.

• Sistemas de Encuestas o Votaciones: permite hacer sondeos rápidos entre los usuarios del sitio acerca de temas simples. En el caso de este sistema, la validación obligatoria que requiere debe permitir que los usuarios voten sólo una vez; que la pregunta y sus respuestas no contravengan disposiciones legales ni que generen una controversia, dado el carácter público del sitio. Asimismo se debe aclarar que las respuestas sólo representan a quienes participaron y no tienen validez estadística.

• Sistemas de Foros: permite a los usuarios entregar opiniones sobre temas concretos en modo asincrónico. En el caso de este sistema se debe tener especial cuidado con los contenidos que generen los usuarios, puesto que en muchos casos el uso de interfaces computacionales relajan la responsabilidad de quienes escriben en lo referido a formas de expresarse y contenidos vertidos en este tipo de programas. Se aconseja, por lo mismo, mantener un seguimiento constante de las expresiones registradas en el sistema, recomendándose en todo caso el uso de software de foros que permitan moderar el contenido e impidan la publicación de imágenes.

• Sistemas de Chat: permite establecer conversaciones escritas en tiempo real con otros usuarios o con los encargados del sitio. En el caso de este sistema se debe cuidar la generación de contenidos por parte de los usuarios, porque tal como en el caso de los Foros se puede llegar a hacer un mal uso de este tipo de sistemas. En el caso de los chats, se aconseja utilizar las herramientas que ofrece este tipo de sistemas para evitar la participación de usuarios que tengan malos hábitos de comunicación. Asimismo se recomienda su uso para Mesas de Ayuda que permitan apoyar a los usuarios de modo directo mientras visitan el sitio.

• Sistemas de Simulación: permite entender los escenarios que se pueden dar ante determinadas situaciones, sin necesidad de acceder a ellos. Habitualmente este tipo de sistemas es agregado a los Sitios Web como aplicaciones especiales, por lo que sólo se debe asegurar su correcta operación funcional.

• Sistemas de Búsqueda: estos sistemas proveen una forma interesante de obtener feedback de los usuarios. Al incorporar mecanismos de bitácora para las búsquedas que hacen en el Sitio Web (en la medida que se cuente con un sistema buscador), se irá registrando lo que ellos andan buscando; al revisar en forma periódica y obtener estadísticas de uso del sistema, se podrá avanzar en comprender las necesidades del usuario y de esa manera enfatizar en la información más buscada por ellos.

Adicionalmente, el control de búsquedas fallidas a su vez permite identificar ya sea errores de organización de contenidos o, simplemente, detectar el tipo de información que el usuario espera encontrar en el sitio.

> Formularios del Sitio

En la creación de los formularios para la generación de comunicaciones del Sitio Web, es muy relevante cumplir con ciertas prácticas de usabilidad, que hagan más sencilla la operación de los formularios. Como ejemplos de buenas prácticas podemos mencionar:

• Validación del RUT: se refiere a incorporar la programación adecuada para que se valide inmediatamente el ingreso del Rol Único Tributario, de tal manera que tras escribir los datos en el campo el usuario pueda saber si está bien o no ingresado.

• Validación de campos obligatorios: se refiere a que todos los campos en que sea obligatorio poner datos (que no serán todos los de formularios), estén marcados de alguna forma (puede ser un asterisco o señalar esos campos con un color diferente) de tal manera que los usuarios cumplan con ingresar los datos correspondientes. Adicionalmente, al pulsar el botón de acción al final del formulario, se debe indicar un alerta si llegaran a faltar datos de ese tipo.

• Validación del e-mail: se refiere a usar la programación adecuada para validar que los datos que se ingresen en este campo, cumpla con la formalidad de estructura de un correo electrónico (existencia del signo @ por ejemplo).

55

• Valores por omisión: se refiere a que si hay campos con menú drop-down para elegir una, entre muchas opciones, siempre se ponga en el primer lugar aquella que vaya a ser la más usada. Por ejemplo, si es el campo País, el primer registro debe ser para Ecuador.

• Ejemplos de ingreso de contenidos: se refiere a que, al lado de donde el usuario deba ingresar la información, debe aparecer escrita la forma en que se debe hacerse.

Por ejemplo, al lado del campo RUT escribir un número de ejemplo, para que el usuario sepa si debe escribirlo con puntos y guión, sin puntos y guión o sin puntos ni guión.

• Claridad de botones: los botones de acción al final de los formularios deben tener una palabra clara, que no deje lugar a dudas sobre la acción a realizar. Si es un formulario para Enviar información, debería tener la palabra «Enviar». Si es para suscribirse a un servicio, deber decir «Suscribirse». Asimismo, si se pone un botón para borrar el formulario, debe quedar clara su función con un texto adecuado que indique esa acción. Se debe indicar «Borrar Formulario» y evitar palabras ambiguas para esta función, tales como «Limpiar», «Cancelar», «Eliminar» o similares.

> Boletines de Noticias y Novedades

Cuando se empleen sistemas de suscripción a boletines de noticias o difusión de novedades, se debe dejar muy clara cuál será la política de suscripción, envío y eliminación de la base de datos de nombres.

En este sentido, hay que poner siempre cerca de los formularios de suscripción un enlace a la Política de Privacidad en la que se deje clara la información relativa a como realizar esas acciones.

Hay que recordar que el artículo 12 de la Ley N19.628, del 28 de agosto de 1999, «Sobre Protección de la Vida Privada» plantea las obligaciones que existen para quienes guarden datos de terceros.

En el inciso tercero del artículo 12 se refiere al envío de emails y al derecho de cualquier persona de ser eliminado de una base de datos. Indica: «Igual exigencia de eliminación, o la de bloqueo de los datos, en su caso, podrá hacer cuando haya proporcionado voluntariamente sus datos personales o ellos se usen para comunicaciones comerciales y no desee continuar figurando en el registro respectivo, sea de modo definitivo o temporal».

> Sistemas para Recibir y Administrar Mensajes de Usuarios

Cuando se generan sistemas para que los usuarios envíen información, es imprescindible que exista un procedimiento administrativo que le dé tanta validez a un mensaje enviado por esta vía, respecto de otro enviado por una vía tradicional (carta, fax, etc.).

Adicionalmente hay que recordar que la ley de Silencio Administrativo (Ley N19.880) requiere que se dé respuesta a determinadas presentaciones en plazos concretos, con el objetivo de acelerar procesos.

Para ello, una buena práctica sería contar con un sistema de seguimiento de mensajes, que permita ir registrando las comunicaciones que llegan desde los formularios de contacto y ayuda del sitio en Internet.

En éste se pueden asignar los siguientes estados a dichos mensajes, de acuerdo a la tramitación que se le otorgue:

• Estado Pendiente: lo tiene todo mensaje que llegue al sitio y para el que sólo se haya enviado una respuesta de Acuse de recibo.

• Estado En trámite: cuando se deriva el mensaje a terceros en busca de la respuesta en alguna repartición de la institución.

• Estado Respondido: cuando se envía la información solicitada al usuario final.

• Estado Archivado: estado final para permitir el manejo de grandes cantidades de información.

56

Es importante considerar que para hacer este tipo de seguimiento no se requiere necesariamente un sistema computacional, puesto que también se puede hacer con los recursos tradicionales y una buena organización.

En el siguiente diagrama se puede ver un escenario posible de manejo o flujo de actividad en torno a un mensaje electrónico por parte de una Oficina de Informaciones, Reclamos y Sugerencias (OIRS).Ver texto de la Ley N19.628Protección de Datos Personaleswww.sernac.cl/derechos/pdf/Ley19628.pdf

Como se puede apreciar, la generación de este tipo de gráficas permite revisar todos los estados posibles y asignar las responsabilidades que correspondan a cada una de las áreas de trabajo involucradas.

A continuación se revisa la actividad posible con cada una de las áreas de la institución que atienden público:

Oficina de Información, Reclamos y Sugerencias (OIRS)

Debe hacer la recepción, mantención y seguimiento de todas las comunicaciones que lleguen por el Sitio Web, asignándole a cada una de ellas el mismo valor que un mensaje llegado en formato tradicional. Su preocupación debe ir desde la recepción a la respuesta, por lo que, de contar con un sistema de gestión como el indicado en títulos anteriores, debería ser su responsabilidad la operación del mismo.

Figura 6: Ejemplo de flujo de un mensaje electrónico recibido por cualquier OIRS.

Se sugiere incluso que cualquier mensaje de correo electrónico, que llegue por otra vía distinta a los formularios del sitio, pueda ser atendido por esta oficina para contar con un único punto de acceso y salida.

Oficina de Partes

57

Al igual que la OIRS debe hacer la recepción, mantención y seguimiento de todas las comunicaciones que lleguen por vías tradicionales y apoyar el trabajo de la OIRS. Tradicionalmente en estas oficinas se concentra un gran conocimiento de la institución, por lo que será vital su apoyo en la derivación de comunicaciones y en la atención de mensajes.

Área de Comunicaciones

El área de Comunicaciones debe mantener el discurso público de la institución, por lo que es importante que pueda entregar a la OIRS la información adecuada de cómo atender y responder a las consultas que lleguen, validar los formatos de respuesta y opinar cuando la respuesta esté relacionada con su propia área.

Área de Informática

El área de Informática debe ser un facilitador tecnológico para la OIRS como para cualquier componente del equipo que tiene a cargo el desarrollo del Sitio Web, de manera que siempre reciban información adecuada y a tiempo.

Es necesario que el Área de Informática esté coordinada y pueda actuar permanentemente coordinada como contraparte técnica de cualquier proyecto de este tipo.

58

4 Capítulo IVPuesta en Marcha del Sitio WebResumen

En este capítulo se revisan los pasos que se deben dar al terminar el desarrollo de un Sitio Web y efectuar su presentación a los usuarios, incluyendo desde criterios técnicos para hacer pruebas sobre el sitio construido, hasta la forma de efectuar la comunicación de sus características, para dar a conocer a la comunidad el trabajo realizado.

Puesta en Marcha del Sitio WebCómo y Qué Probar

Con el fin de probar las diferentes capacidades de un Sitio Web, es necesario dividir el trabajo en cinco áreas, que son:

• Pruebas de Interfaces y Contenidos• Pruebas de Funcionalidades y Operación• Pruebas de Carga• Pruebas de Seguridad• Pruebas de Respaldo y Recuperación

Por cada una de ellas hay actividades específicas a realizar, de las cuales se entrega un detalle a continuación.

> Pruebas de Interfaces y Contenidos

Las actividades de esta etapa consisten en hacer revisiones precisas de la forma en que se despliegan las páginas del sitio y ver si cumplen con los «Términos de Referencia» en estos temas y, además, si cumplen con los estándares mínimos que se hayan definido como meta a ser cumplida (ver Capítulo 3, sobre Usabilidad y Accesibilidad). Las acciones de prueba sugeridas para realizar en esta etapa son las siguientes:

• Verificación de Contenidos: es una prueba básica para revisar si el Sitio Web desarrollado incluye todos los contenidos que se han especificado en los «Términos de Referencia» o los que se hayan definido en el marco del plan de desarrollo. Se puede hacer en forma manual o automática, de acuerdo a las siguientes orientaciones:

• Sistema Manual: se refiere a hacer una revisión manual de los contenidos del Sitio Web a través de la navegación de sus páginas. Para ello se recomienda primero construir un índice de contenidos y luego verificar la existencia de cada uno de los ítemes que contiene, a través de hacer un recorrido exhaustivo del sitio. Los elementos que deben probarse obligatoriamente son:

• Verificación de ortografía y redacción• Verificación de enlaces principales• Verificación de imágenes en páginas• Verificación de existencia de Archivos adjuntos• Verificación de la Lista de Chequeo de Accesibilidad (ver Capítulo3)

• Sistema Automático: especialmente orientado a la verificación de enlaces rotos, lo cual se puede hacer utilizando sistemas basados en Internet o, bien, software especializado.

• Sistemas Basados en Internet: se recomienda usar el servicio del W3C «Check Link» (http://validator.w3.org/checklink);

• Software: se recomienda bajar y usar desde su computador el software gratuito Xenu (http://home.snafu.de/tilman/xenulink.html). De igual manera, los actuales software de creación de sitios WEB permiten manejar en forma controlada los enlaces internos; un error común de este tipo es que una foto se vea normalmente en el computador de desarrollo, pero no en el Sitio Web, Esto ocurre porque es

59

referida en forma absoluta desde una ubicación en un disco duro local o en red, en lugar de un directorio de imágenes del Sitio Web.

Nota: se recomienda hacer estas pruebas en ambientes controlados diferentes a los usados para el desarrollo (diferentes redes y computadores), para que los resultados sean confiables.

• Sitio en Construcción: se debe verificar que el Sitio Web no contenga espacios vacíos o que tenga el título de «en construcción». No es adecuado, bajo ningún sentido, usar espacios con dicha leyenda; en tal caso es preferible eliminar esa zona y volver a incluirla cuando exista el contenido correspondiente en el sitio.

• Verificación de Meta Tags: los «meta tags» son marcas en lenguaje html que van en la parte superior de cada página, a través de las cuales se entrega a los sistemas de indexación y búsqueda (como Google, Yahoo! y otros), la información mínima que se debe tener en cuenta para hacer una correcta indexación del contenido que incluye.

Los «meta tags» son elementos que obedecen a un estándar definido por el World Wide Web Consortium (http://www.w3c.org) por lo que su uso está regulado. Para verificar que dichas marcas cumplen con los elementos mínimos requeridos por los buscadores, existen herramientas en Internet que permiten hacer tal prueba y ofrecen recomendaciones para mejorar la información ingresada en dicha área. Se recomienda en ese sentido utilizar las aplicación existente en el Sitio Web SearchMechanics.com (http://www.searchmechanics.com/prepare/index.htm) que cuenta con una aplicación en idioma español para hacer dicha comprobación.

• Verificación de Estándares: aunque los sitios web pueden ser construidos a partir de diferentes lenguajes, todos deben cumplir ciertas normas de organización de su código fuente (sintaxis), que permitan su visualización por software equivalente en diferentes plataformas. Dicha sintaxis está estandarizada y puede ser probada a través de herramientas públicas que están disponibles en Internet. Las dos más importantes son:

• Validación de HTML: la realiza el World Wide Web Consortium (http://validator.w3.org) e indica si el código usado en la página es correcto. Como resultado entrega un reporte con los eventuales errores para ayudar a su reparación.

• Validación de CSS: la realiza el World Wide Web Consortium (http://jigsaw.w3.org/cssvalidator) e indica si la Hoja de Cascada de Estilo (Cascade Style Sheet) cumple con la sintaxis estándar y por lo tanto podrá ser visualizada correctamente en todos los sistemas.

• Verificaciones de Interfaces: mediante esta prueba se revisan aspectos gráficos del Sitio Web, para determinar si su despliegue en las páginas es correcto. Dentro de los elementos más importantes a ser verificados, se incluyen los siguientes:

• Plug-ins necesarios: cuando se utilicen elementos audiovisuales o interactivos que requieran de algún software incrustado para funcionar (plug-ins), se debe ofrecer un enlace para que los usuarios que no lo tengan instalado, puedan bajarlo y hacer el proceso de instalación.

En el caso del uso de la tecnología Flash, las últimas actualizaciones del producto permiten que el software pueda ser bajado en forma automática por los programas visualizadores, si se cuenta con la codificación adecuada. Por lo anterior, es necesario hacer la prueba desde un computador que carezca de dicho software, para comprobar que efectivamente hace dicha operación.

• Consistencia de la Diagramación: cada una de las páginas del sitio debe tener elementos consistentes, con el fin de ofrecer al usuario una experiencia similar en cualquier área del Sitio Web; por nombrar sólo tres aspectos, lo anterior implica que los menús deben aparecer siempre en el mismo lugar; que los listados deben estar diseñados de similar manera en todo el sitio y que los colores y formas de uso de las interfaces deben ser similares a lo largo de las páginas.

• Ancho de la Diagramación: si la diagramación del sitio se ha realizado para un ancho determinado (por ejemplo, 800 pixeles de ancho), en esta etapa se debe probar si ello se cumple. Asimismo, se debe probar en una pantalla configurada con una menor dimensión (por ejemplo 640 x 480 pixeles), cuál es el

60

área visible del sitio y cómo afecta eso a la navegación por el mismo. Otra prueba del mismo estilo, se refiere a usar un programa visualizador orientado sólo a texto como Lynx (http://www.delorie.com/web/lynxview.html), para obtener visiones alternativas de la manera en que los usuarios están accediendo a la información que se les ofrece.

En este aspecto, en caso de existir, es de interés contar con un estudio del «log» del servidor que muestre la forma en que los usuarios están accediendo a las páginas, porque de esa manera se podrá determinar hacia qué configuración de pantalla se debe atender con mayor prioridad. La norma en este aspecto es que sin importar las características técnicas que tenga el computador del usuario que accede al Sitio Web, éste siempre se vea ordenado y legible.

• Diagramación vs. Browsers: aunque la codificación en los lenguajes soportados por los programas visualizadores (browsers) puede apegarse a los estándares, no todos muestran de la misma manera los sitios web. Dado esto, es necesario revisar el sitio en diferentes tipos de programas, especialmente en aquellos que conforman la minoría, al momento de escribir este Manual. Es decir, las pruebas al menos deberían hacerse en Microsoft Internet Explorer (http://www.microsoft.com/explorer), Opera (http://www.opera.com) y Mozilla (http://www.mozilla.org), ya que con ellos se cubrirá un amplio espectro. Lo que se debe revisar en este caso es el despliegue de todos los elementos que se muestran en la pantalla, para asegurar de que aparecen en las posiciones que se les han asignado en el diseño.

• Diagramación vs. Sistema Operativo: tal como se explicó en el caso anterior, los diferentes sistemas operativos pueden establecer diferencias en la forma en que se muestran los sitios web. Por ello, es importante conocer cuáles son los sistemas operativos utilizados por la audiencia a la que se desea llegar y revisar el despliegue del sitio en ellos. Hay que recordar que, además de Microsoft Windows, los usuarios pueden estar visualizando el sitio desde computadores equipados con Apple Macintosh o diferentes versiones del sistema operativos Unix.

• Imágenes Escaladas: se debe verificar que las imágenes que aparezcan en el sitio no estén siendo mostradas en tamaño reducido artificialmente; es decir, que se tome una imagen de grandes dimensiones y por programación se muestre en un tamaño menor. El efecto de eso es que las páginas con ese tipo de imágenes serán muy pesadas y harán que el acceso a ellas sea lento. Para comprobarlo, se debe solicitar las «Propiedades» de la imagen; en la ventana que se muestra se indica el peso de la imagen, que no debería sobrepasar los 5Kb para las de tamaño pequeño (iconos y thumbnails) y los 25 Kb, para los de tamaño mediano (fotografías en noticias). Es importante considerar que, además de estas verificaciones individuales de peso de imágenes, el límite de peso para una página es de 100Kb, incluyendo todos sus elementos.

• Imágenes Sin Atributo ALT: para cumplir con las normas de accesibilidad es necesario que todas las imágenes que se usen en un Sitio Web, tengan una descripción utilizando el atributo ALT (para texto alterno) del lenguaje HTML. Para comprobarlo, basta situar el mouse sobre una imagen, para que se despliegue una leyenda en texto en una etiqueta amarilla que flota sobre la foto; si eso no ocurre, el atributo no está siendo usado y debe ser corregido e incluido.

> Pruebas de Funcionalidades y Operación

Las actividades de esta etapa se refieren a hacer chequeos completos respecto de las funcionalidades y aplicaciones que ofrece el sitio, ya sean de aplicaciones simples como formularios hasta más complejas, como consultas y modificaciones de registros en base de datos.

En este sentido, las pruebas se deben hacer sobre diferentes elementos, siendo algunos de los más importantes los siguientes:

• Validación de Formularios: si el Sitio Web tiene formularios para el envío o ingreso de datos, se debe utilizar sistemas de validación del ingreso de datos para asegurar que éstos sean bien ingresados. En este aspecto, algunas de las validaciones más importantes deben ser las siguientes:

• Campos Obligatorios: se debe validar que en los formularios sean ingresados todos aquellos campos que sean necesarios; éstos deben ser marcados de alguna manera (usualmente con un asterisco) que permita a los usuarios entender la obligatoriedad de ingresar información en ellos; adicionalmente, debe indicarse tal condición en forma explícita

61

• Validaciones Locales: para reducir la carga de validaciones en el servidor, se recomienda incorporar la mayor cantidad de éstas en el computador del cliente, utilizando en forma estándar el lenguaje Javascript para hacerlas.

• Sintaxis de Ingreso: se debe validar que, en algunos casos, los campos sean ingresados con datos válidos; el mejor ejemplo es el caso del ingreso del número de RUT o Cédula de Identidad, cuyos números tienen un algoritmo conocido para ser validado.

• Suscripción a Servicios: se debe validar que cada vez que se realice la suscripción a un servicio que ofrezca el Sitio Web, se envíe un e-mail al usuario (para lo cual se debe necesariamente solicitar su dirección de correo electrónico) en el que se le informe sobre el resultado de lo realizado. Quien pruebe el sistema debe validar que el sistema esté enviando correctamente los e-mails y que dicho e-mail llegó a la dirección correspondiente; en este caso se recomienda probar con una dirección de recepción externa a la institución desde la cual se prueba.

• Ingreso de Datos: si se cuenta con un sistema que permita el ingreso de información hacia una base de datos, se debe revisar en la tabla de destino que efectivamente se estén enviando los datos de la manera que se ha previsto.

• Reingreso y Corrección de Datos: para mejorar la interacción del Sitio Web, cuando tras el ingreso y envío de los datos de un formulario (después de la validación local del formulario) el usuario presiona el botón «Back» de su programa visualizador para volver atrás y modificar algún campo, se le deben presentar todos los datos que hayan sido ingresados. De esta manera se aprovecha la información ingresada previamente, evitando la frustración del usuario por tener que escribir nuevamente el contenido completo del formulario.

• Elementos de Interfaz: al usar elementos del lenguaje HTML para la creación de las pantallas (input boxes, combo boxes, list boxes, radio y check buttons, etc.), se recomienda no modificar radicalmente sus atributos de despliegue (colores, formas) y comportamientos tradicionales, para lograr que el usuario sepa intuitivamente cómo usarlo y no deba aprender de nuevo su operación.

• Multiplataforma: se debe comprobar que los formularios funcionan en diferentes versiones de programas visualizadores (browsers), de sistemas operativos y de tipos de conexión a Internet (conmutado, banda ancha y dedicado).

• Botones de Interacción: si se cuenta con botones interactivos que permiten imprimir, enviar una página a un amigo, etc. se debe validar que estén realizando correctamente la acción indicada.

• Sistemas de Búsqueda: si se cuenta con ellos, se debe validar que efectivamente permitan encontrar documentos existentes en el sitio; en este sentido se deben ingresar documentos específicos y luego buscarlos de manera de asegurarse que la funcionalidad está operando adecuadamente. Si el sistema de búsqueda tiene una versión de «búsqueda avanzada», se debe asegurar de que las opciones ofrecidas encuentren los documentos de la manera en que se ofrezca. El formulario para hacer la búsqueda debe ser intuitivo, evitándose el lenguaje técnico y específico que impida entender su funcionamiento entre usuarios con menores conocimientos de los temas abordados en la institución.

• Sistemas de Feedback: si se cuenta con sistemas de envío de preguntas o reclamos (al estilo de los indicados para la Oficina de Informaciones, Reclamos y Sugerencias, OIRS), se debe asegurar de que se está completando el ciclo de vida de la consulta.

En este sentido se debe validar que el sitio realiza la consulta y que ésta es recibida por el funcionario encargado de atenderla. De otra manera, la funcionalidad podría operar computacionalmente pero no en términos de tramitación.

• Sistemas de Compra: si se cuenta con sistemas de pago en línea, se debe revisar cuidadosamente el flujo de trabajo de la aplicación y asegurarse de que en cada uno de los pasos se está asegurando la calidad y seguridad de la transacción.

62

• Administración del Error 404: cuando se ingresa una dirección equivocada, el software del servidor web muestra una pantalla de error anunciando el número de código del problema (Error 404). No obstante, dicho software puede ser configurado para que muestre una página diferente, en la que se explique a los usuarios las probables razones del error. Es importante incluir, en dicha página, un enlace al Mapa del Sitio y un Buscador, de tal manera que el usuario tenga más herramientas para resolver la inexistencia del contenido que buscaba. Se recomienda, además, que el Administrador de Sistemas de la institución entregue un reporte semanal basado en los «logs» del servidor, que permita ver qué es lo que más buscan los usuarios y de qué manera el Sitio Web les está respondiendo sus consultas.

> Pruebas de Carga

La carga de trabajo se refiere a la capacidad máxima que tiene un servidor web (hardware y software), para atender a un conjunto de usuarios de manera simultánea. Por ello, las actividades de esta etapa tienen relación con comprobar, de manera anticipada, el funcionamiento que tendrá el servidor del Sitio Web cuando esté en plena operación.

Las pruebas en este caso consisten en simular una carga de trabajo similar y superior a la que tendrá cuando el sitio esté funcionando, con el fin de detectar si el software instalado (programas y aplicaciones) cumple con los requerimientos de muchos usuarios simultáneos y también si el hardware (servidor y el equipamiento computacional de redes y enlace que lo conecta a Internet) es capaz de soportar la cantidad de visitas esperadas.

Es importante considerar que si el servidor está en las dependencias de un tercero que entrega el servicio de alojamiento del Sitio Web (hosting), se le debe solicitar a dicho proveedor un informe en que dé a conocer las características de carga de la solución de hardware y software sobre la cual funciona el Sitio Web de la institución.

Hay diversos software en el mercado que están orientados a este tipo de simulaciones, todos los cuales ofrecen características similares. Entre los datos más relevantes que es posible obtener se cuenta:

• Tiempo de acceso de los usuarios a los datos• Volumen de datos y ancho de banda utilizado• Archivos solicitados y tiempos usados en transferencia de datos• Tiempo de espera de los usuarios tras hacer un clic• Tiempo de respuesta a clicks de usuarios• Niveles de error existentes tras clicks de usuarios

Como se puede apreciar del listado anterior, los reportes que se obtienen a través de esta vía se refieren a tiempos de acceso que tienen los usuarios que acceden al Sitio Web y la degradación que ocurre en los servicios cuando aumenta el volumen de visitantes concurrentes.

Un ejemplo de las pruebas que se pueden realizar en este tema se puede ver en este gráfico que muestra los tiempos que demora en atender los requerimientos por las direcciones solicitadas tras un click de usuarios.

Cada una de las líneas representa un valor importante de tener en cuenta:

Click time: demorad el sitio en entregar los datos tras el primer click.Time to First Byte: tiempo que se demora tras el click, en enviar el primer byte de datos.Time to Connect: tiempo de demora tras enviar el click, en establecer la conexión entre servidor y cliente.Time for DNS: tiempo de demora para resolver la dirección solicitada en el click.Con los resultados obtenidos con pruebas de este tipo se debe hacer una revisión acuciosa de los sistemas, con el fin de hacer las optimizaciones que aparezcan como necesarias. Asimismo, se debe tener en cuenta que será normal la existencia de situaciones excepcionales que harán que los servicios no funcionen adecuadamente.

> Pruebas de SeguridadLas actividades que se pueden realizar para hacer las pruebas de seguridad son diversas y se orientan a varios ámbitos, como se describe a continuación. Los temas a tratar son los siguientes:

63

• Manejo de DNS• Protección de Estructura Interna del Sitio Web• Protección contra Robots• Manejo de Privacidad• Canales seguros• Mecanismos de Control de Acceso• Protección de Programas• Hosting vs. Sitio Propio• Roles Mínimos a asegurar

A continuación se entrega información para cada uno de ellos.

Manejo de DNS

Un aspecto que se debe cuidar es el de utilizar un nombre de dominio adecuado y relacionado con la identidad y misión de la institución. No obstante, gracias a la forma de operación del Domain Name Service (DNS o Servicio de Nombre de Dominio) es posible asignar más de un nombre de dominio a un mismo Sitio Web. De esta manera es posible incorporar otras denominaciones, bajo el dominio .CL u otro, que permitan generar «alias» adicionales para el sitio y así permitir utilizar las denominaciones más coloquiales con la cual la institución es conocida por los ciudadanos.

No obstante, sin importar cuántos alias tenga un sitio, se recomienda que todos los dominios sean redirigidos para que la primera pantalla, en cualquier caso, corresponda a la portada «oficial» del Sitio Web.

Recuerde que sobre los nombres de dominio existe una normativa obligatoria definida en el Oficio No. 485, del 10 de noviembre de 2000, en relación con el Decreto Supremo No. 5996, donde se especifica claramente que los sitios del Estado deben registrar su dominio bajo la denominación .GOB.CL y .GOV.CL.

Adicionalmente pueden hacerlo bajo el dominio .CL en forma directa. Dicha operación, en cuanto a procedimientos y alcance, está definida en su totalidad en el sitio http://nic.gob.cl y mayores referencias se pueden encontrar en http://nic.gob.cl/normativa.htm.

Protección de la Estructura Interna del Sitio Web

Uno de los mecanismos que permite proteger la estructura interna del sitio (especialmente para casos de intentos de ataques externos y/o intentos de violación de confidencialidad), es disminuir la cantidad de información contenida en las URL que se muestran en el programa visualizador. Esto es importante respecto de directorios y nombres de programas, pero especialmente en lo que se refiere a la entrega de parámetros de sesión, datos de usuario u otro mecanismo de transferencia de información entre páginas y/o secciones de código.

Se recomienda que los mecanismos de traspaso de información entre páginas sea a nivel de objetos del servidor, asociados a la sesión, sin que la interacción con el lado cliente deba hacerse responsable de la transferencia de datos y/o información entre sesiones de ejecución del servidor.

De igual forma, se recomienda evitar que el acceso a elementos del servidor web esté asociado a «direccionamientos relativos por sesión» o asociados al UserId o SessionId; esto se debe a que mediante simples pasos se puede conocer «token» de sesión y gracias a eso simular que es el mismo usuario que regresa al sitio. Para evitar el problema se recomienda incorporar protecciones de dirección relativas a la Dirección IP de origen.

Otro método de protección de estructura interna consiste en deshabilitar (excepto para casos excepcionales, como repositorios públicos de archivos) la navegación sobre directorios mediante el servidor web. Esta protección se hace para todos los directorios desde la configuración del software del servidor web. Otra forma de hacerlo consiste en incorporar un archivo por omisión del servidor web en todos los directorios, aun cuando no sea directamente referenciado por otras páginas para que se muestre su contenido cuando un usuario intente revisar el contenido existente en el directorio. En el caso de habilitar la navegación sobre directorios, se debe evitar el acceso a ciertos directorios protegidos.

64

Junto con estas protecciones de lectura, se recomienda realizar periódicamente una revisión de los esquemas de permisos otorgados a directorios y archivos. Las permanentes actualizaciones del software de un servidor web, generalmente provocan un problema de control del acceso a nivel de archivos, lo cual requiere procedimientos claros de supervisión.

Protección Contra «Robots»No todos los directorios del sitio deben estar disponibles para que los robots de búsqueda (conocidos más popularmente como «arañas» o «spiders» de los buscadores) entren en ellos.

Para impedirlo, se debe utilizar el archivo «robots.txt» o las instrucciones específicas en los «meta-tags» de la página de inicio, para impedir su ingreso.El archivo «robots.txt» es un archivo de texto plano (no de html) ubicado en directorios el servidor web que contiene instrucciones precisas respecto de qué hacer en ellos. Cada vez que un robot visita un sitio, primero revisa si existe ese archivo.

Si no lo encuentra, indexa la página en el sistema buscador que lo haya enviado; si lo encuentra, analiza su contenido buscando la siguiente información:

User-agent: *disallow: /

La primera línea «User-agent» indica que es válida para todos los robots que lleguen (porque tiene un asterisco; puede restringirse a un robot, indicando su nombre), mientras que la segunda indica con «disallow» que no está permitido avanzar por los enlaces de la página al uras % hace referencia a la raíz del sitio.

En otro caso, si se quiere evitar el acceso de todos los robots a un directorio determinado (por ejemplo cgi-bin, donde están los archivos más sensibles), se puede indicar esa información de la siguiente manera:

User-agent: *disallow: /cgi-bin/

Adicionalmente se puede usar el commando «allow» que permite incluir directorios específicos, gracias a lo cual ciertos contenidos sí son indexados. Por ejemplo:

User-agent: *disallow: /imagenes/allow: /imagenes/logotipo-institucion.jpg

En este caso la segunda línea indica con «disallow» que no está permitido ingresar al directorio de Imágenes, pero que sí se puede indexar un archivo específico, que corresponde al Logotipo institucional.

Otra forma de impedir el acceso de un robot es poniendo marcadores específicos en los «meta-tags» de las páginas. No obstante, este mecanismo no es soportado por todos los robots, por lo que su alcance es más limitado.

La forma precisa de incluir dicho «meta-tag» es la siguiente:<html><head><meta name=»robots» content=»noindex,nofollow»><meta name=»description» content=»Este sitio....»><title>...</title></head><body>...

Las cuatro posibles combinaciones de este «meta-tag» son las siguientes:• <meta name=«robots» content=«index,follow»>- Indica que la página puede ser indexada y sus enlaces seguidos• <meta name=«robots» content=«index,nofollow»>- Indica que la página puede ser indexada, pero sus enlaces no pueden ser seguidos• <meta name=«robots» content=«noindex,follow»>

65

- Indica que la página no puede ser indexada, pero sus enlaces pueden ser seguidos• <meta name=«robots» content=«noindex,nofollow»>- Indica que la página no puede ser indexada ni sus enlaces seguidos

Manejo de Privacidad

Mantener la privacidad de los usuarios debe ser un objetivo permanente del sitio. Para ello se requiere de contar con una Política de Privacidad formal y explícita en el sitio y, además, deben existir mecanismos de seguridad concretos para proteger los datos de sus usuarios.

Entre estos, se debe contar con protecciones físicas y lógicas sobre dicha información.

En el caso de disponer de arquitecturas multicapas reales, se recomienda proteger la información de clientes en servidores físicos distintos de almacenamiento de datos, incluyendo interfaces idealmente separadas de consulta de datos. Además, incorporar mecanismos de encriptación de los datos para información sensible.

Se recomienda que la información, si es almacenada para efectos de que los usuarios la recuperen desde el Sitio Web, sea encriptada con claves administradas por ellos mismos (por ejemplo, su clave de autenticación frente al sitio).

Una decisión de arquitectura que disminuye el riesgo de robo de información de clientes o cuentas de acceso, consiste en evitar que desde la Base de Datos sea posible generar parejas UserId/Clave que permitan autenticarse frente al sitio. La forma de hacerlo es incorporar mecanismos que almacenen un valor de índice de la clave en la Base de Datos, en vez de almacenar la clave propiamente tal. Gracias a esto, cuando un cliente se autentica frente al sitio, la comparación de claves se realiza sobre los valores de índice y se evita conocer directamente esa información.

Más información en :http://www.robotstxt.org/wc/robots.htmlhttp://www.robotstxt.org/wc/norobots.html

Es importante destacar además que un buen diseño de los mecanismos de autenticación junto con mecanismos de auditoría, almacenamiento y recuperación posterior, son adecuados para la implementación de la Firma Electrónica Simple, requisito definido como suficiente para múltiples interacciones del Estado, de acuerdo con la Ley 19.799 y su reglamento (analizar recomendaciones asociadas al Uso del Documento y Firma Electrónica al interior del Sector Público).

Finalmente, se recomienda un control particular de todos los procesos de respaldo, recargas, manejo de medios removibles y generación de copias de información, por ser mecanismos internos de fugas o compromiso de confidencialidad de la información.

Canales Seguros

Es importante incorporar mecanismos de encriptación del canal de comunicaciones (como el protocolo Secure Socket Layer o SSL), para la transferencia de información privada entre los usuarios y el Sitio Web, a través de la red Internet. Hacerlo no requiere de programación adicional a las funcionalidades de interacción, y asegura la protección de toda la información intercambiada entre el servidor y los usuarios.

Desde un punto de vista de desempeño, si bien el inicio («hand shaking») del proceso de establecimiento del canal SSL puede significar un pequeño retardo en la conexión inicial, posteriormente no provoca un aumento significativo del ancho de banda utilizado en la conexión, ni tampoco obliga a un aumento significativo de recursos del servidor.

Es importante considerar que la seguridad asignada a un Sitio Web debe ser correspondiente con la inversión y la importancia de los datos almacenados, siendo estas capacidades obligatorias para el caso de los sitios transaccionales.

Mecanismos de Control de Acceso

66

Otro aspecto que genera mejoras en la protección de la privacidad de los usuarios y de la información contenida en el Sitio Web, es la incorporación de mecanismos modernos de generación de claves y autenticación, como los que se plantean a continuación.

• Firma Electrónica Simple y Avanzada: es un sistema que identifica al usuario cuando realiza trámites a través de Internet o redes cerradas. Existe una ley y el correspondiente reglamento que la regula y empresas que las ofrecen en el mercado (más información en http://www.entidadacreditadora.cl). Ambas firmas constituyen las bases legales para que ciudadanos y empresas puedan identificarse virtualmente y de esa manera enviar comunicación y hacer negocios de manera más segura y confiable. Se trata de un mecanismo de complejidad media, aunque incluye funcionalidades de seguridad y criptografía. No obstante, la incorporación de este mecanismo en forma única dependerá del control absoluto que se tenga de la comunidad de usuarios de la solución. Para comunidades abiertas es preferible establecer dos mecanismos de autenticación: uno fuerte, mediante Firma Electrónica (usando certificados digitales) y otro, mediante autenticación de Usuario y Clave. Por otro lado, la Firma Electrónica Simple podría ser usada para las comunicaciones oficiales enviadas por la institución a sus usuarios. El uso de la Firma Electrónica debe definirse al momento de determinar la arquitectura de solución del Sitio Web.

• Autenticación con par Usuario y Clave: si se emplea esta solución, debe existir un procedimiento concreto para los casos en que un usuario pierda o no recuerde su clave. Se recomienda ofrecer mecanismos de «regeneración de clave», mediante la entrega de respuestas a preguntas predefinidas por los usuarios, en lugar de hacer el «envío de la clave por e-mail». En el caso de contar con mecanismos de Ayuda, se debe ofrecer apoyo para la regeneración de las claves, sin que el personal de la institución tenga acceso a la información de seguridad del cliente. Se debe evitar el uso de mecanismos de autenticación administrados por terceros, en caso de que puedan comprometer la confidencialidad o la suplantación del usuario.

• Sistemas de Hardware para Autentificación: para sistemas de seguridad que requieren una autenticación absoluta del usuario, es preferible considerar mecanismos de autenticación fuerte. Para ello, se deben incorporar mecanismos que incluyan elementos de hardware que deben estar en posición del usuario, tales como tarjetas u otros similares (security token) que permiten el acceso a las áreas de autenticación.

Allí el usuario debe ingresar su identificación de Usuario (security challenge response) y se le genera una clave de sesión que al ser digitada en pantalla, le permite acceder al sistema. Dicha clave cambia frecuentemente para aumentar la seguridad de acceso.

Protección de Programas

Es fundamental proteger los códigos y programas internos del servidor web, particularmente evitando la transferencia de parámetros o información a través de la dirección de acceso a las páginas (por ejemplo, al usar el método GET para la entrega de parámetros), los cuales son mecanismos frecuentes de «hackeo» o robo de información.

De igual forma, se debe evitar la lectura de ejecutables desde los directorios del servidor, controlando los permisos adecuados de acceso a éstos, con el fin de evitar desensamblaje y/o ingeniería reversa para analizar accesos internos.

En cuanto a los «scripts» ubicados en el lado del cliente, en caso de ser críticos, se recomienda utilizar compactadores de código y eliminar documentación de apoyo que permita su fácil comprensión a partir de la lectura del código.

Es importante que estas medidas sean incluidas junto a las acciones de seguridad informática normales de la institución.

Hosting Externo vs. Sitio Propio

Sin entrar en profundidad en cuanto al detalle de los elementos a considerar para esta decisión, la principal recomendación es hacer una evaluación objetiva basada en los siguientes aspectos:

67

• Evaluar las reales capacidades disponibles para la operación permanente del sitio, desde un punto de vista técnico.• Evaluar los requerimientos de control y seguridad necesarios.• Evaluar el nivel de soporte efectivo que el personal técnico del servicio puede realizar sobre los servidores.

Con estos parámetros se debe definir la mejor opción, no sólo desde el punto de vista del interés de las áreas técnicas, sino que mediante una evaluación de impacto global de la decisión asociada.

La amplia oferta disponible permite realizar combinaciones de servicios e infraestructura de muy diversos tipos, lo cual facilita configurar una solución óptima en términos del costobeneficio asociado (por ejemplo, hosting compartido, dedicado, collocation, housing, red administrada, monitoreo de seguridad, administración de seguridad perimetral, control de aplicaciones, fulfillment, etc.).

En caso de que se decida externalizar esta área, es importante contar con altos estándares de parte del proveedor en todo lo referido a tiempo de desempeño («uptime»), respaldos y recuperación, actualizaciones de software, etc.

Roles Mínimos a Asegurar

Un último aspecto considerado en esta área de recomendaciones, consiste en definir los diversos roles profesionales dentro de la definición y diseño de un Sitio Web para una institución.

Desde un punto de vista exclusivamente técnico, es fundamental considerar al menos los siguientes roles, identificando tanto sus responsabilidades como el personal más competente que pueda cumplirlos.

Si bien más de uno de estos roles funcionales puede ser desarrollado simultáneamente por una persona o área de la organización, es importante que dichas áreas sean cubiertas no sólo durante la puesta en marcha de la solución sino también durante su etapa de producción.

- Arquitecto: encargado de hacer las configuraciones de trabajo de los servidores y aplicaciones.

- Administrador de Aplicaciones: encargado del funcionamiento del software operativo.

- Administrador de Control de Calidad: encargado del cumplimiento de las políticas de calidad.

- Administrador de Seguridad: encargado de hacer generar y hacer cumplir las directivas de seguridad.

- Administrador de Operaciones: encargado de los aspectos operativos relacionados con el hardware.

- Administrador de Contenidos: encargado de las informaciones contenidas en el Sitio Web.

- Administrador de HelpDesk y Soporte: encargado de dar soporte a usuarios sobre las funcionalidades del Sitio Web.

- Administrador de Contingencias: encargado de enfrentar en primera línea los problemas que se generen en la operación.

- Auditor / Contralor: encargado de llevar registro de las operaciones realizadas, con el fin de apoyar la revisión de procedimientos.

Finalmente, aunque los roles del área Informática pueden estar muy claros, es necesario que se entienda que la operación del Sitio Web es una tarea conjunta en la que participan funcionarios de diversas áreas de la institución.

> Pruebas de Respaldo y Recuperación

Respaldar la información de un Sitio Web se refiere a copiar el contenido completo del sistema (datos, programación, imágenes, etc.) a un medio que sea confiable, que esté en un lugar seguro y que permita la recuperación de manera rápida y eficiente.

68

En este sentido, hay que preocuparse no sólo de probar la confiabilidad del sistema al momento de respaldar, sino también para la acción de recuperar y volver a instalar lo respaldado.

> Registro y Control de Pruebas y Errores

Para que una prueba sea válida, debe ser lo más documentada posible, con el fin de que, quien deba efectuar la corrección, pueda replicar el error para analizarlo y luego proceder a tomar medidas correctivas. Para ello se recomienda llevar una planilla de cálculo (que se puede obtener del Sitio Web: de la Guía) en que se vayan anotando por columna los siguientes datos:

- Detección del Error: para ser anotado por quien prueba.• Módulo: indica la sección en la que se produce el error.• URL: dirección de la página donde ocurrió el error.• Acción: Indicar la secuencia de pasos que siguió para que ocurra el error.• Lo que hace o dice: es la explicación más detallada posible del error, en particular señalando la secuencia de pasos seguida hasta dar con el error.• Lo que debe hacer o decir: se debe indicar lo que se espera que debería ocurrir cuando se hace la acción que se ha descrito.• Encontrado por: nombre de quien prueba.• Fecha: fecha en la que se hace la anotación.• Reproducible: indicar si el error se repite al hacer nuevamente la prueba.• Clasificación: permite definir el grado de complejidad del error, al señalar si afecta el funcionamiento del sitio (caso extremo) o sólo su presentación.

- Diagnóstico del Error: para ser anotado por quien corrige.• Causa: motivo por el cual se produce el error• Efectos laterales: indicar en qué otros módulos la existencia de este error puede estar causando impacto negativo; muchas veces errores diversos tienen una causa común, por lo que al reparar ésta se arreglan los demás.

- Corrección del Error: para ser anotado por quien corrige.• Descripción: acción realizada para hacer la reparación del error.• Archivos intervenidos: archivos en los que se hicieron modificaciones o, al menos, el principal de ellos.• Corregido por: persona que hizo la corrección.• Fecha corrección: fecha en que quedó reparado el error.

- Comprobación de la Corrección: para ser anotado por quien revisa la corrección realizada.• Revisor: Nombre de quien revisa si el error fue efectivamente reparado.• Fecha: fecha en que se realiza la revisión.• Reparado: indicar si está reparado o no. Si no lo está, se debe copiar la línea de error en blanco en una nueva planilla, con el fin de solicitar nuevamente el proceso de corrección.

Derechos del UsuarioLos usuarios que acceden a un Sitio Web de carácter general, tienen derechos y obligaciones, aunque muchas de ellas existen por un compromiso tácito y basado en la costumbre, más que en la existencia de una ley, reglamento o contrato que se refiera a ellos.

No obstante, en el caso de sitios web de instituciones públicas, la situación es mucho más restrictiva, ya que existe cierta normativa sobre el uso y acceso a la información, que debe ser respetada y atendida.

Por lo anterior, se recomienda que todo Sitio Web de Gobierno ofrezca en todas sus páginas la información necesaria para indicar cuáles son esos derechos y obligaciones. Dentro de ellos, lo más importante que se debe puntualizar se describe en los siguientes títulos.

> Política de Privacidad

69

Se trata de incluir, en un solo documento, toda la información relativa a los derechos que tiene una persona frente a la información que le ofrece un Sitio Web de una institución pública. Entre los aspectos más importantes que debe indicar, se cuentan los siguientes:

• Recopilación de datos: debe indicar si el sitio recopila o no datos de los usuarios (en forma manual o automática) y qué es lo que hace con ellos.

• Eliminación de datos: si el sitio recopila datos de usuarios con el fin de guardarlos en una base de datos, se debe informar de los mecanismos existentes para que puedan eliminarse de dicha base.

• Uso de los datos: debe indicar de qué manera se utilizarán los datos los usuarios recopilados a través de las diferentes funcionalidades del Sitio Web, con el fin de que ellos tengan conocimiento de esas operaciones.

> Política de Uso de Información

En este ámbito se debe indicar quién es el propietario de la información que se está mostrando a través del Sitio Web y qué derechos y deberes tiene el usuario que revisa esos contenidos.

Por lo anterior, los temas que deben ser cubiertos a través de esta área, son los siguientes:

• Uso de la Información: dado que el Sitio Web habitualmente será utilizado por diferentes personas e instituciones para acceder a información de primera mano respecto del servicio propietario del sitio, se debe informar que los contenidos del Sitio Web pueden ser utilizados sin restricciones por los usuarios.

No obstante, deben tener cuidado de cumplir con las normas señaladas en el punto «Fuente de Información» citado más adelante.

• Derechos de Autor: aunque por definición los contenidos de los servicios del Estado se entienden como públicos y, por ello, no existe restricción para su uso, se debe indicar quién es el dueño de los derechos de autor de la información que se está entregando. Esto es complementario al hecho concreto de que se da permiso para el uso de la información, siguiendo los lineamientos que se exponen en el siguiente subtítulo. En el caso de que se ofrezcan documentos u otros elementos de contenido que tienen derecho de autor propio; se debe indicar claramente quién es el propietario y las restricciones de uso del contenido. Para más información sobre la Ley de Propiedad Intelectual N17.336, consultar en http://www.dibam.cl/prop_intel/ ley.html

• Sitio Web como Fuente de Información: cuando terceros utilicen información del sitio para divulgación a través de otros medios, se debe solicitar que lo hagan citando la procedencia de la información a través de una frase estándar que se debe incluir en el Sitio Web. De esta manera se podrá asegurar que dicha cita aparezca en los términos que la institución considere adecuados.

> Otros Temas

Adicionales a lo anterior, hay varios temas que requieren de hacer comunicaciones específicas a los usuarios, con el fin de que ellos conozcan cuáles son las reglas de uso de la información que se puede dar a través del sitio.

Entre los temas más importantes, se cuenta:

• Cobro de los Servicios: aunque no es lo habitual cobrar por los servicios o contenidos de un Sitio Web de una institución pública, en el caso de que se realice se debe declarar qué áreas de contenido son pagadas o restringidas. En dicha situación se deben indicar claramente los precios y las formas de pago.

• Calidad de los Servicios: dado que un Sitio Web puede ser alterado maliciosamente a través de ataques informáticos, se sugiere incluir una advertencia dentro del área de «Uso de la Información» en la que se indique que, debido a problemas de fuerza mayor, la emisión de estos servicios puede verse suspendida,

70

por lo que la institución no asume obligaciones referidas a su mantención cuando enfrente dichos eventos. Este tipo de mensajes ayuda a cuidar la imagen de la institución frente a imprevistos.

> Ley de Silencio AdministrativoTras la promulgación de la Ley de Silencio Administrativo durante el año 2003, a través de la cual se instaura el concepto del «silencio positivo», se establecieron las «obligaciones de cumplimiento de los plazos» en los servicios públicos.

Debido a dichas normas, las instituciones públicas tienen ahora la obligación de responder a determinados trámites y peticiones dentro de los tiempos que se hayan indicado para ellos. Esto significa que en los diferentes niveles existen ahora obligaciones concretas respecto del intercambio de información.

Como a través de un Sitio Web se pueden recibir mensajes de los usuarios, se deben tener en cuenta dos obligaciones que impone dicha ley y que puede ser afectadas por la operación web. Estas son:

• El funcionario del organismo al que corresponda resolver, que reciba una solicitud, documento o expediente, deberá hacerlo llegar a la oficina correspondiente a más tardar dentro de las 24 horas siguientes a su recepción.

• Los casos de mero trámite, como los acuse de recibo, deberán despacharse dentro del plazo de 48 horas, contado desde la recepción de la solicitud, documento o expediente.

Como a través del Sitio Web es posible recibir datos enviados por los usuarios que pueden acogerse a las normas de esta ley, es importante verificar que existen los resguardos administrativos necesarios para que siempre se dé cumplimiento a ellas.

Como punto de partida se recomienda iniciar la aplicación de estas normas para la atención de los correos electrónicos que llegan desde el Sitio Web, a través de la sección de Contacto.

Desarrollo de un Plan de lanzamiento

Para hacer el lanzamiento de un nuevo Sitio Web es obligatorio que el nuevo sitio haya cumplido adecuadamente las pruebas antes descritas, con el fin de que todos los contenidos prometidos estén incorporados y las funcionalidades realicen todo aquello que se describe respecto de ellas.

Si hay contenidos o funcionalidades descritas que no pueden estar disponibles para el momento en que se desea hacer el lanzamiento del Sitio Web, es preferible eliminarlos en ese momento e incorporarlos cuando estén listos, en lugar de dejarlos en el sitio y que den una mala imagen sobre el mismo.

> Lista de Chequeo Previa

Para llegar al lanzamiento del sitio, se recomienda asegurarse del cumplimiento de las siguientes actividades como mínimo:

• Cumplir Listas de Chequeo: el sitio debe haber cumplido adecuadamente las pruebas indicadas en este capítulo, antes de hacer su lanzamiento.

• Dominio Distintivo: se debe contar con un nombre de dominio que sea reconocible y se asocie a la institución, de tal manera que sea fácil relacionarlo con la actividad o el nombre de la misma. Es importante en este aspecto que se recuerde la obligación de inscribir el Sitio Web dentro del dominio .GOB.CL y GOV.CL

• URL Simple: la dirección de acceso de la primera página del sitio debe ser simple, de tal manera que sea fácil comunicarla. Idealmente no se debe mencionar el nombre del archivo de inicio (que corresponde a su página inicial o portada), si sólo con el nombre del dominio se puede acceder a ella.

• Chequear Disponibilidad: si el dominio es nuevo y recién se está levantando un Sitio Web en él, antes de lanzarlo se debe verificar que el sitio se ve desde diferentes lugares, para asegurar su disponibilidad para diferentes públicos.

71

• Respaldo Administrativo: muchas veces los sitios generarán necesidades de interacción entre los usuarios de un servicio y los funcionarios del mismo, lo cual podrá estar resuelto a través de comunicaciones generadas por medio del SitioWeb. Si este es el caso, antes del lanzamiento se debe incorporar en el flujo de trabajo.

> Desarrollo de un Plan de Comunicaciones

Una vez que se han hecho las comprobaciones descritas en el título anterior, se está en condiciones técnicas de lanzar el sitio. Lo que viene a continuación es realizar la presentación e incorporar el Sitio Web a las actividades de difusión de la institución.

Para hacerlo, se debe contemplar que dicho plan debe tener componentes online y offline, tal como se indica a continuación:

• Actividades Online: dado que estamos presentando un medio de comunicación tecnológico, es importante cubrir adecuadamente esta área a través de las siguientes actividades:

Registrar el Sitio en Buscadores: es la actividad mediante la cual el Sitio Web comienza a formar parte de todos los directorios y buscadores de Internet. Si bien hay empresas que ofrecen esta actividad como un servicio, esto puede ser realizado por cualquier encargado del sitio, sin necesidad de tener conocimientos técnicos avanzados. A continuación cuatro lugares «clave» donde inscribir el sitio:

Google - http://www.google.com/intl/es/addurl.htmlYahoo - http://e1.docs.yahoo.com/info/sugerir.htmlDmoz.org - http://www.dmoz.org/World/Espa%f1ol/add.htmlEstado.cl - http://www.estado.cl/inscribir.html

Generar Enlaces con Otros Sitios: varios de los algoritmos que usan los sitios de búsqueda y los directorios para incluir un sitio y mostrarlo en los primeros lugares de un directorio, revisan la cantidad de enlaces «desde sitios importantes» que llegan al sitio. Pero ello, el administrador del sitio debe propiciar los enlaces hacia el sitio y conseguir que siempre haya nuevos. Para ver cuántos llegan desde otros sitios web, se puede usar en www.google.com y www.altavista.com la instrucción «link».

Ejemplo - link:http://www.premioweb.cl/ para ver cuántos enlaces referencian el sitio del Premio Web.

Ofrecer Elementos de Fidelización: se refiere a ofrecerle a los usuarios motivos diversos para volver al sitio; puede ser un boletín de noticias en el que se envíen enlaces con contenidos de interés; fondos de pantalla; información útil de áreas relevantes, etc. Cada institución puede buscar dentro de sus contenidos, aquellos que son los más buscados por sus usuarios y ofrecerlos de manera atractiva para garantizar que siempre estén accediendo y regresando al sitio.

• Actividades Offline: se refiere a todas las actividades que se realizan fuera del ambiente Internet, con el fin de consolidar también en este mundo la «marca Internet» de la institución. Incluye las siguientes acciones:

- Imagen Corporativa: la dirección del Sitio Web de la institución debe incorporarse en la imagen corporativa de la institución para que todo documento de la institución la incluya (desde informes internos, hasta tarjetas de visita). De esta manera, se logrará una unidad muy concreta en términos comunicacionales y se dejará diseminada esa dirección en todos lugares, permitiendo difundirlo y hacerlo conocido entre quienes deseen ponerse en contacto o revisar información provista por la institución.

- Actividades de Prensa: en el lanzamiento del Sitio Web se debe ofrecer un elemento tecnológico atractivo y no sólo confiar en que la aparición del Sitio Web sea la noticia. Por lo anterior, se debe definir cuál de las funcionalidades del sitio podrá ser destacada, para transformarla en la noticia que convoque a los medios.

> El Sitio como Apoyo de la Institución

Una vez que el Sitio Web está operando normalmente, la tarea a realizar es incorporar el Sitio Web en el plan de comunicaciones, es decir, no sólo utilizar el web para hacer difusión, sino que también comenzar

72

a incorporar la dirección web en cualquier comunicación que se haga y, más aún, hacer que el Sitio Web forme parte de las actividades.

Un ejemplo virtuoso de esto lo han dado muchas instituciones que insertan publicidad en los medios de comunicación para diferentes actividades y normalmente lo hacen en un aviso de pequeño formato, en el caso de prensa escrita, en el que indican que toda la información está disponible en el Sitio Web de la institución.

Esto genera dos efectos: Baja los costos de la publicación del aviso, Permite anunciar de manera simple y efectiva la existencia de un Sitio Web activo y útil.

Métricas de Evaluación de Desempeño Internas y Externas

Una de las características interesantes que tiene un Sitio Web, es que ofrece información permanente de las actividades que están ocurriendo en su interior, lo que permite tener siempre cifras que ayudan a evaluar la gestión.

No obstante, para entender dichas cifras es necesario primero establecer ciertas definiciones, que tienen que ver con la terminología que se emplea en Internet para describir los fenómenos que se registran. En este sentido, hay tres conceptos importantes:

• Hits: se refiere a cada elemento que pasa desde el servidor del sitio al computador del usuario; una página puede tener muchos hits, ya que se cuenta uno por cada elemento que la compone. En términos reales, esta información no tiene valor.

• Páginas Vistas o Visitadas: se refiere a la cantidad de páginas que han sido Solicitadas por los usuarios al Sitio Web; su uso más importante tiene que ver con la capacidad de establecer rankings internos en el sitio, respecto de los contenidos y funcionalidades más vistos y usados.

• Sesiones de Usuario: se refiere al número de personas que ha visitado el Sitio Web, independiente de cuántas páginas hayan visto o solicitado durante su visita; esta métrica es la única que puede entregar información real en torno a la audiencia de un sitio.

> La Importancia del Archivo «log»

Con las definiciones anteriores ya especificadas, hay que indicar que el servidor web en que está alojado el sitio va generando un archivo de texto donde se registra línea por línea cada operación que realiza un usuario en el Sitio Web.

Los datos que incorpora este archivo pueden ser definidos según las necesidades que exista en el Sitio Web. Entre los más importantes se encuentran la fecha; hora; Número IP de origen; páginas visitadas; páginas desde las cuales llegaron al sitio; palabras que usaron el buscador y países de origen de los visitantes, entre otros.

Este archivo aumenta de tamaño a medida que hay más visitantes, a razón de 1 Mb por cada 10 mil hits; por lo anterior, es muy importante coordinar su extracción y análisis, con el fin de obtener información que ayude a la gestión y a entender mejor la forma en que los usuarios están empleando el sitio.

Para hacer el análisis del «log» del servidor existe una gran cantidad de herramientas. Para acceder a ellas se recomienda visitar http://www.uu.se/Software/Analyzers/Access-analyzers.html

> Presencia del Sitio en Buscadores

Otra métrica relevante para saber el grado de efectividad que está teniendo el Sitio Web, consiste en revisar periódicamente su presencia a través de los buscadores de Internet más populares.

La recomendación es hacerlo a través de los buscadores más populares, como son Google, Altavista y Yahoo!, puesto que ellos son los que concentran el mayor tráfico y, por lo tanto, que el Sitio Web aparezca en ellos garantizará que los usuarios que estén buscando la institución la podrán encontrar.

73

Adicional a ellos, se recomienda que el sitio sea indexado en directorios como el DMOZ.org, puesto que se trata de un proyecto realizado a nivel mundial, cuyo contenido es ofrecido gratuitamente y actualmente es ocupado por los directorios más importantes. Por lo tanto, al estar en DMOZ.org se garantizará la aparición en los demás sitios.

Más información en:W3C.org:http://www.w3.org/TR/WD-logfile.html

Apache:http://httpd.apache.org/docs/mod/mod_log_config.html

Microsoft IIS:http://www.microsoft.com/technet/treeview/default.asp?url=/technet/prodtechnol/windowsserver2003/proddocs/standard/log_logging.asp

Es importante que la búsqueda que se haga del sitio en los buscadores y directorios con el fin de ver cómo está indexado, se haga a través de dos criterios:

• Buscar por el Nombre: cuando se busca por el nombre de la institución, normalmente el Sitio Web debería aparecer en los primeros lugares de la primera página. Si no es así, hay un trabajo fuerte que hacer para mejorar los meta tags.

• Buscar por los Temas: cuando se busca por los temas que maneja la institución, es menos claro que su Sitio Web aparezca en los primeros lugares. Para mejorar ese posicionamiento es necesario refinar los meta tags y la forma de desplegar la información en el sitio, con el fin de ir aumentando la posibilidad de que siga ascendiendo en las listas de los buscadores.

> Enlaces desde Otros Sitios

Es importante que el Sitio Web de la institución esté enlazado desde otros sitios web reconocidos de la Internet (buscadores, directorios, instituciones reconocidas), para mejorar su posición relativa y aparecer más arriba en las páginas de resultados de los sistemas de búsqueda de Internet.

Para conseguirlo, es muy relevante que como parte del plan de puesta en marcha del sitio, se asegure la existencia de los enlaces, especialmente desde y hacia sitios de la red de Gobierno (especialmente Estado.cl que es un directorio de sitios de Gobierno) y desde y hacia los Sitios Web sectoriales a los que pertenezca la institución.

5 Capítulo VPlan de Mantención del Sitio Web

En este capítulo se abordan los temas referidos a la mantención de un Sitio Web en forma posterior a su lanzamiento y se entregan recomendaciones sobre los pasos que se deben dar para asegurarse de su operación adecuada.

Resumen

74

5 Capítulo VPlan de Mantención del Sitio Web5Plan de mantención del sitio

Una de las características más importantes de la función de un Sitio Web es que uno de sus roles principales es el de constituirse en un vehículo de información y comunicación entre la institución y la comunidad a la que está dirigido.

En este sentido, se debe tener claro que crear el Sitio Web no es un objetivo en sí mismo, sino que es el primer paso para contar con una herramienta que se utilizará para difundir información de acuerdo a las necesidades y políticas comunicacionales que tenga la institución que lo genera.

Entender esto desde el principio del proyecto permitirá dotarlo de sólidas bases; por el contrario, no hacerlo significará caer en un círculo vicioso sin resultados efectivos.

Dada la definición anterior, la mantención del Sitio Web no es una tarea que deba descansar en forma directa en el Departamento de Informática de la institución (o su equivalente), ya que eso significaría que se le da una visión exclusivamente técnica, o que sólo deba estar en manos del departamento de Comunicaciones (o su similar), porque en ese caso no tendría una visión de incorporarle las mejoras técnicas que correspondan de acuerdo al adelanto de la tecnología.

Una recomendación es la creación de un «equipo editorial», en el que intervengan todos aquellos departamentos que tengan áreas que puedan aportarle dinamismo a su entrega informativa. La conformación de dicho equipo editorial, que puede tomar múltiples nombres desde «Comisión Web» hasta «Comité Editorial», es una tarea que debe ser abordada mientras el Sitio Web se está desarrollando, de tal manera que se integre desde muy temprano al proyecto.

En este sentido, es interesante revisar la experiencia de algunos servicios que entienden la creación y funcionamiento de su Sitio Web, como la apertura de una nueva oficina de atención de público, aunque en este caso sea virtual. Para hacerla funcionar adecuadamente, se ponen como meta que todas las unidades que conforman la institución ofrezcan lo que se requiera y colaboren en su éxito.

> Tareas del Equipo Editorial

Para que el Equipo Editorial entregue los mejores resultados posibles, se deben cubrir dos áreas de trabajo, que son descritas a continuación:

Plan de Mantención del Sitio Web

Dirección Editorial

El Sitio Web debe contar con una línea editorial concreta que determine cuáles y cómo se harán los esfuerzos informativos y de generación de nuevas funcionalidades del sitio. Por ello, esta línea deberá ser implementada por funcionarios que puedan interpretar adecuadamente los desafíos de la institución y los puedan transformar en elementos concretos, con el fin de mostrarlos a través de la aplicación correspondiente en Internet.

Para ello se requiere que en el equipo de Dirección Editorial estén representados quienes manejan las líneas de trabajo de la institución (dirección programática y estratégica); quienes trabajan en la forma de darla a conocer al público (Comunicaciones) y quienes se preocupan de que esa información llegue efectivamente al público mediante un medio electrónico (Informática).

La idea es que cada uno de ellos integre ideas y visiones diferentes al proyecto desde sus diferentes perspectivas.

Equipo Editorial

75

Para la generación de los contenidos, es importante contar con los profesionales que tengan experiencia en el desarrollo de sitios web, para que sean un aporte a la tarea que se esté realizando.

Esto se debe a que se trata de un área que tiene conocimientos muy específicos, relacionados con los elementos técnicos de la creación de los sitios web. De acuerdo a las características de la institución, siempre habrá que comenzar la búsqueda internamente, con el fin de aprovechar el conocimiento que los funcionarios ya tienen de la institución en la que trabajan.

A continuación se detalla el perfil de las tareas a desarrollar y de los profesionales que deben intervenir en cada una de las áreas concretas en las que se genera algún tipo de actividad, durante la operación de un Sitio Web:

Contenidos: para la generación de contenidos escritos, la recomendación es contar con periodistas, comunicadores sociales o publicistas, que utilicen sus habilidades y experiencia en la búsqueda, selección, redacción y edición de contenidos.

Diseño: para la creación de contenidos de gráfica, audio, video y flash, la recomendación es buscar diseñadores gráficos con experiencia en web, debido a que se requiere de conocimientos específicos que son muy diferentes a otras áreas del diseño, como la impresión.

Programación: para la creación y mantención del software de un Sitio Web, la recomendación es contar con programadores que puedan ir aportando nuevas y mejores funcionalidades a los sistemas interactivos que se ofrecen a los usuarios. Para ello, se debe buscar técnicos que tengan experiencia en los lenguajes en que ha sido desarrollado el Sitio Web, con el fin de optimizar los resultados que se pueden obtener de su trabajo.

Difusión y Promoción del Sitio WebOtra área a tener en cuenta durante la mantención del sitio, tiene que ver con el apoyo desde el marketing a las actividades que se realicen, con el fin de atender tres áreas importantes.

Promoción externa del sitio: se hace a través de la generación de enlaces desde otros sitios hacia el nuestro o del nuestro hacia terceros; eso ayudará a que el sitio tenga un buen posicionamiento en buscadores de Internet, por ejemplo.

Promoción interna del sitio : se hace para destacar contenidos internos y promocionarlos mediante anuncios gráficos (banners) dentro del propio sitio y así apoyar la visita de los usuarios a los contenidos que se vayan generando.

Actividades de webmining: corresponde al estudio del log del servidor cuyos datos muestran qué han estado visitando los usuarios; a través de éste es posible entender y conocer mejor a los usuarios y a partir de ello, generar contenidos que respondan de manera más adecuada a sus necesidades.

Subcontratación de RecursosDebido a que el tipo de servicios señalados previamente tienen características muy específicas, se puede considerar la subcontratación de profesionales dedicados a ellos.

Para validar su participación, es adecuado tener en cuenta que las actividades relacionadas con el web siempre estarán requiriendo de profesionales muy actualizados y, por ello, es bueno salir al mercado a buscar a quienes puedan apoyar al servicio con nuevas ideas, métodos y formas de trabajo que se emplean en las nuevas tecnologías de información y comunicación.

Sin embargo, cuando estas tareas se integren a los procesos habituales de la institución, será adecuado que los propios funcionarios, vía capacitación, desarrollen tales actividades.

Metodología de Implantación de Mejoras

Para que un proyecto Web funcione adecuadamente, se debe considerar el tipo de contenidos que se estarán ingresando en sus páginas, cuando éste se encuentre en pleno funcionamiento.

76

Para ello, se recomienda indicar cuáles son las áreas que deben ser atendidas, con el fin de que se evalúe la forma de resolver las necesidades que se van a plantear en cada una de ellas, a medida que el sitio vaya creciendo.

También, es importante considerar la plataforma tecnológica a utilizar para los contenidos y funcionalidades que se incluirán el Sitio Web y, con ello, determinar las necesidades que se abrirán en esta área.

Aquellas en que se requerirá una atención permanente, son las siguientes:• Mantención de Contenidos• Mantención de Funcionalidades

> Mantención de ContenidosRespecto de la mantención de contenidos, lo primero que se debe asumir al iniciar el trabajo de mantener un Sitio Web, es que el contenido puede adoptar muchas formas y debido a las características de la plataforma web de Internet, es posible utilizar diferentes formatos del mismo.

Por ello, se trata de un trabajo que tiene elementos bien conocidos como la generación de nuevos contenidos y otros más tecnológicos y específicos, como son los de adecuar esos contenidos a ciertos formatos, con el fin de cumplir con los estándares de transmisión de datos por Internet.

De allí que en este capítulo de la Guía se entregue sobre ambas áreas, con el fin de que los encargados de un Sitio Web vean el rango completo de responsabilidades a las que deben enfrentarse.

Frecuencia de ActualizaciónUn tema que suele ser dejado de lado pero que es central, es la frecuencia con la que se actualizarán los contenidos de un Sitio Web.

El primer elemento que se debe tener en cuenta, es que por tratarse de una herramienta de comunicación, el Sitio Web requiere de una actualización permanente, con el fin de dar cuenta a sus usuarios de que siempre hay información de interés en el sitio, gracias a lo cual gana en credibilidad.

La frecuencia de actualización más adecuada consiste en ingresar al menos un par de contenidos semanales en el sitio (si no es posible hacerlo con una frecuencia mayor), destacándolos en la portada con su correspondiente fecha, a fin de que los usuarios puedan distinguirlos de los contenidos más permanentes o anteriores.

Adicionalmente, es importante considerar que el sitio debe ser una herramienta comunicativa de la institución a la que pertenece y por ello, debe seguir sus orientaciones estratégicas y programáticas. Por lo anterior, a través del Sitio Web se debe ir incorporando todo aquello que esté en sintonía con lo que el servicio esté realizando. En este sentido, buenas prácticas en contenidos se refieren a conseguir que el sitio incorpore información adecuada que permita a los usuarios conocer de la actividad de la institución.

Dadas estas características, los temas de mantención de contenidos normalmente deberían recaer sobre el área de Comunicaciones (o similar) de la institución, o del contratista que dé ese servicio para dicha área.

Metodología de MantenciónRespecto de la metodología para hacer la adecuada mantención de los contenidos, a continuación se entregará información detalla por cada una de éstos.

Contenidos EscritosSe refiere a todos los documentos escritos a través de los cuales se puede entregar información al público interesado en la institución. Los contenidos que se consideran en este aspecto pueden ser los que se ingresan en una página web o los que se incluyen en diferentes tipos de documentos.

Dentro de estos contenidos destacan por su importancia, aunque no son excluyentes de otros, los siguientes:

Noticias: permiten dar a conocer las novedades o cualquier evento que sea de interés público o que afecte a los usuarios, explicando sus efectos y alcances en forma más detallada de lo que podrían hacer los

77

medios de comunicación. Por ejemplo, si en los medios se publica el llamado a un concurso determinado, en el Sitio Web se entrega esa información, más las bases y formularios de participación.

Documentos: permiten incluir información en diferentes formatos sin restricciones de tamaño, respecto de lo que podría hacerse a través de otros medios, como los impresos y audiovisuales. Adicionalmente, generan la ventaja de que por no incurrir en gastos de impresión, su difusión a través del Sitio Web genera importantes ahorros.

Respecto de estos documentos, los formatos más usados y recomendados son los siguientes:

- PDF (Portable Document Format): se trata de un tipo de documento electrónico que se genera con el software Adobe Acrobat de la empresa Adobe, que permite crear documentos con un diseño que se imprime de la misma manera sin importar cuál sea la impresora que se utilice. Este tipo de archivos permite realizar búsquedas en su contenido; bloquearlo para que no pueda ser modificado y colocar marcadores internos, para facilitar el acceso desde cualquier parte del documento. El usuario requiere tener un software lector de este tipo de documentos, que se obtiene gratis desde el Sitio Web de la empresa Adobe: (http://www.latinamerica.adobe.com/products/acrobat/adobepdf.html).

- RTF (Rich Text Format): corresponde a un tipo de archivo que es reconocido por cualquier procesador de texto, por lo que su incorporación en un Sitio Web permitirá que cualquier usuario que disponga de un software de escritorio no licenciado (incluyendo WordPad que viene con el sistema operativo Windows), podrá abrir y leer el documento. La importancia de éste es que todo el formato que pueda tener un documento (negritas, cursivas, imágenes, columnas, etc.), es respetado y se despliega en el programa que lo abra, tal como fue generado. El contenido puede ser igualmente bloqueado para que no pueda ser alterado, aunque esta funcionalidad sólo opera cuando se abre desde el mismo programa en el cual fue cerrado el acceso a modificar el archivo.

Al publicar la información en el Sitio Web de ambos tipos de documento, se debe señalar visiblemente su peso y el formato respectivo.

Contenidos Multimediales

Se refiere a la capacidad que tiene la plataforma web para incorporar contenidos audiovisuales, entre los cuales se incluyen servicios de streaming (que entregan el contenido a medida que el archivo es enviado desde el servidor al cliente) y aplicaciones basadas en la tecnología Flash de Macromedia.

Dentro de estos contenidos destacan por su diferencia en términos de proceso, los siguientes:

Audio: corresponde a cualquier contenido audible que pueda ser incorporado al Sitio Web. Para ello debe ser digitalizado y luego preparado en formato de alta compresión, del tipo MP3, Real Audio o Windows Media, gracias a los cuales es posible que se pueda reducir su peso y que los usuarios puedan descargarlos rápidamente del Sitio Web. Es importante considerar que, cada vez que se incorpore un contenido de este tipo, se debe indicar claramente el peso, el formato y el software utilizado para verlo; si éste es de libre disponibilidad, se debe publicar un enlace para que el usuario lo pueda bajar a su computador. Por lo mismo, evite poner archivos de audio de fondo y siempre permita que los usuarios decidan comenzar a escuchar el sonido que se ofrezca.

Video: corresponde a cualquier contenido audiovisual que pueda ser incorporado al Sitio Web. Para ello debe ser digitalizado y luego preparado en formato de alta compresión, del tipo AVI, MPG, Real Video o Windows Media. Es importante considerar que la generación de video siempre implicará la creación de archivos de alto peso (medido en Kilobytes), y que éste aumentará mientras más grande sea el tamaño de la imagen a mostrar. Es importante considerar que cada vez que se incorpore un contenido de este tipo, se debe indicar claramente el peso, el formato y el software utilizado para verlo; si éste es de libre disponibilidad, se debe publicar un enlace para que el usuario lo pueda bajar a su computador. Recuerde que este tipo de contenidos sólo debe usarse cuando sea necesario y que la calidad del mismo nunca satisfará a las expectativas de los usuarios.

Flash : corresponde a cualquier contenido desarrollado usando esta tecnología de Macromedia (http://www.macromedia.com/es/software/flash/) que se caracteriza por aumentar las capacidades de interacción con elementos gráficos y audiovisuales.

78

Para utilizar esta tecnología se utiliza el software Flash de Macromedia, el cual genera objetos con la extensión SWF. Tal como en el caso de los elementos anteriores, se debe cuidar el peso de los archivos creados con esta tecnología y, cada vez que se incorpore un contenido de este tipo, se debe indicar claramente un enlace para que el usuario pueda bajar el software Flash Player usado para visualizar este tipo de contenidos. Cuando se use esta tecnología, siempre se debe ofrecer una forma alternativa de acceder al mismo contenido.

Contenidos Gráficos

Se refiere a todos los elementos visuales que se pueden incorporar a un Sitio Web, tales como dibujos e imágenes, que permiten complementar la información que se desea incluir en el Sitio Web.

Dentro de estos contenidos se deben destacar tres características que los hacen especiales al momento de procesarlos y que son las siguientes:

Formato: se refiere al tipo de archivo que se generará con la imagen en la que se esté trabajando. Normalmente se utiliza el formato GIF (Graphic Interchange Format) para cualquier imagen pequeña como un icono o una imagen que tenga colores planos; para fotografías e imágenes de mayor tamaño y cantidad de colores, debe preferirse el formato JPG o JPEG (Joint Picture Expert Joint). Cualquier otro formato posible de utilizar deberá evitarse, ya que sólo se puede ver en determinadas plataformas (por ejemplo, PNG).

Peso: una de las precauciones centrales que se debe tener en cuenta al momento de generar imágenes para un Sitio Web, es que se debe mantener un límite en el peso de los archivos para no afectar el desempeño de las páginas. Mientras más pesadas sean éstas, más tiempo deberá esperar el usuario para que se muestre en su computador. Por ello, se debe buscar que las imágenes de fotos, por ejemplo, no excedan los 15 Kb de peso y que una página con todos sus elementos no pese más allá de 100 Kb. Es importante considerar que un usuario con un módem de 56 Kbps recibe, en condiciones ideales, 7 Kilobytes por segundo. Por ello, una página que tenga ese límite de peso llegará en alrededor de 15 segundos hasta el computador del usuario, lo cual es un tiempo muy largo si se compara con lo que normalmente está dispuesto a esperar.

Tamaño: junto con el peso, el tamaño es la segunda de las precauciones principales que se debe tener en cuenta para las imágenes de un Sitio Web. Lo normal es que una foto para web sea generada en 72 dpi (dots per inch o puntos por pulgada) y que sus dimensiones sean medidas en pixeles. Las más usadas serán inferiores a 250 pixeles en el ancho o alto, ya que de lo contrario se estará llegando a imágenes de mucho peso. Si se desea poner una imagen de mayor tamaño, se debe indicar su tamaño y peso (idealmente en el texto alterno de la imagen) para que el usuario sepa que deberá esperar un tiempo a que la imagen baje a su computador, antes de acceder a ella.

> Mantención de Funcionalidades

Junto con la mantención de contenidos indicados en el punto anterior, es importante considerar que la plataforma sobre la que se estará publicando la información, será una de carácter tecnológico, por lo que será necesario que se preste atención a la mantención computacional de los servidores que permitirán visualizar el sitio, y de los programas utilizados para ese efecto.

En este sentido, podemos diferenciar dos tipos de mantenciones:

Mantención PreventivaSe refiere a todas las actividades que permitirán que los computadores (servidores) y la red a través de la cual se accede al Sitio Web, funcionen de manera adecuada. Para ello será importante tomar los resguardos de seguridad y de acceso que impidan el ingreso de extraños a la plataforma de trabajo. Esto tendrá mayor importancia en la medida de que se utilice alguna herramienta de administración distribuida de contenidos.

Otros resguardos que serán normalmente importantes de tomar, será el cuidado de los «logs» del servidor web, cuyo análisis mediante software especializado (ver parte final de este Capítulo 5 y el Capítulo 4),

79

permitirá conocer de manera muy concreta cuáles son las áreas más visitadas por los usuarios del Sitio Web.

Mientras más visitas reciba un Sitio Web, mayor tamaño tendrán los «logs»; de no ser respaldados y borrados de su espacio habitual en el servidor, estos archivos pueden terminar afectando el correcto desempeño del equipamiento usado para mostrar el Sitio Web.

En resumen, la mantención preventiva es un trabajo que radica en el departamento de Informática (o similar) y se refiere a que el computador que tenga el Sitio Web o el contratista que dé ese servicio (Hosting), lo haga de manera adecuada y eficiente en coordinación con la contraparte técnica (área de Informática de la institución).

Mantención Correctiva

Se refiere a todas las actividades tendientes a mejorar un Sitio Web, a partir de la corrección de errores o de la decisión de incorporar nuevas funcionalidades, independiente de si se cuenta o no con externalización de servicios.

En este aspecto pueden darse dos áreas de acción que son las siguientes:

Correcciones en Garantía: se refiere a todos los cambios que se pueden hacer en la programación del software de una aplicación o Sitio Web, en el período inmediatamente posterior a su desarrollo, instalación y entrega final.

Normalmente estas adiciones son sin costo para la institución y las realiza el desarrollador, siempre y cuando hayan sido incluidas en los Términos de Referencia y en el Contrato correspondiente.

Nuevos Desarrollos: se refiere a las nuevas funcionalidades que se le pueden agregar a un software o Sitio Web, basado en la mejora de sus características actuales. Normalmente estas adiciones significan un costo para la institución que se debe dimensionar en horas de desarrollo.

Los Usuarios Durante la Mantención

Cuando se esté realizando la mantención del Sitio Web y sea necesario «bajar» el sitio por algún tiempo, es preferible cambiar la página inicial del sitio, con un mensaje del estilo «Estimado Ciudadano: Estamos mejorando nuestro servicio para usted» de tal manera de evitar mensajes del estilo «The current page is not available» o bien «Server not found», que generan un impacto negativo sobre los usuarios.

Siempre se debe cuidar la imagen de la institución, ya que para muchos usuarios la pantalla del Sitio Web constituirá la forma de relacionarse con ésta.

> Monitoreo de Actividades

Como parte del plan de mantención de todo sitio, un lugar muy importante lo ocupan las actividades relacionadas con el monitoreo de actividad del sitio, por cuanto a través de ellas es posible saber lo que está ocurriendo con la audiencia que concurre a visitar el sitio y utilizar sus funcionalidades.

Para entender mejor las capacidades existentes y la forma de operar con ellas, hemos dividido esta parte en tres áreas bien delimitadas, que son las que se explican a continuación:

Estadísticas de TráficoSe refiere a la capacidad que tiene todo sitio de Internet para almacenar información detallada de todo lo que hace un usuario que ingresa a sus páginas.

Gracias a esta estadística, podemos acceder a la siguiente información:

Quien: Accesos separados por Dominios/Países, Accesos separados por Servidores, Información sobre las Últimas visitas recibidas, Información sobre visitas de Robots/Spiders, Información de Números IP que visitan más frecuentemente.

80

Cuando: información sobre accesos por Mes/Día, Accesos por Días de la semana y Visitas Separadas por Horas.

Enlaces: Información sobre el Origen del enlace que trajo a un usuario a nuestro sitio; Información sobre los enlaces que trajeron a usuarios desde los buscadores, enlaces desde otros sitios que produjeron visitas en el nuestro, frases y palabras clave utilizadas por los usuarios en los buscadores para acceder a nuestro sitio.

Navegación: Información sobre la duración de las visitas y a qué páginas tuvieron acceso, Información sobre cuál es la Página de entrada y de Salida al sitio, Información sobre tipos de archivos más usados; Información sobre Sistemas Operativos de quienes visitan el sitio, información sobre los programas navegadores utilizados y sus Versiones.

Otros: Descripción de los Errores más frecuentes y de las Páginas no encontradas en el sitio.

Como se puede apreciar es posible obtener información de un sitio, aunque para ello hay que tomar cuatro acciones muy concretas y permanentes:

• Almacenar los archivos de log del servidor para que puedan ser procesados.

• Procesar periódicamente los archivos de logs para tener información sobre áreas del sitio más y menos visitadas; contenidos más solicitados, etc.• Realizar actividades de gestión del contenido, basado en lo que se indique como importante en el análisis previo.• Tomar decisiones fundadas usando la información que se obtiene a través del sitio y a partir de la que envían sus usuarios mediante los mecanismos de contacto del Sitio Web.

Hábitos de Uso

Basado en lo anterior, una de las tareas que debe realizar todo encargado de Sitio Web es intentar entender a sus usuarios, con el fin de entregarle lo que andan buscando de manera más simple.

Basado en dicha información, el encargado del sitio podrá:

• Llevar a la portada los contenidos más solicitados• Mejorar los contenidos solicitados pero que el sitio no ofrece• Generar contenidos en las áreas que se encuentren débiles

Especial importancia la da el hecho de que el archivo log almacena la información de aquello que los usuarios escriben en un buscador para acceder a nuestro sitio, puesto que ello ofrece pistas muy concretas de sus hábitos de uso e intereses.

Adicionalmente, se puede contratar la programación de algunos sistemas que permiten hacer un seguimiento de los usuarios desde que ingresan al sitio, hasta que terminan su navegación. De esa manera se podrá entender a qué vienen al sitio, lo que buscan y se podrá establecer el grado de satisfacción que les proporcionan dichas visitas.

Webmining

Finalmente, un paso más allá de este tema consiste en utilizar tecnologías de programación más sofisticadas para entender qué hacen los usuarios en un sitio y de qué manera se puede actuar sobre ellos para satisfacer de manera más concreta sus necesidades.

En Internet se ofrece abundante información sobre el tema, que puede ser utilizada para iniciar una investigación que, más tarde, pueda ser aplicada sobre los datos obtenidos del Sitio Web de la institución.

La Guía en Internet: www.guiaweb.gob.cl

81

Como se ha indicado en los capítulos iniciales, esta Guía es un documento que tiene el objetivo de hacer públicos los estándares que permitan el desarrollo de Sitios Web que estén al servicio de los usuarios de cada institución del Gobierno de Chile.Sin embargo, como una de las características de las tecnologías de información y comunicaciones es su rápido cambio, esta Guía se complementa con un Sitio Web que está ubicado en http://www.guiaweb.gob.cl en el que se irán incluyendo las versiones actualizadas y adiciones a los contenidos de esta edición impresa.

Dicho Sitio Web fue concebido de una manera diferente a esta Guía, sacando partido de las características de la plataforma digital. Gracias a eso, la información contenida en el impreso podrá encontrarse íntegra en el Web e incluso bajarse al computador en formato Adobe Acrobat PDF para impresión, o bien, en el formato HTML de las páginas Web.

El Sitio Web incluye además una gran cantidad de información que no era posible incluir en el impreso debido a su volumen, y un listado de enlaces que permiten acceder a mayor información de los temas tratados en los diferentes capítulos.

Adicionalmente, en el Sitio Web es posible acceder a la información a través de tres mecanismos de acceso:

• Acceso por Capítulos• Acceso por Check List• Acceso Rápido

> Acceso por CapítulosEn el Sitio Web se ofrece la versión en formato HTML de cada uno de los cinco capítulos de esta Guía, más las copias digitales (en formato PDF). Adicionalmente, en cada uno de ellos se entregarán, cuando corresponda, los anexos mencionados en los textos.

> Acceso por Check ListUna de las características de esta Guía, es la entrega de recomendaciones concretas sobre cómo mejorar un Sitio Web. Estas se presentan separadas en varias áreas a lo largo de los capítulos. Por eso, en esta sección del Sitio Web, se entregan los «checklists» o Listas de Comprobación, mediante las cuales se pueden verificar de manera rápida los elementos más importantes que debe cumplir un Sitio Web ante determinados estándares o exigencias.

Desde su lanzamiento, el Sitio Web ofrece diez Listas de Comprobación sobre diferentes temas, con el fin de que los usuarios puedan utilizarlas en sus propios sitios para ver el cumplimiento de los temas que abordan. Entre dichas listas se encuentran las de Usabilidad, Accesibilidad, Indexación en Buscadores, Acceso Rápido y Seguridad.

> Acceso Rápido

Debido a que el objetivo de esta Guía es apoyar eficazmente a los equipos y personas del sector público que tienen a su cargo la planificación, construcción o modificación de un Sitio Web de Instituciones del Gobierno de Chile, el interés de sus creadores es que su contenido pueda ser leído y adoptado por la mayor cantidad de profesionales.

Para ello, se consideró necesario facilitar la lectura de la Guía, mediante la entrega de más alternativas para su exploración. Con ese objetivo, se han definido los roles «posibles» que, siendo asumidos por diferentes personas de un mismo equipo, permitan leer diferentes secciones y capítulos de la misma y enfocarse en las recomendaciones directamente relacionadas con el rol que desempeñan en la institución.

Los cinco grupos de «posibles» roles son los siguientes:Jefe de ServicioLos jefes de servicio deben leer los capítulos 1 y 5 de esta Guía. Estos informan sobre los objetivos del proyecto, las metas propuestas y las evaluaciones realizadas, con el objeto de poder dar respaldo a las modificaciones, actualizaciones y nuevas decisiones relativas al Sitio.- Capítulo 1 - Planificación Inicial del Sitio- Capítulo 5 - Plan de Mantención del Sitio

82

Jefe de ProyectoEl jefe de proyecto es el profesional a cargo de la gestión del proyecto, y por ello debe leer todos los capítulos de la Guía, especialmente el 1 y el 4. La persona que ejerza este rol no tiene la obligación de dominar técnicamente todos los temas, pero sí debe tener claro cada uno de los procesos y metodologías que serán aplicadas, puesto que su tarea principal será la coordinación de los equipos de trabajo y ser la contraparte permanente del proyecto.- Capítulo 1 - Planificación Inicial del Sitio- Capítulo 2 - Definición del Sitio Web- Capítulo 3 - Diseño Web y Estándares- Capítulo 4 - Puesta en Marcha del Sitio Web- Capítulo 5 - Plan de Mantención del SitioGuía para Desarrollo de Sitios Web - Gobierno de ChileDiseñadorLa Guía ofrece claras recomendaciones al diseñador para crear las piezas y componentes visuales del Sitio Web, aplicando estándares que se revisan con detalle en el capítulo 3 de esta guía.- Capítulo 3 - Diseño Web y Estándares

ProgramadorLa Guía contempla un conjunto de recomendaciones específicas y operativas que deberán ser asumidas especialmente por las personas que participen en la programación y el montaje del sitio. La programación de los diferentes componentes del sitio (páginas, formularios, funcionalidades) y la estructuración de documentos HTML, debe responder a estándares que están contenidos en los capítulos 3, 4 y 5 de esta guía. Estos capítulos deben ser leídos por el programador a cargo de estas tareas y se recomienda la aplicación de los «Check List» que correspondan.

- Capítulo 3 - Diseño Web y Estándares- Capítulo 4 - Puesta en Marcha del Sitio Web- Capítulo 5 - Plan de Mantención del Sitio

Encargado de SeguridadAunque la guía no contempla recomendaciones específicas relativas a materias de seguridad informática, el documento asume que cada institución debe desarrollar los proyectos Web acorde a las políticas internas de seguridad. Sin embargo, es muy importante que los profesionales del área informática que colaboran en el proyecto incorporen las especificaciones señaladas en los capítulos 4 y 5 de la Guía; su colaboración en estas etapas será de alta importancia para el éxito del proyecto. - Capítulo 4 - Puesta en Marcha del Sitio Web - Capítulo 5 - Plan de Mantención del Sitio

83

Guía para Desarrollo de Sitios Web - Versión 2 -

IntroducciónLa Guía Web está estructurada en cinco capítulos a través de los cuales se ofreceinformación teórica y práctica para que los desarrolladores de Sitios Web deentidades de la Administración Pública puedan encontrar herramientas para apoyarsu trabajo y dar cumplimiento a las normativas correspondientes a esas tareas.

Al respecto, es posible afirmar que en la actualidad existe una gran cantidad de información y funcionalidades disponibles a través de las tecnologías de información y comunicación y que ha aumentado de manera notable el acceso a ellas de los ciudadanos.

De allí que se haya requerido no sólo considerar la actualización de la Guía Webinicial, sino que transformarla en un documento de referencia permanente para losencargados del desarrollo de los Sitios Web.

> Capítulos de la GuíaComo se ha indicado, este documento es una continuación de la Guía Web Versión 1.0 y nace como su complemento. Mientras la primera versión buscaba explicar la forma de llevar adelante un proyecto para generar un Sitio Web, en este caso se busca entregar herramientas a los desarrolladores y encargados de contenidos para optimizar el Sitio Web que hayan construido.

De allí que las secciones de esta nueva Guía tengan el propósito de aumentar el rendimiento del Sitio Web, apoyar su inserción en motores de búsqueda y utilizar los estándares para asegurar que cumplan con las normas vigentes.

Los contenidos de la Guía Web están ordenados mediante cinco capítulos más un sitio web que complementa su contenido y amplía el alcance de sus aplicaciones. Es importante considerar que se ha decidido hacer una diferencia entre los nombres de los capítulos en esta versión impresa y los utilizados para efectos de navegación en el Sitio Web. Mientras en el impreso se emplean frases como nombres de capítulos, en el sitio web se ha referido el uso de palabras con el fin de facilitar el acceso a las diferentes secciones. En todo caso, dichas palabras son aquellas que permiten referenciar más directamente a los contenidos tratados en sus páginas.

A continuación se entrega una breve descripción de cada uno de ellos:> 1. Normas que rigen los Sitios Web: se refiere a las normas oficiales del Gobierno que deben ser cumplidas por los Sitios Web, en las que se establecen los contenidos mínimos para su operación; en particular hace referencia al cumplimiento de los Instructivos Presidenciales más las normativas vigentes en estos aspectos.

84

> 2. Aplicación de Estándares: se refiere a cuáles son los estándares que debe cumplir el sitio web, haciendo especial referencia a lo señalado en las normas que abarcan estos aspectos.

Entre ellos se cuentan los referidos a las normas de estructura de documentos de acuerdo a los estándares para Sitios Web y de accesibilidad generados por el World Wide Web Consortium (W3C) y las relativas a interoperabilidad.

> 3. Diseño de Interfaces e Interacción: se refiere a la forma en que se presentan los contenidos en los Sitios Web; el objetivo de este capítulo es explicar de manera práctica la forma de ejecutar la separación de presentación, estructura semántica y contenidos, en particular utilizando las tecnologías descritas en el Decreto Supremo 100.N° CAPÍTULO NOMBRE NOMBRE SECCIÓNCAPÍTULO IMPRESO EN SITIO WEBNormas que rigen los sitios web NormativaAplicación de Estándares EstándaresDiseño de Interfaces e Interacción Diseño WebCómo se llega al sitio web EncontrabilidadDe la Usabilidad a la Utilidad Usabilidad

La palabra "Usabilidad" se deriva del término inglés Usability" y la palabra"Encontrabilidad"del inglés "Findability". Ninguna de ellas existe oficialmente en castellano.

> 4. Cómo se llega al sitio web: introduce el concepto de la Encontrabilidad (entendido como la facilidad para que los contenidos de un sitio web puedan ser indexados y luego encontrados por sistemas de búsqueda) como elemento clave para asegurar que sus contenidos queden adecuadamente indexados en sistemas de búsqueda internos y externos, facilitando de esamanera el acceso directo a la información. La cobertura de este aspecto está relacionada con la forma de generar, escribir y presentar los contenidos.

> 5. De la Usabilidad a la Utilidad: introduce el concepto de la Usabilidad (entendido como facilidad de uso) como elemento central para los Sitios Web de Gobierno, poniendo énfasis en la necesidad de que se asegure que lo que se publica pueda ser visto y usado sin problemas de acceso por los ciudadanos.

La cobertura de este aspecto está relacionada con la forma de presentar los contenidos, gracias a lo cual extiende lo que se había ofrecido de manera simple en la primera versión de la Guía.

> Relación con el Sitio Web

Como se ha indicado, la Guía Web 2.0 es un documento que busca mantener una relación estrecha con el sitio web que lo acompaña, para sacar el mayor provecho a las características del espacio digital, en beneficio de sus usuarios.

85

Para apoyar esta relación, a lo largo de la Guía Web habrá iconos o signos especiales mediante los cuales se comunicará que existen elementos en el sitio web que tienen relación con los contenidos que se están abordando en dichas páginas.

Adicionalmente, se entregan ejemplos de código que puedan ser revisados en detalleen el Sitio Web y que permitan a los usuarios entender de mejor manera alguna situación indicada en las páginas de la Guía.

Un ejemplo concreto de esta relación es que todos los decretos e instructivos que sean referidos en los capítulos de la Guía Web, serán incorporados en la sección de Recursos del Sitio Web, para que los usuarios tengan la posibilidad de acceder a todos ellos desde un mismo lugar.

Asimismo se incorporarán las direcciones de los Sitios Web que sea importante tener en cuenta durante el desarrollo de las diferentes actividades proyectadas desde las páginas de la Guía.

CAPITULO 1

NORMAS QUE RIGEN A LOS SITIOS WEB

RESUMEN

Este capítulo se refiere a las normas oficiales emitidas por el Gobierno de Chile que deben ser cumplidas por los Sitios Web de las instituciones y servicios de la Administración Pública, en las que se establecen los contenidos mínimos que deben contener los Sitios Web para su operación y cuáles deben ser sus características para transformarse en instrumentos de información y acción para los ciudadanos y Organizaciones.

CAPITULO 2

86

Capítulo 2:Resumen

Este capítulo que se refiere a la definición y aplicación de los estándares sobre construcción de sitios, accesibilidad, interoperabilidad y buenas prácticas que debe cumplir el Sitio Web, haciendo especial referencia a lo señalado en los decretos emitidos por el Gobierno de Ecuador que norman estos aspectos.

Así también se hace con las normas de estructura de documentos y accesibilidad emitidos por el World Wide Web Consortium.

87

> Introducción / Aplicación de EstándaresLos Sitios Web son el resultado de la implementación de una serie de tecnologías que facilitan la transmisión de contenidos desde un servidor a una serie de clientes o usuarios, a través de redes de computadores conectados a Internet.

Para que este sistema funcione, es necesario que el computador que contiene la información (servidor) ofrezca dichos contenidos mediante tecnologías conocidas y que cumplan con ciertas reglas o estándares, para que quienes acceden a ellas (clientes o usuarios) utilizando diferentes tipos de software, puedan entender los elementos de información que se les entregan.

En este sentido, los estándares juegan un papel clave ya que es la forma en que ambas partes logren intercambiar información y más importante aún, permite que otros actores lleguen a ofrecer nuevas funcionalidades que puedan agregarse a las anteriores sin mayores dificultades.

Adicionalmente, los estándares facilitan que la oferta de contenidos y funcionalidades pueda ser utilizada desde diferentes plataformas computacionales (sistemas operativos y software), sin que se requiera obligatoriamente que el usuario tenga una en particular, para acceder a dichainformación.

88

Debido a la importancia de lo anterior, a escala mundial se han establecido organizaciones que regulan los estándares y permiten que exista una normalización tecnológica que abarque más allá del ámbito de cada país.

Por su parte, el Gobierno de Chile a través de la Guía para el Desarrollo de Sitios Web y luego mediante el Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia, ha tomado la decisión de adoptar estos estándares para los órganos de la Administración del Estado, con el objetivo de que tanto la información como las funcionalidades ofrecidas en los Sitios Web institucionales puedan ser accedidos por los ciudadanos sin que existan barreras tecnológicas mayores.

> Qué son los estándares

Los estándares se definen como las especificaciones que determinan la manera en que se construye y funciona a una tecnología en particular, con el objetivo de regular larealización de sus procesos; también se conoce de esta manera a la forma en que

Estándar: especificaciones que determinan la manera en que se construye y funciona a una tecnología en particular.

Lse construyen elementos de hardware o software, para que quienes generen elementos adicionales a estos logren realizar dicha tarea correctamente y consigan que esos nuevos elementos se acoplen a los anteriores sin problemas.

En lo que se refiere a los Sitios Web, los estándares determinan la forma de construir sus páginas y componentes, ya que se engloba bajo este nombre al conjunto de normas que dan origen al lenguaje en el que se escriben las páginas de los Sitios Web.

Para este ámbito existe una organización de carácter mundial conocida como World WideWeb Consortium (W3C) que genera constantemente las nuevas versiones de los estándaresdel web y ofrece herramientas que permiten hacer la validación del uso de los mismos.

En el caso de los Sitios Web chilenos, diversas normas dicen relación con el cumplimiento de los estándares (ver Capítulo 1 de la Guía Web 2) por lo sus administradores los deben conocer y aplicar.

> Quién fija los estándares

Tal como se explicó antes, en el caso del web los estándares son fijados por el World Wide Web Consortium (W3C), una organización internacional que agrupa a más de 400 entidades miembros1 entre las cuales se cuentan empresas, universidades, medios de comunicación, fundaciones y centros de investigación.

89

El W3C fue creado en 1994 a partir del trabajo de Tim Berners-Lee quien fue el inventor de esta tecnología en el año 1989, mientras trabajaba en la Organización Europea de Investigación Nuclear (CERN) ubicada en Suiza. Con el fin de facilitar el intercambio de información a través de redes de computadores, ideó el sistema para que cada documento tuviera una dirección única (Uniform Resource Identificator -URI) con el fin de que desde cualquier lugar de la red pudiera ser accedido sin dificultades. Además, ideó la forma de representar ese documento a través de un lenguaje común (Hyper text Markup Language HTML) y finalmente, la forma de transmitir esos datos a través de la red, utilizando un protocolo de comunicaciones especializado para esta tarea (Hyper text Transfer Protocol - HTTP).Sitio del World Wide Web Consortium es www.w3.org

Debido a que se requería que esas tecnologías de comunicación de datos y creación de documentos tuvieran una continuidad en el tiempo y fueran adaptándose a las mejoras tecnológicas que fueran apareciendo en el tiempo, se creó el W3C que desde su fundación ha generado más de 90 estándares.

En el caso del Gobierno chileno, la decisión en torno a los estándares fue adoptada a través de decreto publicados entre los años 2004 y 2006, a través de los cuales se determina la adopción y el uso de los estándares declarados por el W3C como los aceptados para el desarrollo de los Sitios Web chilenos.

> Por qué hay que seguir los estándares

Uno de los problemas principales que existía para el intercambio de documentación hastaantes de la aparición del web, era el formato de los documentos debido a que las plataformascomputacionales (sistemas operativos, software) no eran compatibles entre sí.

El HTML permitió resolver ese problema, al crear un estándar que fue similar para todas ellas yque por lo tanto, no tenía requerimientos específicos para cada una de las plataformas, sino que los mismos para todas ellas. Esta solución habilitada por las tecnologías web constituyó entonces uno de sus haberes principales y por ello es que el W3C la incorporó dentro de su propia misión como organización.

En este sentido, se indicó que su objetivo global es aumentar el potencial de la web y para ello realiza acciones mediante las cuales se aseguran que las tecnologías relacionadas al web sean compatibles entre ellas, y así permitir que el hardware y software usado para acceder a los Sitios Web trabaje en conjunto. A esta meta le denominan “interoperabilidad web" y para conseguirla es que los estándares son abiertos y públicos.

Este mismo objetivo fue incorporado por el Gobierno de Chile en su normativa, especificando dentro del Decreto Supremo 100/2006 del Ministerio Secretaría

90

Interoperabilidad: es la capacidad, conocimiento y acuerdo de dos o más partes de un todo para que operen o funcionen de manera conjunta y mancomunada para lograr un fin determinado.

General de la Presidencia (que se analiza más adelante), donde se indica que los Sitios Web “deben ser accesibles por diferentes navegadores” en un claro llamado a la compatibilidad con las distintas plataformas computacionales.

> Cuáles son los estándares para Sitios Web de GobiernoDe acuerdo a lo que se explica en el Capítulo 1 de esta Guía, hay una serie de normativas que se aplican a los Sitios Web y que definen los estándares que se les deben aplicar. Probablemente las más importantes son las siguientes:

Decreto Supremo 81/2004 del Ministerio Secretaría General de la Presidencia: Estedecreto se refiere a la interoperabilidad y plantea la obligación de que los documentoselectrónicos que se generen en los órganos de la Administración del Estado cumplan conestándares mundiales que les permitan ser utilizados en diferentes plataformas. La obligaciónes utilizar XML para los documentos y UTF-8 como conjunto para la codificación de caracteres.Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia: Este decreto se refiere a que las páginas de los Sitios Web deben cumplir los estándares fijados en cuanto a su código de despliegue que debe ser HTML o XML y validado ante el W3C (Artículo 5°); deben contar con un set de caracteres en formato UTF-8 (Artículo 8°); deben diagramar sus páginas utilizando la tecnología conocida como hojas de estilo en cascada o CSS (Artículo 10°); deben ser accesibles utilizando diferentes navegadores (Artículo 13°) y deben validar sus hojas de estilo en cascada con las herramientas del W3C (Artículo 14°).

Más adelante en este capítulo se hace un análisis pormenorizado de dichos decretos y la forma de cumplir estos requerimientos.

> Cómo se mide y verifica su cumplimientoLos estándares deben ofrecer la capacidad de que su cumplimiento pueda ser medido, con el fin de que se logre establecer si sus características han sido bien utilizadas. En

XML: eXtended Markup Language, estándar de codificación del contenido de un sitio web quepermite ofrecer información de los datos en forma independiente a la presentación que sehaga de ellos.

el caso de los estándares de Internet, es posible verificar su cumplimiento a través de aplicaciones que funcionan mediante tecnología web, lo que hace mucho más simple la revisión.

91

Por ello, para el caso de las normas adoptadas por el Gobierno de Chile y reseñadas en el capítulo anterior, se cuenta con un grupo de herramientas que son proporcionadas porel W3C las cuales permiten hacer mediciones instantáneas acerca del cumplimiento de losestándares establecidos por el organismo.

Entre dichas herramientas, las más relevantes y que están disponibles de maneragratuita a través del web, son las siguientes:

Disponibilidad de Dominio GOB y GOV: permite revisar si el sitio web del organismo ha sido inscrito en el servidor de dominios de Gobierno (NIC) del Ministerio del Interior; esta verificación ayuda al cumplimiento del Artículo 3 del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia. Es importante considerar que para que se pueda utilizar esta herramienta, la consulta debe realizarse desde un computador ubicado dentro de lared de Gobierno.2

Verificación de HTML: permite revisar el cumplimiento del estándar de la versión de HTML o XHTML que se haya elegido; la herramienta compara el código de la página web que se revisa contra la norma correspondiente y da a conocer cuáles son las infracciones que se han cometido (en caso de existir) y además, ofrece información acerca de cómo resolver el problema.3

Estaverificación es exigida en el Artículo 5 del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia. Verificación de enlaces rotos: permite revisar que no haya enlaces rotos o imágenes perdidas en el sitio web, siguiendo la recomendación establecida en el Artículo 5 del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia; la herramienta4 entrega un listado de los problemas detectados para que el encargado del sitio web realice las correcciones correspondientes.

Verificación de CSS: permite revisar el cumplimiento de la norma que indica que el contenido debe estar separado de la presentación, tal como se indica en el

Sitio con toda la información acerca de las normas que se utilizan en los Sitios Web:www.guiaweb.cl/recursos2.- La Validación de los dominios de Gobierno se realiza en http://nic.gov.cl/consulta.html3.- La Validación de HTML se realiza en http://validator.w3.org/4.- La Validación de enlaces rotos se realiza en http://validator.w3.org/checklink

Artículo 14 del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia; la herramienta compara el código de la hoja de estilo con la norma correspondiente y da a conocer cuáles de los estilos no la cumplen e indica cómo resolver el problema.5

Como una forma de dar a conocer públicamente que un sitio web ha pasado las validaciones,el propio sistema entrega un icono que destaca esta calidad (ver Figura 1).

92

Figura 1. – El sitio web de validación entrega la información para crear una imagen que dé a conocer el cumplimiento del estándar.5.- La Validación de CSS se realiza en http://jigsaw.w3.org/css-validator/6.- Dicho Comité fue creado a través del Decreto Supremo 181 (2002) del Ministerio de Economía.

Naturalmente la inclusión de este u otro tipo de imágenes que den a conocer el cumplimiento de estos estándares es voluntaria y su objetivo es dar a conocer esta información de manera pública.

> Normas y Estándares incluidos en el DS 100/2006Aunque como se ha reseñado hasta ahora, diversas son las normas que determinan los estándares que deben cumplir los Sitios Web, existe una de ellas que es la que determina la mayor cantidad de exigencias.

Se trata del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia (que en adelante será mencionado sólo como DS100/2006), en cuyo articulado se han incorporado todos los elementos que estos deben incluir y que por lo tanto, es la norma por excelencia para los Sitios Web. Respecto de su contenido, se debe señalar que si bien establece una serie de mandatos que tienen relación con el avance tecnológico conseguido hasta el año en que fue dictado el decreto, también estipula en su artículo final que “a lo menos cada dos años" se hará una normalización y actualización de sus contenidos, dejando la coordinación de esta tarea enmanos del Comité de Normas para el Documento Electrónico.6

Dicho decreto a través de su Artículo 2° determina dos niveles de cumplimiento (Nivel I y II) para las cuales se asignan fechas de cumplimiento. A continuación se explica para cada nivel, las acciones a realizar para dar cumplimiento.

> Nivel I - DS100/2006Su objetivo es que los Sitios Web sean desarrollados de manera tal que las personas que los utilizan, puedan acceder de manera rápida, efectiva y eficiente a los servicios, funciones y prestaciones ofrecidas en sus páginas. Para ello se deben cumplir las normas indicadas en el Título II del decreto que corresponde a los artículos 3° a 9° y el plazo para ello fue fijado a un

93

año de la promulgación del decreto, esto es, al 12 de agosto de 2007. A continuación se revisa el contenido de los artículos y la forma de darles cumplimiento.

Uso de Dominio GOB y GOV (DS100/2006 Art. 3°)Este artículo señala que todo sitio web de un organismo de gobierno debe hacer uso del dominio .gob.cl y .gov.cl para lo cual debe registrarlos gratuitamente ante el Ministerio del Interior.7

De acuerdo a la normativa que ha establecido dicha repartición en torno al uso de este dominio, los órganos de la Administración Pública están obligados a registrarse en este dominio, mientras que el registro ante el dominio .CL es optativo. Con esto se busca ordenar la presencia en Internet de las instituciones de Gobierno y al mismo tiempo, facilitar a los ciudadanos la identificación de sitios de Gobierno y evitar disputas con terceros por inscripción de nombres similares bajo el dominio .CL y facilitar el monitoreo y vigilancia de los sitios web de Gobierno.

Uso de icono de identificación (DS100/2006 Art. 3°)

Otra de las obligaciones que se establece en este artículo es que los Sitios Web deben utilizar el icono que identifica al Gobierno, aunque se plantea que es posible obtener autorización de parte del Ministerio Secretaría General de Gobierno para omitirlo y en cambio, utilizar elementos alternativos.8

7.- La inscripción de los dominios de Gobierno se realiza en http://nic.gov.cl/consulta.html; es importante considerar que alguna informaciónde dicho sitio es accesible sólo desde la Intranet del Estado.

CSS: Cascade Style Sheet, estándar de presentación del contenido de un sitio web que permite definir la forma en que serán visualizados los datos.

Uso de tablas reversas (DS100/2006 Art. 3°)Finalmente en el artículo 3° se plantea que “los Sitios Web deberán registrar en sus servicios denombres las tablas reversas de la o las direcciones IP asociadas a los dominios .gov.cl y .gob.cl correspondientes”.

Las tablas reversas son una parte de la implementación de los Servidores de Nombres de Dominio (DNS, por su sigla del inglés Domain Name Server) que permiten asociar un nombre de dominios a partir de números IP. El beneficio de usar tablas reversas es que los servicios web dentro de la red de Gobierno responden con mayor velocidad al requirimiento de un usuario, facilita la protección contra el spam y ayuda a la confirmación de validez de la relación entre un nombre y un dominio, permitiendo por ejemplo, evitar acciones de phishing.9

Utilidad (DS100/2006 Art. 4°)Este artículo se refiere a la necesidad de que los contenidos del sitio web estén desarrollados con una orientación al usuario, ofreciéndole la información de manera simple, rápida y eficiente. En este sentido la norma explica que para lograrlo se deben adoptar las siguientes medidas:

94

Ofrecer Contenidos de utilidad: se refiere a que el sitio web debe ser útil desde la perspectiva del usuario, es decir, entregar lo que éste anda buscando.

Emplear Etiquetas descriptivas: se refiere a que se deben emplear palabras y descriptores que sean de fácil comprensión y que estén escritas en el lenguaje que hable el usuario, no en la terminología propia de la institución

Asegurar la Correcta Indexación: se refiere a preparar la información del sitio web para que sea incluida en sistemas de búsqueda, con el objetivo de que el sitio web pueda ser encontrado por diferentes medios (más de este tema en el Capítulo 4 - Cómo se llega al sitio web).

Optimizar el acceso: se refiere a equilibrar el peso y calidad de los contenidos, con el objetivo de asegurar que el sitio web tenga características físicas de peso de archivos que sean adecuadas para un buen tiempo de despliegue. Dado que este tema fue tratado en la Guía Web Versión 1.010, se recomienda su revisión.Guía para Desarrollo de Sitios Web - Versión 2 - Gobierno de Chile8.- El uso de los iconos de Gobierno se regula en http://www.gobiernodechile.cl/viewNormasGraficas.aspx9.- El uso de las tablas reversas se explica en http://nic.gov.cl/basicas.html

La fecha para dar cumplimiento al Nivel I del DS 100/2006 fue el 12 de agosto de 2007.

Desarrollo usando HTML/XML estándar (DS100/2006 Art. 5°)Este artículo es el que hace la referencia más clara al uso de estándares, señalando que el código de despliegue del sitio web debe ser HTML o XML, detallando que "se recomienda que el sitio web cumpla con los estándares HTML 4.01 o XHTML 1.0 validados ante el W3C".

Tal como se explicaba previamente, este artículo detalla que se deben emplear las herramientas de verificación del W3C para asegurar que el sitio web cumple con el estándar señalado.

Adicionalmente este artículo señala que se debe ejecutar una tarea similar con los enlaces rotos y con las imágenes perdidas.

Respecto del desarrollo utilizando estos estándares se recomienda revisar el Capítulo III: Diseño Web y Estándares de la Guía Web Versión 1.011, donde se aborda este tema en detalle.

Monitoreo de Actividad (DS100/2006 Art. 6°)Este artículo establece la obligación del encargado del sitio web para "monitorear regularmente la actividad del mismo" con el objetivo de obtener información acerca de los códigos de error y los elementos más visitados. Es importante considerar que este tema ya había sido abordado a través del Capítulo IV "Puesta en Marcha" de la Guía Web 1.0.

A partir de la información conseguida mediante el monitoreo, se espera que el administrador pueda generar reportes frecuentes de actividad en los que

95

se establezcan los aciertos y errores del sitio, con el fín de establecer las buenas tendencias y realizar las correcciones que sea del caso.

Respecto de los errores, cabe tener en cuenta que el protocolo HTTP12 que utilizan las páginas web para la transmisión de sus contenidos, genera errores que están estandarizados mediante códigos para su mejor comprensión. Los que comienzan con el número 4 representan errores del lado del cliente y los que empiezan con 510.- Ver información sobre peso de páginas en http://www.guiaweb.gob.cl/guia/capitulos/tres/accesorapido.htm#t03practicas11.- Ver información sobre uso de los estándares para el desarrollo de los Sitios Web enhttp://www.guiaweb.gob.cl/guia/capitulos/tres/index.htm12.- Ver el listado de errores en http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

La inscripción de los dominios de Gobierno se realiza en http://nic.gov.cl/consulta.html Las normas corporativas del icono del Gobierno se encuentran publicadas en http://www.gobiernodechile.cl/documentacion/normas.asp

son errores del lado del servidor. De ellos, los más frecuentes y que deben ser atendidos a través del monitoreo que se sugiere en este artículo, son los siguientes:

Error 401 Acceso no autorizado a una página, no se ingresó la password.Error 403 Acceso prohibido; normalmente aparece cuando la página que se busca no tiene permiso para ser mostrada.Error 404 La página no existe y no puede ser mostrada.Error 500 Error en el servidor debido a un problema de software.Error 503 El servicio web no está disponible.Error 504 Tiempo de respuesta excede lo normal y por lo tanto la página no se muestra.

Es importante considerar que una buena práctica respecto de este tema es adoptar una política de atención de errores, de tal manera de definir qué mensaje recibirá el usuario cuando ocurran los problemas descritos. En particular se de debe poner atención sobre el Error 404, debido a que igualmente se puede producir si, por ejemplo, el usuario escribe mal una dirección.

Para atender este problema se sugiere la inclusión de una "página de error estándar" en el software del servidor web, para que la muestre en el caso de ocurrir un error. Los elementos mínimos que debe incorporar son:

Identificación del sitio web a través de un logotipo y nombre.

Sistema de navegación en el Sitio: menú, botones, etc.

Título que explique el sentido de la página.

XHTML: eXtended Hyper Text Markup Language; estándar de transición para los contenidos de los Sitios Web que introduce elementos de XML dentro del lenguaje HTML.

Pequeño párrafo describiendo el error en lenguaje no técnico (no más de dos líneas). Por ejemplo, "El documento solicitado no existe o ha cambiado de ubicación; puede buscarlo a través del Mapa del sitio".

96

Buscador interno del sitio web para ayudar a encontrar lo que buscaba cuando apareció el error.

Mapa del sitio web para ubicar al usuario respecto del contenido existente.

Contingencias (DS100/2006 Art. 7°)

Este artículo señala que el organismo dueño del sitio web debe tener un Plan deContingencia que incluya "las medidas a ser ejecutadas en el caso de que el sitio web dejede estar disponible para el público, o que el nivel de acceso disminuya o sea intermitente,o que se vea comprometido por ataques externos".

Es importante entender que el alcance de este artículo debe estar relacionado con el Decreto 83/2004 del Ministerio Secretaría General de la Presidencia que ya fue tratado en el Capítulo 1 de esta Guía, debido a que allí se plantea la obligación de contar con políticas de seguridad permanente.

Allí se solicita la generación de planes de contingencia frente a fenómenos de toda índole que pudieran poner en riesgo la continuidad operacional de los sistemas de información, detallando con claridad cuáles deben ser las acciones a seguir.

Codificación de Caracteres (DS 100/2006 Art. 8°)

Este artículo señala que para la codificación de caracteres se utilizará preferentemente UTF-8, sigla que significa “8-bit Unicode Transformation Format”.

Al respecto se debe indicar que la codificación de caracteres es un elemento que se declara en la sección <head> de cada página y permite que el programa navegador interprete adecuadamente los símbolos (letras, números y otros) que se incluyan en la misma. En el caso de la recomendación de este artículo, debe agregarse la siguiente línea:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTTP: Hyper Text Transfer Protocol, protocolo de transferencia de hipertexto, que determina la forma en que son transmitidos los contenidos de un sitio web.

La utilización de este conjunto de caracteres está relacionada con la aplicación del Decreto 81/2004 del Ministerio Secretaría General de la Presidencia, que se refiere a la interoperabilidad. Allí se plantea la obligación de que los documentos electrónicos que se generen en los órganos de la Administración Pública utilicen XML para los documentos y UTF-8 como conjunto para la codificación de caracteres.

Política de Privacidad (DS100/2006 Art. 9°)

97

Este artículo determina que los Sitios Web deben contar con una Política de Privacidad de los Datos Personales de los usuarios que acceden a éste, en la cual se den a conocer las obligaciones y derechos que tienen por el hecho de entregar sus datos en las pantallas del sitio web.

Respecto del contenido de dicha política, el Proyecto de Reforma y Modernización del Estado del Ministerio Secretaria General de la Presidencia emitió el documento titulado "Guía Modelo de Políticas de Privacidad"13 en el que se explica la forma de cumplir con esta norma y se entrega un documento de base para crear la correspondiente a cada organismo.

> Nivel II - DS100/2006

Su objetivo es que los Sitios Web cumplan “las directrices principales de las normas internacionales de accesibilidad" con el fin de permitir un grado de acceso a las personas con discapacidades.

Para ello se deben cumplir las normas indicadas en el Título III del decreto que corresponde a los artículos 10° a 14° y el plazo para ello fue fijado a dos años de la promulgación del decreto, vale decir, al 12 de agosto de 2008. A continuación se revisa el contenido de los artículos y la forma de darles cumplimiento.

Diagramación con CSS (DS100/2006 Art. 10°)

Este artículo indica que las páginas de los Sitios Web deben ser diagramadas utilizando hojas de estilo en cascada (CSS por su sigla en inglés), indicando que se debe separar "el contenido, la estructura y la presentación de los primeros".

Este es un cambio de importancia respecto de la situación actual, ya que incluso hasta la aparición de la Guía Web Versión 1.014 habitualmente se empleaban tablas para disponer los elementos en las páginas, facilitando de esa manera su ubicación en la pantalla.

13.- Ver documento en http://www.modernizacion.cl/1350/article-140397.html14.- Ver información al respecto en http://www.guiaweb.gob.cl/guia/capitulos/tres/accesorapido.htm#t04diagramas

La Guía Modelo de Políticas de Privacidad se puede bajar desde http://www.modernizacion.cl/1350/article-140397.html.

La diagramación con tablas se usó habitualmente desde el inicio de los Sitios Web y el problema con esta forma de trabajo se relacionaba con el hecho de que los contenidos se unían con el código utilizado en la presentación, evitando que el sitio web pudiera ser usado en plataformas diferentes sin adecuarlo previamente.

Gracias al uso de las hojas de estilo en cascada, esta situación pudo mejorarse ya que el contenido se pudo mantener inalterable y sólo hacer los cambios en la capa de la presentación, lo que permitió llevar dichos contenidos a cualquier plataforma, sólo haciendo cambios en el estilo de diagramación, el cual se define a través del archivo CSS relacionado a la página.

98

Otro elemento importante en la diagramación usando las hojas de estilo, es la revisión de lo que ocurre cuando ellas no están presentes. En este sentido, se debe tender a que el sitio web se degrade “aceptablemente”, vale decir, que sus contenidos no se vean diagramados con la presentación gráfica habitual pero que al menos puedan entenderse adecuadamente. Para hacer este experimento, existen una serie de herramientas que facilitan la revisión, destacando entre ellas las extensiones para el navegador Firefox Versión 2:

Firebug15: software que ocupa la parte inferior de la pantalla y va mostrando el código fuente a medida que se desplaza el cursor sobre el sitio web que se revisa; ofrece mucha información acerca de su código fuente.

CSS Viewer16: comando que permite ver el estilo utilizado en la página que se revisa, a medida que se desplaza el mouse sobre la página web.

Web Developer17: barra de herramientas con gran cantidad de opciones para revisar el sitio web.

Mozilla Accessibility Extension18: barra de herramientas con todas las opciones necesarias para revisar la accesibilidad del sitio web.

Es importante considerar que al final de este capítulo se ofrecen archivos para trabajar en la incorporación de CSS a una página web de manera práctica.15.- Se puede obtener en http://www.getfirebug.com/16.- Se puede obtener en https://addons.mozilla.org/es-ES/firefox/addon/210417.- Se puede obtener en http://chrispederick.com/work/web-developer/18.- Se puede obtener en http://cita.disability.uiuc.edu/software/mozilla/

La fecha para dar cumplimiento al Nivel II del DS100/2006 es el 12 de agosto de 2008.

Utilización de Marcos (DS100/2006 Art. 11°)Este artículo indica que los marcos o "frames" que se utilicen para mostrar el contenido de los Sitios Web, "deben ofrecer información adecuada al usuario" para que éste no tenga dificultades de navegación o pierda los enlaces que se ofrecen dentro del propio sitio web.

El tema de los marcos ya había sido abordado en la Guía Web Versión 1.019

donde se explicaba que dicha tecnología "consiste en agrupar varios archivos para que se desplieguen de manera simultánea, permitiendo a los usuarios ver varios contenidos al mismo tiempo". Se mostraban asimismo las ventajas y desventajas de la misma y se planteaba que " esta forma de organizar los Sitios Web debe desecharse para pasar a sitios de interfaz contenida en un solo archivo."

Si bien se entiende que esta actividad se puede hacer en un periodo de tiempo adecuado, en tanto se siguen usando los marcos, se deben tener las siguientes consideraciones:

La información contenida en la sección <noframes> que se inserta dentro de la etiqueta <frameset> debe contener datos adecuados acerca del contenido del sitio web e idealmente, entregar enlaces que permitan acceder a contenidos en el interior del sitio web.

99

Los enlaces que salgan de los marcos deben utilizar siempre el modificador "target" en la etiqueta <a>, con el objetivo de que el enlace siempre llegue hacia uno de los marcos cuyo nombre se indica; hacia la ventana donde están contenidos los marcos usando el modificador “target=_top” o bien hacia una ventana nueva usando el modificador “target=_blank”.

Los buscadores de Internet pueden tener indexado el contenido de los marcos por separado, lo que podría motivar su apertura sin los demás archivos que le dan contexto a las páginas. Para ello se aconseja programar a nivel de servidor para que cada vez que se solicite una página por separado, ésta se muestre con los marcos relacionados.

Uso de Plug-ins (DS100/2006 Art. 12°)

Este artículo indica que en caso de que se emplee software adicional al sitio webpara mostrar contenidos específicos, se debe proporcionar el visualizador corres-

Se puede encontrar una colección histórica de browsers en http://browsers.evolt.org/19.- Ver información al respecto en http://www.guiaweb.gob.cl/guia/capitulos/tres/accesorapido.htm#t04frames

pondiente de manera gratuita, ya sea que puedan ser bajados del propio sitio web como desde el sitio web de la empresa que lo ofrezca.

El objetivo de esta medida es que los usuarios no deban comprar un software para acceder a los contenidos de los Sitios Web, sino que siempre tengan alternativas gratuitas para revisar la información que se les ofrece.

Cabe recordar en este sentido, que lo anterior también implica que los Sitios Web no deben ofrecer archivos para los cuales no haya visualizadores gratuitos o que pertenezcan a formatos propietarios, aunque se suponga que todo el mundo tenga dichos software.

Los visualizadores más habituales y sus ubicaciones vía web son los siguientes:

Adobe-PDF:http://www.latinamerica.adobe.com/products/acrobat/readstep2.html

MS-Excel: http://www.microsoft.com/downloads/details.aspx?familyid=c8378bf4-996c-4569-b547-75edbd03aaf0&displaylang=es

MS-Word: http://www.microsoft.com/downloads/details.aspx?familyid=95E24C87-8732-48D5-8689-AB826E7B8FDF&displaylang=es

MS-PowerPoint: http://www.microsoft.com/downloads/details.aspx?familyid=428D5727-43AB-4F24-90B7-A94784AF71A4&displaylang=es

Accesibilidad (DS100/2006 Art. 13°)Este artículo señala que los Sitios Web deben ser accesibles usando diferentes tipos de navegadores (browser o programa para ver Sitios Web), de los cuales al menos uno debe ser gratuito y estar disponible en el propio sitio web para que sea obtenido por los usuarios.

100

El objetivo de esta medida es terminar con la “optimización" que habitualmente se hace en los Sitios Web para que puedan ser vistos a través de un navegador en particular.

Asimismo, al no existir optimización del navegador, se debe trabajar para que el sitio web cumpla los estándares web, ya que de esa manera se puede asegurar que

Plug-in: software de apoyo que permite ver contenidos específicos a través de un browser.

efectivamente cualquier programa de navegación pueda acceder a los contenidos.

En este ámbito, la organización W3C ofrece su propio browser denominado “Amaya"20

que está disponible para las plataformas Windows, Macintosh y Linux (Debian,Ubuntu, RedHat, Mandrake, Suse).

Adicionalmente, la comunidad Evolt.org21 ofrece un sitio web especial con una colecciónhistórica de browsers, donde se pueden obtener copias de software que se ha usado para navegar Internet, con la ventaja de que están todas las versiones que han existido.

Validación de la Hoja de Estilo (DS100/2006 Art. 14°)

Mientras el artículo 10 explicado anteriormente señala que las páginas de los Sitios Web deben ser diagramadas utilizando hojas de estilo en cascada (CSS por su sigla en inglés), este artículo detalla que dichas hojas deben ser validadas usando el servicio ofrecido por el W3C22.

El objetivo de esta actividad es asegurar que las hojas de estilo del sitio web cumplan con el estándar adoptado por el W3C, en el entendido que de esta manera se podrá asegurar que el sitio web puede ser utilizado desde cualquier plataforma.

Puesta en marcha

Una de las características más importantes del estándar HTML es que permite la creación de documentos que tienen una estructura definida, en la cual se puede ordenar por importancia, el contenido que se incluya.

Por eso es relevante que en este capítulo de estándares, se incluya una referencia hacia esta característica, debido a que al desarrollar el sitio web utilizando estándares esta forma de ordenamiento del contenido ocupa un lugar privilegiado.

101

Adicionalmente, esta característica estructural es la que permitirá que el sitio web pueda cumplir una de las metas que tienen las normas señaladas en este capítulo, cual es la de permitir que los Sitios Web del Gobierno de Chile sean accesibles por personas con discapacidades físicas.

De lo anterior se concluye que al realizar la Puesta en Marcha del desarrollo de un proyecto web, sus páginas deberán estar conformadas de la manera que se indica en los siguientes títulos.

20.- Se puede obtener el browser desde http://www.w3.org/Amaya/User/BinDist.html21.- El sitio web de los browsers se encuentra en http://browsers.evolt.org/22.- El servicio está disponible en http://jigsaw.w3.org/css-validator/

Accesibilidad: Conjunto de buenas prácticas utilizadas en un sitio web para asegurar la visualización de sus contenidos por personas con discapacidades físicas.

102

Estructura de los documentos web

El estándar HTML determina que los contenidos deben ser ubicados mediante el uso de etiquetas (del inglés "tag") que especifica la característica del mismo y que se identifican porque usan los corchetes angulados “<" y “>" para designarlas Dichas etiquetas van desde las que permiten darle forma a todo el documento, hasta aquellas que sirven para explicar el comportamiento o características de una parte del mismo, como un título, un enlace o una imagen. Lo importante, es que cualquier elemento dentro de la página, debe ser incorporado mediante una etiqueta y que ésta debe cumplir las formalidades que indica el estándar para ella.

En términos generales, los documentos web están compuestos de tres partes y dentro de éstas, hay un orden que ayuda a su comprensión y uso.

Dichas partes son:

Declaración del tipo de documento estándar a usar

Encabezado de la página

Cuerpo de la Página

A continuación se explican las características de cada una de estas partes.

Declaración del tipo de documento estándar a usar

Corresponde a las primeras líneas que debe tener toda página web y en ella se indica el tipo de documento de que se trata y con ello, el estándar que regirá su contenido.

Normalmente la declaración es similar a la siguiente:

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

Como se puede observar del texto, los elementos que son relevantes son los siguientes:

Tipo de documento: con la expresión "doctype" se indica cuál es el estándar a utilizar, el cual aparece por escrito. En el caso del ejemplo anterior, es XHTML, versión 1, en su modo de transición (el otro se denomina estricto).

103

Referencia del documento: siempre se indica un enlace a un documento con la extensión "dtd", que es el documento oficial del W3C donde se establece el estándar y sus características.

Etiqueta <html>: es la que da inicio a las etiquetas del sitio web y que será finalizada al término del documento con la etiqueta </html>; en el caso de este ejemplo, cuenta con dos modificadores que son xmlns para detallar cuál es el conjunto de atributos del estándar (cuya ubicación se indica con una dirección web) y lang, para señalar el lenguaje en que estará el contenido.

Si estas líneas no están presentes, el validador entregará un error general y no seguirá revisando la página.

Encabezado de la Página

Una vez que se ha declarado el estándar como se indicó antes, las siguientes líneas de código de la página web están reservadas para crear el encabezado, que se despliega entre las etiquetas <head> y </head>.

Dentro de ellas se ubican los elementos mediante los cuales se describe el contenido de la página web, por lo cual a estos elementos se les llama "meta datos" (datos acerca de los datos).

Los hay de cuatro tipos, de acuerdo a la siguiente descripción:

Título: es la etiqueta <title> que permite designar el título que llevará en el encabezado de la ventana el sitio web; se recomienda que lleve el nombre del sitio web más un título que describa el contenido de la página. Por ejemplo:

"Ministerio del Interior - Chile: Acerca del Ministro". De esta manera, esta información será la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha página.

Metadadato: es información acerca de la información y se define mediante la etiqueta <meta>. Para hacerlo se pueden emplear las descripciones del W3C o bien las del proyecto Dublin Core, las cuales permiten generar información descriptiva acerca de contenidos, autores, copyright y otras descripciones acerca de los contenidos del sitio web. Los más usados son:

Tag: etiqueta, es la marca que permite dar estructura a un documento HTML.

<meta name="title" content="Nombre del Sitio Web o Institución"><meta name="description" content="Descripción del Sitio Web o Institución o bien del contenido de la página"><meta name="keywords" content="Palabras claves del Sitio Web o Institución o bien del contenido de la página">

104

Cabe recordar que este tema fue tratado en la Guía Web Versión 1.023 y también en el documento "Anexo 2 sobre el uso de Meta Tags" de la misma edición24, por lo que sugerimos revisar dichos contenidos.

Enlaces externos: permite informar al documento acerca de otros archivos que se deben ejecutar al mismo tiempo; el mejor ejemplo es el llamado a una hoja de estilo para ejecutar la presentación gráfica de la página:

<link href="styles/main.css" rel="stylesheet" type="text/css" />

Scripts: permiten hacer llamados a lenguajes de programación, como Javascript, para desarrollar acciones y crear funcionalidades en la página web que se está visitando. Por ejemplo:<script type="text/javascript" src="scripts/uifunctions.js">

> Cuerpo de la PáginaCuando ya se ha ingresado la información correspondiente al encabezado, se accede a la zona de contenido propiamente tal la que se despliega entre las etiquetas <body> y </body>. En el caso de sitios realizados mediante marcos o "frames" esta etiqueta va situada dentro de esta última.

Dentro de ellas se ubican todos los elementos que pueden identificarse como los contenidos de la página web, vale decir, textos, imágenes, funcionalidades.

No obstante, para que su despliegue sea adecuado, es importante considerar la estructura de la página, la cual se explica a través de las siguientes etiquetas:

23.- Más información en http://www.guiaweb.gob.cl/guia/capitulos/tres/accesorapido.htm#t04meta24.- Ver documento (formato RTF) en http://www.guiaweb.gob.cl/guia/capitulos/tres/anexos/Informacion_sobre_Meta_tags.rtf

Utilización de la etiqueta <h>: es la etiqueta utilizada para marcar los títulos que habrá en el contenido, comenzando por el principal que recibe la etiqueta <h1>.

Cabe recordar que gracias al uso de la tecnología CSS de Hojas de Estilo, será a través de ésta que se dará el formato adecuado a dicho título para que se distinga en la página. Las etiquetas <h> van desde 1 a 6, por lo que permiten indicar hasta seis niveles de importancia de los titulares utilizados en el documento. Su uso es muy relevante en términos de accesibilidad, ya que los programas de software lectores de pantalla -que leen el contenido para que sea escuchado por usuarios ciegos- siempre buscarán esta jerarquía de los contenidos para determinar la sección por la que debe comenzar la lectura de la página.

Utilización de la etiqueta <p>: es la etiqueta utilizada para marcar los párrafos en los que se divide el contenido; utilizando la tecnología CSS de Hojas de Estilo, es posible agregarle el formato adecuado como tamaño de letra, espaciado, interlineado, sangría, justificación, color y tipografía utilizada.

105

Utilización de la etiqueta <div> y <span>: son elementos neutros que sirven para marcar y agrupar contenidos con fines estructurales. Con <div> se define lo que ocurre con bloques de información, mientras que con <span> es posible hacer esa misma definición pero para líneas de contenidos. Ambas etiquetas utilizan las definiciones existentes en las Hojas de Estilo y permiten aplicarlas a los contenidos.

Basándonos en un ejemplo de W3C, se puede ver el siguiente código en que se aprecia la aplicación de estas etiquetas:

<div class="seccion" id="sitio-web" ><h1>Sitio Web</h1><p>In esta sección se da a conocer la forma de trabajar en un sitio web....más contenido......más contenido......más contenido...<div class="subseccion" id="pagina-web" ><h2>Las Páginas Web</H2><p>Las páginas web <span class="cursiva-bold">son parte de lossitios</span> y se denominan así porque...</p><p>...más contenido... </p><p>...más contenido... </p><p>...más contenido... </p></div></div>

Si al documento anterior se le agrega la siguiente hoja de estilos (que en este caso se define en el propio documento):

<head><title>Guía Web: Acerca de los Sitios Web y las Páginas</title><style type="text/css">div.seccion { text-align: justify; font-size: 12pt}div.subseccion { text-indent: 2em }h1 { font-style: italic; color: green }h2 { color: green }</style></head>

Se puede ver que la sección identificada por el id="sitio-web" va a aparecer alineada en forma justificada y con su texto en 12 puntos de altura; adicionalmente su título marcado por <h1> se verá en letras cursivas de color verde.

Mientras que la sección identificada por el id="pagina-web" va a heredar las características de la anterior -porque es un bloque que está inserto en éste pero tendrá una columna más angosta por la indentación que se indica,

106

mientras que su titular -marcado con <h2> será de color verde pero en estilo normal.

Otro uso muy interesante de la etiqueta <div> es la de expresar posiciones de los bloques de contenido en el sitio web, gracias a lo cual se puede diagramar la información de una manera adecuada a la plataforma en que se esté trabajando.

> Utilización de las Hojas de Estilo (CSS)

Como se puede apreciar por el ejemplo anterior, cuando se logra separar el contenido de la presentación, el resultado suele ser muy poderoso ya que permite al administrador del sitio web hacer cambios al diseño (colores, ubicaciones, tamaños) del contenido de sus páginas con muy poco esfuerzo: basta con modificar la Hoja de Estilos para que éstos tengan efecto.

Para utilizar de mejor forma las Hojas de Estilo en Cascada, se ofrecen tres archivos que se pueden obtener desde el sitio web de la Guía y que son los siguientes:

Archivo de Contenido: se trata del archivo 3cols.htm que consiste en una página con tres columnas: una tiene un logotipo y las otras dos, texto simulado; en su código se puede verque sólo tiene etiquetas de html estándar, por lo que esta página hace un uso válido de los estándares (ver Figura 2).

Hojas de estilo: se ofrecen dos para este archivo, las cuales se llaman desde la sección <head> de su código; una de ellas es para mostrar el contenido en pantalla, mientras que la segunda espara impresión. Los archivos se denominan 3cols.css y 3cols-print.css. Un elemento interesante, es que al usar la hoja de estilo de impresión, se modifica completamente el contenido y lapágina se diagrama de manera diferente (ver Figura 3).

La intención de entregar estos archivos es que el usuario de la Guía pueda trabajar con ellos y hacerles las modificaciones que estime adecuadas, para ir aprendiendo sobre la marcha el efecto que consigue a través de los cambios que realice.

Para aprender y practicar más sobre este tema, de por sí complejo, se sugieren los siguientes recursos:

107

Tutorial CSS en W3C - http://www.w3.org/Style/Examples/011/firstcss.es.htmlTejedores del Web - http://www.tejedoresdelweb.com/307/article-1061.htmlDirectorio de enlaces de CSS en W3C - http://www.w3.org/Style/CSS/learning

Figura 3. - Así se ve el contenido del sitio web cuando se aprecia en la visualización para impresión.

Figura 2. - Archivo que muestra el contenido del sitio tal como se ve a través de un browser: logotipo en una columna, más otras dos columnas de contenidos.

> Premio Web y EstándaresFinalmente, en este capítulo no puede dejar de mencionarse la iniciativa "Premio a losmejores Sitios Web de Gobierno", más conocida como el "Premio Web"25.

Se trata de una actividad que ha permitido que todos los Sitios Web de los órganos de la Administración Pública puedan ser revisados por un panel de expertos, los cuales generan informes de retroalimentación para que los administradores de los sitios puedan mejorarlos.

Uno de los énfasis de estos premios ha sido el mejoramiento de su calidad a través del cumplimiento de los estándares y de hecho, estos constituyen una de las áreas evaluadas. De allí que se plantee como su objetivo, "reconocer los avances realizados en la modernización de la gestión pública y la promoción del Gobierno Electrónico e impulsar un mejoramiento permanente de los Sitios Web de las instituciones del Gobierno, en razón de

108

la importancia que han cobrado dichos instrumentos en el aumento de la información y la calidad de los servicios proporcionados a la ciudadanía".

Esto se reconoce a través de sus Criterios de Evaluación que son los siguientes y que permiten hacerse una idea de cómo evaluar cualquier iniciativa en este ámbito:

Utilidad: entendida como la disposición del sitio web para proveer información relevante y servicios en línea a la ciudadanía.

Accesibilidad: entendida como la capacidad del sitio web para estar al alcance de todos los ciudadanos, a través de un diseño que considere las características de sus usuarios y los distintos tipos de tecnologías.

Facilidad de uso: entendida como la cualidad del sitio web que permite al usuario navegar fácil e intuitivamente dentro de éste, con una presentación gráfica que sea visualmente atractiva y agradable.

El sitio web del "Premio Web" se encuentra en: www.premioweb.cl.

Identidad Institucional: entendida como la cualidad del sitio web de lograr proyectar la imagen de la institución de manera correcta y adecuada.

Operación y Seguridad: entendida como la capacidad que tiene el sitio web para garantizar la privacidad de los datos personales y realizando transacciones seguras cuando utiliza los servicios ofrecidos en el sitio.

Gracias a este tipo de iniciativas más la creación de la primera versión de la Guía, los estándares tratados en este capítulo se han divulgado en el ámbito nacional, apoyando su adopción entre los administradores de Sitios Web de Gobierno.

Capítulo 3:ResumenDiseño de Interfaces e InteracciónLa clave del éxito de un Sitio Web está dada por la forma en que se presenta la información a los visitantes. Debido a que el web es el resultado de la implementación de una serie de tecnologías que facilitan la transmisión de contenidos desde un computador central o servidor a una serie de clientes o

109

usuarios, utilizando computadores conectados a la red Internet, es muy importante que la información ofrecida cumpla con ciertas reglas y/o estándares, para que sus usuarios puedan sacarle todo el provecho posible.

En este capítulo entonces, se abordan los elementos necesarios para que la creación de las interfaces de los Sitios Web (las pantallas que el usuario visita y utiliza) cumpla con dichos preceptos y la comunicación fluya más directamente entre el organismo y el usuario final.

En el Sitio Web este capítulo es presentado en el menú con el nombre de "Diseño Web".

> Introducción / Diseño de Interfaces e Interacción

Uno de los capítulos iniciales de la Guía Web.1 se refiere a la estrategia que debe seguir un órgano de la Administración Pública para decidir qué debe incluir en dicho espacio digital, e indica que al inicio de un proyecto corresponde “definir cuáles serán los objetivos centrales que deberá tener

110

el Sitio Web y establecer la forma de cumplirlos” partiendo desde la visión y misión del organismo, con el objetivo de establecer “un objetivo central y luego definir varios objetivos secundarios.”

Con estas directrices, la primera versión de la Guía Web promovía que los encargadosdel sitio web pudieran recopilar los elementos suficientes para crear un conjunto de contenidos y funcionalidades que les permitieran hacer una oferta de información adecuada para sus visitantes.

Lo que no se establecía en dicha Guía y que se aborda a través de esta nueva versión, es la forma que deben tener las pantallas que se generan en los Sitios Web, para cumplir con la tarea de hacer su contenido más simple de usar para quienes visitan sus páginas.Es importante señalar que la clave del éxito de un sitio web está dada por la forma en que se presenta la información a los visitantes.

Por ello es que en este capítulo se abordan los elementos necesarios para que durante la creación de las interfaces de los Sitios Web (las pantallas que el usuario ve y utiliza) se cumpla con dichos preceptos y la comunicación fluya más directamente entre el organismo y el usuario final.

Asimismo las instrucciones de este capítulo deben revisarse en conjunto con las del “Capítulo V - De la Usabilidad a la Utilidad”2 en el que se hace énfasis en la necesidad de asegurar la facilidad de acceso a la información por parte de los ciudadanos.

> Diseño webSe entiende por diseño web3 el conjunto de actividades que permiten avanzar desde el concepto que se defina para el sitio web hasta su realización, por lo que no sólo

Interfaz: conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el sitio web que está visitando.

También se encuentra como interface pero la RAE sólo reconoce interfaz.

U1.- Ver Capítulo II: Definición del Sitio Web en http://www.guiaweb.gob.cl/guia/capitulos/dos/2.- Ver Capítulo V en http://www.guiaweb.gob.cl/guia/capitulos/cinco3.- Ver definición más amplia en http://es.wikipedia.org/wiki/Dise%C3%B1o_de_p%C3%A1ginas_web

111

está referido a las tareas relacionadas con el diseño gráfico, sino que también aborda otras como las definiciones relativas a usabilidad, interacción, y también a todas las que están relacionadas con los contenidos propiamente tales.

Por lo mismo, este capítulo aborda todos estos elementos y se podrán encontrar a continuación las recomendaciones de buenas prácticas para cada uno de estos aspectos, con el fin de que el encargado del sitio web pueda adoptarlas de acuerdo a la realidad de su propia organización.

Es importante tener en cuenta que los aspectos relacionados con el desarrollo de un proyecto web propiamente tal no son tratados en este capítulo, ya fueron abordados en la versión 1.0 de la Guía

Web a través del Capítulo II: Definición del SitioWeb y Capítulo III: Diseño Web y Estándares4.

> ¿Qué es una interfaz?

Cuando se habla de Sitios Web, se denomina interfaz5 al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el sitio web que está visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción.

Todos ellos deben estar preparados para ofrecer servicios determinados al usuario, con el fin de que éste obtenga lo que vino a buscar cuando visitó el sitio web. Por lo anterior, cada uno de los elementos que sean integrados dentro de la interfaz debe estar pensado para causar un efecto sobre el usuario y deben ser utilizados con un propósito.

En este sentido, es importante considerar que uno de los autores más citados6 en cuanto a la usabilidad de los Sitios Web, destaca que los elementos más importantes de la portada de todo sitio web se pueden resumir en cuatro postulados generales:

1. Dejar claro el propósito del sitio: se refiere a que el sitio debe explicar a quién pertenece y qué permite hacer a quienes lo visitan; se entiende que debe hacerlo de manera simple y rápida. Por ejemplo, ayuda en este sentido el cumplimiento de las normas referidas a uso de URLs y logotipos oficiales.

4.- Ver Capítulo III en http://www.guiaweb.gob.cl/guia/capitulos/tres/5.- Ver una definición más amplia en http://es.wikipedia.org/wiki/Interface6.- Jakob Nielsen con su artículo “Top Ten Guidelines for Homepage Usability” (versión en idioma inglés), en: http://www.useit.com/alertbox/20020512.html

El sitio web de Jakob Nielsen está en www.useit.com.

112

2. Ayudar a los usuarios a encontrar lo que necesitan: implica que debe contar con un sistema de navegación visible y completo, pero que además deberá estar complementado por algún sistema de búsqueda que sea efectivo para acceder al contenido al que no se logra acceder o que no se encuentra a simple vista.

3. Demostrar el contenido del sitio: significa que el contenido se debe mostrar de manera clara, con títulos comprensibles por parte del usuario y con enlaces hacia las secciones más usadas que estén disponibles donde el usuario los busque. Ayudará en este sentido tener un seguimiento de las visitas para comprender qué es lo más visto y lo más buscado del sitio web.

4. Usar diseño visual para mejorar y no para definir la interacción del sitio web: se refiere a que los elementos gráficos del sitio web deben estar preparados para ayudar en los objetivos del sitio y no sólo como adornos utilizados para rellenar espacio. Aunque se trata de uno de los temas más debatibles, su alcance no es el de restringir el uso de imágenes y elementos graficos, sino a que su uso sea adecuado para la experiencia de uso que se desea ofrecer.

Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega como visitante logre los objetivos que lo trajeron al sitio web y que éste le facilite el acceso a los contenidos que están incorporados a través de sus pantallas.

Para conseguir esto, es necesario que la interfaz adopte los elementos que detallamos en este capítulo, a través de los cuales será posible conseguir el cumplimiento de los postulados antes señalados.

Elementos de la interfaz

La interfaz del sitio web, cualquiera sea el objetivo que persiga, debe dar cuenta de normas de carácter general, que se refieren a sus características como sistema de información y comunicación. Gracias al cumplimiento de éstas, el usuario logrará acceder a las informaciones que se le ofrecen y, además, podrá realizar las acciones que el organismo dueño del espacio digital le entrega a través de este sistema.

Dichas características tienen que ver con los elementos de identificación, de navegación, de contenidos y de acción que el sitio web debe contener, todos los cuales se analizan en las siguientes páginas.

La existencia e importancia de dichos elementos, como asimismo la ubicación que deben tener en la interfaz, se ha visto comprobada a través de las investigaciones que se han hecho en torno a los Sitios Web. Con ellas se demuestra que las zonas que normalmente se ven en

113

una visita inicial, están conformadas por una letra F7 o bien por un triángulo8, cuya sección más revisada es la que se encuentra en la esquina superior izquierda. Lo anterior se aprecia en la Figura 1, tomada del sitio web de la consultora de Jakob Nielsen.

Por lo anterior, es importante que las interfaces se construyan tomando en cuenta esta evidencia, con el fin de asegurar que los visitantes reciban la información en cuanto lleguen al sitio web, permitiendo que el diseño web contribuya al mejor uso de los contenidos y funcionalidad, en lugar de afectar dicho uso.

Respecto de los elementos de la interfaz, los aspectos más relevantes a tener en consideración son los siguientes:

Uso de logotipos

Sistema de navegación

Áreas de contenidos

Áreas de interacción

Experiencia de usuario

Si se revisa el siguiente esquema (también llamado wireframe), se podrá ver la ubicación relativa de todos ellos:

Uso de logotiposDe acuerdo a las normas que rigen a los Sitios Web, en particular el Decreto Supremo 100/2006 delMinisterio Secretaría General de la7.- Más información en http://www.useit.com/alertbox/reading_pattern.html8.- Más información en http://www.enquiro.com/research/eyetrackingreport.asp9.- Más información sobre este tema en el Capítulo 2 de esta guía, sobre “Aplicación de Estándares”.Figura 1. Las imágenes muestran lo más visto en los Sitios Web a partir de las investigaciones de J. Nielsen; los colores rojos y amarillo indican lo másvisto; azul y gris, lo menos visto (Copyright imagen: www.useit.com).Figura 2. diagrama que muestra los diferentes elementos que dan forma a la interfaz.

114

Presidencia (Artículo 3°)9, los Sitios Web deben utilizar el icono que identifica al Gobierno, aunque se plantea que es posible obtener autorización de parte del Ministerio Secretaría General de Gobierno para omitirlo y en cambio, utilizar elementos alternativos.

En este sentido la norma no indica cuál debe ser la ubicación o tamaño del logotipo, por lo que en los Sitios Web actualmente en funcionamiento se pueden encontrar diversas formas de dar cumplimiento a la misma.

Lo importante, en este sentido es que el espíritu de la norma es que el usuario que ingrese al sitio web entienda a quién pertenece el sitio web de un solo vistazo y no tenga que estar adivinando si ha llegado al lugar que deseaba visitar.

Para enfatizar en esto, es recomendable que el logotipo de identificación se ubique en la esquina superior izquierda de las páginas por tratarse del lugar que siempre se mira con la mayor frecuencia y que, por la forma más tradicional de construcción del código HTML, aparecerá como uno de los primeros elementos de la pantalla.

A continuación se pueden ver algunos ejemplos de cómo los organismos públicos utilizan este elemento de identificación:

115

Figura 3. El sitio web del Gobierno de Chile muestra el logotipo y una URL como nombre oficial.

58 < www.guiaweb.gob.clGuía para Desarrollo de Sitios Web - Versión 2 - Gobierno de ChileFigura 4. El sitio web del Ministerio de Relaciones Exteriores muestra el logotipo más su nombre en una fuente demayor tamaño, ambos ubicado al centro de la pantalla.Figura 5. El sitio web del Ministerio de Economía muestra el logotipo más su nombre en el tamañotradicional al lado izquierdo.

116

Respecto del uso del logotipo, se debe tener en cuenta que los órganos de la Administración Pública pueden obtener autorización para no emplear el logotipo señalado y en cambio utilizar el que tengan como institución. Ejemplos de este tipo se ven habitualmente en Sitios Web como el del Instituto Nacional de Estadísticas y el del Servicio de Impuestos Internos, ambas entidades dependientes del Ministerio de Hacienda.Figura 6. El sitio web del Ministerio de Trabajo muestra el logotipo más su nombre en el tamaño tradicionalal lado derecho.Figura 7. El sitio web del Instituto Nacional de Estadísticas también muestra un logotipo propio.

Siguiendo con la identificación del sitio web, otro elemento que ayuda en este aspecto es elcorrecto uso de la etiqueta <title> en la cabecera de las páginas web10 , a través de la cual sedefine el título que mostrará el sitio web en la parte superior de la ventana del browser utilizado.

En las imágenes anteriores se puede apreciar en la barra azul que aparece al tope de cadaimagen. En este sentido se recomienda que lleve el nombre del sitio web más un título que describa el contenido de la página, debido a que dicha información será la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha página.

Finalmente en este aspecto se debe señalar que utilizando los dos elementos antes señalados, el usuario debe recibir la información suficiente

117

para saber que está en un sitio web de un organismo del Gobierno de Chile y además, conocer el nombre de dicho servicio.

> Sistema de navegación

Se denomina “sistema de navegación” al conjunto de elementos presente en cada una de las pantallas, que permite a un usuario moverse por las diferentes secciones de un sitio web y retornar hasta la portada, sin sentir la sensación de haberse perdido en ese camino.

Para conseguir este objetivo el diseño web debe contemplar, al menos, que el sistema de navegación cuente con los siguientes elementos:

Menú de secciones: es una zona de la interfaz en la que se detallan las secciones o categorías en las que está dividida la información contenida en el sitio web. Normalmente se ubica en la parte superior de cada página o bien en la zona superior derecha o izquierda. Hasta la aparición de los últimos estudios basados en “eyetracking”11 no había una recomendación certera acerca de su ubicación; tras éstos, parece indicado ubicarlos en la zona superior o en la zona superior izquierda. Se debe evitar el uso de nombres complejos y preferir palabras de fácil y rápida comprensión.

10.- Más información de este tema en la sección “Encabezado de Página” del Capítulo 2 de esta versión de la Guía Web.11.- Ver subtítulo “Elementos de la interfaz”, antes en este mismo capítulo.

El contenido de la etiqueta <title> es de gran importancia: su contenido es usado por los buscadores para crear un enlace en sus páginas de resultados, que lleve hacia nuestro sitio.

Menú de rastros: es el menú que indica mediante los nombres de cada sección o categoría del menú, la distancia que separa a la página actual de la portada.

Por ejemplo, si el usuario está revisando la página del “Programa A”, el menú correspondiente debe indicar Portada > Programas > “Programa A”. Este menú debe ir siempre debajo de la Identificación de la sección o categoría y sobre el título.

Identificación de secciones: debe estar en la zona superior de la página, de manera cercana la zona donde se encuentra el logotipo que se haya elegido para identificar al sitio web. Puede ser gráfico y por lo mismo tener alguna imagen alusiva a la sección o categoría o bien ser una solución que incorpore sólo texto y color. Sí debe tener en forma destacada el nombre de la sección o categoría y por lo mismo, debe aparecer en todas las pantallas que pertenezcan a dicha ésta. En términos de tamaño, su ancho debe ser el de la zona de contenido y su alto, no menor a 100 pixeles (aproximado) para una adecuada visualización. Si usa colores, recuerde que deben tener contraste adecuado para ser usados por personas con problemas de visión disminuida.

Enlaces de acción: son aquellos elementos que permiten realizar acciones directas

118

relativas a la navegación y que se muestran como parte de ésta, tales como los correspondientesa “Regreso a la Portada”, “Contacto”, “Envío de Mail al Sitio” y “Mapa del Sitio”.

Pie de página: aunque regularmente no se le concede importancia en términos de navegación, se entiende que la zona inferior de cada pantalla cumple el relevante papel de completar su la información que se ofrece en las zonas superiores de navegación, al entregar datos relativos a la organización (nombre, direcciones, teléfonos), política de privacidad y repetir enlaces que se han entregado en la zona superior, para facilitar el contacto del usuario con el sitio.

> Áreas de contenidosSe entiende por “áreas de contenidos” a las zonas en la que se entrega la información en cada página web, sin importar el formato o los medios que ésta utilice.

Eyetracking: sistema de comprobación de usabilidad que permite identificar qué está mirando un usuario en una pantalla.

Dentro de la zona de contenido se debe distinguir las zonas de título, resumen e información propiamente tal.

Para la zona de título, como se especificó previamente en esta versión de la Guía se debe trabajar con las estructuras definidas por las etiquetas <h…> que permiten indicar hasta seis niveles de importancia de los titulares (incluyendo títulos y subtítulos) utilizados en el documento. Es imprescindible para efectos de Accesibilidad por parte de personas con discapacidades físicas, en particular para quienes tienen problemas de visión, que el título principal del contenido se escriba usando la etiqueta HTML conocida como <h1> debido a que los lectores de pantalla usada por personas ciegas lo destacan como el título principal de lapágina.

El resumen en tanto, permitirá explicar en dos o tres líneas el contenido de la página y se podrá utilizar esa misma información para la etiqueta del encabezado que permite incluir una descripción .

Respecto del contenido o información propiamente tal, se debe privilegiar el uso de textos cortos, separados por subtítulos significativos que permitan entregar de manera concisa y clarea la información al usuario. Se debe recordar que las personas no leen en pantalla de la misma forma que en los documentos impresos, por lo que se debe privilegiar la economía de palabras.

Adicionalmente, como parte de los contenidos, siempre se deberá ofrecer información adicional, recursos multimediales y otros que aprovechen el hecho de que el usuario accede a la información a través de un sistema computacional.

119

Nuevamente, se debe recordar que los contenidos que no sean textuales deberán cumplir con las normas de accesibilidad recomendadas por el W3C14 las cuales han sido adoptadas por el Gobierno de Chile a través del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia15.

> Áreas de interacciónSe entiende por “áreas de interacción” a las zonas en la que se ofrece realización de acciones por parte de los usuarios del sitio web, a través de las cuales pueden utilizar los servicios de la institución que pone en marcha el espacio digital. La interacción, en este sentido, va desde acciones menores que pueden ser enlaces para mayor información o suscripción a servicios informativos periódicos, hasta la realización de

14.- Sobre este tema ver http://www.w3c.org/WAI y también en http://www.modernizacion.cl la Guía de Accesibilidad para Discapacitados enSitios web elaborada por el Comité de Normas para el Documento Electrónico.

15.- Sobre Accesibilidad ver: http://www.guiaweb.cl/recursos/documentos.htm#bdragDS100

trámites complejos como la obtención de certificados o el pago de obligaciones.

Uno de los elementos que se debe tener en cuenta en este aspecto es que el usuario normalmenteentiende que las zonas de contenidos son para leer y revisar información y las zonas de interacción son las que muestran botones y en ellas no se lee, sino que se ingresa información y se desarrolla la actividad que el sitio ofrece llevar a cabo.

Por lo mismo, es necesario que en las zonas de interacción haya la mínima información posible y que siempre sea la necesaria para llevar a cabo en forma adecuada la acción a que se refiere la interfaz.Por ejemplo, debido a que normalmente la interacción tendrá lugar a través de un formulario, es necesario que éste sólo cuente con los datos mínimos para que el usuario ingrese lo solicitado para activarlo. En los siguientes ejemplos se hace un comentario sobre esta forma de trabajo:

Ejemplo 1: la pantalla muestra un sistema de interacción directa a través de un formulario que sólo ofrece información básica, ya que todo está explicado mediante elementos del propio formulario en la página web; el texto, por lo mismo se reduce al mínimo.

Ejemplo 2: el formulario contiene mucha información, pero en términos prácticos el usuario no la lee porque está interesado en la acción propuesta en el formulario, que es ingresar RUT y Clave.

Como se puede apreciar a partir de los ejemplos, es necesario que las zonas de interacciónestén diseñadas de manera que privilegien la acción. Si se desea dar información relativa aésta, debe ofrecerse mediante enlaces relacionados y ubicados en las cercanías y no a través

120

del despliegue de texto en el mismo lugar porque queda claro que éste no será leído.

W3C: la sigla identifica al World Wide Web Consortium; su sitio web está en www.w3.org.

Figura 8. El formulario ofrece la información precisa para ser utilizado.

Figura 9. El formulario ofrece información importante pero que regularmente no es leída

> Experiencia de usuario

Se entiende por “Experiencia de usuario” lo que siente y experimenta un usuario que ingresa a cada página web. Si bien no es fácil de medir y adquiere un tono subjetivo al hablar de sensación, sí es un elemento que se puede modelar gracias al uso de diferentes elementos que son empleados por el usuario que visita el sitio web.

Además de ser un campo de estudio muy abordado desde diferentes disciplinas, el área de Experiencia de usuario ha recibido aportes muy notables en el último tiempo gracias a la introducción de tecnologías de seguimiento de las acciones del usuario en un sitio web, tales como las de “eyetracking” mencionada antes que han permitido entender de manera

121

real y concreta la manera en que los usuarios emplean los espacios digitales.

En este sentido, se ha observado que los usuarios necesitan confirmaciones visuales de las percepciones que tienen de los contenidos que revisan. Por ejemplo, la utilización de un lenguaje claro genera una tasa de respuesta más alta que cuando el lenguaje utiliza palabras que no son tan conocidas para el usuario.

Lo mismo ocurre cuando los elementos interactivos como enlaces, botones y zonas de ingreso de información no se presentan con las formas a las que el usuario está acostumbrado.

Debido a lo anterior, a continuación se entregarán recomendaciones acerca de tres elementos que son claves en la experiencia que tiene el usuario y que se utilizan con gran frecuencia: nos referimos a los enlaces, botones y formularios.

Uso de botones

Los botones son los elementos que permiten que el usuario realice o confirme acciones solicitadas en las pantallas del sitio web. Por lo mismo, su forma debe ser estándar, similar en todo el sitio y no ofrecer dudas acerca de su presencia o de la acción a la que invita.

Para ello es necesario que se cuide tanto su aspecto físico como la palabra que contiene, ya que ambos permitirán que el usuario entienda, sin lugar a dudas, qué ocurrirá si lo presiona.

Figura 10. El buscador siempre debe tener una forma estándar.

En el ejemplo de la Figura 10, queda claro que hay un espacio para escribir y luego el botón Buscar; además se ofrece un breve título explicativo de lo que permite hacer el formulario. De esa manera se facilita la comprensión

122

del funcionamiento del mismo y el usuario tiene claro cuál será el efecto de la acción que emprenderá.

En el ejemplo de la Figura 11, hay dos cambios importantes: el formulario no tiene un título que explique para qué es el formulario de manera breve, sino que se enfoca a lo que el usuario ya sabe, que es que debe ingresar una palabra o frase para buscar; además el botón al no decir sólo “Buscar” también genera un problema de comprensión ya que obliga al usuario a pensar si efectivamente eso es un botón o es una etiqueta descriptiva.

Otro elemento importante es la palabra que acompaña al botón. Esta necesariamente debe estar relacionada con la acción a realizar y dicha acción debe ser coherente con lo que se ofrece en la pantalla en la que se esté trabajando. Además, debe ser una sola palabra y corresponder a un verbo que defina adecuadamente la acción ofrecida.

Finalmente el último elemento relevante es que el botón debe cambiar de estado cuando el mouse está sobre él, utilizando alguna tecnología que haga evidente su comportamiento como botón activo.

En conclusión, para que un formulario sea efectivo y apoye la experiencia que tendrá el usuario que visite el sitio web, los botones deben parecer tales (en tamaño, forma, acción y contenido) y deberán estar ubicados de manera que el usuario sepa qué ocurrirá cuando los presione. Asimismo, deben ser parte integrante de formularios que logren indicar en una frase breve y explicativa, qué ocurrirá al utilizarlos.

Uso de enlaces

Los enlaces son una de las características esenciales de los sitios web, ya que permiten al usuario visitar otros documentos del mismo o externos, sólo haciendo

Figura 11. La carencia de título explicativo y el botón poco estándar afectan la comprensión de la acción ofrecida.

123

clic sobre una zona demarcada. En este sentido, si bien el estándar indica que el enlace debe ser subrayado y de color azul, los cambios tecnológicos han permitido que haya otras formas de hacerlos evidentes.

No obstante, hay ciertos elementos que siguen siendo esenciales respecto de los enlaces y son los siguientes:

1. Deben ser diferentes al texto: los enlaces se deben diferenciar del texto que los rodea para explicar visualmente al usuario que se ofrece una acción a partir de su contenido. La forma de diferenciarlo puede variar pero al menos se debe procurar que esté subrayado y de color diferente o bien, si no está subrayado, sí se debe mostrar en otro color.

2. Su estado debe ser visual: los enlaces tienen cuatro estados posibles los que deben visualizarse de manera simple y directa (Ejemplo en Figura 12).

a. Enlace sin visitar: es el color que tiene antes de que se le haga clic encima; su color debe ser diferente del texto que lo rodea.

b. Enlace destacado: es el color que puede adoptar cuando se le pasa el mouse sobre el enlace y permite ayudar al usuario a descubrir su existencia.

c. Enlace activo: es el color que tiene cuando se le da clic encima; normalmente es un color fuerte que permite notar que se le ha activado.

d. Enlace visitado: es el color que tiene el enlace cuando ya ha sido activado y la página a la que conduce ya ha sido visitada.

3. Su contenido debe ser explicativo: los enlaces deben contener palabras que expliquen hacia dónde se dirige la acción, de tal manera de evitar que lo enlazado sean frases como “clic aquí” y otras similares. Adicionalmente y para efectos de aumentar su accesibilidad, la sintaxis HTML de los enlaces debe contener el modificador “title” de tal manera que se despliegue un recuadro explicativo (ver Figura 13) acerca del efecto que tendrá hacer clic sobre el enlace elegido.

124

Figura 12. En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces.

Uso de elementos específicosLos restantes elementos interactivos que requieren ser revisados son los que permitendefinir el tipo de interacción que se desea ofrecer a los usuarios del sitio web a travésde un formulario.El primero de ellos es el llamado “Text Area” que es el que permite que el usuariopueda ingresar información en los formularios. Respecto de éste, se define comobuena práctica ofrecer un espacio adecuado para escritura (por ejemplo, 500 caracteresque equivalen a seis líneas de texto). Sin embargo, una práctica más adecuadaconsiste en emplear un contador reverso que informe el total de caracteres que sepuede escribir y que los vaya restando a medida que el usuario va ingresando lainformación; de esa manera se le ofrece una retroalimentación adecuada.El segundo elemento es el “check button” que permite marcar las opciones quesean las más adecuadas para la acción que se esté realizando dentro de un formulario.Hay que tener en cuenta que un campo de este tipo siempre permite laselección múltiple de opciones.El tercer elemento es el “radio button” que permite marcar la opción más adecuadapara la acción que se esté realizando dentro de un formulario; normalmente setrata de opciones excluyentes entre ellas.Capítulo 3 - Diseño de Interfaces e Interacciónwww.guiaweb.gob.cl > 67

Figura 13. En la imagen se ve cómo el texto explicativo ofrece más información sobreel enlace.

125

Figura 14. En la imagen se ve el uso del radio button para marcar el campo Sexo.

16.- Más información en http://www.adobe.com/products/flash/17.- Ver en http://www.guiaweb.gob.cl/guia/capitulos/tres/accesorapido.htm#t04flash18.- Ver más en http://acceso.uv.es/accesibilidad/flash/Index.html19.- Ver más en inglés en http://www.adobe.com/resources/accessibility/best_practices/bp_fp.html

Para efectos de que el usuario tenga una experiencia adecuada al usar el sitio web, es imprescindible que los elementos citados sólo se empleen de la forma señalada.

Desafíos de nuevas tecnologíasUno de los desafíos de los encargados de los Sitios Web será siempre ir avanzando al mismo paso que lo hacen las tecnologías que se utilizan para desarrollarlos. En este sentido, en esta Guía se decidió incluir referencias para dos de ellas que son Flash y Ajax, debido a que con ambas se enfrentan problemas relacionados con la accesibilidad que pueden ser resueltos adecuadamente.

Uso de FlashFlash es una tecnología propietaria de la empresa Adobe16 que tiene como objetivo ofrecer interactividad en un entorno gráfico mejorado. Debido a que tiene herramientas para hacer un uso especializado de sonidos, imágenes y video, es el entorno más utilizado cuando se desea ofrecer información de este tipo.

Ya en la primera versión de la Guía Web17 se entregaba una recomendación para evitar el uso de esta tecnología en la portada del sitio web, explicándose que “su uso recarga la presentación del sitio y si la presentación no está bien hecha, puede impedir el acceso de los robots de búsqueda al interior del mismo”.

Con el tiempo transcurrido y las sucesivas versiones de esta tecnología, se ha avanzado en la especificación de su accesibilidad, existiendo variados ejemplos para ofrecer formas de acceso paralelas18. Adicionalmente la

126

propia empresa ha ofrecido guías19 para hacer accesibles las aplicaciones hechas con Flash (desde la versión Flash MX 2004 en adelante) que permiten ofrecer alternativas no gráficas para sus pantallas gráficas.

Entre las acciones que se deben realizar en este sentido se cuentan las siguientes:

1. Utilizar equivalentes de texto para los elementos gráficos que se incluyan en las escenas de la película Flash; la aplicación ofrece una paleta de accesibilidad en que se puede realizar esta operación de manera simple y directa. En todo caso los equivalentes deben ser completos y descriptivos, no sólo el nombre del objeto gráfico que se incluye.

2. Habilitar la accesibilidad para objetos: de esta manera los equivalentes de texto serán utilizados como las descripciones de texto para botones y otros controles utilizados en la película Flash.

3. Ofrecer una descripción para la película: cuando se genera un botón con el nombre “site info” en la que se describe la escena, los lectores de pantalla reciben la información adecuada para ser leída por dichos software.

4. Entregar controles de teclado: se deben habilitar atajos de teclado que permitan manejar la película Flash de la misma manera en que se utiliza el mouse.

5. Asegurar el contraste de colores: personas con problemas visuales tienen dificultades para ver determinados contrastes de colores, por lo que los elementos gráficos deben ser tratados de manera que haya un contraste suficiente que permita su comprensión.

Uso de AjaxAjax20 es una combinación de tecnologías que se basa en el lenguaje Javascript para ofrecer una experiencia de intercambio dinámico de información en Sitios Web, enriqueciendo la experiencia de revisar datos y conseguir resultados de manera rápida y confiable.

Ajax en sí no es una tecnología, sino que una implementación de varias tecnologías ya existentes tales como XHTML y CSS para mostrar páginas web; Document Object Model (DOM) para mostrar e interactuar dinámicamente con la información presentada; el objeto XMLHTTPRequest que permite realizar peticiones HTTP y HTTPS a servidores WEB de manera asíncrona y XML para intercambio de información entre el browser del usuario y el servidor que contiene la información.

Debido a que se basa en un lenguaje de scripting como Javascript, el cual se puede usar con fines maliciosos como extraer información de parte del usuario, muchas veces se puede dar el caso que dicha capacidad no está habilitada en el browser utilizado.

127

Si este es el caso, la aplicación que utilice Ajax también quedará desactivada21.20.- Más información sobre Ajax en Wikipedia: http://es.wikipedia.org/wiki/AJAX21.- Más información sobre este tema en: http://olgacarreras.blogspot.com/2007/02/ajax-accesible.html22.- Ver más información en: http://www.w3c.es/Prensa/2006/nota060926_aria-pressrelease

En este sentido se sugiere que desde la programación de la aplicación se haga este tipo de detección con el objetivo de ofrecer una interfaz distinta en dicho caso y, gracias a eso, entregarotra forma de interactuar con la pantalla que permita utilizar la aplicación que se ofrece. Esimportante señalar que al tiempo de la edición de este documento, la organización W3C está desarrollando un nuevo estándar orientadas a las aplicaciones de interacción enriquecida22 con el objetivo de definir la mejor manera de hacerlas accesibles y que funcionen en los diferentes entornos desde las cuales son utilizadas.

Desarrollo con estándares XHTML y CSS

Con la publicación del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia que contiene la Norma Técnica para el desarrollo de Sitios Web de organismos de Gobierno23, se definió que éstos debían desarrollarse empleando los estándares definidos por el World Wide Web Consortium, más conocido y citado previamente en esta Guía como W3C.

En lo que se refiere a estándar para el código de despliegue, en el Artículo 5° “se recomienda que el sitio web cumpla con los estándares HTML 4.01 o XHTML 1.0 validados ante el W3C”.

Debido a que los avances de los estándares web son hacia el estándar XML que además es el estándar elegido para el intercambio de documentos electrónicos del Gobierno de Chile, en esta Guía se ha privilegiado destacar el trabajo con XHTML 1.0 con el fin de destacar las características de su utilización sobre los estándares anteriores.

Entre las diferencias más relevantes de XHTML respecto de HTML y que deben ser tenidas en cuenta, aparecen las siguientes24:

El documento debe estar bien formado con todas las etiquetas cerradas en el mismo orden en que se abren, vale decir, en el caso de etiquetas que se abren dentro de otras, deben ser cerradas en el mismo orden.

No puede haber elementos vacíos, por lo que las etiquetas que no tienen cierre deben completarse con un “slash” al final, como en <img … />,<br /> y <hr />.

23.- Ver contenido del DS 100 en: http://www.guiaweb.cl/recursos/documentos.htm#bdragDS10024.- Extraído de http://www.w3.org/TR/xhtml1/#diffs y http://es.wikipedia.org/wiki/XHTML

Ajax: la sigla significa Asynchronous JavaScript And XML (JavaScript asíncrono y XML).

128

Las etiquetas deben escribirse en minúsculas debido a que XML es sensible a mayúsculas y minúsculas.

Los valores de los atributos deben encerrarse entre comillas "dobles".

La información de scripts como los de Javascript debe ser incluida dentro de marcadores especiales llamados [CDATA]. Por ejemplo:

Los elementos ya no pueden usar el identificador “name” el cual debe ser cambiados por el identificador ID.

Debido a estas diferencias, los desarrolladores que migren sus Sitios Web hacia el nuevo estándar deberán hacer varias modificaciones ya que como se aprecia, el uso de XHTML obliga a ser estricto en el cumplimiento de la especificación, en especial en el uso de minúsculas y en el cierre de todos los elementos, tema que en las versiones anteriores de HTML no era tan crucial.

Separación de contenidos y presentación

Otro de los mandatos del Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia ya señalado, aparece en el Artículo 10° donde se indica que en las páginas que forman parte del sitio web, se debe separar los contenidos de la presentación, aprovechando las características señaladas del estándar XHTML.

Tal como se indicó en el Capítulo 2 de esta Guía, este es un cambio de importancia en lo referido al diseño web, ya que incluso hasta la aparición de la Guía Web Versión 1.0 habitualmente se empleaba tablas para disponer los elementos en las páginas, facilitando de esa manera su ubicación en la pantalla.

Para conseguir esta separación es necesario incorporar la tecnología de las Hojas de Estilo en Cascada (CSS por su sigla en inglés) que permiten manejar la presen-

<script type="text/javascript"><![CDATA[... unescaped script content...]]></script>

tación de manera externa al contenido. De esta manera, será posible ofrecer páginas con diagramación diferente de la plataforma desde la que se acceda o, incluso, contar con la posibilidad de ofrecer una mejor diagramación para efectos de su impresión.

129

Como se ve en el ejemplo anterior, tomado de las páginas del sitio web de la Guía Web Versión 1.0, usando CSS se puede ofrecer diferentes visiones del mismo contenido sin hacerle cambios a sus páginas. Lo único que corresponde en dicho caso es modificar el archivo de presentación de los contenidos, lo cual se hace a través de los archivos de CSS. Entonces al revisar el código de sus páginas se puede encontrar en la parte del <head> las siguientes líneas:

Figura 15. Dos imágenes del mismo contenido: a la izquierda, visión desde web y a la derecha, visión desde el impreso.

<link href="../../../styles/main.css" rel="stylesheet" type="text/css"/><link href="../../../styles/print.css" rel="stylesheet"type="text/css" media="print" />

Cabe señalar que al avanzar en el uso de CSS se puede ver que este estándar se encuentra preparado para ofrecer soporte a diferentes tipos de dispositivos25 entre los que se cuentan aparatos como agendas móviles,

130

sistemas de proyección, aparatos para lenguaje Braille y otros. Es importante consignar además, que al momento de edición de este documento se encuentra en proceso una versión de CSS para teléfonos móviles26 por parte de W3C.

Uso de Elementos para diagramar

Junto con el uso de CSS es importante indicar que la separación de contenidos y presentación debe ir acompañada por la utilización de varios elementos de la sintaxis XHTML que permiten hacer la diagramación y presentación final de los contenidos.

Uno de los principales es el elemento <div> que permite señalar los bloques de información y su ubicación dentro de la pantalla. <div> proviene de la palabra "división" y es utilizada para crear secciones o agrupar contenidos.

Normalmente este elemento puede llevar la información sobre su presentación en forma local, es decir en el propio archivo (como en el caso de este ejemplo, usando el atributo style), o bien puede tener asignado un ID (identificador) mediante el cual se le da un nombre que puede ser referenciado desde CSS para aplicarle un estilo al bloque. El problema en este caso, es que la presentación queda ligada al contenido, lo que no es aconsejable.

Adicionalmente el elemento <div> puede recibir como argumento una ubicación espacial dentro de la pantalla, lo que permite generar una diagramación del sitio web controlada sólo por CSS. Para ver un ejemplo detallado sobre esta forma de trabajo, se recomienda revisar el ejemplo que se entrega en el Capítulo 2 de esta versión de la Guía.25.- Ver más información en http://www.w3.org/TR/REC-CSS2/media.html26.- Ver más información en http://www.w3.org/TR/css-mobile/

<div style="border: 1px solid black;"><h2>Espacio generado por DIV </h2><p>Este es un párrafo creado dentro de un bloque demarcado por DIV.</p></div>

131

Dentro del elemento <div> se pueden utilizar otros dos para asignar tipos de presentación especial a los contenidos. El primero es el elemento <p> que permite generar párrafos de información textual, a la cual se le asignan valores mediante atributos de CSS.

El segundo es el elemento <span> que es un contenedor que se utiliza para aplicarestilo en forma directa al texto.

En el ejemplo anterior se ve cómo el elemento <span> aparece dentro de un párrafoy permite generar un tipo de presentación específico para una parte del texto.

<div style="border: 1px solid black;"><h2>Espacio generado por DIV </h2><p>Este es un párrafo creado <span style="color: red;">dentro</span>de un bloque demarcado por DIV.</p></div>

Capítulo 4:Resumen

Cómo se llega al Sitio WebEn la Guía Web Versión 1.0 se hizo una mínima referencia a la importancia de que el Sitio Web estuviera bien indexado en los sistemas de búsqueda en Internet, debido a que para la fecha de esa edición, éstos no tenían la relevancia que han adquirido con el tiempo. Esto se corrige en la presente edición, debido a que actualmente un Sitio Web corre el riesgo de "no existir" si sus contenidos no han sido indexados por los sistemas de búsqueda y recuperación de información y no tan sólo a través de la búsqueda del nombre de la institución, sino también, a través de los principales temas a los que ésta se dedica.

Este capítulo introduce el concepto de la Encontrabilidad que es una traducción libre del término inglés "findability", el cuál se puede entender como la "habilidad para ser encontrado". Para efectos de esta versión de la Guía Web, entenderemos la "Encontrabilidad" como la facilidad para que los contenidos de un Sitio Web puedan ser indexados y luego encontrados por sistemas de búsqueda externos e internos.

En el Sitio Web este capítulo es presentado en el menú con el nombre de "Encontrabilidad".

132

> Introducción / Cómo se llega al sitio webEn la Guía Web Versión 1.0 se hizo una mínima referencia a la importancia de que el sitio web estuviera bien indexado en los sistemas de búsqueda en Internet, debido a que para la fecha de esa edición, éstos no tenían la gran relevancia que han adquirido con el tiempo.

Esta situación se corrige en la presente edición de la Guía, debido a que actualmente un sitio web corre el riesgo de “no existir” si sus contenidos no han sido indexados por los sistemas de búsqueda y recuperación de información y no tan sólo a través de la búsqueda del nombre de la institución, sino también, a través de los principales temas a los que ésta se dedica. Debido a lo anterior, se debe hacer un trabajo permanente tanto en la sección visible del sitio web (contenidos, imágenes y otros elementos similares) como en la invisible para los usuarios(keywords, meta tags, archivos destinados a robots de búsqueda), para asegurarque ellos siempre puedan llegar al sitio web a través de los buscadores.

Por lo tanto, este capítulo introduce el concepto de la Encontrabilidad que es unatraducción libre del término en inglés “findability” que se puede traducir como la“habilidad para ser encontrado”. Entonces, para efectos de esta versión de la Guía Webentenderemos la “Encontrabilidad” como la facilidad para que los contenidos de un sitioweb puedan ser indexados y luego encontrados por sistemas de búsqueda externos e internos.

Esta capacidad será el elemento clave que nos permita asegurar que los contenidos que se ofrecen a través del Sitio Web estarán adecuadamente indexados, facilitando de esa manera el acceso directo a la información desde los sistemas de búsqueda.

Para cumplir con este objetivo tan importante, los administradores de los Sitios Web de Gobierno deberán tener presente la importancia de llevar a cabo las tareas relacionadas con los siguientes aspectos:

1. Generación de los contenidos: se refiere a que los contenidos del Sitio Web deben ser escritos teniendo en mente la forma en que el usuario final denomina a los temas que incluye el sitio. Se debe considerar que si se habla en el lenguaje del usuario, será más fácil que un sistema de búsqueda muestre entre

Findability: facilidad para que los contenidos de un sitio web puedan ser indexados y luegoencontrados por sistemas de búsqueda externos e internos.

133

E1.- Ver Capítulo II de la Guía Web 1.0 en http://www.guiaweb.gob.cl/guia/capitulos/cuatro/objetivos.htm

sus resultados los contenidos ofrecidos por el sitio ya que contendrán las mismas palabras utilizadas por el usuario que busca.

2. Presentación de los contenidos: se refiere a que las páginas del sitio web deben ser preparadas para que tengan una estructura válida, en la cual haya consistencia entre los elementos de titulación y los contenidos propiamente tales, de manera que no haya alguna discordancia que las lleve a ser penalizada por los buscadores.

3. Apoyo a los robots de búsqueda: se refiere al adecuado manejo de las cabeceras de laspáginas (es decir, los contenidos de la etiqueta <head>); el contenido del archivo robots.txt; lageneración del archivo estándar sitemaps.xml y la revisión del sitio mediante herramientas quesimulan la acción de un “spider” de búsqueda.

4. Monitoreo de sistemas de búsqueda: se refiere que se debe prestar atención permanente a los sistemas que reflejan la forma en que los usuarios acceden al sitio web, ya que de esta manera se podrá entender qué palabras están utilizando para ese efecto y optimizar el contenido para reflejar dichos términos.

> ¿Qué es la Encontrabilidad?Uno de los autores que ha apoyado con mayor fuerza el concepto de la Encontrabilidad es Peter Morville, a través de un texto del año 2006 titulado “Ambient Findability”2 cuyo epígrafe indica “lo que encontramos nos transforma”3.

Basado en la premisa “no puedes usar lo que no puedes encontrar” el autor destaca la importancia que tiene en la forma actual de usar la Internet, la capacidad de ser indexado puesto que es la forma más habitual que tendrán los usuarios de acceder al sitio web y emplear los contenidos que se ofrecen.

134

Adicionalmente, define el concepto de tres formas:

1. La capacidad de ser ubicado o de ser navegable.

2. El grado en el que un objeto determinado es fácil de descubrir o ubicar.

2.- Más información del libro en la Editorial O’Reilly: http://www.oreilly.com/catalog/ambient/3.- Traducción libre de la frase “What We Find Changes Who We Become”.

Más información sobre Peter Morville se puede encontrar en el sitio http://findability.org/.

3. El grado en el que un sistema o ambiente apoya la navegación y recuperación por sus contenidos.

Por lo mismo, podemos entender que la calidad de "encontrable" de un sitio web dependerá de dos aspectos: su capacidad para ser encontrado a través de los sistemas de búsqueda de Internet y, una vez que los usuarios decidan llegar al sitio web, de la calidad de la navegación que encuentren internamente en el propio sitio.

Esto representa desafíos interesantes para el administrador del sitio web, ya que siempre deberá estar mirando ambos aspectos para tener la seguridad de que la experiencia que se ofrece a través de sus páginas, es coherente con las expectativas de quien llega a visitarlo.

> Sitios visibles e invisibles

Uno de los desafíos más importantes de todo administrador de un sitio web consiste en permitir que sus contenidos sean indexados por los sistemas de búsqueda de Internet.

Esta característica debe tener en cuenta el hecho de que el sitio web debe estar tanto preparado para ser indexado por sistemas automatizados, los cuales están basados en programas (conocidos como robots de búsqueda o spiders) que navegan a través de los enlaces ofrecidos por el sitio web y que le permiten descubrir las páginas de contenidos disponibles. Lo anterior significa que cada página debería ofrecer enlaces en lenguaje HTML4 hacia el resto del sitio web y, por lo mismo, que ninguna página del sitio debería estar aislada del resto. Para apoyar esta tarea, que ya se revisó en detalle en el Capítulo 3 en el subtítulo referido a “Sistema de Navegación”, es imprescindible que haya

135

enlaces en cada una de las páginas que hagan referencia al resto del Sitio Web, en particular que lleven a la Portada y al Mapa del Sitio.

Esta última página, a la que siempre se le da poca importancia, cobra a partir de esta circunstancia una relevancia mayor ya que es una colección de enlaces que debe ser visitada por el sistema de indexación de los buscadores porque constituye el punto de entrada al sitio web.

En este sentido es interesante tener en cuenta el trabajo "Características de la Web Chilena 2006"5 llevado a cabo por el Centro de Investigación de la Web de la

4.- Enlaces del tipo <a href.=...> que puedan ser seguidos por los robots.

Universidad de Chile, que dirige el profesor Ricardo Baeza-Yates, a través del cual sedeterminó que el 21,4% de los sitios chilenos muestra una sola página.

En dicho estudio se indica que dentro de los motivos por los cuales se encuentra solamente una página en el sitio, destacan los siguientes:

La página basa su navegación en la tecnología Javascript, por lo que es necesario interpretar dicho código para navegarla; como los robots de búsqueda no lo hacen, aparece como que no existen más y el contenido que exista no se incluye.

La página necesita un plug-in de la tecnología Flash para visualizar su contenido; esto ocurre habitualmente en sitios que tienen una introducción animada que puede ser vista por humanos, pero que no ofrece puntos de entrada para el robot de búsqueda; por lo tanto, para éste el sitio sólo tiene una página.

Lo anterior también es válido para aquellas páginas que emplean tecnología basada en Applets Java para la navegación, los cuales también impiden el acceso a los programas automáticos.

En los tres casos señalados se da el fenómeno que los robots de búsqueda no logran entender la sintaxis ofrecida en el código, ya que normalmente en los tres casos señalados de haber enlaces hacia el resto del sitio, estos se ofrecen desde el interior de programas que deben ser interpretados y no mediante enlaces basados en HTML.

Debido a esto, en dichos casos los robots no logran encontrar la forma de tener acceso al interior del sitio web y sólo guardan la información de la portada del sitio web.

Cabe indicar que, tal como se explica más adelante en este capítulo, en los tres casos señalados existen formas de ofrecer acceso alternativo a los robots de búsqueda, facilitando el acceso de estos al sitio pese al uso de dichas tecnologías en la portada.

> Posicionamiento del Sitio Web

136

Una tarea permanente del administrador del sitio web será la de determinar la posición relativa del sitio web en los sistemas de búsqueda, respecto de las pala-

Más información sobre Ricardo Baeza-Yates se puede encontrar en el sitio http://www.dcc.uchile.cl/~rbaeza/spanish.html.

bras más utilizadas por los usuarios. Para conocer cuáles son ellas, será muy importanteque se haga un monitoreo permanente y constante de las visitas (como se indica en el artículo 6 del Decreto Supremo 100/2006) para ver cuáles son las que llegan desde los buscadores y las palabras que se usan para eso.

Normalmente se deberá esperar que el sitio web esté indexado, lo que se puede comprobarescribiendo la dirección web principal del sitio en el buscador. El resultado deberá mostrar que el sitio efectivamente está indexado y aparece en la primera página de resultados.

Luego, deberá hacerse una búsqueda similar para las palabras que identifican al servicio u organismo al que pertenece al sitio web. Normalmente para las palabras más importantes, el sitio web debería aparecer entre los primeros lugares ya que de esa manera se podrá asegurar que los usuarios efectivamente verán el enlace y llegarán al sitio web por esa vía.Figura 1. Las imagen muestra el resultado de la búsqueda “declaración de renta” a través del sistema Google: entre los primeros están los sitios deGobierno que explican cómo hacerlo.

Posicionamiento web: se refiere a la ubicación relativa de un sitio web dentro de las páginas resultados de un buscador, para una o más palabras. Las técnicas para mejorar el posicionamiento se conocen como SEO - Search Engine Optimization (Optimización para Motores de Búsqueda).

137

Para ello, el sitio web debe estar preparado para ser indexado por sistemas automatizadosque llegarán como una visita más, y se deberá hacer el trabajo adicional de incluir elsitio en aquellos sistemas de directorio que sean más importantes en la web mundial.Para atender adecuadamente estos dos aspectos, es importante entender la diferencia entreambos ya que su comportamiento y forma de acceso varía notablemente, como también lohace la forma en que un sitio web puede llegar a quedar incluido en ellos.

Inclusión en Índices automatizados

Los índices automatizados se forman gracias a la actividad realizada por los buscadores de Internet (search engines en inglés) que utilizan robots que navegan y almacenan información de páginas, que luego integran a una base de datos general, a partir de la cual los usuarios hacen las búsquedas. Al momento de la edición de esta Guía, los más conocidos son Google, Yahoo!, LiveWeb (ex MSN), Ask, Teoma y Quaero.

138

Para asegurar que un robot de búsqueda llegue a un sitio web se requiere de cumplir con al menos las siguientes características:

Dar de alta el sitio web propio en algunos de los más importantes buscadores de Internet. Al menos se debe realizar esta acción en Google, Yahoo! y LiveWeb.

Dar y recibir enlaces hacia otros sitios de Internet, porque ésta es la única manera que un robot de búsqueda pueda conocer la dirección de nuestro sitio web al detectar nuestra dirección a partir de otro sitio web; adicionalmente en el caso de Google, esto contribuirá a su mejorar su índice “Page Rank”.

Ofrecer en la página de portada del sitio web los meta-tag que dirijan a los robots hacia los archivos robots.txt y sitemaps.xml cuyas características se analizan más adelante en este capítulo.

Ofrecer en la página de portada del sitio web un meta-tag que indique el sitio da permiso para ser indexado, tal como se explica más adelante en este capítulo.

Page Rank: es el algoritmo diseñado por Google para indicar la relevancia de unsitio web respecto de la calidad de sus contenidos; entre muchas variables, se determina a partir de su actualización, cantidad de enlaces entrantes y salientes y tiempo de vidadel sitio.

Ofrecer en la página de portada del sitio web un enlace hacia la página Mapa del Sitio, en la que se entreguen enlaces en lenguaje HTML estándar hacia todas las secciones del sitio web.Aunque hay más elementos que intervienen en la Encontrabilidad del sitio web como se analiza más adelante en este capítulo, al menos con los consejos anteriores se podrá asegurar que el sitio web está disponible para ser indexado por los robots de los sistemas de búsqueda automáticos.

Inclusión en DirectoriosLos directorios son índices manuales de contenidos, en los que los propios interesados inscriben sus sitios, los cuales posteriormente son analizados y catalogados por los encargados del sistema, habitualmente humanos.

Gracias a esto, los sitios que se integran a un directorio aparecen ordenados por categorías y subcategorías, permitiendo a los usuarios encontrar listados ordenados de sitios, lo que facilita entender los sitios similares y competidores de los que se revisan. Un directorio puede tener un buscador interno, pero sólo para ubicar lo que se busca dentro de todos los registros existentes. Entre los más conocidos al momento de edición de esta Guía se encuentran Yahoo! Directory y Open Directory Project (también conocido como DMOZ).

139

Figura 2. La imagen muestra la página de inicio de DMOZ.org, con sus contenidos separados por categorías.

Como se indicó, la única forma de integrar un directorio es por la suscripción manual del sitio, por lo que será tarea del administrador del sitio web tomar las medidas para que ello ocurra.

> Usuarios y Uso de Buscadores

En forma adicional a las tareas anteriores, el administrador del sitio web deberá tener información actualizada acerca de la forma en que sus usuarios están accediendo al sitio web desde los buscadores. Para ello será relevante revisar los informes de visita, ya que éstos cuentan con una sección en la que se analizan los referers del sitio web, que son las páginas desde las cuales llegan los visitantes gracias al uso de enlaces.

Gracias a esto se podrá saber cuáles son los buscadores más utilizados y cuáles son las palabras que han motivado a los usuarios a llegar al sitio web por esta vía. Este conocimiento permitirá, además, contar con una forma concreta de saber cómo se muestran los contenidos del propio sitio web en los buscadores y, a partir de ello, determinar cuáles pueden ser las reformas que se pueden aplicar para optimizar dicha experiencia.

Cabe señalar que más adelante en este capítulo se analizan algunos de los elementos principales que permiten mejorar la capacidad de los contenidos para ser encontrados, por lo que se puede seguir sus indicaciones como una guía de buenas prácticas para ayudar a la Encontrabilidad. Esto se debe a que no sólo influye el hecho de inscribir el sitio en un buscador, sino que como se verá, hay una serie de elementos que contribuyen a hacer más eficiente dicha inclusión de tal manera que cuando los usuarios busquen contenidos que están integrados al sitio web, éste aparezca siempre en la primera página. Esto último es relevante ya que abundantes estudios al respecto, indican que los usuarios siempre miran los resultados de dicha página6, sin seguirmás allá.

140

> ¿Cómo se mide la Encontrabilidad?

Respecto de esto último, hay que tener en cuenta que los usuarios siempre estarán intentando llegar en la menor cantidad de pasos posibles hacia los contenidos que sean de interés para resolver sus necesidades de información. Debido a esto, su

Referer: es el nombre que reciben las páginas desde las cuales un usuario accede anuestro sitio web; su identificación se logra gracias a que quedan registradas en el logdel servidor.

intención siempre será que para las palabras que ingresan en los buscadores, haya algo de nuestro sitio que les permita acceder a nuestros contenidos.

La forma de asegurar esto tiene mucho que ver con los contenidos que se ofrezcan desde el sitio web, pero, principalmente, con el conocimiento de la forma en que los usuarios operan a través de estos sistemas. Esto significa un llamado a los administradores de los Sitios Web a estar permanentemente actualizados respecto de las últimas investigaciones y noticias respecto de estos temas, ya que ellas darán pistas sobre las actividades a realizar para estar máscerca de los usuarios.

En todo caso, la Encontrabilidad de un sitio web siempre estará relacionada con su habilidad para aparecer en las primeras páginas de los resultados de búsqueda de un buscador para aquellas palabras, frases y términos más relevantes relacionados con la institución, ya que será la única forma de asegurar que sea visto por quien utiliza dicho servicio. Por lo mismo, la Encontrabilidad será medida con esa característica: su habilidad para ubicarse lo más cerca posible de la parte superior de la primera página de resultados.

Relación con los motores de búsqueda

Para llegar a resultados de privilegio dentro de un sistema búsquedas, el administrador del sitio web deberá estar preocupado permanentemente de que se cumplan las buenas prácticas que se definen en las siguientes

141

páginas, pero además deberá estar revisando frecuentemente las estadísticas de su propio sitio para averiguar los siguientes elementos:

Determinar cuál es el buscador más utilizado en su sitio web, para aprender de sus usuarios cuáles son las palabras más usadas.

Determinar las páginas que reciben más visitas por esta vía, de tal manera de prepararlas con más elementos que lleven a los usuarios a conocer otros contenidos relacionados a partir de ellas.

Determinar cuál es el patrón de navegación a partir de esas páginas, para saber si ese ciclo se puede mejorar a través de contenidos más completos.

Determinar cada cuánto tiempo están visitando el sitio web los robots de búsqueda, para tener en cuenta ese dato para efecto de las actualizaciones del sitio web.

Como se puede adivinar a partir de lo anterior, los administradores deben realizar un trabajo permanente en torno a las estadísticas e informes generados por las visitas al sitio web, ya que es la única forma de ir aprendiendo de los usuarios, los cuales siempre tendrán actividades cambiantes relacionadas con la información que existe en el ambiente y que los motiva a visitar el sitio web del servicio propietario del sitio web.

Es importante, en este sentido, que el administrador revise los contenidos de noticias generales del país referidas a los temas abordados en el sitio web, para determinar las nuevas palabras que podrían llevar a los usuarios a buscar con dichos términos. Gracias a esto, podrá modificar o mejorar sus contenidos para que los nuevos términos también permitan que más usuarios lleguen al sitio web tras una búsqueda.

Finalmente una recomendación habitual es revisar los Sitios Web que salen antes en las páginas de resultados de los buscadores para los términos en los que el sitio web tiene participación, para indagar los eventuales motivos que los llevan a tener un mejor posicionamiento que el sitio propio.

Relación con los índicesA diferencia de los motores de búsqueda, la relación con los índices es menos dinámica, ya que sólo está asociada a la acción de conseguir que el

142

sitio web sea agregado a uno de ellos, sin que esto tenga modificaciones en el tiempo.

No obstante, hay que tener la precaución de revisar con cuidado la forma en que el sitio ha sido descrito en estos índices, ya que esto es realizado por personas que normalmente trabajan como voluntarios del sistema indexador.

¿Cómo se aumenta la Encontrabilidad?

Tras analizar las páginas anteriores queda claro que la meta de un sitio web será la de tener la mayor capacidad de ser encontrado desde los buscadores, ya que eso garantizará que los usuarios de Internet tengan acceso a la información que el sitio web puede ofrecer.

Para ello, en esta sección se aborda este desafío desde dos perspectivas: el código HTML y el contenido de las páginas, ya que desde ambos se contribuye a aumentar la capacidad de acercarse a este objetivo.

Lo primero que se analiza es el código HTML puesto que en la medida que el sitio web se desarrolle mediante el uso de código estándar habrá mayores posibilidades de que su posicionamiento sea mayor.

Estándares y Códigos relacionados

Aunque la Encontrabilidad de un sitio web tiene una serie de elementos desde los cuales se puede explicar su buen resultado en los buscadores, la calidad de su código es uno de lo más relevantes.

Como se ha explicado antes, el código del sitio web debe ser estándar y por lo mismo ofrecer un cumplimiento concreto en el uso de las etiquetas HTML a lo largo de sus páginas, siendo las de la zona del <head> las más relevantes.

Etiquetas de <head>Las páginas web bien estructuradas dividen su contenido en las zonas de <head> y <body>. La primera se ubica en la parte superior de las páginas y entrega información de referencia para el sistema computacional que utiliza y despliega la página, a fin de que pueda entender de qué manera se ha codificado el contenido y de esa manera mostrarlo adecuadamente a través del browser o programa navegador que se utilice.

Respecto de la Encontrabilidad, las etiquetas sobre las que hay que poner la mayor atención son las siguientes:

<title>: permite indicar el título que aparece en el encabezado de la ventana de cada página del sitio web7; se recomienda que lleve el nombre del sitio web más un título que describa el contenido de la página. Por ejemplo: “Ministerio del Interior - Chile: Acerca del Ministro”. De esta manera, esta

143

información será la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha página.

<meta>: una de las etiquetas “meta” de esta sección está orientada a dar una instrucción concreta a los robots de búsqueda, cual es la de indexar el contenido8. Para ello, su texto debe indicar lo siguiente:Es importante considerar que los modificadores que se agregan al elemento “content” tienen efecto sobre el buscador, de la siguiente manera:7.- Más información de este tema en la sección “Encabezado de Página” del Capítulo 2 y sección “Uso de logotipos” del Capítulo 3 de esta versión de la Guía Web.

8.- Más información en http://www.robotstxt.org/wc/meta-user.html

Robots.txt: se recomienda visitar el sitio http://www.robotstxt.org/ para obtener informaciónacerca del uso de este protocolo.

index: indica que el contenido debe ser indexado.noindex: indica que el contenido no debe ser indexado.follow: indica que los enlaces existentes en la página deben ser seguidos.nofollow: indica que los enlaces existentes en la página no deben ser seguidos.

Uso de robots.txt

En forma paralela a lo que se indique en cada página, para el sitio se debe generar un archivo que cumple una función similar a la señalada para la etiqueta <meta> anterior, cual es la de indicar a los robots de los buscadores cuál es la acción global que debe desarrollar en el sitio web.

Para ello, en la raíz del servidor se debe incluir un archivo de texto que lleve el nombre robots.txt y en el que se indique la información acerca de la acción a desarrollar9. El contenido estándar10 está dado por dos líneas, que son las siguientes:

Se debe considerar que la línea “User-agent” puede incluir el nombre de cualquier robot y que si tiene un asterisco, indica que la directiva se aplica a todos; en tanto que la línea “Disallow” permite indicar los directorios del sitio web que no se desee incluir en la indexación. Si está en blanco, indica que permite indexar todo el contenido del sitio web.

Es importante considerar que este archivo es revisado por todos los robots de búsqueda que acceden al sitio web por lo que es muy importante su presencia, ya que constituye una de las buenas prácticas en torno a los buscadores, debido a que forman parte de una suerte de bienvenida formal a todos los programas enviados por los sistemas de búsqueda de Internet.

Cómo mostrar contenidos

144

De acuerdo a lo indicado en los párrafos precedentes, el sitio web deberá cumplir con tener los siguientes elementos para asegurar que los buscadores de Internet los indexen:

<meta>: en esta sección la línea debe indicar lo siguiente:<META NAME="robots" content="index,follow">

9.- Ver Capítulo IV Guía Web, http://www.guiaweb.gob.cl/guia/capitulos/cuatro/queprobar.htm#t03robots10.- Más información en http://www.robotstxt.org/wc/exclusion.html

User-agent: * Disallow:

robots.txt: en este archivo el contenido debe indicar lo siguiente:

User-agent: *Disallow:

Cómo esconder contenidosPara evitar que el contenido del sitio web sea indexado, se debe tener el siguiente contenido en las páginas que no se desee incluir en los sistemas de búsquda:

<meta>: en esta sección la línea debe indicar una de los siguientes contenidos:<META NAME="robots" content="noindex,follow"><META NAME="robots" content="noindex,nofollow">

Con el primero se consigue no indexar el contenido, pero que el robot siga los enlaces ofrecidos; con el segundo se consigue que no haya indexación ni que se sigan los enlaces existentes.robots.txt: en este archivo el contenido debe indicar lo siguiente, dependiendo del caso:

User-agent: *Disallow: /

Con la primera línea se indica que la instrucción es para todos los robots y con la segunda, se señala que desde la raíz en adelante, no se debe indexar nada.

User-agent: *Disallow: /fotos/

Con la primera línea se indica que la instrucción es para todos los robots y con la segunda, se señala que el directorio llamado fotos no debe ser indexado.

Uso de sitemaps.xml

Como se revisó en las páginas anteriores, una de las dificultades más importantes referidas a la indexación en buscadores dice relación con la manera de indicar a Sitemaps.xml: se recomienda

145

visitar el sitio

http://www.sitemaps.org/es/protocol.php para obtener información acerca del uso de este protocolo.

estos sistemas cuáles son las direcciones de las páginas web que se desea incluir en ellos.Para enfrentar este tema, desde los sistemas de búsquedas se planteó el uso de un protocolo denominado Sitemaps que consiste en un archivo XML en el que se enumeran todas las URL de un sitio junto, a las que se agregan metadatos adicionales acerca de cada una de ellas. Por ejemplo, se indica la fecha de la última actualización, la frecuencia de modificación de sus contenidos y la importancia relativa de la página en el sitio.

Un archivo estándar de este tipo tiene el siguiente contenido:

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>http://www.example.com/</loc><lastmod>2005-01-01</lastmod><changefreq>monthly</changefreq><priority>0.8</priority></url></urlset>

Los elementos que se definen por cada línea son los siguientes11:

<urlset>: su contenido es obligatorio y es el que permite encapsular el archivo, haciendo referencia al protocolo sitemaps vigente.

<url>: también es obligatorio y es la etiqueta que permite definir cada una de las páginas web diferentes que se desea incluir en el archivo.

<loc> también es obligatorio y permite indicar la dirección o URL de la página que se incluye. Debe comenzar con el protocolo correspondiente (http en el caso del web) y termina con un slash (barra diagonal).

<lastmod>: es un valor opcional que permite indicar la fecha de la última modificación del archivo que se está incluyendo; para la fecha se usa el formato AAAA-MM-DD.

146

<changefreq>: es un valor opcional que hace referencia a la frecuencia con la

11.- Se puede ver más información en http://www.sitemaps.org/es/protocol.php

que cambia la página a la que se hace referencia; sus valores son en idioma inglés y corresponden a siempre (always), cada hora (hourly), diariamente (daily), semanalmente (weekly), mensualmente (monthly), anualmente (yearly) y nunca (never). Es importante considerar que el valor "always" se utiliza para describir documentos que cambian cada vez que se accede a ellos, mientras que "never" se utiliza para describir URL archivadas.

<priority>: es un valor opcional que permite informar a los motores de búsqueda las páginas que se consideran más importantes dentro del sitio web. Los valores aceptados abarcan desde 0,0 a 1,0. La prioridad predeterminada de una página es 0,5. De acuerdo a la información del protocolo, los motores de búsqueda pueden utilizar esta información para elegir entre varias URL del mismo sitio.

Es importante considerar que el protocolo Sitemaps es un estándar que ya fue aceptado por Google, Yahoo! y LiveWeb, lo que garantiza que su uso permite atender a los principales buscadores actuales de la Internet.

Una vez que el archivo ha sido creado y contiene todas las direcciones de páginas web que se desea indexar, hay que hacer referencia de él al sitio web mediante una de las siguientes actividades:

Mediante la interfaz de envío del motor de búsqueda: se debe consultar la documentación ofrecida por los propios motores de búsqueda, los que indican la forma de hacerlo.

Mediante el archivo robots.txt: se debe añadir una línea al final del archivo que consigne la ubicación del archivo con el sitemap. Dicha línea deben indicar:

Sitemap: <ubicación_sitemap>

De acuerdo a lo que se indica en el sitio web en que se difunde este protocolo, la forma de ingresar la información correspondiente a la <ubicación del sitemap> debe ser la URL completa del Sitemap, como por ejemplo:

http://www.sitioweb.gob.cl/sitemap.xml.

147

Mediante una solicitud http desde el browser: para hacerlo se debe utilizar el propio browser y en la línea de la dirección escribir lo siguiente:

<searchengine_URL>/ping?sitemap=sitemap_url

Administración de contenidos

Tal como se indicó antes, la calidad del código HTML de un sitio web es uno de lo aspectos más relevantes para conseguir que sus contenidos sean incorporados adecuadamente en los índices y aparezcan entre los primeros lugares de las búsquedas realizadas por los usuarios.

No obstante, tal como se indica en el párrafo anterior, quienes visitan los buscadores siempre solicitarán contenidos y por tanto, será la calidad de éstos apoyada por la forma en que se ha creado el código HTML de la página, lo que determine lo forma de aparecer en las páginas de resultados.

A continuación se revisan los tres grandes elementos que se deben vigilar en cada página, para apoyar una adecuada Encontrabilidad:

Estructura de ContenidosCaracterísticas de los ContenidosCalidad de los Contenidos

Estructura de contenidos

Para que los contenidos de una página web reciban un trato adecuado en los motores de búsqueda debe existir una concordancia entre las diferentes partes del código. En este sentido, es importante velar porque el texto que aparezca en la etiqueta <title> de la sección <head> sea el mismo que aparece en la etiqueta <h1> de la sección <body>. También es adecuado que las palabras que aparezcan en la etiqueta <meta ... content=”keywords”> de la sección <head> incluyapalabras que también aparezcan en la etiqueta <h1> de la sección <body> Gracias a esta relación, se estará dando una prueba de que la página se refiere a los contenidos que se exponen en estas etiquetas, generando una demostración de credibilidad que es valorada dentro de los parámetros de los buscadores.

148

Otro elemento de interés es que el contenido esté estructurado utilizando etiquetas del tipo <h> para los subtítulos, ya que gracias a ello se demostrará que se ha utilizado el estándar. Adicionalmente, es interesante utilizar la etiqueta <strong> o <em> para indicar contenidos destacados, dejando de lado la etiqueta <b> que sólo denota negritas. Además, si dichas etiquetas se asignan a palabras que están en la lista de palabras claves (“keywords”) antes señaladas,

se aumentará la correspondencia interna de la página lo cual, a su vez, ayudará en la calidad de su indexación.

Características de los contenidos

Un tema central de la página tiene que ver con la titulación de la página, vale decir, con la frase que aparece repetida tanto en la etiqueta <title> como en la etiqueta <h1>. Se debería intentar que dicha frase incorporara la forma en que el contenido es llamado por los usuarios a través de los buscadores.

Por ejemplo, si el contenido se refiere a la “Cédula de Identificación”, será interesante utilizar la denominación “Carné o Carnet de Identidad” en lugar de su nombre oficial. De esta manera, habrá más posibilidades que al ser indexada, la página tenga las palabras que sean más cercanas a lo que las personas utilizarán para hacer la búsqueda respectiva.

Otra de las prácticas habituales para apoyar la Encontrabilidad de los Sitios Web y fomentar su posicionamiento en las páginas de resultados, tiene que ver con el hecho de que se debe “convencer” a los robots de búsqueda de que la página se refiere a los temas que aparecen tanto en <title> como en <h1>. Para ello es vital que dentro del texto aparezcan varias veces los términos utilizados en dichas secciones.

La lógica detrás de esta situación es que si una página se refiere a un tema determinado, es natural que en su contenido, las palabras utilizadas en los títulos (de la página y del texto), aparezcan nombradas con cierta frecuencia. Gracias a esto, se busca reprimir una mala práctica realizada por algunos sitios que para subir en su posicionamiento, ponen ciertas palabras en la lista de palabras claves (“keywords”) pero luego no las usan en los contenidos.

Esto puede ser apoyado por los enlaces que ofrezca la página, que deberían ir naturalmente hacia otros sitios donde también se encuentren las mismas palabras, con lo que se reforzará el contenido de la propia página.

149

Adicionalmente dichos enlaces deberían usar el elemento “title” en su sintaxis, de tal manera de poner allí alguna frase que refuerce la idea de que se accederá a contenidos relacionados con el tema de la propia página.

¿Cuántas veces se deben repetir los contenidos? La respuesta tiene que ver con la redacción: se debe repetir tantas veces como sea necesario para la comprensión del texto por parte de un “humano” que esté leyendo y menos de las que se puedan

interpretar como que se está haciendo dicha repetición sólo para el robot de búsqueda.

Otro elemento de interés en este sentido, es que los buscadores valoran el hecho de que haya enlaces que apunten hacia el contenido que se ofrece. En este sentido, aparece como una herramienta importante, la capacidad que tenga el sitio web de ofrecer elementos que puedan ser enlazados desde diferentes sitios. En la medida que se haga dicha acción, aumentará la posibilidad de que los contenidos del sitio aparezcan en mejores lugares en las páginas de resultados de los buscadores.

Calidad de los contenidos

Por último y aunque esto se planteó previamente, es importante reconocer que por muy importante que sean los buscadores, los contenidos que se ofrecen serán leídos por personas y por lo tanto deberán ser creados para fomentar su comprensión por parte de ellas.

En este sentido, hay que convenir que en la medida que los contenidos que se ofrezcan sean de calidad y provengan de una fuente importante como es el servicio público propietario del sitio web, será bien recibido, creído y, eventualmente, enlazado desde otros Sitios Web creando de esta manera el círculo virtuoso que permite mejorar la presencia y posición en las páginas de resultados de los buscadores.

> Minería Web y Encontrabilidad

La Minería de la Web12 es una disciplina que permite generar información acerca del comportamiento de los usuarios en un sitio web, mediante el análisis de los datos que ellos mismos van dejando a medida que visitan los Sitios Web. Utilizando técnicas provenientes de las ciencias sociales, entre las que se cuenta la clasificación, asociación y agrupación mediante patrones, es posible caracterizar a posvisitantes con el objetivo de ofrecerles productos o servicios que vayan de acuerdo a las necesidades que se asignen a los tipos de usuario que se hayan definido.

12.- Ver más información en http://www.infovis.net/printMag.php?num=172&lang=1

logs: son archivos de texto en los cuales se va registrando cada uno de los archivos queson mostrados por un servidor web, a raíz de las acciones que realiza un usuario quevisita un sitio web mediante un browser. Su análisis permite entender lo más visitado, entre otros aspectos.

150

Para mejorar su efectividad, se define que la minería del web se puede hacer en tres áreas que se refieren al contenido del sitio y la estructura de navegación, más el comportamiento de los usuarios respecto de los dos primeros13.

El objetivo de utilizarla en el contexto de esta versión de la Guía Web, es ofrecer una alternativa que permita la generación de mayor información acerca de las actividades que llevan a cabo los usuarios que visitan el Sitio Web.

Cabe señalar además que la minería web debe ir de la mano del monitoreo del sitio web que es apoyado desde el Decreto Supremo 100/2006 del Ministerio Secretaría General de la Presidencia (en su articulo 6)14, en que se plantea esta tarea como una de las prioritarias para que los administradores de los Sitios Web puedan conocer las necesidades de los usuarios y la forma en que están utilizando el sitio web.

Respecto de esto es importante tener en cuenta que las acciones que realizan los usuarios son registradas anónimamente en archivos de texto también conocidos como logs (o bitácoras, en español), en los cuales se va registrando cada uno de los archivos que son mostrados por un servidor tras la petición de un cliente que visita un sitio web. Por lo mismo, cada visita genera decenas o centenares de líneas de información que al ser procesadas con software especializado de análisis15, permiten tener información agregada acerca de visitas, zonas del sitio que son más visitadas y otros elementos básicos de información similares.

Asimismo es posible tener información acerca de las palabras ingresadas en los buscadores externos e internos del sitio web, lo que ayuda a entender cuáles son los términos más buscados y para los cuales el sitio web constituye una fuente de información.

En este sentido, la posibilidad de analizar por ejemplo, los logs de la navegación del sitio web o bien los logs de las palabras ingresadas en un buscador, permitirán al administrador del sitio web, tener información de primer orden para tomar decisiones acerca de contenidos, de la forma que tiene el sitio web e incluso, para tomar decisiones de reorganización de las secciones existentes en el mismo.

Quién busca y qué busca

Respecto de los usuarios del sitio web se debe intentar conseguir información acerca de qué están buscando en el sitio web y cuáles son los objetivos que persiguen al visitarlo.13.- Más información en http://www.webtaller.com/maletin/articulos/web-mining-diseno-sitios-web.ph14.- Se puede obtener copia del artículo en http://www.guiaweb.cl/recursos/documentos.htm#bdragDS10015.- Ver software de este tipo en http://www.download.com/Site-Management/3150-2181_4-0.html?tag=catat

151

Aunque la información que se obtiene mediante minería de web será anónima, ya que está basada en elementos de este tipo, será posible activar otros tipos de recursos para conocer al usuario y de esta manera saber más acerca de sus necesidades y las razones que lo llevan a visitar al sitio web.

Por lo mismo, se apoya como una buena práctica que el administrador del sitio web pueda dedicar algún tiempo de su jornada semanal a las siguientes actividades:

Responder correos electrónicos de los usuarios que tengan relación con la operación del sitio web, ya que en el intercambio con ellos será posible entender su percepción del sitio web y las necesidades de información que lo llevan a visitarlo. Desde allí, será más fácil conocer si hay satisfacción de las necesidades y qué pasos se deben dar para conseguirla.

Responder llamados telefónicos de usuarios que no consigan terminar sus operaciones y para quienes los sistemas de ayuda tradicionales ofrecidos por el servicio u organización dueña del sitio web tampoco aporten información adecuada. El contacto directo con los usuarios será una herramienta valiosa para perfeccionar los contenidos y funcionalidades del sitio web.

Desarrollar tests de usuario tendientes a entender de qué manera se relacionan los usuarios con los contenidos y a partir de esto, establecer las mejoras necesarias en los ámbitos que se requieran (este tema será tratado con más profundidad en el Capítulo 5 de esta Guía).

Los seis tipos de contenidos según R. Baeza

Cuando se esté trabajando con usuarios, será importante avanzar en el conocimiento de los seis tipos de contenidos que el usuario viene a buscar en el sitio web, los cuales quedan normalmente reflejados a través de las palabras que usa en el buscador interno del sitio para encontrar aquellos

152

términos que el sistema de navegación no le puede aportar o no le muestra dónde pueden estar ubicado dentro de la organización actual de contenidos.

Basado en un diagrama de árbol16 que se aprecia en la figura anterior, el académico Ricardo Baeza-Yates plantea que los seis tipos de contenidos que los usuarios buscan a través del buscador interno del sitio son:

16.- Este diagrama fue publicado por el autor en el artículo "Excavando la Web" que apareció en "El Profesional de la Información" (http://www.dcc.uchile.cl/~rbaeza/inf/EPIexcavando.pdf)

A) Contenidos principales y que están en el sitio web, pero que no son destacados adecuadamente por el sistema de navegación o de contenidos.B) Contenidos que constituyen un tema secundario del sitio web y que no son destacados como elemento de importancia.C) Contenidos que no son destacados en el sitio web y que los usuarios asumen que son parte de los contenidos, por lo que los buscan en el sitio web.D) Contenidos que existen en el sitio web pero que están registrados con otro nombre.E) Contenidos que no existen en el sitio web pero que deberían estar, ya que forman parte de los contenidos que deberían utilizarse.F) Contenidos que no existen en el sitio web y para cuya inexistencia se cuenta con definiciones editoriales o políticas de la organización o servicio.El académico recalca que los últimos tres son muy importantes porque revelan que los usuarios pueden dar pistas de mucho interés para la creación de contenidos, para los cuales el sitio web es considerado una fuente principal o relevante.

Figura 3. La imagen muestra el árbol de organización de contenidos donde aparecen los seis tipos definidos por el académico.

Influencia de la Minería en los contenidos

153

Basado en la información anterior, es evidente que el desarrollo de una política de minería de web sobre los contenidos permite tener un aporte contundente para la generación de contenidos, ya que se trata de un mecanismo de feedback efectivo para entender las necesidades de información de los usuarios.

Por lo anterior, deberá constituir una buena práctica la revisión permanente de los informes de actividad del sitio web más la información que aporten los informes de minería web, ya que basados en ellos se podrán tomar decisiones editoriales que permitan responder a las necesidades que los usuarios manifiesten a través de su navegación por el sitio web.

154

Capítulo 5:

Resumen

De la Usabilidad a la UtilidadEn este capítulo se presenta el concepto de la Usabilidad (entendido como facilidad de uso) como uno de los elementos centrales que deben poseer los Sitios Web de Gobierno, ya que en la medida que se asegure que lo que se publica pueda ser visto y usado sin problemas de acceso por los ciudadanos,se estará cumpliendo con la misión más importante de estos espacios digitales.

Adicionalmente se ofrecen aspectos relativos a Experiencia de Usuario y Aseguramiento de Usabilidad, a través de la presentación de metodologías probadas y usadas internacionalmente.

En el Sitio Web este capítulo es presentado en el menú con el nombre de "Usabilidad".

155

> Introducción / De la Usabilidad a la UtilidadUno de los objetivos más importantes que persigue todo sitio web es transformarse en un autoservicio de información e interacción, que requiera de la menor explicación posible para que los usuarios que lo visitan, puedan encontrar y obtener la información que buscan y también, sean capaces de completar las tareas que se les proponen desde el espacio digital.

En la primera versión de la Guía Web se comenzó a emplear el término Usabilidad para explicar lo anterior, aunque no se hizo un desarrollo muy amplio de sus características, sino que más que nada se hizo desde un punto de vista operativo.

A diferencia de ese enfoque, en esta versión se decidió incluirlo como un Capítulo completo para darle la relevancia que tiene, ya que de la usabilidad dependerá la influencia que tenga un sitio web sobre la comunidad a la que necesita atender.

Tal como se indicó, la Usabilidad fue incluida entre los contenidos de la Guía Web, en particular en el Capítulo III1, donde se planteaba la importancia de realizar Pruebas deUsabilidad, explicándose que éstas se realizaban con usuarios, “con el objetivo de determinar si la organización de los contenidos y las funcionalidades que se ofrecen desde el Sitio Web son entendidas y utilizadas por los usuarios de manera simple y directa”.

Allí se explicaba además que las pruebas tradicionales de Usabilidad son:

Prueba Inicial: para ver cómo funciona la organización de contenidos y elementos iniciales de diseño (botones, interfaces).

Prueba de Boceto Web: para ver si se entiende la navegación, si se pueden cumplir tareas y si el usuario entiende todos los elementos que se le ofrecen.

En dichas pruebas el objetivo era determinar durante el desarrollo del sitio web y en forma previa al desarrollo mismo, si las interfaces y los elementos de las pantallas del sitio web eran comprendidos por los usuarios, con el fin de que se pudieran hacer las correcciones que fueran necesarias en forma previa.

Usabilidad: es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema.

U1.- Más información en http://www.guiaweb.gob.cl/guia/capitulos/tres/experiencia.htm#t03usabilidad

156

Adicionalmente se entregaba un Checklist de Usabilidad2, mediante el cual se ofrecían treinta criterios para asegurar esta característica de los Sitios Web, abordando desde temas de Identidad Corporativa hasta Retroalimentación (Feedback) para que el administrador de un sitio web pudiera evaluar la calidad de experiencia de uso que estaba ofreciendo a los visitantes.

> ¿Qué es la Usabilidad?

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas (entendidas en un sitio web el conjunto integrado por el sistema de navegación, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.

Otra definición es la que entrega el académico Yusef Hassan3 (Universidad de Granada) al indicar que “la usabilidad es la disciplina que estudia la forma de diseñar Sitios Web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible” y agregar que “la mejor forma de crear un sitio web usable es realizando un diseño centrado en el usuario, diseñando para y por el usuario, en contraposición a lo que podría ser un diseño centrado en la tecnología o uno centrado en la creatividad u originalidad”.

Además, el profesor Ricardo Baeza-Yates4 en un artículo del año 2002 recalca que “básicamente los sitios no son usables ya que presentan problemas de usabilidad” y de paso define a la disciplina como “un concepto que engloba a una serie de métricas y métodos que buscan hacer que un sistema sea fácil de usar y de aprender.

Al hablar de sistema la referencia se hace a cualquier dispositivo que tenga que ser operado por un usuario. En esta categoría caen los Sitios Web, aplicaciones de software, hardware, etc.”.

Cabe indicar, finalmente, que la norma internacional IISO 9241-11: Guidance on Usability (1998)5 hace referencia a la Usabilidad y ofrece una definición de su contenido y alcance:

2.- Más información en http://www.guiaweb.gob.cl/guia/checklists/usabilidad.htm3.- Más información en http://www.nosolousabilidad.com/articulos/introduccion_usabilidad.htm4.- Más información en http://www.dcc.uchile.cl/~rbaeza/inf/usabilidad.html

157

5.- Más información en: http://www.usabilitynet.org/tools/r_international.htm

Existe una norma internacional de calidad referida a Usabilidad: es la IISO 9241-11: Guidanceon Usability

“[La Usabilidad se refiere] el grado en que un producto puede ser usado por usuarios específicos para conseguir metas específicas con efectividad, eficiencia y satisfacción dado un contexto específico de uso”.

Es importante indicar que la Usabilidad es una disciplina que nace en Estados Unidos y florece gracias al desarrollo computacional, consolidándose como una práctica habitual con la aparición de los Sitios Web en la década de los 90s.

Adicionalmente se debe anotar que la palabra Usabilidad deriva del inglés Usability, cuyatraducción más acertada es “facilidad y simplicidad de uso de un artículo u objeto”.Se ha considerado adecuado utilizar la palabra usabilidad con dicha traduccióndebido a que en idioma español no existen palabras que describan con tanta precisióneste concepto. En este sentido, lo más cercano sería Utilidad, palabra que de acuerdo al Diccionario de la Real Academia Española, significa “que trae o produce provecho, comodidad, fruto o interés”. Sin embargo, debido a que dicho término no engloba la idea de facilidad o simplicidad en el uso de un objeto o espacio por parte de quien lo emplea, se ha preferidoutilizar la derivación de la palabra originalmente en idioma inglés.

> Características Principales de la Usabilidad

Dadas las definiciones anteriores es claro que abordar la Usabilidad implica también revisar una serie de aspectos relacionados con el uso y la manera en que las personas se relacionan con los sistemas que se les ofrecen.

Por lo mismo, se ha hecho necesario hacer una serie de comprobaciones de estos aspectos, mediante la revisión completa de la forma en que el espacio digital apoya a los usuarios en cumplir sus tareas en la mejor forma posible. Dicha revisión debe ser hecha a través de diferentes factores6, entre los que se cuentan los siguientes:

158

Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla bien y realizar operaciones básicas.6.- Más información en http://usability.gov/basics/index.html#definition

La Usabilidad se mide a través de la facilidad de aprendizaje, facilidad y eficiencia de uso, facilidad de recordación, frecuencia y gravedad de errores y satisfacción subjetiva.

Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las características y forma de uso de un sistema para volver a utilizarlo a futuro.Frecuencia y gravedad de errores: plantea el apoyo que se le entrega a los usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema.Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.> Áreas teóricas relacionadasEn torno a la Usabilidad se ha creado una comunidad que ha ido expandiendo sus capacidades y herramientas, abarcando áreas como la “Experiencia de usuario” y la medición de la calidad de la misma, porque se entiende que mientras mayor sea la usabilidad de un sitio, mayor será el impacto del sitio web en quienes lo visitan y utilizan.

Adicionalmente, es útil entender el contexto en el que se desenvuelve esta forma de trabajo utilizando para ello la perspectiva que ofrece Peter Morville, autor ya reseñado en el Capítulo 4 de esta versión de la Guía Web, cuando él sitúa la Usabilidad en función de otras variables que permiten medir la calidad de un sitio web desde diferentes perspectivas. En ese sentido,señala que un sitio web puede ser mejorado desde diferentes acercamientos, quedando la Usabilidad como uno más de ellos, permitiendo la aparición de otros con similar importancia que deben ser tenidos en cuenta al momento de hacer el rediseño de un sitio web.

A estos acercamientos simultáneos al de la Usabilidad el autor los denomina las Facetas de la Experiencia del Usuario7/8, y corresponden a los siguientes:7.- Más información en http://semanticstudios.com/publications/semantics/000029.php8.- Más información en español en: http://iainstitute.org/es/translations/000370.html

Experiencia de Usuario: disciplina que se dedica a estudiar la manera en que las personas usan las interfases y a mejorar la usabilidad de los sistemas para aumentar su satisfacción general.

159

Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la utilidad.Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto fundamental, necesario pero no suficiente, por lo que se debe complementar con las demás facetas.Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios más complejos (imágenes, sonidos, animaciones), esto se debe equilibrar con los demás valores del diseño emocional.Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios puedan encontrar lo que necesitan.Accesible: los Sitios Web deben ser asequibles a las personas con discapacidades (más de 10% de la población). Para los Sitios Web de Gobierno ya es un requisito normativo.Creíble: la credibilidad es uno de los factores más importantes de tener en cuenta y por ello se deben revisar los elementos de diseño afectan la confianza que nos tienen los usuarios.Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros sitios ofrezcan valor para nuestros usuarios.

Figura 1. El “Panal de Morville” muestra las diferentes facetas de la experiencia del usuario.

> Principales AutoresAdemás de Morville, los autores que han trabajado más directamente en el tema de la Usabilidad han sido Jakob Nielsen y Steve Krug. Ambos han presentado libros en los cuales debaten esta forma de trabajo y han definido sus características y formas de abordarlas en el desarrollo de Sitios Web.

160

Jakob Nielsen es un doctor en ingeniería que centró su carrera en el desarrollo de interfacesde software, desde lo cual evolucionó hacia el tema de la usabilidad9. Es el autor y consultormás relacionado con el tema, al punto que le llamó el “gurú mundial de la usabilidad”,apareciendo como tal en medios de prensa en todo el planeta.

Su libro “Designing Web Usability” (Diseñando Usabilidad Web - 1999) fijó las pautas de la disciplina y entregó las herramientas necesarias para los desarrolladores de Sitios Web, quienes a partir de entonces comenzaron a incorporar las prácticas de la Usabilidad en su trabajo habitual.

Entre otros aspectos, sus consejos principales para mejorar la usabilidad de un sitio web son:

Aclarar el propósito del sitio: se refiere a que desde la primera mirada, el usuario tenga claro quién hace el sitio y cuáles el alcance del mismo.

Ayudar a los usuarios a encontrar lo que buscan: ofrecer una buena organización de información con énfasis en los mensajes principales y sistemas de búsqueda adecuados.

Mostrar el contenido del sitio: consiste en mostrar los contenidos de manera clara para evitar clicks innecesarios, mostrando temas anteriores que hayan sido destacados.

Diseño para mejorar Interacción, no para definirla: tener como meta que el diseño coopere con la información, más que competir con ella.9.- Ver más información en: http://www.useit.com/alertbox/20020512.html

Figura 2. Jakob Nielsen y la portada de su libro más conocido acerca de la usabilidad - Fotos: www.useit.com

Un segundo autor de importancia es Steve Krug consultor en Usabilidad cuyo libro “Don’t make me think” (“No me hagas pensar” - 2000) marcó un hito al poner en el centro de la discusión el hecho de que los Sitios Web deben ser creados para que el usuario llegue a sus páginas y actúe en forma inmediata, sin que tenga que detenerse a entender cómo está hechou organizado. Además, planteó la necesidad de probar con los propios usuarios la interacción que se ofrece en los espacios digitales, con el fin de asegurar que la oferta que se realiza, es comprendida por quienes las estarán utilizando.

Entre otros, sus principales consejos para ayudar a la usabilidad de un sitio web son:

161

Diseñar un sitio es siempre un acto de balance: priorizar el uso del espacio ayuda a la audiencia y a quien publica, a alcanzar sus metas; Balancear el diseño y el formato, para que las cosas tengan un énfasis adecuado en cuanto a uso y espacio.

Siempre se deben optimizar muchas variables al mismo tiempo, mostrando suficiente de una sin ocupar mucho con otra.

No hay reglas universales porque la solución que funciona en un caso, no funciona en otro contexto.

Adicionalmente se debe diseñar pensando que los usuarios no leen los textos sino que van saltando por el contenido; que los contenidos serán accedidos de mejor forma si se crean jerarquías visuales; que la navegación debe utilizar signos visibles y métodos convencionales para que sea entendida en todos los contextos, entre otros aspectos.

> Principales recursos

Además de los libros reseñados, hay en Internet una serie de recursos que pueden ser accedidos en idioma español, para conocer más acerca de las características de la Usabilidad como disciplina. Entre ellos, citamos los siguientes como las más interesantes:

Figura 3. Steve Krug y la portada de su libro sobre cómo hacer usables los Sitios Web - Fotos: www.sensible.com

Usabilidad en el Gobierno de Chile.http://www.clienteperdido.cl/media/slides/saavedra.pdfMejora de Sitios Web a partir de la experiencia de los usuarioshttp://www.clienteperdido.cl/media/slides/marcos.pdfResearch-Based Web Design & Usability Guidelines (inglés)http://www.usability.gov/pdfs/guidelines.htmlQuality Framework for UK government website design (inglés)http://www.cabinetoffice.gov.uk/e-government/resources/qualityframework.aspUsabilidad definida en Wikipediahttp://es.wikipedia.org/wiki/UsabilidadHerramientas para la usabilidad en la Fundación Sidar (España)http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

162

> Aseguramiento de UsabilidadUna vez entendido el alcance y características de la Usabilidad, es posible avanzar en la comprensión de los elementos que se deben tener en cuenta para asegurar su existencia y avanzar en mejoras que la amplíen.

No obstante, para asegurar que dichos elementos están presentes en un sitio web, los expertos de esta área de estudios han desarrollado una serie de metodologías tendientes a medir de manera concreta la existencia de los elementos que ayudan a la Usabilidad. Esta puede ser medida a través de expertos, de usuarios y de máquinas.

La aplicación de estas mediciones da lugar a la generación de criterios objetivos y puntos de chequeo, que permiten hacer comparaciones metódicas y periódicas, las que incluso en el caso de los Sitios Web de organismos relacionados con el Gobierno, han permitido llevar adelante las evaluaciones conocidas como los Premios Web, que se han realizado en los últimos años y que se describen más adelante en este capítulo.

163

Por lo anterior, es de suma importancia conocer los métodos de medición para ponerlos en práctica y aprovechar las características de esta disciplina para aumentar la efectividad y eficiencia de los Sitios Web.

> Medición de la usabilidadSe entiende por medición de la Usabilidad la tarea de aplicar uno más métodos que permiten obtener datos objetivos acerca de la calidad de la experiencia que tiene un usuario en un sitio web. Por lo mismo, se trata de la aplicación de métricas sobre diferentes aspectos que van desde la interfaz gráfica hasta el uso y comprensión de las funcionalidades, que permitan comparar la experiencia que tiene un usuario en diferentes Sitios Web, mediante métodos que puedan ser utilizados con cualquier tipo de ellos.

El interés central de la utilización de estas métricas es que se pueden lograr criterios objetivos respecto de los aspectos medidos, con lo cual se obtiene mayor información que la que sólootorga la percepción subjetiva de una persona, por muy experta o conocedora de las tecnologías de información que ella sea.

Dentro de los autores que más han avanzado en la creación de criterios de medición, se encuentra Jakob Nielsen, quien tempranamente tras la aparición del web, desarrolló los estudios necesarios para llegar a describir la existencia de un conjunto de principios de medición10 , cuyo cumplimiento permitiría asegurar la calidad de usable de un sitio web. A dichos criterios les llamó principios heurísticos11 debido a que permitían hacer una evaluación considerando la perspectiva de los expertos.

Dichos principios son diez y su revisión permite desarrollar un proceso repetitivo de desarrollo y pruebas, que asegure que el producto resultante permita generar un sitio usable. La importancia de ponerlos en práctica radica en que ofrecen una forma simple de revisar las características de los Sitios Web de una manera más

Heurística: en algunas ciencias, es la manera de buscar la solución de un problema mediante métodos no rigurosos, como por tanteo, reglas empíricas, etc. Aplicado al web, se refiere a la visión de un experto para determinar las fallas que puede presentar la interacción con un sistema.

10.- Ver en http://www.useit.com/papers/heuristic/heuristic_list.html11.- Heurístico: en algunas ciencias, manera de buscar la solución de un problema mediante métodos no rigurosos, como por tanteo, reglas empíricas, etc. (definición de la RAE)

164

económica que sistemas similares basados en pruebas de laboratorios y tecnologías de seguimiento de las actividades de los usuarios.

> Metodología de Jakob Nielsen

Para llegar a los principios de usabilidad antes señalados, Nielsen estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que llamó las “reglas generales” para identificar los problemas de usabilidad. Gracias a esta sistematización le fue posible pasar desde el terreno empírico al teórico.

Los principios definidos por Nielsen son los siguientes:

Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.

Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.

Control y libertad del usuario: hay ocasiones en que los usuarios elegirán las funciones del sistema por error y necesitarán una “salida de emergencia” claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.

Consistencia y estándares: los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

Prevención de errores: mucho mejor que un buen diseño de mensajes de error es realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.

Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones, El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante. Las instrucciones para

165

el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.

Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuariosadapte el sistema para usos frecuentes.

Estética y diseño minimalista: los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de información relevante y disminuye su visibilidad relativa.

Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.

Ayuda y documentación: incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y documentación.

Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

Test HeurísticoA partir de los principios señalados en el paso anterior, Nielsen planteó que un grupo de expertos podía hacer la revisión de un sitio web –ya fuera operativo o en etapa de construcción- y contrastar su funcionamiento contra el grupo de principios enunciados. A dicha prueba se le conoce generalmente como “test heurístico”.

El grado de cumplimiento y los problemas de usabilidad detectados durante este test heurístico12, permitiría a los desarrolladores tomar las precauciones y sugerir los cambios que fueran los más adecuados para aumentar la usabilidad del sistema.

12.- Ver más información en http://www.useit.com/papers/heuristic/heuristic_evaluation.html

En un Test Heurístico un grupo de expertos revisa un sistema para indicar las principales recomendaciones para ayudar a su Usabilidad.

166

En este sentido, Nielsen explicó que los expertos podrían incluso aumentar el númerode áreas a revisar dependiendo de las características del proyecto a evaluar El resultado de un test de este tipo es un informe emitido por el evaluador en el que describe el problema analizado, las reglas específicas que son afectadas por su comportamiento y cómo podría mejorar el cumplimiento de ellas con un cambio en la interfaz. Añade que si bien esto último no es posible, sí será importante que los problemas conocidos sean reportados con el fin de intentar hacer las modificaciones posibles para aportar a su solución.

Un elemento de interés en este caso, es que como se trata de evaluar interfaces basado en los principios descritos, no es necesario que éstas estén construidas para evaluarlas; en períodos previos al desarrollo pero cuando ya se cuente con las características gráficas operacionales que tendrá la interfaz, esta metodología también puede ser utilizada.

Respecto del número de expertos que debe llevar a cabo el test heurístico para que éste tenga validez y un número adecuado de hallazgos, el autor sugiere que cinco es el número más adecuado ya que muchos de sus hallazgos serán equivalentes pero también habrá un número importante de

167

ellos que serán únicos. Agrega que “el número exacto de evaluadores que se debería usar depende del costo-beneficio.

Más evaluadores deberían ser usados en casos en que la usabilidad es crítica o cuando se pueden esperar grandes ahorros debido a la gran capacidad de un sistema de ser crítico para la misión de una empresa”.

En el sitio web se entrega una Pauta de Evaluación Heurística que puede emplearse como modelo para este tipo de tests.

Test de Usuario

El “test de usuario” es un sistema de comprobación de la usabilidad que consiste en que un experto observa la forma en que un usuario emplea un sistema y a partir de eso, logra establecer los principales problemas que tiene su interfaz. En este sentido, la usabilidad se relaciona directamente con el nivel de desempeño que tiene el usuario observado.

Las principales ventajas de este método radican en el hecho de que se ve al usuario actuando sobre una pantalla real, manipulando sus opciones de la manera que lo

haría en una situación real de uso. Además, los problemas que se detectan normalmenteidentifican las principales dificultades que tienen los usuarios ante el sistema que se les ofrece.

Gracias a este trabajo, es posible identificar de manera rápida y simple los problemas, dejando lecciones para que los encargados del desarrollo de las aplicaciones, puedan hacer correcciones que lleven a un mejor uso del sistema. Adicionalmente permite aislar las percepciones de los usuarios sobre un sistema, respecto del uso real que le dan al mismo, generando observaciones más objetivas acerca de la calidad del sistema probado.

No obstante, para que un sistema pueda ser probado adecuadamente mediante este sistema se debe seguir un protocolo estricto que permita ver al usuario en acción, sin que éste se reste de hacer la prueba como si estuviera usando de verdad el sistema. Para ello es imprescindible tener en cuenta lo siguiente:

Se debe convencer al usuario de que lo que está a prueba no son sus habilidades, sino el sistema; si éste no funciona será culpa del sistema y no del usuario. Por lo mismo, es esperable que diga en voz alta todo lo que le pasa por la mente cuando está haciendo la prueba, para que el equipo de desarrollo pueda entender cuáles son sus expectativas y por qué ellas no se cumplen.

168

Cada acción que se solicite realizar al usuario debe tener un objetivo claro a ser medido, con el fin de entender cuáles son las dificultades que enfrenta y cómo podrían atenderse al ver su forma de usar la interfaz.

En ningún momento del test se deberá “ayudar” o retroalimentar al usuario explicándole cómo hacer una acción, debido a que se espera ver la usabilidad del sistema por sí mismo, es decir en las mismas condiciones en que funcionará cuando esté a disposición de todos los usuarios vía web.

A excepción de sistemas que estén dirigidos a una audiencia específica, cualquier persona que sepa usar un computador podría ser elegido para hacer el test de usuario. Es importante que quienes sean elegidos sean representativos de los usuarios que utilizarán finalmente el sistema.

La ventaja principal de un Test de usuario es que se puede ver en forma directa cómo es utilizado un sistema y no sólo las percepciones que se tienen de él.

Respecto del número de usuarios que se debe empelar en un test de este tipo, Nielsen señala que cinco personas13 es el número más adecuado.

En el sitio web se entrega una Pauta de Test de Usuario que puede emplearse comomodelo para este tipo de tests.

> Metodología de Alan Cooper

Uno de los problemas más habituales que tienen los desarrolladores de Sitios Web, es la dificultad para entender las necesidades que tienen los usuarios que llegan a visitar estos espacios digitales. Habitualmente lo que hacen es conseguir que un determinado software funcione adecuadamente, aunque no necesariamente ligado a la actividad de un usuario en particular lo que lleva a que no siempre logre ser entendido y utilizado completamente por estos.

Para atender esta problemática, el consultor Alan Cooper desarrolló una metodología de “diseño orientado a metas” a través del cual se trabaja directamente con la interacción que tendrán los usuarios con los sistemas que se están desarrollando.

Dicha metodología implica el desarrollo de una serie de piezas gráficas en las que se ilustra la manera en que los usuarios trabajan con el sistema y mediante esta fórmula, se busca responder de la mejor manera a las necesidades que tienen los usuarios de los sistemas que se les ofrecen.

> Creación de Personas y Escenarios

Como parte integral de dicha metodología se creó el concepto de “persona”14 que corresponde a personajes determinados aunque ficticios, que permiten entender de manera clara quiénes serán los usuarios del mismo y más tarde el de “escenarios”15, que corresponden a las situaciones en que dichos personajes emplearán el sistema.

169

La forma de utilizar dichos conceptos se explica de la siguiente manera: “Creamos modelos de datos y flujos de trabajo para definir los procesos de negocio.

Modelamos arquetipos de usuarios que son las personas para entender sus metas y modelos mentales. Para encontrar el diseño de interacción adecuado, ponemos a las personas en escenarios y desarrollamos bosquejos gráficos que siguen los caminos más relevantes en las interfaces. Aplicamos posprincipios de diseño y las plantillas

13.- Ver más información en http://www.useit.com/alertbox/20000319.html14.- La palabra “persona” se usa en idioma inglés. Puede revisarse más información acerca de este tema en http://www.cooper.com/insights/journal_of_design/articles/the_origin_of_personas_1.html15.-Más información en http://www.cooper.com/insights/journal_of_design/articles/six_sigma_and_goaldirected_des.html

para construir una solución. Mientras más avanzamos adquirimos más confianza en lo que desarrollamos y definimos la conducta de las funciones menos usadas y diseñamos nuestra solución con mejores niveles de fidelidad. En cada paso, documentamos los cambios en nuestro diseño de manera que podamos comunicarlos a todos los miembros de nuestro equipo de desarrollo”.

Esta metodología tiene un uso muy importante al momento de definir las funcionalidades de un sitio web, ya que al definir a los personajes que utilizarán y las situaciones en que los emplearán, será más fácil que todo el equipo de desarrollo determine los límites de las funcionalidades y contenidos que debe poner en cada pantalla16.

Por ejemplo, para un sitio que ofrezca trámites de un servicio determinado, será importante determinar quiénes son los usuarios habituales del mismo. Si se sabe que son de la tercera edad y con limitados conocimientos sobre el uso del computador, se podrá diseñar una “persona” que sea un hombre que sólo quiere realizar el trámite en el menor número de pasos posibles, con una interfaz con la menor cantidad de elementos tecnológicos y la mayor simplicidad posible, con el fin de hacer la acción que se necesita y terminar consiguiendo un comprobante que le ayudeposteriormente a demostrar que ya hizo la gestión.

Como parte del uso de esta metodología se puede bautizar a la “persona” como “Don Tito”, indicar que se trata de un jubilado. Luego, se podrá definir que el “escenario” consistirá en que utilizará el trámite desde un infocentro donde es improbable que pueda recibir ayuda lo que determinará que la pantalla debe ser lo más simple posible y que esperará salir de allí con un documento impreso que lleve un timbre, tal como si hubiera ido a la oficina del servicio. Al conocer estos requerimientos, todo el equipo de desarrollo entenderá muy bien lo que tiene que hacer y su respuesta será diferente que si sólo se hablara del “usuario” en términos genéricos.

170

En el sitio web se entrega una muestra gráfica de una Persona y Escenario que puede emplearse como modelo para implementar esta metodología en forma práctica.

16.- Más sobre este tema en http://www.alzado.org/articulo.php?id_art=110&s=1

La principal ventaja de la "persona" es que se logra que todo el equipo de desarollo se enfoque en las necesidades del usuario principal del Sitio Web.

> Ejemplos prácticos de medición de UsabilidadCon las metodologías dadas a conocer anteriormente es posible que el equipo que desarrolla un sistema pueda capturar información de primer orden durante el proceso de creación de un sitio web para determinar la mejor forma de diseñar tanto sus interfaces gráficas como las interacciones que se generan a partir de ellas.

> Utilización de la metodologíaTomando dichas metodologías y aplicándolas a un proceso de desarrollo, se sugiere su uso en el siguiente orden:

Creación de personas: el uso de esta metodología aparece como primera actividad en un proceso de desarrollo web y consiste en una revisión de la audiencia a la que se dirige el sitio web para elegir de entre aquellos usuarios que aparecen como los principales, a uno o dos que representen a los usuarios promedio. La actividad en este caso consiste en definirlos con “nombre y apellido”, otorgarles características demográficas e incluso darles una fotografía que los identifique. Dichas personas deben estar siempre referenciadas en las conversaciones que definan las capacidades del sitio, con el objetivo de que la interfaz siempre esté orientada alos usuarios.

Creación de Escenarios: como segunda actividad se determina en qué momentos los usuarios para los cuales se han creado las “personas” llegarán a utilizar el sitioweb y de qué manera lo harán. Con eso se puede terminar qué funcionalidades son las más relevantes a ser desarrolladas y la manera en que el enfoque a las “personas” debe ser expresado tanto en el diseño gráfico como de interacción. Las interfaces que se generen tras estos aportes,deberán consignar dicha visión.

Test Heurístico: una vez que se han completado los pasos anteriores y aún antes del desarrollo, se puede entregar los diseños de interfaces a un pequeño Es importante entender que

un Sitio Web funciona bien no sólo cuando sus contenidos y funcionalidades cumplen su papel, sino cuando el usuario entiende lo que se le ofrece en sus páginas.

171

grupo de expertos, para que determinen las eventuales fallas de usabilidad que puedan existir en las propuestas. Con sus informes será posible hacer correcciones a las interfaces que se hayan desarrollado hasta el momento, gracias a lo cual se evitarán problemas posteriores.

Test de Usuario: cuando ya se ha avanzado en el desarrollo, es posible hacer pruebas con usuarios reales para ver la manera en que ellos utilizan las interfaces, para comprobar si se ha conseguido la meta de que logren realizar las tareas que se proponen en la pantallas de manera eficiente y efectiva. Con los resultados se deben hacer as correcciones que aparezcan como necesarias para asegurar la usabilidad.

Es importante considerar que todos los pasos anteriores deben ser insertados en el sistema de desarrollo que se ponga en práctica, dando espacio para la generación de sus resultados e integrando a éstos en procesos repetitivos de mejoras. Sólo de esta manera se podrá asegurar que el sitio web resultante será comprendido y utilizado adecuadamente por los usuarios.

También es relevante tener la claridad de que un sistema sólo será útil cuando los usuarios que lo empleen logren desarrollar las tareas que se ofrecen en sus pantallas; en este sentido, no basta que el software realice las operaciones que se desean, sino que sólo se entenderá que funciona adecuadamente cuando los usuarios lo entienden, lo emplean y logran cumplir con las actividades que comprende su interfaz.

> Premio Web y UsabilidadAunque la usabilidad aparece como una característica nueva de los Sitios Web de Gobierno, hay que señalar que ésta ha sido un atributo que desde hace varios años se han intentado plasmar en las interfaces gráficas y en el diseño de la interacción de estos sistemas.

Como muestra de ambos, se pueden citar las siguientes iniciativas:

Premio Web: se trata del galardón que ya se ha entregado en dos ocasiones a los Sitios Web de Gobierno, mediante proceso que han involucrado a jurados expertos,

172

que han desarrollado test heurísticos intensivos17. Como producto de estos procesos, se ha premiado a los mejores pero además se han entregado Informes de Retroalimentación a los Sitios Web participantes, para que cuenten con información útil para efectuar cambios que les permitan mejorar sus sistemas.

Chequeos de Usabilidad: se trata de comprobaciones de la usabilidad del sitio web impulsadas desde la primera versión de la Guía Web de Gobierno18. Gracias a este trabajo inicial, fue posible establecer una lista de más de veinte aspectos que podían ser chequeados manualmente por los encargados de los Sitios Web de Gobierno, gracias a los cuales era posible determinar su grado de usabilidad.

Ejemplos de medición de UsabilidadPor último, para apoyar el desarrollo de las tareas consignadas en este capítulo, se puede revisar en el sitio web de la actual versión de la Guía Web para obtener documentos ya reseñados a lo largo de estas páginas, y que se refieren a los siguientes temas:

i. Pautas para tests de Usuario en Sitios de Gobierno: es un documento que permite desarrollar un test de usuario; contempla las preguntas más relevantes que se deben realizar y el procedimiento para llevarlo a cabo exitosamente.

ii. Pautas para Tests Heurísticos: es un documento que muestra los temas principales que se deben abordar en un test de este tipo, mostrando los aspectos centrales y la forma de evaluar para generar el informe final correspondiente.

iii. Checklist de Usabilidad: es un documento que apoya la comprobación de usabilidad de un sitio web, a través de preguntas directas acerca de las características de su interfaz. Un documento de este tipo ya fue incorporado en la primera versión de la Guía, por lo que este es una versión mejorada y aumentada del mismo.

En el sitio web este capítulo es presentado en el menú con el nombre de

“Usabilidad”.

17.- Ver más información sobre el Premio Web en http://www.premioweb.cl/metodologia18.- Ver Lista de Chequeo de usabilidad en http://www.guiaweb.gob.cl/guia/checklists/usabilidad.htm

173

3. PLANIFICACIÓN INCIAL DE UN SITIO WEB.

4. CONFIGURACION DE UN WEB SITE CON HTML, CSS, PHP Y MYSQL.

174

175

Servidores Web

HTML

Etiquetas

<p align="center"><font color="#993366" size="4" face="Comic Sans

MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p>

Este código daría como resultado el siguiente texto:

Bienvenidos a www.aulaclic.com

La etiqueta <meta>

Tipo Significado

author Autor de la página

classification Palabras para clasificar la página en los buscadores

description Descripción del contenido de la página

generator Programa utilizado para crear la página

keywords Palabras clave

<html>

<head>

<title>

Curso de HTML

</title>

...

<meta name="author" content="aulaclic">

<meta name="description" content="Curso de HTML gratuito">

<meta name="keywords" content="código HTML etiqueta página web

gratis curso">

...

176

<meta http-equiv="Refresh" content="30">

...

<meta http-equiv="Refresh" content="5;

URL=http://www.aulaclic.com/index.htm">

</head>

</html>

Cuerpo del documento <body>

</html>

...

<body bgcolor="blue" background="fondo.gif"

background="imagenes/fondo.gif" text="#FF0000">

...

</body>

</html>

 

Por ejemplo, para hacer que una página no tenga margen superior, y tenga un

margen izquierdo de 20 píxeles, tendremos que escribir:

...

<body leftmargin="20" topmargin="0" marginwidth="20"

marginheight="0" >

...

</body>

</html>

2. 3. El texto

Carácter Representación

< &lt;

> &gt;

á &aacute;

Á &Aacute;

é &eacute;

É &Eacute;

í &iacute;

Carácter Representación

€ &euro;

ç &ccedil;

Ç &Ccedil;

ü &uuml;

Ü &Uuml;

& &amp;

¿ &iquest;

177

Í &Iacute;

ó &oacute;

Ó &Oacute;

ú &uacute;

Ú &Uacute;

ñ &ntilde;

Ñ &Ntilde;

™ &#153;

¡ &iexcl;

" &quot;

· &middot;

º &ordm;

ª &ordf;

¬ &not;

© &copy;

® &reg;

Para conseguir que se muestren varios espacios en blanco seguidos puede

sustituirse cada uno de ellos por &nbsp;.

Comentarios

<!-- comentarios //-->.

Saltos de línea <br>

<br> donde se desee que se produzca el salto.

Texto preformateado <pre>

Hola, BIENVENIDOS

esta ES MI PÁGINA WEB

y esto un texto preformateado

Habría que escribir:

<pre>Hola,     BIENVENIDOS

esta     ES MI PÁGINA WEB

     y esto un texto preformateado</pre>

Separadores <hr>

178

Atributo Significado Posibles valores

alignalineación de la regla

dentro de la página

left (izquierda)

right (derecha)

center (centro)

width ancho de la reglaun número, acompañado de % cuando

se desee que sea en porcentaje

size alto de la regla un número

noshadeeliminar el sombreado

de la reglano puede tomar valores

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio

Bienvenidos a mi página.

Habría que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi

p&aacute;gina.

Sangrado de texto <blockquote>

Por ejemplo, para insertar el texto:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,

<blockquote>

 <blockquote>

  tengo el placer de comunicaros que hay una nueva secci&oacuten.

179

  </blockquote>

</blockquote>

Formatear el texto <font> ...

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes

color color del texto número hexadecimal o texto predefinido

sizetamaño del

texto

valores del 1 al 7, siendo por defecto el 3,

o desplazamiento respecto al tamaño por defecto,

añadiendo + o - delante del valor

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans

Serif">Bienvenidos a www.aulaclic.com</font>

 

También es posible definir una fuente para todo el documento. Para ello, hay

que insertar la etiqueta <basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar

los mismos atributos del texto que la etiqueta <font>.

Por ejemplo:

<body>

<basefont color="#006699" size="4" face="Arial">

...

Etiqueta Significado Ejemplo

<b> negrita curso HTML aulaclic

<i> cursiva curso HTML aulaclic

<u> subrayado curso HTML aulaclic

<s> tachado curso HTML aulaclic

<tt> teletipo (máquina de escribir) curso HTML aulaclic

180

<big> aumenta el tamaño de la fuente curso HTML aulaclic

<small> disminuye el tamaño de la fuente curso HTML aulaclic

A continuación se muestran algunas etiquetas asociadas al tipo de

información:

Etiqueta Significado Ejemplo

<cite> cita curso HTML aulaclic

<code> ejemplo de código curso HTML aulaclic

<dfn> definición curso HTML aulaclic

<del> eliminado curso HTML aulaclic

<em> énfasis curso HTML aulaclic

<ins> insertado curso HTML aulaclic

<kbd> teclado curso HTML aulaclic

<samp> muestra curso HTML aulaclic

<strong> destacado curso HTML aulaclic

<sub> subíndice curso HTML aulaclic

<sup> superíndice curso HTML aulaclic

<var> variable curso HTML aulaclic

Por ejemplo, para insertar el texto:

Bienvenidos a www.aulaclic.com

Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans

Serif">Bienvenidos a <b><u><tt>www.aulaclic.com</tt></u></b></font>

Párrafos <p> ...

También es posible cambiar la alineación del texto de cada párrafo. Para ello

se modifica el valor del atributo align, cuyos valores pueden ser left

(izquierda), right (derecha), center (centrado) o justify (justificado).

181

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Aquí encontraréis cursos de formación muy interesantes.

Habría que escribir:

<p align="center">Bienvenidos a mi p&aacutegina.</p>

<p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy

interesantes.</p>

Otra forma de cambiar la alineación del texto es mediante las etiquetas <div>

y </div>, para las que también existe el atributo align. La etiqueta <div>, al

igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la

diferencia de que la separación entre ellos es menor.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Aquí encontraréis cursos de formación muy interesantes.

Habría que escribir:

<div align="center">Bienvenidos a mi p&aacutegina.</div>

<div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy

interesantes.</div>

Bienvenidos a mi página.

Habría que escribir:

<center>Bienvenidos a mi p&aacutegina.</center>

Otro par de etiquetas que permiten agrupar bloques de texto, pero que no

implican el cambio de línea (como en el caso de <p> y <div>), son las

etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando

veamos las hojas de estilo.

Encabezados <h1> ...

182

Etiqueta Ejemplo

<H1> Título 1: HTML

<H2> Título 2: HTML

<H3> Título 3: HTML

<H4> Título 4: HTML

<H5> Título 5: HTML

<H6> Título 6: HTML

Para todas estas etiquetas es posible especificar el valor del atributo align.

Por ejemplo, para insertar el texto:

El lenguaje HTML

Apartado 1: Las etiquetas

Habría que escribir:

<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las

etiquetas</H4>

Marquesinas <marquee>

La marquesina, por defecto, se desplaza de derecha a izquierda

indefinidamente, pero si lo deseas puedes hacer que estas propiedades

varíen.

behavior puede modificarse el tipo de movimiento.

alternate (de lado a lado de la ventana, como si rebotara en los extremos),

scroll (de un lado a otro, continuamente) o

slide (de un lado a otro, pero una sola vez).

direction puede modificarse la dirección en la que se moverá el texto.

down (de arriba a abajo),

up (de abajo a arriba),

left (de derecha a izquierda) o

left (de izquierda a derecha).

183

<marquee bgcolor="#006699" behavior="alternate" direction="right">

  <b><font color="#FFFFCC" size="5">Esto es una marquesina

</font></b>

</marquee>

También es posible insertar imágenes, tablas y otros elementos entre las

etiquetas <marquee> y </marquee>, no sólamente texto.

Hiperenlace <a>

<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de

fijación se llama tipos.

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página

vinculada, se especifica a través del atributo target al que se le puede asignar

los siguientes valores:

_blank: Abre el documento vinculado en una ventana nueva del

navegador.

_parent: Abre el documento vinculado en la ventana del marco que

contiene el vínculo o en el conjunto de marcos padre.

184

_self: Es la opción predeterminada. Abre el documento vinculado en el

mismo marco o ventana que el vínculo.

_top: Abre el documento vinculado en la ventana completa del

navegador.

<a href="http://www.aulaclic.com" target ="_blank">Visita

www.aulaclic.com en una ventana nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de

nuestro sitio para que cuando el usuario cierre la ventana del explorador, se

encuentre automáticamente en la página desde la que había salido (que

vuelva a nuestro sitio).

Formato de los enlaces

En la etiqueta <body>.

link (enlace que no ha sido pulsado ninguna vez).

alink (enlace que acaba de ser pulsado).

vlink (enlaces que ya han sido pulsados).

Por ejemplo, al insertar el siguiente código:

...

<body link="#FF0000" vlink="#FF0099" alink="#FF9900">

...

<a href="http://www.aulaclic.com" target

="_blank">www.aulaclic.com</a>

...

Puntos de fijación. Anclas

Por ejemplo, para insertar un punto de fijación delante del siguiente texto:

Texto con ancla

Habría que escribir:

<a name="miancla"></a>Texto con ancla

185

Enlace al ancla

Habría que escribir:

<a href="t_4_3.htm#miancla">Enlace al ancla</a>

Otros tipos de enlaces

Existen otros tipos de enlaces que no conducen a otra página web, los

veremos a continuación:

Correo electrónico:

Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo

destinatario será el especificado en el enlace. Para ello la referencia del

vínculo debe ser "mailto:direcciondecorreo".

Por ejemplo, para insertar un enlace que permita enviar un correo electrónico

a aulaClic, tal como este:

e-mail para aulaclic

Habría que escribir:

<a href="mailto:webmaster@aulaclic.com">e-mail para aulaclic</a>

Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario

lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el

campo destinatario rellenado con la direcciondecorreo. Podemos hacer que

esté rellenado algún campo más como es el asunto. En este caso habría que

escribir:

<a href="mailto:webmaster@aulaclic.com?subject=el asunto del

mensaje">e-mail para aulaclic</a>

Vínculo a ficheros para descarga:

186

haz clic aquí para descargarte el fichero

De la siguiente forma:

<a href="carta.doc" tarjet=_blank >haz clic aqu&iacute; para descargarte

el fichero</a>

Vínculo vacío:

vinculo vacio

Habría que escribir:

<a href="#">vinculo vacio</a>

Este tipo de enlace resulta útil para trabajar con comportamientos javascript.

2.5. Imágenes

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="imagenes/logo_animales.gif">

Texto alternativo

<img src="imagenes/gatito.gif" alt="Imagen gato" >

Alineación de una imagen

Valor Significado Ejemplo

absbottom inferior absoluta Imagen con

texto

absmiddle medio absoluta Imagen con

texto

187

baseline línea de base Imagen con

texto

bottom inferior Imagen con

texto

left izquierdaImagen con

texto

middle medio Imagen con

texto

right derechaImagen con

texto

texttop texto superior Imagen con

texto

top superior Imagen con

texto

PerrosGatos Una web de animales

Habría que escribir:

PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una

web de animales

2.6.  Tablas

Fila <tr>

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>

  <tr>...</tr>

  <tr>...</tr>

188

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</table>

Columna o celda <td>

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas

que compongan cada una de las filas de la tabla. Entre las etiquetas <td> y

</td> se podrá especificar el contenido de cada una de las celdas. Por

ejemplo, para insertar la siguiente tabla:

Sabado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Habría que escribir:

<table border="1">

  <tr>

    <td>Sabado</td>

    <td>Domingo</td>

  </tr>

  <tr>

    <td>Curso HTML</td>

    <td>Curso Dreamweaver</td>

  </tr>

  <tr>

    <td>Curso Frontpage</td>

    <td>Curso Flash</td>

  </tr>

</table>

Formato de la tabla

Atributo Significado Posibles valores

189

width ancho de la tablaun número, acompañado de % cuando

se desee que sea en porcentaje

height altura de la tablaun número, acompañado de % cuando

se desee que sea en porcentaje

cellpaddingespacio entre el contenido de

las celdas y el bordeun número

cellspacing espacio entre celdas un número

border grosor del borde un número

alignalineación de la tabla dentro

de la página

left (izquierda)

right (derecha)

center (centro)

bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal

Por ejemplo, para modificar la tabla de la página anterior para que quedase

como la siguiente:

Sabado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Habría que escribir:

<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="#000000" bgcolor="#FFCC99">

  ...

</table>

Es posible modificar los siguientes atributos de una celda:

Atributo Significado Posibles valores

Width ancho de la tabla un número, acompañado de % cuando

190

se desee que sea en porcentaje

height altura de la tablaun número, acompañado de % cuando

se desee que sea en porcentaje

Alignalineación horizontal del

contenido de la celda

left (izquierda)

right (derecha)

center (centro)

Valignalineación vertical del

contenido de la celda

baseline (línea de base)

bottom (inferior)

middle (medio)

top (superior)

bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal

Por ejemplo, si escribiéramos el siguiente código

<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="#000000" bgcolor="#FFCC99">

  <tr align="center" bgcolor="#0099CC">

    <td>Sabado</td>

    <td bgcolor="#66CC99">Domingo</td>

  </tr>

  <tr>

    <td>Curso HTML</td>

    <td>Curso Dreamweaver</td>

  </tr>

  <tr>

    <td>Curso Frontpage</td>

    <td>Curso Flash</td>

  </tr>

</table>

191

Obtendríamos la siguiente tabla:

Sabado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Existe otro atributo que puede establecerse sobre las celdas. Se trata del

atributo nowrap, que hace que el contenido de la celda no se ajuste de

manera automática al ancho de la columna sino que el ancho de la celda se

adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este

atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>

Encabezado de columna <th>

Para la etiqueta <th> es posible especificar los mismos atributos que para la

etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca

centrado y en negrita, por lo que se utiliza para definir los encabezados o

títulos de las columnas.

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="1" align="center">

  <tr>

    <th>Sabado</td>

    <th>Domingo</td>

  </tr>

  <tr>

    <td>Curso HTML</td>

    <td>Curso Dreamweaver</td>

  </tr>

  <tr>

    <td>Curso Frontpage</td>

    <td>Curso Flash</td>

192

  </tr>

</table>

Obtendríamos la siguiente tabla:

Sábado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Título de tabla <caption>

No solamente es posible establecer títulos para las columnas, también es

posible establecer un título para la tabla mediante las etiquetas <caption> y

</caption>.

Estas etiquetas han de ir después de la etiqueta <table>, y puede

especificarse el valor de los atributos align (con los valores bottom, center,

left, right y top) y valign (con los valores bottom y top).

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="1" align="center">

  <caption align="right" valign="top">Titulo de la tabla<tr>

  <tr>

    <th>Sabado</td>

    ...

  </tr>

</table>

Obtendríamos la siguiente tabla con título:

Titulo de la tabla

Sábado Domingo

193

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

El título aparece ajustado a la margen derecho de la tabla (align="right") y

encima de la tabla (valign="top").

Combinar celdas

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que

se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que

se extenderá la celda, y a través del atributo rowspan se especifica el número

de filas por las que se extenderá la celda.

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE

DIFERENCIASPERRO

HOMBREPEQUEÑO GRANDE

Duración crecimiento 10 meses 18 a 24 meses 16 años

Tiempo de gestación 58 a 63 días 9 meses

Duración de vida del pelo/cabello 1 año 2 a 7 años

Habría que escribir el siguiente código:

<table width="575" border="2" cellspacing="2">

  <tr align="center" valign="middle">

    <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>

  </tr>

  <tr align="center" valign="middle">

    <th rowspan="2">DIFERENCIAS</th>

    <th colspan="2">PERRO</th>

    <th rowspan="2">HOMBRE</th>

  </tr>

  <tr align="center" valign="middle">

194

    <th>PEQUE&Ntilde;O</th>

    <th>GRANDE</th>

  </tr>

  <tr align="center" valign="middle">

    <td>Duraci&oacute;n crecimiento</td>

    <td>10 meses</td>

    <td>18 a 24 meses</td>

    <td>16 a&ntilde;os</td>

  </tr>

  <tr align="center" valign="middle">

    <td>Tiempo de gestaci&oacute;n</td>

    <td colspan="2">58 a 63 d&iacute;as</td>

    <td>9 meses</td>

  </tr>

  <tr align="center" valign="middle">

    <td>Duraci&oacute;n de vida del pelo/cabello</td>

    <td colspan="2">1 a&ntilde;o</td>

    <td>2 a 7 a&ntilde;os</td>

  </tr>

</table>

2.7.  Marcos

Conjunto de marcos <frameset>

Cuando se insertan las etiquetas <frameset> y </frameset> no hay que

insertar las etiquetas <body> y </body>, ya que el cuerpo del documento

será el cuerpo de las páginas que se carguen en cada uno de los marcos del

conjunto de marcos.

Los atributos que pueden especificarse sobre la etiqueta <frameset> son los

siguientes:

Atributo Significado Posibles valores

cols tamaño de cada una de las

columnas en que se divide el

un número (acompañado de %

cuando se desee que sea en

195

documentoporcentaje) por cada columna,

separados por comas.

rows

tamaño de cada una de las

columnas en que se divide el

documento

un número (acompañado de %

cuando se desee que sea en

porcentaje) por cada fila, separados

por comas.

frameborderaparece o no el borde de los

marcos

yes

no

framespacing separación entre los marcos un número

border grosor del borde

un número, acompañado de %

cuando se desee que sea en

porcentaje

bordercolor color del borde número hexadecimal

También es posible incluir asteriscos como valores para los atributos cols y

rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de

ventana o subventana. Cuando existan varias columnas o filas con este valor,

se repartirán de forma equitativa lo que quede de ventana.

Por ejemplo, si insertáramos la siguiente línea de código:

<frameset rows="*" cols="142,*,25%">...</frameset>

Como el atributo rows tiene el valor asterisco, solo habría una fila, que

ocuparía todo el alto de la ventana. En este caso concreto no haría falta poner

el atributo rows.

Como el atributo cols tiene tres valores, estaríamos dividiendo el documento

en tres columnas. La primera columna sería de 142 píxeles de ancho, la

tercerá del 25% de la ventana, y la segunda columna ocuparía lo que quedará

de ventana (el 75% de la ventana menos 142 píxeles).

196

También es posible anidar marcos. Es decir, es posible dividir marcos en

otros marcos.

Por ejemplo, si insertáramos el siguiente código:

<frameset cols="142,*">

  <frameset rows="80,*">...</frameset>

  <frameset cols="25%,*,*">...</frameset>

</frameset>

Estaríamos dividiendo el documento en dos columnas. La primera sería de

142 píxeles, y la otra abarcaría el resto de la ventana.

Al mismo tiempo, la primera columna o subventana estaría dividida en dos

filas o subventanas horizontales, la primera de ellas de 80 píxeles.

La segunda columna o subventana de la ventana principal se dividiría a su vez

en tres columnas, la primera de ellas del 25% de la subventana, y las otras

dos se repartirían el resto a partes iguales (se repartirían el 75% de la

subventana).

Por último debemos saber que entre las etiquetas <frameset> y </frameset>

sólo se pueden encontrar la etiquetas

2.8.  Formularios

Formulario <form>

Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:

<form action="mailto:formularios@aulaclic.com" method="post"

enctype="text/plain" >

  ...

</form>

197

Áreas de texto <textarea>

Por ejemplo, para insertar el área de texto:

Habría que escribir:

<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que

quieras</textarea>

Elementos de entrada <input>

Campo de texto:

Por ejemplo, para insertar el campo de texto:

Habría que escribir:

<input name="campo" type="text" value="Campo de texto" size="20"

maxlength="15">

 

Campo de contraseña:

Por ejemplo, para insertar el campo de contraseña:

Habría que escribir:

<input name="contra" type="password" value="contraseña" size="20"

maxlength="15">

Botón:

submit, restore o button.

198

Escribe el texto que quieras

Campo de te

submit, al pulsar sobre el botón se enviará el formulario.

restore, al pulsar sobre el botón se restablecerá el formulario.

button, al pulsar sobre el botón no se realizará ninguna acción.

Por ejemplo, para insertar el botón:

Habría que escribir:

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

 

Casilla de verificación:

Por ejemplo, para insertar la casilla:

Habría que escribir:

<input name="casilla" type="checkbox" value="acepto" checked>

 

Botón de opción:

Por ejemplo, para insertar los botones de opción:

Habría que escribir:

<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón está activado la variable

prefiere será igual a estudiar, si es el segundo el activado, la variable

prefiere valdrá trabajar. Observa que lo que ponemos como valor no

aparece escrito en la página es un datos interno.

 

<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">

199

Existen otros tipos como el tipo hidden que sirve para definir un campo

oculto, campo que no ve el usuario, en este caso habría que incluir el atributo

value para que el formulario pase ese valor al programa que recoge los datos

del formulario.

Campos de selección <select> ...

La aparición del atributo multiple indica que el usuario podrá seleccionar

varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl.

Este atributo no toma valores.

La aparición del atributo selected indica que el elemento aparecerá

seleccionado. Este atributo no toma valores.

Por ejemplo, para insertar el menú:

Habría que escribir:

<select name="mascota">

  <option selected>--- Elige animal ---</option>

  <option>Perro</option>

  <option>Gato</option>

</select>

 

Y para insertar la lista:

Habría que escribir:

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

  <option selected>---Elige animales---</option>

  <option value="ave">Loro</option>

  <option>Perro</option>

200

--- Elige mascota ---

---Elige animales---LoroPerro

  <option>Gato</option>   

  <option>Pez</option>

</select>

2.9.  Multimedia

Sonido de fondo <bgsound>

se reproduzca continuamente en un bucle, habrá que asignarle el valor

infinite o -1.

<bgsound src="varios/audio.mid" loop="-1">

Vídeo y audio <embed>

Los videos insertados a través de esta etiqueta se reproducen

automáticamente al cargarse la página, y se reproducen solamente una vez.

Esto puede cambiarse a través de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al

cargarse la página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle,

y también puede tomar los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el

tamaño de la consola de control de vídeo. Si no se especifican estos atributos,

la consola de control de vídeo se mostrará con el tamaño más adecuado al

tamaño del vídeo.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true">

Para insertar el archivo de audio anterior, se podría escribir:

<embed src="varios/audio.mid" autostart="false" loop="true">

201

Si no se desea que se muestren los controles de un archivo de audio, puede

hacerse que los atributos width (anchura) y height (altura) valgan cero.

También puede utilizarse el atributo hidden, con los valores true o false.

Cuando su valor estrue, se ocultan los controles de reproducción.

Por ejemplo, para insertar sonido de fondo se podría escribir:

<embed src="varios/audio.mid" autostart="true" loop="true"

hidden="true" >

O también:

<embed src="varios/audio.mid" autostart="true" loop="true" width="0"

height="0" >

Películas Flash <object> ...

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/

swflash.cab#version=6,0,29,0" width="200" height="100">

  <param name="movie" value="graficos/pelicula.swf">

  <param name="quality" value="high">

  <embed src="graficos/pelicula.swf" width="200" height="100"

quality="high"

  pluginspage="http://www.macromedia.com/go/getflashplayer"

  type="application/x-shockwave-flash"></embed>

</object>

<embed>. En ella aparecen tres atributos que no conocíamos.

quality Puede valer high (alta), autolow (baja automática), o low (baja). Si

no se incluye este atributo, se considera que la calidad será automáticamente

alta.

pluginspage se especifica la página desde la que se podrá descargar el

plug-in necesario para reproducir la animación Flash, para que si algún

usuario no lo tiene aún instalado en su ordenador pueda descargarlo.

202

type se especifica el tipo de fichero, para que el navegador pueda saber qué

tipo de programa necesita ejecutar para reproducir la animación.

<object>.

classid se identifica al objeto. Cuando el objeto es una animación Flash, el

atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-

444553540000.

codebase se especifica la dirección en la que se encuentran los

componentes externos necesarios para reproducir la animación.

width y height se utilizan del mismo modo, y deben tener el mismo valor, que

en la etiqueta <embed>.

<param>. especificar los valores necesarios para la inicialización de un

objeto. no necesita etiqueta de cierre, y ha de contener los atributos

name indica el nombre de la característica que va a ser definida, y

value indica su valor.

Por eso aparece la línea <param name="movie"

value="graficos/pelicula.swf">.

<embed> aparece especificado por el atributo

quality, es necesario incluir también una etiqueta <param>, en la que name

tenga el valor quality.

Por eso aparece la línea <param name="quality" value="high">.

Las animaciones Flash se reproducen de forma automática al cargarse la

página, y su reproducción es continua.

Para hacer que una animación no se reproduzca automáticamente, habrá que

indicarlo mediante el atributo play, que debe incluirse dentro de la etiqueta

<embed>.

203

El atributo play puede valer true o false. Para que la animación no se

reproduzca automáticamente, el valor de play debe ser false.

También habrá que insertar la línea <param name="play" value="false">.

Para que la animación no se reproduzca continuamente, el valor de loop

debe ser false. De este modo, solo se reproducirá una vez.

También habrá que insertar la línea <param name="loop" value="false">.

2.10.  Capas

Capa <div> ...

Las capas no son más que unos recuadros, que pueden situarse en cualquier

parte de la página, en los que podemos insertar contenido HTML. Dichas

capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes

posibilidades de diseño.

el atributo id se le da un nombre a la capa, y a través

del atributo style se establecen el resto de propiedades de la capa.

A través de las propiedades

left (izquierda) márgenes izquierdo

top (superior) margende la capa respecto al margen superior de la página.

Pueden tomar un número como valor, acompañado de px cuando haga

referencia a píxeles, y acompañado de % cuando haga referencia a un

porcentaje.

Para que la capa aparezca en la posición establecida, es necesario incluir

también la propiedad position con el valor absolute. Si no se estableciera

este valor, la capa se mostraría pegada al margen izquierdo, en la posición en

la que hubiera sido insertada dentro del código.

A través de las propiedades width (anchura) y height (altura) se establece el

tamaño de la capa. Pueden tomar un número como valor, acompañado de px

204

cuando haga referencia a píxeles, y acompañado de % cuando haga

referencia a un porcentaje.

z-index puede establecerse el índice de la capa dentro de la página. Una

capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre

es un valor numérico.

A través de la propiedad visibility puede establecerse la visibilidad de la

capa. Puede tomar los valores

inherit (se muestra la capa mientras la capa a la que pertenece también se

esté mostrando),

visible (muestra la capa, aunque la capa a la que pertenece no se esté

viendo) y

hidden (la capa está oculta).

layer-background-image y background-image se puede establecer una

imagen de fondo para la capa. La ruta y el nombre de la imagen han de

aparecer entre paréntesis, después de la palabra url.

layer-background-color y background-color se puede establecer un color

de fondo para la capa. Ha de ser un número hexadecimal.

overflow puede establecerse si se mostrará o no el contenido de la capa

cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado

pequeña. Puede tomar los valores visible (se muestra todo el contenido de la

capa, aunque esto implique hacer que la capa sea más grande), hidden (no

es posible visualizar el contenido de la capa que no quepa en ella), scroll (se

muestra la barra de desplazamiento, aunque el contenido de la capa pueda

ser visualizado totalmente) y auto (se muestra la barra de desplazamiento

cuando sea necesario).

A través de la propiedad clip puede establecerse el área de la capa que

podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes

205

de ella no sean visibles. Ha de especificarse la distancia de los márgenes de

la capa entre paréntesis, después de la palabra url.

El primer valor ha de ser la distancia (se asume que está en píxeles) del

margen superior, hasta la que no se visualizará el contenido de la capa.

El segundo valor ha de ser la distancia del margen izquierdo, hasta la que

no se visualizará el contenido de la capa.

El tercer valor ha de ser la distancia del margen superior, hasta la que se

visualizará el contenido de la capa.

El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se

visualizará el contenido de la capa.

También es posible incluir auto como valor de alguna de estas distancias, lo

que indica que la distancia se corresponderá con los bordes de la capa.

Todas estas propiedades se especifican a través del atributo style, y deben

aparecer entre comillas dobles, con un punto y coma detrás de cada una.

Para asignar los valores a las propiedades no se utiliza el símbolo = (igual),

sino que se utiliza el símbolo : (dos puntos).

Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:

<div id="capa" style="position:absolute; width:200px; height:115px; z-

index:3; visibility: visible; background-color: #0099CC; layer-background-

color: #0099CC; background-image: url(imagenes/fondocapa.gif); layer-

background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto

3);">

Este texto est&aacute; dentro de una capa.

</div>

Otra forma de insertar capas es utilizando las etiquetas <span> y </span>,

en lugar de las etiquetas <div> y </div>.

206

La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es

compatible con un mayor número de navegadores.

2.11.  JavaScript

Lenguajes de script

JavaScript y VBScript.

La utilización de JavaScript permite variar dinámicamente el contenido del

documento, validar formularios, etc.

JavaScript <script>

Para insertar funciones JavaScript en un documento, es necesario insertar las

etiquetas <script> y </script> dentro de la cabecera (entre las etiquetas

<head> y </head>) o dentro del cuerpo de la página.

A través del atributo language hay que especificar el lenguaje de script, que

en este caso será JavaScript.

Entre las etiquetas <script> y </script> habrá que insertar las funciones

JavaScript.

Si un navegador no reconoce la etiqueta <script>, mostrará el código de las

funciones que ésta contenga. Para que esto no ocurra, las funciones se

insertan como comentarios, entre <!-- y //-->.

Por ejemplo, podríamos insertar el siguiente código:

<script>

  <!--

    function Muestramensaje()

    {

207

      alert("Esto es un mensaje, activado por una función javascript");

    }

  //-->

</script>

La función que hemos insertado es una función muy sencilla, que muestra un

mensaje de alerta.

Si dentro del documento insertáramos el siguiente código:

<img src="imagenes/logo_animales.gif" onClick="Muestramensaje">

A través del atributo onClick hemos definido la función que será llamada al

pulsarse sobre el objeto.

Podemos utilizar muchos otros atributos para llamar a funciones, como

pueden ser onDblClick (al hacer doble clic), onMouseOver (mientras el

cursor este encima) o onMouseOut (cuando el cursor deje de estar encima).

2.12. Hojas de estilo

Introducción

Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización

automática.

Se pueden definir estilos independientes o estilos asociados a determinadas

etiquetas por ejmplo a la etiqueta <a> (que corresponde a los hiperenlaces).

De este modo, todos los hiperenlaces de la página o del sitio adquirirían la

apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos.

Vincular una hoja de estilo

208

Para vincular una hoja de estilo a un documento es necesario insertar la

etiqueta <link> en el documento, entre las etiquetas <head> y </head>. Esta

etiqueta no necesita etiqueta de cierre.

A través del atributo type se tiene que especificar que el archivo es de texto,

con sintaxis CSS, por lo que su valor ha de ser text/css.

<link href="misestilos.txt" rel="stylesheet" type="text/css" >

Sintaxis de las hojas de estilo

En primer lugar se pone el nombre del estilo, y entre llaves se especifica la

lista de propiedades (en minúsculas) que se corresponden con dicho estilo.

Cada una de estas propiedades tiene que tener un punto y coma detrás, y los

valores se asignan con el símbolo : (dos puntos).

El nombre del estilo puede ser un nombre inventado por nosotros, o el

nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene

que estar precedido por un punto, o por el nombre de una etiqueta seguida de

un punto.

Por ejemplo, en una hoja de estilo podríamos tener lo siguiente:

body {background-color: #006699; font-family: Arial,Helvetica;}

.mitexto {font-family: Arial,Helvetica; font-size:18px;}

Si vinculáramos esta hoja de estilo a un documento, se aplicarían

directamente las propiedades especificadas para la etiqueta <body>.

En cambio, no existe ninguna etiqueta <mitexto>, por lo que para aplicar este

estilo a algún elemento de la página habría que indicarlo de algún modo.

Para aplicar este estilo a un elemento, habría que insertar el atributo class en

su etiqueta.

Por ejemplo, para aplicar ese estilo al siguiente párrafo del documento:

209

<p>texto con estilo</p>

Habría que escribir:

<p class="mitexto">texto con estilo</p>

Pero para aplicar el estilo únicamente a una parte del contenido de la

etiqueta, como podría ser en este caso una palabra del párrafo, sería

necesario incluir la etiqueta <span> (que agrupa bloques, sin producir un

cambio de línea). Por ejemplo, para aplicar el estilo únicamente a la palabra

estilo, habría que escribir:

<p>texto con <span class="mitexto">estilo</span></p>

Las propiedades

Familia de la fuente:

La propiedad es font-family.

Puede tomar como valor varios nombres de fuentes, separados por comas,

como pueden ser arial, helvetica, etc. La ventana de definir una familia de

fuentes es que si el ordenador del visitante no tiene instalada la primera

fuente, entonces se aplicará la segunda, así sucesivamente hasta encontrar

una de las fuentes.

 

Grosor del texto:

La propiedad es font-weight.

Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera)

o un número del 100 al 900.

 

Tamaño de la fuente:

La propiedad es font-size.

Puede tomar como valor un número.

 

Espacio entre líneas:

210

La propiedad es line-height.

Puede tomar como valor un número.

 

Espacio entre caracteres:

La propiedad es letter-spacing.

Puede tomar como valor un número.

 

Estilo de la fuente:

La propiedad es font-style.

Puede tomar como valor italic, cuando se desee que el texto aparezca en

cursiva.

 

Decoración de la fuente:

La propiedad es text-decoration.

Puede tomar como valor none (ninguno), underline (subrayado), line-

through (una línea encima), overline (tachado) o blink (parpadeo).

Si se aplica none a los hiperenlaces, puede evitarse que aparezcan

subrayados.

 

Transformar el texto:

La propiedad es text-transform.

Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en

mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en

minúsculas).

 

Alineación del texto:

La propiedad es text-align.

Puede tomar como valor center (centrado), left (izquierda), right (derecha) o

justify (justificado).

 

Sangrado del texto:

La propiedad es text-indent.

Puede tomar como valor un número.

 

211

Color:

La propiedad es color.

Puede tomar como valor un número en hexadecimal.

Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar

de los indicados por los atributos link (vínculo), vlink (vínculo activo), y alink

(vínculo visitado) de la etiqueta <body>.

 

Color de fondo:

La propiedad es background-color.

Puede tomar como valor un número en hexadecimal.

 

Imagen de fondo:

La propiedad es background-image.

La ruta y el nombre de la imagen han de aparecer entre paréntesis, después

de la palabra url.

 

Márgenes:

Las propiedades son margin-top (margen superior), margin-right (margen

derecho), margin-bottom (margen inferior), margin-left (margen izquierdo),

o margin (los valores de los márgenes superior, derecho, inferior e izquierdo,

separados por espacios).

Pueden tomar como valor un número (cuatro números separados por

espacios en el caso de margin).

 

Ancho de bordes:

La propiedad es border-width.

Puede tomar como valor un número.

 

Color del borde:

La propiedad es border-color.

Puede tomar como valor un número en hexadecimal.

 

212

No hay que olvidar, en el caso de los valores numéricos, especificar la unidad

de medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o %

(porcentaje).

Existen muchas otras propiedades además de éstas. En el tema de capas

puedes consultar las propiedades que se pueden definir sobre ellas en las

hojas de estilo (z-index, visibility, etc.).

2.13 Páginas web dinámicas

HTML dinámico

Una página dinámica es una página que permite al usuario interactuar con

ella, y que contiene efectos especiales.

Para crear una página de este tipo no basta con programar en HTML, ya que

este lenguaje es muy limitado. Es necesario combinar HTML con otros

lenguajes, como JavaScript, VBScript, Java, ASP, PHP, etc.

También puede hacerse uso de capas, de animaciones Flash, de applets java

y de hojas de estilo CSS.

A la combinación de estos elementos se le conoce como DHTML (HTML

dinámico).

Existe una anécdota muy curiosa sobre DHTML :

Una conocida marca, poseedora de un programa que permite "dar vida" a las

páginas web, pidió explicaciones a un webmaster tras visitar su página web.

Pensaron que el webmaster estaba utilizando su programa y habían

comprobado que no figuraba como comprador en sus archivos.

El webmaster respondió que no estaba utilizando el programa en cuestión,

sino HTML dinámico, por lo que la empresa tuvo que disculparse por la

acusación.

213

Esto demuestra lo que se puede llegar a hacer con HTML dinámico.

Programación web

lenguajes que son interpretados por el servidor, como es el caso de ASP,

PHP o JSP (Java).

se puede acceder a mayor número de recursos almacenados en el servidor,

como pueden ser bases de datos.

El lenguaje PHP (Hipertext Preprocesor) permite realizar muchos tipos de

aplicaciones web gracias su gran librería de funciones y documentación.

El lenguaje HTML ha ido evolucionando rápidamente, gracias, entre otras

cosas, a su sencillez. Pero este lenguaje es bastante rígido, y no nos permite

hacer en nuestras páginas todo lo que nos gustaría, al no existir las etiquetas

necesarias para ello.

El comité W3C comenzó a desarrollar nuevas versiones de HTML para

permitir nuevas posibilidades a la hora de programar, y creó el lenguaje XML

(Extensible Markup Language).

XML es un lenguaje comprensible para las personas. Los documentos escritos

en este lenguaje pueden leerse, crearse y modificarse de forma sencilla,

utilizando cualquier editor de texto.

Es capaz de expresar estructuras complejas de datos. Incluso estructuras de

datos tan complicadas como gráficos pueden representarse en forma de árbol.

Con XML lo que se pretende es etiquetar e identificar el contenido de las

páginas, y no pensar directamente en cómo se mostrarán los datos. Puede

utilizarse para definir muchas más características referentes al contenido de

214

los documentos de las que permite la etiqueta <meta> de HTML, y estos

datos resultan muy útiles para realizar búsquedas o filtrar información.

XML también ofrece la posibilidad de gestionar cualquier conjunto de

caracteres internacional. Esta es una característica muy útil, ya que permite

incluir cualquier carácter que se esté utilizando hoy en día, como pueden ser

caracteres en chino o en árabe, lo que facilita el comercio internacional a

través de Internet.

En realidad, XML y HTML son lenguajes distintos, basados en el SGML

(Standard Generalized Markup Language).

SGML es el estándar internacional para la definición de la estructura y el

contenido de diferentes tipos de documentos electrónicos.

Mediante una DTD (Definición de Tipo de Documento), el SGML define la

estructura y el contenido de cada tipo de documento. Por ejemplo, existe una

DTD que define cómo han de ser los documentos HTML.

Pero no existe ninguna DTD que defina la estructura y el contenido de un

documento XML.

En realidad, XML es una versión resumida del SGML, que descarta aquellas

partes del SGML que raramente se utilizan. Por ello, XML es más sencillo que

SGML, y permite definir nuestros propios tipos de documentos, con nuestras

propias etiquetas.

Por ejemplo, para insertar esto en una página web:

NO DOUBT Tragic Kingdom

Publicado en España en 2006

A la venta por solo 16 € (con un descuento del 10% de su precio original)

Puedes consultar el título de las canciones que incluye

En HTML habría que escribir:

215

<font color="#006699" size="4"><b>NO DOUBT </b></font>

<b><a href="tragickingdom.htm"><font size="2">Tragic

Kingdom</font></a></b>

<br>

<em><font color="#CC3366" size="2"><b>Publicado en Espa&ntilde;a en

1995</b></font></em>

<blockquote>

  <font size="2"><b>A la venta por solo 16 &euro; (con un descuento del

10% de su precio original)</b></font>

</blockquote>

<font size="2"><a href="tragickingdom.htm"><b>Puedes consultar el

t&iacute;tulo de las canciones que incluye</b></a></font>

Mientras que en XML podríamos escribir:

<?xml version="1.0"?>

<cdaudio>

  <grupo>No Doubt</grupo>

  <titulo>Tragic Kingdom</titulo>

  <publicacion>1995</publicacion>

  <precio cantidad="16" moneda="euro"/>

  <descuento porcentaje="20"/>

  <enlacecanciones href="tragickingdom.htm"/>

</cdaudio>

A simple vista, es más sencilla la programación con XML. Cualquier

programa podrá trabajar de forma más eficiente con XML..

216

PROGRAMACIÓN EN INTERNET

UNIDAD III

PHP Y MYSQL

3.1. INTRODUCION3.2. ¿QUE ES PHP?3.3. ¿Qué se puede hacer con PHP?3.4. Algo de Historia3.5. Seguridad y PHP3.6. Lenguaje PHP3.7. Variables3.8. Constantes3.9. Expresiones y operadores3.10 Estructuras de Control 3.11. Funciones3.11.1 Funciones definidas por el usuario3.11.2. Funciones Variables3.12. Clases3.13. Manejo de Errores3.14. Creación de imágenes gif3.15. Problema de la autentificación de un Usuario con PHP3.16. Cookies3.17. Utilización de ficheros remotos3.18. Manejo de conexiones3.19. Conexiones a bases de datos3.20. Funciones de PHP Mysql

217

INTRODUCCIÓN

Todos los que nos hemos enfrentado con el diseño de páginas Web hemos

echado de menos un poco más de dinamismo en ellas.

Representar una página repleta de gráficos y nada más, deja de ser suficiente

para ciertas aplicaciones en Internet. Estas aplicaciones requieren de cierta

interactividad con el usuario, y han sido muchas las tecnologías aplicadas a

este fin (formularios, CGI, etc.).

Ahora está disponible la versión 3 de PHP, o la versión 4 no definitiva,

Profesional Home Pages, la solución para la construcción de Webs con

independencia de la Base de Datos y del servidor Web, válida para cualquier

plataforma. El objetivo final es conseguir la integración de las paginas HTML

con aplicaciones que corran en el servidor como procesos integrados en el

mismo, y no como un proceso separado, como ocurría con los CGIs.

Igualmente interesa que dichas aplicaciones sean totalmente independientes

del navegador (lo que no ocurría con otros lenguajes basados en scripts, como

JavaScript o VisualBasic Script), independientes de la plataforma y de la Base

de Datos.

Perl ha sido el lenguaje que ha servido como estándar para construir CGIs

durante mucho tiempo, y aún sigue siendo una de las mejores soluciones para

desarrollar aplicaciones Web portables, ya que trabaja sobre cualquier servidor

Web que soporte CGIs, y sobre cualquier plataforma que soporte Perl, que son

la mayoría, incluso ha servido para desarrollar módulos que extienden la

funcionalidad de los servidores. Pero nada tiene que envidiar PHP. PHP, está

más orientado a conexiones entre páginas Web y servidores donde se

almacenan toda clase de Bases de Datos.

Soporta un único "Safe Mode", es decir, un mecanismo de seguridad que

permite que varios usuarios estén corriendo scripts PHP sobre el mismo

servidor. Este mecanismo está basado en un esquema de permisos de

ficheros, permitiendo el acceso a aquellos ficheros que son apropiados por el

218

mismo identificador de usuario que el del script que está intentando acceder a

ese fichero, o bien cuando el fichero está en el directorio que es propiedad del

mismo identificador de usuario que el del script que está intentando acceder.

PHP es un lenguaje de programación soportado por HTML. La sintaxis está

heredada de C, Java y Perl. Este lenguaje está orientado para los

constructores de páginas Webs, permitiendoles crear páginas dinámicamente

generadas de forma rápida.

3.2. ¿Qué es PHP?

Oficialmente, PHP es un preprocesador de hipertextos, pero qué significa?.

Para ilustrar esto podemos ver un simple ejemplo:

<html>

   <head>

     <title>Example</title>

   </head>

   <body>

     <?php echo "Hi, Esto es un Script PHP";?>

   </body>

</html>

Esto es muy parecido a cualquier otro Script escrito en Perl o C. El código de

PHP está incluido en tags especiales "<?,?>".

Lo que hace diferente a PHP es que el código que se deba ejecutar se ejecuta

siempre en el servidor.

Así, al ejecutar el script anterior, el cliente recibirá sólo los resultados de la

ejecución por lo que es imposible para el cliente acceder al código que generó

la página.

219

3.3. ¿Qué se puede hacer con PHP?

En el nivel más básico PHP es equiparable a un CGI cualquiera. La mayor

fuerza de PHP es que está preparado para soportar accesos a muchos tipos de

bases de datos como:

1. Adabas D

2. dBase

3. Empress

4. FiclePro

5. informix

6. InterBase

7. Solid

8. Sybase

9. Velocis

10.Unix dbm

11.mSQL

12.MySQL

13.Oracle

14.PosgreSQL

Además de esto, PHP soporta la utilización de otros protocolos como IMAP,

SNMP, NNTP, POP3 o HTTP a nivel de socket.

3.4. Algo de Historia

PHP fue creado por Rasmus Lerdorf a finales de 1994, aunque no hubo una

versión utilizable por otros usuarios hasta principios de 1995. Esta primera

versión se llamó, Personal Home Page Tools.

Al principio, PHP sólo estaba compuesto por algunas macros que facilitaban el

trabajo a la hora de crear una página Web. Hacia mediados de 1995 se creo el

analizador sintáctico y se llamó PHP/F1 Versión 2, y sólo reconocía el texto

220

HTML y algunas directivas de mSQL. A partir de este momento, la contribución

al código fue pública.

El crecimiento de PHP desde entonces ha sido exponencial, y han surgido

versiones nuevas como la actual, PHP3, PHP4 y la incipiente PHP5.

3.5. Seguridad y PHP

PHP es un interprete que puede ser incluido en un servidor Web como un

módulo o como un CGI binario.

Con él se pueden realizar accesos a ficheros, conexiones de red, etc. PHP está

diseñado para ser más seguro que cualquier otro lenguaje de programación de

CGIs, como Perl o C.

3.6. Lenguaje PHP

3.6.1. Bases de la Sintaxis

Inserción de PHP en HTML

<? .... ?> Sólo si se activa la función short_tags() o la bandera de

configuración short_open_tag.

<?php .... ?>

<script languaje="php"> .... </script>

Sólo si se activan los tags para ficheros 'asp' con la bandera de

configuración asp_tags.

Separación de instrucciones

Las instrucciones se separan con ';', en el caso de ser la última instrucción no

es necesario el punto y coma.

Comentarios

Los comentarios en PHP pueden ser:

221

Como en C o C++, /*...*/ ó //

Otro tipo de comentario de una línea es #, que comentará la línea en la

que aparezca pero sólo hasta el tag ?> que cierra el código php.

Tipos de Datos

Los tipos de cada variable en PHP no están tan claros como en C. El intérprete

asigna el tipo de una variable según el uso que se esté haciendo de ella. Para

asignar un tipo fijo a una variable se utiliza la función settype(). Los tipos son:

Enteros

Flotantes

String

Arrays

Objetos

Juggling

Respecto al tipo entero y flotante, no hay mucho que decir, así que

detallaremos sólo los tipos String, Arrays, Objetos y Juggling.

String

Las cadenas pueden estar delimitadas por " o '. Si la cadena está delimitada

por comillas dobles, cualquier variable incluida dentro de ella será sustituida por

su valor. Para especificar el carácter " se escapará con el carácter backslash.

Otra forma de delimitar una cadena es utilizando la sintaxis de documentos

"<<<" Ejemplo:

$variable = <<< EOD

  Ejemplo de cadena

  que ocupa

  varias líneas

  EOD;

Esta última sintaxis sólo se puede utilizar con PHP 4. Las operaciones con

cadenas son exactamente igual que en PERL.

222

Arrays

Los Arrays en PHP se pueden utlizar tanto como Arrays indexados o como

Arrays asociativos. Los Arrays de una sola dirección, pueden ser tanto

escalares como asociativos. En realidad no existen ninguna diferencia entre

ellos. Las funciones que se utilizan para crear Arrays de este tipo son list() o

array() . En el caso de que no se especifique el indice en un array, el elemento

que se asigna se añade al final.

Ejemplo:

  $a[]="hola"

La instrucción anterior añade el string hola al final del array 'a'. Los arrays

pueden ser ordenados utilizando las siguientes funciones: asort(), arsort(),

ksort(), rsort(), sort(), uasort(), usort() y uksort() .

Otras funciones para el manejo de arrays son: count(), next(), prev() y each() .

En PHP, los arrays multidimensionales combinan las propiedades de un array

unidimensional explicados anteriormente. Los indices de un array

multidimensional pueden ser tanto numéricos como asociativos.

(Nota: hay que tener cuidado con la sintaxis de los arrays multidimensionales

asociativos incluidos dentro de una cadena).

Ejemplo de array multidimensional asociativo:

  $a=array(

     "manzana" => array("color" => "rojo", "tacto" => "suave"),

     "naranja" => array("color" => "naranja", "tacto" => "rugoso"),

     "platano" => array("color" => "amarillo", "tacto" => "suave")

  );

Objetos

223

Para inicializar un objeto se utiliza el método new , y para acceder a cada uno

de sus métodos se utiliza el operador -> .

Juggling

Una variable en PHP, define su tipo según el contenido y el contexto en el que

se utilice, es decir, si se asigna una cadena a una variable, el tipo de esa

variable será string . Si a esa misma variable se el asigna un número, el tipo

cambiará a entero . Para asegurarte de que una variable es del tipo adecuado

se utiliza la función settype() . Para obtener el tipo de una variable se utiliza la

función gettype() . También es posible utilizar el mecanismo del casting tal y

como se utiliza en C.

3.7. Variables

Las variables en PHP mantienen una serie de caracteristicas referentes a:

Conceptos básicos

Variables predefinidas

Ámbito de una variable

Variables variables

Variables Externas a PHP

3.7.1. Conceptos básicos

Los conceptos a tener en cuenta en PHP con las variables son los siguientes:

Cualquier nombre de variable está precedido por el símbolo $.

En PHP las variables siempre se asignan por valor, aunque en PHP4 ya

existen métodos para asignaciones por referencia (&).

3.7.2.Variables predefinidas

En PHP cada vez que se ejecuta un script, existen variables que se crean y

que nos pueden informar del entorno en el que se está ejecutando dicho script.

Para obtener una lista de todas estas variables predefinidas se puede utilizar la

funcion phinfo().

De todas estas variables, algunas se crean dependiendo del servidor que se

esté utilizando y otras son propias de PHP.

Si se tratara de un servidor Apache, la lista de variables es:

224

GATEWAY_INTERFACE:

SERVER_NAME

SERVER_SOFTWARE

SERVER_PROTOCOL

REQUEST_METHOD

QUERY_STRING

DOCUMENT_ROOT

HTTP_ACCEPT

HTTP_ACCEPT_CHARSET

HTTP_ENCODING

HTTP_ACCEPT_LANGUAJE

HTTP_CONNECTION

HTTP_HOST

HTTP_REFERER

HTTP_USER_AGENT

REMOTE_ADDR

REMOTE_PORT

SCRIPT_FILENAME

SERVER_ADMIN

SERVER_PORT

SERVER_SIGNATURE

PATH_TANSLATED

SCRIPT_NAME

REQUEST_URL

las variables creadas por el propio PHP son:

argv

argc

PHP_SELF

HTTP_COOKIE_VARS

HTTP_GET_VARS

HTTP_POST_VARS

3.7.3 Ámbito de una Varible

225

El ámbito de una variable en PHP es exactamente igual que en C o en Perl

tomando siempre en cuenta los ficheros incluidos al principio de cada

programa.

3.7.4. Varibles variables

PHP permite un mecanismo para mantener variables con un nombre no fijo.

Por ejemplo:

   $a = "hola";

   $$a = "mundo";

El ejemplo anterior, define dos variables, una denominada $a que contiene el

valor "hola" y otra que se llama $hola que contiene el valor "mundo"

Para acceder al valor de una variable, se accede con:

  echo "$a ${$a}";

ó

  echo "$a ${$a}";

Ambas sentencias provocaran la salida "hola mundo".

Algo que se debe tener en cuenta cuando se utilizan variables, es que hay que

resolver la ambiguedad que se crea al utilizar arrays de variables de este tipo.

Por ejemplo $$a[1] provoca una ambiguedad para el intérprete, puesto que no

sabe si se desea utilizar la variable denominada $a[1] o utilizar la variables $a

indexandola en su primer valor. Para esto se utiliza una sintaxis especial que

sería ${$a[1]} o ${$a}[1] según se desee una opción u otra.

3.7.5. Variables extenas a PHP

3.7.5.1. Variables de los forms HTML

226

Cuando existe un form en HTML, inmediatamente después de ser enviado,

dentro del ámbito PHP se crean automáticamente una variable por cada uno de

los objetos que contiene el form.

Si se activa la directiva <?php_track_vars?> o con la variable track_vars todo lo

enviado por los métodos POST y GET estará en las variables

$HTTP_POST_VARS y $HTTP_GET_VARS.

3.7.5.2. Cookies HTML

La función SetCookie() es una función PHP para asignar Cookies a un

ordenador cliente. Esta función se debe llamar siempre antes de comenzar a

crear la página puesto que debe formar parte de la cabecera de

HTML.Cualquier Cookie que se envía a un cliente, se convierte dentro de PHP

en una variable.

Par añadir valores a una cookie se utilizan los corchetes, [], por ejemplo:

  $count++;

  setCookie("count", $count;, time()+3600);

  SetCookie("Visita[$count]", "$valor",time()+3600);

Este ejemplo mantiene dos Cookies en el cliente. La primera mantiene el

contador count y la segunda contiene una lista de los comentarios de cada una

de las veces que se ha actualizado la cookie, Visita.

3.7.5.3. Variables de entorno

Las variables de entorno, tales como $HOME, para entornos Linux, se pueden

utilizar desde PHP.

3.8. Constantes

Las constantes en PHP tienen que ser definidas por la función define() y

además no pueden ser redefinidas con otro valor.

Además, existen una serie de variables predefinidas denominadas:

_FILE_: Fichero que se está procesando.

227

_LINE_: Línea del fichero que se está procesando

_PHP_VERSION: Versión de PHP.

PHP_OS: Sistema operativo del cliente.

TRUE: Verdadero.

FALSE: Falso.

E_ERROR: Error sin recuperación.

E_WARNING: Error recuperable.

E_PARSE: Error no recuperable (sintaxis).

E_NOTICE: Puede Tratarse de un error o no. Normalmente permite

continuar la ejecución.

Ejemplo:

Todas las constantes que empiezan por "E_"se utilizan normalmente con

la función error_reporting().

  <?php

  define("CONSTANTE", "hello world.");

  echo CONSTANTE;

  ?>

8. Expresiones y operadores

En PHP una expresión es cualquier cosa que pueda contener un valor. Las

expresiones más simples son las variables y las constantes y otras más

complicadas serán las funciones, puesto que cada función devuelve un valor al

ser invocada, es decir, contiene un valor, por lo tanto, es una expresión.

Todas las expresiones en PHP son exactamente igual que en C. Los operadors

abreviados, los incrementos, etc, son exactamente iguales. Incluso existen

otros operadores adicionales como el operador "." que concatena valores de

variables, o el operador "===" denominado operador de identidad que

devolverá verdadero si las expresiones a ambos lados del operador contienen

el mismo valor y a la vez son del mismo tipo. Por último, el operador "@" sirve

para el control de errores. Para poder ver como funciona el operador @,

veamos un ejemplo:

228

  <?php

  $res = @mysql_query("select nombre from clientes")

or die   ("Error en la selección, '$php_errormsg'");

  ?>

Este ejemplo, utiliza el operador @ en la llamada a mysql_query y en el caso

de dar un error, se salvará el mensaje devuelto en una variable denominada

php_errormsg. Esta variable contendra el mensaje de error de cada sentencia y

si ocurre otro error posterior, se machaca el valor con la nueva cadena.

PHP mantiene también los operadores "'" que sirven para ejecutar un comando

del sistema tal y como hace la función system() por ejemplo.

Las diferencias con C son los operadores de referencia, & y *, puesto que las

operaciones por referencias no existen en PHP·, aunque si son posibles en

PHP4, y que en PHP existen dos operadores and y dos operadores or que son:

'and', '&&' y 'or', '||' respectivamente, que se diferencian en la precedencia de

cada uno.

La tabla que nos puede resumir la precedencia de cada uno de los operadores

es:

Asocitividad Operadores

Izquierda ,

Izquierda Or

Izquierda Xor

Izquierda And

Derecha Print

Izquierda = += -* *= /= .= %= &= |= ^= ~= <<= >>=

Izquierda ?:

Izquierda ||

Izquierda &&

No posee == != ===

No posee < <= > >=

Izquierda >> <<

Izquierda + - .

Izquierda * / %

229

Derecha ! ~ ++ -- (int) (double) (string) (array) (0bject) @

Derecha [

No posee New

3.10. Estructuras de Control

La mejor forma de resumir cada una de las opciones que ofrece PHP para las

estructuras de control es mediante una tabla:

Estructura Alternativa

If, if else, if elseif if: endif;

While while: endwhile;

For for: endfor;

do.. while -

foreach(array as $value)

foreach(array as $key=>$value)

(PHP4 y no PHP3)

-

Switch switch: endswitch;

Continue -

Break -

require()(Necesitan estar dentro de tags PHP) -

include()(Necesitan estar dentro de tags PHP) -

Una nota sobre require() y include(), Si se desea incluir un fichero de

forma condicional, es mejor utilizar include(), sin embargo, si la línea

donde está una instrucción require() no se ejecuta, no se ejecutará nada

de ese fichero. Además, si en un bucle se ejecutan varias veces una

instrucción require(), el intérprete lo incluirá una sóla vez, sin embargo si

es include(), se incluirá el fichero cada vez que se ejecute la instrucción.

Como apunte final, debes saber que en un fichero que va a ser requerido,

se puede incluir una instrucción return al final como si esta instrucción

devolviera un valor (sólo en PHP3), si se trata de include, se puede poner

230

al final del fichero una instrucción return tanto en PHP3 como en PHP4,

aunque con algunas diferencias.

Así, require, reemplaza su llamada por el contenido del fichero que

requiere, e include, incluye y evalua el fichero especificado.

3.11. Funciones

3.11.1. Funciones definidas por el usuario

Un ejemplo puede ser:

function foo($arg1, $arg2, ..., $argN)

    {

      echo "Función ejemplo"

      return $value;

    }

Dentro de una función puede aparecer cualquier cosa, incluso otra función o

definiciones de clase.

En PHP3 es necesario que una función esté declarada antes de ser

referenciada, y en PHP4 esto no es necesario.

No es posible realizar sobrecarga de funciones o número variable de

argumentos en PHP3 pero sí en PHP4, aunque esto se puede simular en PHP3

pasando un array de argumentos.

Respecto al paso de argumentos, son siempre pasados por valor y para

pasarlos por referencia hay que indicarlo y se puede hacer de dos formas

diferentes, en la definición de la función, anteponiendo el símbolo & al

argumento que corresponda, en este caso la llamada será igual que la llamada

a una función normal, o manteniendo la definición de la función normal y

anteponer un & delante del argumento que corresponda en la llamada a la

función.

PHP permite el mecanismo de argumentos por defecto. Un ejemplo de esta

caracteristica es:

231

  function hacerCafe($tipo="capuchino")

    {

      return "he hecho un café $tipo\n";

    }

En la llamada a esta función se obtendrá una frase u otra según se llame:

  echo hacerCafe();

o

  echo hacerCafe("expreso");

En el caso de tratarse de una función con argumentos por defecto y

argumentos normales, los argumentos por defecto deberán estar agrupados al

final de la lista de argumentos.

En PHP4 el número de argumentos de una función definida por el usuario,

puede ser variable, se utilizan las funciones func_num_args(), func_get_arg()

y func_et_args().

Valores devueltos

A diferencia de C, PHP puede devolver cualquier número de valores, sólo hará

falta recibir estos argumentos de la forma adecuada. Ejemplo:

  function numeros()

    {

      return array(0,1,2);

    }

  list ($cero, $uno, $dos) = numeros();

3.11.2. Funciones Variables

232

Las funciones variables pueden ser una gran y potente herramienta en el

procesamiento dínamico de un script. Ejemplo:

  <?php

  funcion foo()

    {

      echo "En foo()<br>\n"

    }

  function bar ($arg ='')

    {

      echo " bar();El argumento ha sido '$arg'.<br>\n"

    }

  $func = 'foo';

  $func();

  $func='bar';

  $func('test');

  ?>

3.12. Clases y objetos

La sintaxis para definir una clase es la siguiente:

  <?php

  class Carta

    {

      var $items;

      function add_item ($artnr, $num)

        {

          $this->items[$artnr] +=$num;

        }

      function remove_item8$artnr, $num)

        {

          if ($this->$item($artnr, $num)

            {

              $this->items[$artnr] -= $num;

              return true;

233

            }

          else

            {

              return false;

            }

        }

    }

  ?>

El operador new crea una instancia de la clase Carta.

  $carta = new Carta;

La herencia en PHP se realiza con extends.

Los constructores de cada clase se llaman automáticamente por el

operador new . El constructor de cada clase debe tomar el mismo nombre

de la clase y cuando se trata de una clase derivada, hay que tener

cuidado porque sólo se llama automáticamente al constructor de dicha

clase pero no al constructor de la clase padre.

3.13. Manejo de Errores

En PHP hay cuatro tipos de errores:

Funciones de Error (1)

Warnings (2)

Errores Parse (4)

Notices (8)

El nivel de error por defecto es 7 (1+2+4), pero esto puede ser modificado en el

fichero de configuración php3.ini con la directiva error_reporting

Cualquier expresión en PHP se puede llamar con la "@" al principio que

invocará a la función de manejo de errores, y si track_errors está activada, el

error podremos encontrarlo en la variable $php_errormsg.

234

3.14. Creación de Imágenes GIF

Con PHP también es posible generar documentos GIF, aunque es necesario

compilar con la librería GD.

Un ejemplo de esta característica se muestra en el siguiente ejemplo:

   <?php

   Header("Content-type: image/gif");

   $string=implode($argb(" ");

   $im = imagecreateromgif("images/boton1.gif");

   $orange = ImageColorAllocate($im, 220, 210, 60);

   $px = (unagesx($im)-7.5*strlen($string))/2;

   ImageGif($im);

   ImageDestroy($im);

   ?>

Este ejemplo podría ser invocado desde cualquier página con la línea

  <img src="boton1.php3"?text

Con este método puedes generar la imagen adecuada dinámicamente. El

parámetro text nos permitirá poner el texto que deseemos en la imagen que

vamos a generar.

3.15. Problema de la autentificación de un Usuario con PHP

Para resolver este problema, se utiliza la función Header(). Esta función debe

ser llamada antes de que se haya producido ninguna salida del fichero html que

se está generando. Esta función envía una línea a la cabecera HTML que se

está generando. Y con esta función es posible enviar un mensaje de

"Autentificación Requerida " que forzará al usuario a completar los datos

solicitados.

El funcionamiento es muy sencillo. Una vez que el usuario ha completado los

datos que se le piden, se fuerza una nueva llamada al script con las variables

235

$PHP_AUTH_USER, $PHP_AUTH_PW y $PHP_AUTH_TYPE que contendrán

el nombre del usuario, el pasword y el tipo de autentificación.

Un ejemplo sencillo es:

  <?php

  if(!isset($PHP_AUTH_USER))

    {

      Header("WWW-Authenticate: Basic realm=\$quot;mi Realm\"");

      Header("HTTP/1.0 401 Unauthorized")

      echo "TeXto para enviar si se utiliza el botón de Cancelar");

      exit;

    }

  else

    {

      echo " Hola $PHP_AUTH_USER <p>";

      echo " Tu contraseña es $PHP_AUTH_PW <p>";

    }

  ?>

Hay que tener mucho cuidado con el orden en el que se envian los

diferentes tipos de cabeceras. Esta cabecera de autentificación, debe ir

siempre delante de la del tipo HTTP/1.0 401.

Otro ejemplo sencillo es:

  <?php

  function autentificacion()

    {

      Header( "WWW-authenticate: basic realm='Sistema de

autentificacion'");

      Header( "HTTP/1.0 401 Unauthorized");

      echo "You must enter a valid login ID and password to access this

236

resource\n";

      exit;

    }

  if(!isset($PHP_AUTH_USER) || ($SeenBefore == 1 && !

strcmp($OldAuth, $PHP_AUTH_USER)) )

    {

      autentificacion();

    }

  else

    {

      echo "Welcome: $PHP_AUTH_USER";

      echo "Old: $OldAuth";

      echo "<FORM ACTION=\"$PHP_SELF\" METHOD=POST>\n";

      echo "<INPUT TYPE=HIDDEN NAME=\"SeenBefore\" VALUE=\"1\">\

n";

      echo "<INPUT TYPE=HIDDEN NAME=\"OldAuth\"

VALUE=\"$PHP_AUTH_USER\">\n";

      echo "<INPUT TYPE=Submit VALUE=\"Re Authenticate\">\n";

      echo "</FORM>\n";

    }

  ?>

Nota: Sólo vale para PHP como módulo de Apache

3.16. Cookies

Para PHP las cookies son fáciles de utilizar. Para esto se utiliza la función

setcookie() y al igual que la función anterior, Header, tiene que ser invocada

antes de producir ninguna salida.

La función posee el siguiente prototipo:

  int setcookie(string name, string value, int expire, string path, string

domain, int secure);

Esta función define la cookie que se va a enviar y posee todos los argumentos

opcionales a excepción del nombre, aunque los no especificados deben ser

237

indicados "", menos los parametros expire que es un entero regular que puede

devolver la función mktime(), y secure, que indica si el cookie deberia ser

utilizado sólo sobre conexiones seguras, enteros que deben ser sustituidos por

un 0.

Un ejemplo sencillo podría ser:

  setcookie ("TestCookie", "Valor de Test");

  setcookie ("TestCookie", $value,time()+3600); /* expira en 1 hora*/

  setcookie ("TestCookie", $value,time()+3600, "/~rasmus/", ".utoronto.ca",

1);

Para poder ver el contenido de un cookie, podemos utilizar:

  echo $TestCookie;

  echo $HTTP_COOKIE_VARS["TestCookie"];

Se pueden utilizar vectores de cookies.

  setcookie ("cookie[three]", "cookiethree");

  setcookie ("cookie[two]", "cookietwo");

  setcookie ("cookie[one]", "cookieone");

  if (isset ($cookie))

    {

      while (list ($name, $value) = each ($cookie))

        {

          echo "$name == $value\n";

        }

    }

3.17. Utilización de ficheros remotos

PHP permite la utilización de ficheros remotos para realizar algún tipo de

lectura de ellos. En el caso de querer realizar algún tipo de escritura, se debe

hacer a través de un servidor ftp. Un ejemplo de ambas cosas se muestra a

continuación.

238

  <?php

  $file = fopen("http://www.php.net/", "r");

  if (!$file)

    {

      echo "<p>Unable to open remote file.\n";

      exit;

    }

  while (!feof($file))

    {

      $line = fgets($file, 1024);  /* sólo funciona si todo está en una línea */

      if (eregi("(.*)", $line, $out))

        {

          $title = $out[1];

          break;

        }

    }

  fclose($file);

  ?>

3.18. Manejo de conexiones

En PHP las conexiones que se mantinen pueden tener tres estados, Normal

(0), Aborted (1) y Timeout (2).

En un script normal, el estado es NORMAL, cuando el cliente desconecta, el

estado pasa a ser ABORTED y si el límite impuesto por PHP-imposed ha

transcurrido, (set_time_limit(), el tiempo por defecto es 30 segundos) el estado

es TIMEOUT.

Una función muy util para estos casos, es connection_status() que devuelve el

estado de la conexión.

3.19. Conexiones a bases de datos

239

Las conexiones persistentes son enlaces SQL que no se cierran cuando la

ejecución del script termina. El comportamiento de estas conexiones es el

siguiente.

Cuando se invoca una conexión de este tipo, PHP comprueba si existe una

conexión de este mismo tipo o por el contrario, se trata de una nueva conexión.

En el caso de que exista, se procede a su uso, y en el caso de que no exista, la

conexión se crea. Dos conexiones se consideran iguales cuando están

realizadas sobre el mismo servidor, con el mismo usuario y la misma

contraseña.

Pero en realidad, estas conexiones permanentes, no proporcionan ningún tipo

de funcionabilidad adicional frente a conexiones temporales, debido a la forma

en que los servidores Web funcionan.

Aún así se utilizan debido a la eficiencia, debido al tiempo de establecimiento

de la conexión, y debido a que si tienes una sóla conexión sobre el servidor, irá

mucho más rápido que si tienes 10 conexiones temporales, puesto que la carga

que soporta es diferente.

3.20. Funciones de PHP

MySql

La lista de funciones disponibles es la siguiente:

mysql_affected_rows: Otiene el número de tuplas modificadas en la

última operacion MySql.

int mysql_affected_rows(int [identificador de link])

Devuelve el número de líneas afectadas por la última operación, INSERT,

UPDATE o DELETE, asociadas con el identificador que se especifica.

Si no se especifica el link, se asume que se refiere al último.

240

Excepción: Si la última operación ha borrado todos los registros de una tabla,

esta función devuelve 0.

Esta función no tiene efecto con ninguna operación SELECT, puesto que no

modifican ninguna línea.

mysql_change_user: Modifica el usuario responsable de las

operaciones.

int mysql_change_user(string user, string password, string[database], int

[identificador de link]

Los parámetros database y link son opcionales.

Si la nueva combinación de usuario y password no es correcta, seguirá activa

la actual.

mysql_close: Cierra la conexión MySql.

int mysql_close(int [identificador de link]

Esta función cierra la conexión permanente que mantiene el link. El parámetro

es opcional. Si no se especifica, se cerrará la última conexión abierta.

Si una conexión no se cierra, el script la cierra automáticamente al terminar su

ejecución.

Esta función no opera correctamente con las conexiones abiertas con la

función mysql_pconnect().

mysql_connect: Open a connection to a MySQL Server.

int mysql_connect(string[hostname [:port][:/path/to/socket]],

string[username],string [password])

241

Esta función establece una conexión a un servidor mysql. Todos los

argumentos son opcionales y los valores por defecto son localhost, el usuario

dueño del proceso, sin password.

Si realizas dos veces una llamada a esta función con los mismos parámetros,

devuelve el mismo identificador que para la llamada anterior.

Todas las conexiones terminan al terminar la ejecución del script, a no ser que

se elimine la conexión llamando a la función mysql_close().

mysql_create_db: Crea una base de datos en el gestor de Bases de

Datos.

int mysql_create_db(string databaseName, int [identificador del link])

Esta función crea una nueva base de datos asociada al link especificado.

Para mantener la coherencia con otras versiones, se utiliza mysql_createdb()

mysql_data_seek: Realiza un movimiento en el puntero de los datos

resultado.

int mysql_data_seek(int result_identifier, int row_number)

Esta función permite que el puntero a los resultados apunte a la línea

especificada.

El número de líneas comienza en 0.

mysql_db_query: Realiza una consulta a una base de datos.

int mysql_db_query(string database, string query, int [identificador del

link]

242

Selecciona la base de datos database y ejecuta una consulta. Si no se

especifica el link, utiliza el último abierto, si no existe, intenta optener uno

llamando internamente a la función mysql_connect() sin argumentos.

mysql_drop_db: Realiza una operación Drop sobre una base de datos.

int mysql_drop_db(string database_name, int [identificador del link])

Devuelve True o False según haya o no tenido éxito.

Nota: Cuidado, según la versión de MySql, borra toda la base de datos aún

conteniendo tablas con datos.

mysql_errno: Devuelve un código de error relacionado con la última

operación MySql realizada.

int mysql_errno(int [identificador del link]

Esta función devuelve el número del código de error que devuelve el servidor

MySql.

mysql_error: Devuelve el mensaje de error asociado a un código concreto

relacionado con la última operación MySql realizada.

string mysql_error(int [identificador del link]

Devuelve la cadena asociada a un error que posee el identificador de conexión

que se especifica.

mysql_fetch_array: Introduce el resultado en un array asociativo.

array mysql_fetch_array(int result, int [result type])

243

Esta función es una versión extendida de mysql_fetch_row(). Lo que hace es

almacenar el resultado en un array indexado, almacenando así los datos en un

índice asociativo utilizando los nombres de los campos como claves.

Si existen más de una columna con el mismo nombre, tendrá precedencia la

última columna. Para acceder a lal otras columnas con el mismo nombre, se

debe indexar la columna o hacerun alias para ella.

Ejemplo:

  select tabla1.precio as precio 1, tabla2.precio as precio2 from tabla1, tabla2

El segundo argumento, es una constante que puede tomar los siguientes

valores.

MYSQL_ASSOC

MYSQL_NUM

MYSQL_BOTH

mysql_fetch_field: Devuelve un objeto con la información de un resultado.

object mysql_fetch_field(int result, int [field_offset])

Devuelve un objeto con la información que contiene result Puede utilizarse para

obtener información de los campos de ciertas consultas. Si el campo del

desplazamiento no está especificado, se selecciona el siguiente dato que no

haya sido ya asignado mediante esta función.

Las propiedades del objeto son:

o name: Nombre del campo

o table: Nombre de la tabla a la que pertenece el campo.

o max_length: Longitud máxima.

o not_null: Será verdadero si el campo poosee esta propiedad.

o primary_key: Verdadero si el campo es la clave principal.

244

o unique_key: Verdadero si el campo es clave única.

o multiple_key: Verdadero si el campo no es clave única.

o numeric: Verdadero si se trata de un campo numérico.

o blob: Verdadero si la columna es a BLOB.

o type: Tipo de la columna.

o unsigned: Verdadero si se trata de un dato sin signo.

o zerofill: Verdadero si la columna tiene la propiedad zerofill.

mysql_fetch_lengths: Obtener la longitud de los resultados.

array mysql_fetch_lengths(int result)

Devuelve un array que contiene las longitudes de todos los campos que forman

el último registro asignado con la función mysql_fetch_row(),

mysql_fetch_array() o mysql_fetch_object().

mysql_fetch_object: Devuelve el resultado como un objeto.

object mysql_fetch_object(int result, int [result_type])

Devuelve un objeto con las propiedades del último registro extraido de un

resultado.

Esta función es igual que mysql_fetch_array() con la diferencia de que se

obtiene un objeto en vez de un array.

El segundo argumento, es una constante que puede tomar los siguientes

valores.

MYSQL_ASSOC

MYSQL_NUM

MYSQL_BOTH

mysql_fetch_row: Devuelve el resultado como un array.

245

array mysql_fetch_row(int result)

Devuelve un array con un registro del resultado o false en el caso de que no

existan registros.

Si se llama dos veces a esta función, él asignará el primer registro del resultado

la primera vez y el segundo registro del resultado la segunda vez.

mysql_field_name: Devuelve el nombre de un campo especificado en un

resultado.

string mysql_field_name(int result, int field_index)

Devuelve el nombre del campo que se especifica, mediante el orden que ocupe

dentro del resultado.

mysql_field_seek: Asigna el puntero de los resultados a una posición

determinada.

int mysql_field_seek(int result, int field_offset)

Busca el desplazamiento que se especifica en el segundo argumento, dentro

del resultado.

mysql_field_table: Obtiene el nombre de la tabla de un campo

especificado.

string mysql_field_table(int result, int field_offset)

mysql_field_type: Obtiene el tipo de un campo especificado.

Obtiene el nombre de la tabla para el campo que se indica en el

desplazamiento.

246

string mysql_field_type(int result, int field_offset)

Se devuelve el tipo del campo que se indica mediante el desplazamiento.

Las cadenas que devuelve pueden ser:

int

real

string

blob

Otros tipos detallados en la documentación de MySql.

mysql_field_flags: Obtiene los "Flags" asociados del campo especificado.

string mysql_field_flags(int result, int field_offset)

Devuelve una cadena con las propiedades del campo separadas por un

espacio. Para partir esa cadena se puede utilizar la función explode()

Las palabras que puede devolver son:

not_null

primary_key

unique_key

multiple_key

blob

unsigned

zerofill

binary

enum

auto_increment

timestamp

mysql_field_len: Obtiene las longitud de un campo especificado.

int mysql_field_len(int result, int field_offset)

247

Devuelve la longitud del campo especificado.

mysql_free_result: Libera la memoria de los resultados.

int mysql_free_result(int result)

Libera la memoria que utiliza el parámetro.

mysql_insert_id: Obtiene el identificador de la última operación INSERT.

int mysql_insert_id(int [link_identifier] )

Devuelve el ID generado para un campo AUTO_INCREMENTED. Devolverá el

id autogenerado devuelto por la última operación INSERT del enlace que se

especifica como argumento.

Si el identificador no se especifica, se utiliza la última conexión abierta.

mysql_list_fields: Lista los campos resultado.

int mysql_list_fields(string database_name, string table_name, int

[link_identifier]

Devuelve información del nombre de la tabla que se proporciona. El puntero

que devuelve, puede ser utilizado con las funciones mysql_field_flags(),

mysql_field_len(), mysql_field_name() y mysql_field_type().

El resultado es un entero positivo, sólo devuelve -1 en caso de que exista algún

error.

mysql_list_dbs: Lista las bases de datos disponibles en el servidor

MySQL.

248

int mysql_list_dbs(int [link_identifier] )

Devuelve un puntero que contiene la lista de bases de datos disponibles en ese

servidor MySql.

Con la información que devuelve, puede llamarse a la función

mysql_tablaname().

mysql_list_tables: Lista las tablas de una base de datos MySql.

int mysql_list_tables(string database, int [link_identifier] )

Extrae un putero a la lista de tablas que están en una base de datos.

Para extraer el nombre de las tablas se puede posteriormente utilizar

mysql_db_query() o mysql_tablename().

mysql_num_fields: Otiene el número de campos del resultado.

int mysql_num_fields(int result);

Devuelve el número de campos que contiene el parámetro resultado.

mysql_num_rows: Obtiene el número de líneas del resultado.

int mysql_num_rows(int result)

Devuelve el número de líneas que contiene el parámetro resultado.

mysql_pconnect: Abre una conexión permanente con una base de datos.

int mysql_pconnect(string [hostname [:port] [:/path/to/socket] ] , string

[username] , string [password] )

249

Devuelve una conexión persistente a un servidor MySql.

Todos los argumentos son opcionales y sus valores son los mismos que para la

función mysql_connect().

Esta función primero, intenta encontrar una conexión ya existente, si la

encuentra, devuelve un identificador para ella, y en el caso de que no la

encuentre, abre una nueva conexión permanente.

Despues de esto, mantiene la conexión hasta que finaliza la ejecución del

script.

Hay que tener cuidado, porque mysql_close() no cierra conexiones abiertas con

esta función.

mysql_query: Envia una consulta SQL a MySQL.

int mysql_query(string query, int [identificador del link] )

Envía una consulta a una base de datos activa en el servidor asociado al link

que se especifica. En el caso de que no se especifique ninguna conexión

abierta, la función intenta reestablecer una conexión con la función

mysql_connect().

La cadena de la consulta, debe terminar con ;.

La función devuelve TRUE o FALSE si la consulta tiene éxito. Si el valor

devuelto es TRUE, significa que la consulta puede ser realizada, no que existan

datos que respondan a esa consulta.

Para consultar cuantas líneas responden a esa consulta, se puede utilizar la

función mysql_affecter_rows() y nos dirá cuantas líneas se han visto afectadas

por la última operación INSERT, DELETE, REPLACE o UPDATE. En el caso

de tratarse de una operación SELECT la función mysql_query() devuelve un

identificador de resultado que se puede utilizar con la función mysql_result().

250

mysql_result: Obtiene los datos resultados.

int mysql_result(int result, int row, mixed [field] )

Devuelve el contenido de una celda de la tabla dinámica que devuelve MySql

como resultado de una operación previa.

El último argumento es opcional y puede contener el desplazamiento del

campo que se desea obtener, el nombre del campo o algo como tabla.campo o

el alias del campo que se desee consultar si se establecio previamente.

Cuando se trabaja con amplios conjuntos de resultados, es mejor utilizar

alguna de las funciones que extraen un registro de esa consulta.

Hay que tener cuidado de no hacer llamadas a funciones que obtienen

resultados de result junto con esta función, puesto que el puntero que va

leyendo de los resultados, puede perderse.

mysql_select_db: Selecciona una base de datos MySql.

int mysql_select_db(string database_name, int [identificador del link] )

Esta función asigna la base de datos activa en el servidor asociado al

identificador del link.

mysql_tablename: Obtiene el nombre de la tabla de un campo.

string mysql_tablename(int result, int i)

Esta función devuelve el nombre de una tabla de un puntero de resultados que

ha devuelto previamente la función mysql_num_rows.

251

PROGRAMACIÓN EN INTERNET

UNIDAD IV

Apache + PHP + MySql + PhpMyAdmin como módulo de Apache

4.1 - Instalación de Apache

4.2 - Instalación de PHP

4.3 - Instalación de MySQL

4.4 - Instalación de phpMyAdmin

4.5 - Configurando los usuarios del servidor MySQL

4.5.1 - Creación de nuestro usuario para MySQL

4.5.2 - Borrado de usuarios no deseados

4.5.3 - Recarga de privilegios

4.5.4 - Configurar los script para el nuevo usuario

4.6 - Cómo realizar las actualizaciones a versiones superiores

4.6.1 - Cómo actualizar Apache

4.6.2 - Cómo actualizar PHP

4.6.3 - Cómo actualizar MySQL

4.6.4 - Cómo actualizar phpMyAdmin

4.7 - Extra: instalación de un servidor de correo SMTP

4.8 - Extra: Apache Manager para Apache 1.3.X

INTRODUCCION

Én esta unidad se realizara un breve manual para una instalación rápida de

PHP como módulo de Apache. Recuerda que el PHP también puede instalarse

como CGI aunque no es el tipo de instalación que trataremos en este manual.

ATENCIÓN: esta guía de instalación deja la configuración por defecto de todo

el software de servidor mencionado en la misma. No se centra en el

afinamiento de la configuración ni detalles sobre seguridad. El objetivo es crear

un servidor en el PC para desarrollo y ayuda de los programadores, no para

instalar un servidor de cara a su uso en la red. Quien use esta guía de

instalación para lo segundo, corre bajo su responsabilidad, nosotros sólo

podemos sugerirle que haga los ajustes de seguridad que crea convenientes.

252

En este manual no abordaremos tal tema.

También hay disponible una nota para instalar Apache, Mysql y PHP de forma

fácil utilizando paquetes preconfigurados.

1 - Instalación de Apache - Web oficial:

http://www.apache.org

En primer lugar vamos a distinguir dos tipos de Apache, que se corresponderán

con las versiones 1.3.X y 2.0.X de este programa. El motivo de la distinción es

que se usan bastante ambas versiones dependiendo del sistema operativo y la

configuración es ligeramente distinta en ambos. Por ejemplo, ambas versiones

son estables en sistemas Windows XP, pero la 2.0.X puede volverse inestable

bajo Windows 98. Por tanto, se explicará la forma de configuración para ambos

y luego serás tú quien decidas con cual te quedas. Así, si uno te falla siempre

podrás utilizar el otro, pues da lo mismo.

Deberemos descargar el Apache en su versión para windows. Para ello

podemos acceder por la siguiente URL: http://httpd.apache.org/download.cgi

En cualquier caso, podemos encontrar cualquier archivo necesario en la

carpeta httpd/binaries/win32 del servidor que usemos para la descarga

(pincharíamos en Other files y eso nos conduciría al servidor seleccionado). Lo

que es importante destacar es que lo que hay que destacar son los Binarios

(Binary) para Windows (Win32), no los códigos fuente.

1.1 - Caso A: Instalación de Apache 1.3.X

Si te decides por utilizar la versión 1.3.X, buscaremos la última versión de

este tipo. En la fecha de actualización de este manual, la última versión estable

era la 1.3.33, y el archivo que tenemos que bajar es: apache_1.3.33-win32-

x86-no_src.exe También puede existir el mismo archivo pero con extensión

msi, en este caso podríamos bajarlo si disponemos del Windows Installer, la

ventaja es que ocupa menos.

253

Bien, una vez que lo tengamos, ejecutamos el instalador y vamos recorriendo

las pantallas hasta que salga una donde nos piden unos datos, en cuyo caso

pondremos:

Network Domain: 127.0.0.1

Server Name: 127.0.0.1

Administrator’s Email Address: nuestro e-mail, aunque no es totalmente

necesario.

Run when started manually, only for me. Seleccionamos esta opción.

La IP 127.0.0.1 es la dirección IP asociada a nuestra máquina, es decir el host

local

o vulgarmente conocido como Localhost. Es importante decir que a la hora de

probar

tus scripts en modo local, da igual que pongas 127.0.0.1 o localhost.

Finalmente,

recordar que el Apache se instala por defecto en la carpeta:

C:\Archivos de programa\Apache Group\Apache\

Bien, ahora vamos a instalar el PHP. Asegúrate ahora de tener cerrado el

Apache.

1.2 - Caso B: Instalación de Apache 2.0.X

254

Para esta versión, en la fecha de actualizción del manual la última versión

disponible era la 2.0.53, por lo que el archivo que tenemos que bajar puede ser:

apache_2.0.53-win32-x86-no_ssl.exe También puede existir el mismo archivo

pero con extensión msi, en este caso podríamos bajarlo si disponemos del

Windows

Installer, la ventaja es que ocupa menos.

Bien, una vez que lo tengamos ejecutamos el instalador y vamos recorriendo

las pantallas

hasta que salga una donde nos piden unos datos, en cuyo caso pondremos:

Network Domain: 127.0.0.1

Server Name: 127.0.0.1

Administrator’s Email Address: nuestro e-mail, aunque no es totalmente

necesario.

For All Users, on Port 80, as a Service: seleccionamos esta opción.

La IP 127.0.0.1 es la dirección IP asociada a nuestra máquina, es decir el host

local o vulgarmente conocido como Localhost. Es importante decir que a la

hora de probar tus scripts en modo local, da igual que pongas 127.0.0.1 o

localhost.

Finalmente, recordar que el Apache se instala por defecto en la carpeta:

C:\Archivos de programa\Apache Group\Apache\

255

Bien, ahora vamos a instalar el PHP. Asegúrate ahora de tener cerrado el

Apache.

2 - Instalación de PHP - Web oficial:

http://www.php.net

2.1 - Copia de archivos

Dependiendo de si estamos instalando una versión 4 de PHP o una versión 5,

seguiremos una parte o la otra.

2.1.1 - Instalación de PHP4

Procedemos a descargar el PHP para Windows. El archivo está localizado en

la sección Downloads, apartado Windows Binaries, y es el Zip Package (no el

installer, aunque éste ocupe menos luego no nos servirá). Para la versión

4.3.10, que es la versión disponible a fecha de actualización de este manual,

es: PHP 4.3.10 zip package [7,405Kb]. Según vayan saliendo nuevas

versiones podrás irlas encontrando en la citada sección downloads.

Una vez descargado todo el ZIP, nos creamos una carpeta en el sitio donde

queramos instalar los archivos del servidor (PHP, MySQL…), por ejemplo nos

creamos una carpeta en la raíz del disco duro y que quede así: C:\Servidor\

Ahora extraemos los archivos del ZIP de PHP dendro de esa carpeta. En este

caso se crea la carpeta C:\Servidor\php-4.3.10-Win32\ pero como no nos

gusta su nombre procedemos a renombrarla a C:\Servidor\PHP\

Y ahora hay que coger el php4ts.dll (localizado en C:\Servidor\PHP\

php4ts.dll) y copiarlo al directorio System (en Windows 9x) o System32

(NT,2000,XP,2003) de la carpeta del Windows. Si hay otro archivo en System o

System32 lo sobreescribimos. Igualmente coger los archivos que están en la

carpeta C:\Servidor\PHP\dlls\ y copiarlos a la carpeta System o System32

igual que hicimos con el archivo php4ts.dll

2.1.2 - Instalación de PHP5

256

Procedemos a descargar el PHP para Windows. El archivo está localizado en

la sección Downloads, apartado Windows Binaries, y es el Zip Package (no el

installer, aunque éste ocupe menos luego no nos servirá). Para la versión 5.0.3,

que es la versión disponible a fecha de actualización de este manual, es:

PHP 5.0.3 zip package [7,433Kb]. Según vayan saliendo nuevas versiones

podrás irlas encontrando en la citada sección downloads.

Una vez descargado todo el ZIP, nos creamos una carpeta en el sitio donde

queramos instalar los archivos del servidor (PHP, MySQL…), por ejemplo nos

creamos una carpeta en la raíz del disco duro y que quede así: C:\Servidor\

Dentro de esta carpeta nos creamos otra carpeta y la llamamos PHP. Luego

extraemos los archivos del ZIP dendro de esa carpeta PHP, tal que los

contenidos del ZIP quedarán dentro de la ruta C:\Servidor\PHP\

Y ahora hay que coger el todos los archivos DLL localizados en la carpeta

principal C:\Servidor\PHP\ y copiarlos al directorio System (en Windows 9x) o

System32 (NT,2000,XP,2003) de la carpeta del Windows (los archivos DLL

contenidos en la carpeta EXT no hace falta copiarlos).

2.2 - Configuración del archivo php.ini

Igual que el paso anterior, hay pequeñas diferencias dependiendo de si

estamos instalando PHP4 o PHP5, asi que elije tu caso.

2.2.1 - Instalación de PHP4

El siguiente paso es configurar el php.ini. Renombramos o copiamos el archivo

C:\Servidor\PHP\php.ini-dist y le ponemos php.ini Ahora lo editamos

con el mismo block de notas. Si lo necesitáramos (lee antes la explicación),

editamos la línea register_globals = Off y la colocamos

el valor: register_globals = On

¿Qué hago con register_globals? ¿ON u OFF?

257

Activar esta directiva nos permite asumir que las variables son globales y

pueden llegar por cualquier método (POST, GET, COOKIE, SERVER, etc). Así,

por ejemplo, si utilizamos una variable global de sesión o cookie se puede

suplantar fácilmente mediante una variable por url, con lo cual nuestro script no

es seguro. Un buen programador de PHP tendría la directiva en OFF y usaría

los arrays globales ($HTTP_X_VARS) o los superglobales $_POST, $_GET,

etc., que están disponibles a partir de la versión 4.1.X de PHP. ¿Y por qué?

Pues por esos temas de seguridad en los script y porque debemos

acostumbrarnos a no manejar variables globales ya que en un futuro el PHP

tendrá la opción en OFF por defecto y no podremos cambiarla. Sin embargo,

por temas de compatibilidad con script antiguos o que hagan uso de variables

globales, podría interesarnos activar esta característica, pero repito

que lo deseable sería tenerla en OFF y hacer uso de los arrays globales o

superglobales.

A continuación vamos a indicar a PHP dónde se guardan las extensiones.

Dentro del php.ini buscamos extension_dir y le ponemos la carpeta que

contiene los archivos php_xxx.dll, que por defecto es la carpeta extensions

dentro de PHP.

IMPORTANTE: durante toda la configuración de directorios, debes utilizar

esta barra "/" y no esta "\", además de ponerlo entre comillas. O sea, que debe

quedar así:

;Directory in which the loadable extensions (modules) reside.

extension_dir = "C:/Servidor/PHP/extensions/"

Además podemos activar las extensiones que queramos o necesitemos, para

lo cual buscamos Windows Extensions y para cargar las extensiones les

quitamos el ; de delante. Por ejemplo, si quisiéramos cargar la extensión

gd2.dll (para manejar las funciones PHP relativas a imágenes) deberíamos

cambiar ;extension=php_gd2.dll por extension=php_gd2.dll

Puedes ver para qué sirve cada extensión en el Manual oficial de PHP.

Como nota adicional, resaltar que hay algunas extensiones que requieren de

258

librerías extra que no vienen en el paquete completo de PHP, y para hacerlas

funcionar tendremos que buscar dichas librerías. No actives todas las librerías

a diestro y siniestro porque luego saldrán errores de que no se encuentra tal

archivo; antes de instalar una librería, comprueba que en la carpeta de PHP

tienes los archivos DLL correspondientes.

Ahora, si vamos a hacer pruebas con upload de archivos via HTTP, debemos

indicar el directorio donde los archivos se almacenarán temporalmente. Para

ello buscamos upload_tmp_dir y le damos el valor de una carpeta que exista

Por ejemplo, en nuestro directorio C:\Servidor\PHP\ creamos una carpeta

uploads, por lo que quedará algo así:

; Temporary directory for HTTP uploaded files (will use system default if not

; specified).

upload_tmp_dir = "C:/Servidor/PHP/uploads/"

Si queremos cambiar el tamaño máximo de los archivo que pueden subirse via

HTTP,

buscamos upload_max_filesize y cambiamos el valor por defecto que trae,

2M (2 MB), por el que queramos. No se recomienda poner un valor alto.

; Maximum allowed size for uploaded files.

upload_max_filesize = 2M

Para trabajar con sesiones, debemos especificar un directorio donde se

guarden los archivos temporales. Al igual que 2 pasos antes, buscamos

session.save_path

y le damos el valor de un directorio que exista (o lo creamos):

session.save_path = "C:/Servidor/PHP/sessions/"

A continuación copiamos el php.ini a la carpeta C:\Windows\ o C:\WinNT\

según nuestra versión de Windows.

¡Ahora vamos a decirle al Apache que tenemos el PHP!

259

2.2.2 - Instalación de PHP5

El siguiente paso es configurar el php.ini. Renombramos o copiamos el archivo

C:\Servidor\PHP\php.ini-dist y le ponemos php.ini Ahora lo editamos

con el mismo block de notas. Si lo necesitáramos (lee antes la explicación),

editamos la línea register_globals = Off y la colocamos

el valor: register_globals = On

¿Qué hago con register_globals? ¿ON u OFF?

Activar esta directiva nos permite asumir que las variables son globales y

pueden

llegar por cualquier método (POST, GET, COOKIE, SERVER, etc). Así, por

ejemplo, si utilizamos una variable global de sesión o cookie se puede

suplantar fácilmente mediante una variable por url, con lo cual nuestro script no

es seguro. Un buen programador de PHP tendría la directiva en OFF y usaría

los arrays globales ($HTTP_X_VARS) o los superglobales $_POST, $_GET,

etc., que están disponibles a partir de la versión 4.1.X de PHP. ¿Y por qué?

Pues por esos temas de seguridad en los script y porque debemos

acostumbrarnos a no manejar variables globales ya que en un futuro el PHP

tendrá la opción en OFF por defecto y no podremos cambiarla.

Sin embargo, por temas de compatibilidad con script antiguos o que hagan uso

de variables globales, podría interesarnos activar esta característica, pero

repito que lo deseable sería tenerla en OFF y hacer uso de los arrays globales

o superglobales.

A continuación vamos a indicar a PHP dónde se guardan las extensiones.

Dentro del php.ini buscamos extension_dir y le ponemos la carpeta que

contiene los archivos php_xxx.dll, que por defecto es la carpeta ext dentro de

PHP.

IMPORTANTE: durante toda la configuración de directorios, debes utilizar

esta barra "/" y no esta "\", además de ponerlo entre comillas. O sea, que debe

quedar así:

260

; Directory in which the loadable extensions (modules) reside.

extension_dir = "C:/Servidor/PHP/ext/"

Además podemos activar las extensiones que queramos o necesitemos, para

lo cual buscamos Windows Extensions y para cargar las extensiones les

quitamos el ; de delante. Por ejemplo, si quisiéramos cargar la extensión

gd2.dll (para manejar las funciones PHP relativas a imágenes) deberíamos

cambiar ;extension=php_gd2.dll por extension=php_gd2.dll

Puedes ver para qué sirve cada extensión en el Manual oficial de PHP.

Como nota adicional, resaltar que hay algunas extensiones que requieren de

librerías

extra que no vienen en el paquete completo de PHP, y para hacerlas funcionar

tendremos que buscar dichas librerías. No actives todas las librerías a diestro y

siniestro porque luego saldrán errores de que no se encuentra tal archivo;

antes de instalar una librería, comprueba que en la carpeta de PHP tienes los

archivos DLL correspondientes.

IMPORTANTE: la librería php_mysql.dll es la que permite manejar las

funciones relacionadas con MySQL, y por defecto en PHP5 viene desactivada,

por tanto vamos a activarla de la forma que indicamos antes: buscamos

;extension=php_mysql.dll y le quitamos el ; de delante.

Ahora, si vamos a hacer pruebas con upload de archivos via HTTP, debemos

indicar el directorio donde los archivos se almacenarán temporalmente. Para

ello buscamos upload_tmp_dir y le damos el valor de una carpeta que exista.

Por ejemplo, en nuestro directorio C:\Servidor\PHP\ creamos una carpeta

uploads, por lo que quedará algo así:

; Temporary directory for HTTP uploaded files (will use system default if not

; specified).

upload_tmp_dir = "C:/Servidor/PHP/uploads/"

261

Si queremos cambiar el tamaño máximo de los archivo que pueden subirse via

HTTP,

buscamos upload_max_filesize y cambiamos el valor por defecto que trae,

2M (2 MB), por el que queramos. No se recomienda poner un valor alto.

; Maximum allowed size for uploaded files.

upload_max_filesize = 2M

Para trabajar con sesiones, debemos especificar un directorio donde se

guarden los archivos temporales. Al igual que 2 pasos antes, buscamos

session.save_path

y le damos el valor de un directorio que exista (o lo creamos):

session.save_path = "C:/Servidor/PHP/sessions/"

A continuación copiamos el php.ini a la carpeta C:\Windows\ o C:\WinNT\

según nuestra versión de Windows.

¡Ahora vamos a decirle al Apache que tenemos el PHP!

2.3 - Configuración del archivo httpd.conf de Apache

Ya que al inicio hicimos una distinción para los casos de Apache 1.3.X y para

Apache 2.0.X, no vamos a ser menos ahora y distinguiremos los dos tipos. El

motivo es que la gestión de los módulos es distinta en ambas versiones, por lo

que la configuración no es idéntica. Asimismo cambia algo la configuración si

se trata de PHP4 o PHP5, asi que tenemos 4 casos posibles combinando las

dos versiones de Apache y las dos de PHP. Hay que editar el archivo

httpd.conf que encontramos en la carpeta Conf dentro del directorio del

Apache.

2.3.1 - Caso A: httpd.conf para Apache 1.3.X

262

Buscamos Dynamic Shared Object (DSO) Support que es donde se cargan

los módulos. Ahí vamos a cargar el módulo de PHP para Apache, dando la

dirección del archivo php4apache.dll (PHP4) o php5apache.dll (PHP5) que lo

contiene. Encontramos hasta un ejemplo:

# Example:

# LoadModule foo_module modules/mod_foo.so

#

Y ahora añadimos justo debajo:

- Si estamos instalando PHP4:

LoadModule php4_module C:/Servidor/PHP/sapi/php4apache.dll

- Si estamos instalando PHP5:

LoadModule php5_module C:/Servidor/PHP/php5apache.dll

De tal manera que para PHP4 tiene que quedar así:

# Example:

# LoadModule foo_module modules/mod_foo.so

#

LoadModule php4_module C:/Servidor/PHP/sapi/php4apache.dll

Y para PHP5 tiene que quedar así:

# Example:

# LoadModule foo_module modules/mod_foo.so

#

LoadModule php5_module C:/Servidor/PHP/php5apache.dll

Ahora bajamos un poco por el httpd.conf y llamamos al módulo mod_php4.c

en caso de que estemos instalando PHP4 o al módulo mod_php5.c si estamos

instalando PHP5, de tal manera que para PHP4 quede así:

ClearModuleList

AddModule mod_php4.c

#AddModule mod_vhost_alias.c

Y para PHP5 debe quedar así:

ClearModuleList

AddModule mod_php5.c

#AddModule mod_vhost_alias.c

Vale, ahora buscamos en el httpd.conf el modulo mod_dir.c y nos sale esto:

263

<IfModule mod_dir.c>

DirectoryIndex index.html

</IfModule>

Modificamos la línea central para que si entramos en un directorio tipo

http://127.0.0.1/directorio/ nos autoejecute el index predeterminado

(si existe) y no nos salga un mensaje de error. Puedes usar más nombres si lo

prefieres. Se ejecutarán por orden: si no encuentra el primero, pasa al

segundo; si no está el segundo, pasa al tercero, y así sucesivamente hasta que

si no encuentra ninguno entonces da error. En la siguiente línea, si en nuestro

directorio tenemos un index.htm y un index.php, por defecto se ejecutará el

index.htm ya que está antes.

DirectoryIndex index.html index.htm index.php index.php3 index.php4

index.phtml

Ahora le añadimos debajo estas líneas (en la primera de ellas, si estamos

instalando PHP5 también podemos añadir la extensión .php5 además de las

que aparecen):

AddType application/x-httpd-php .php .php3 .php4 .phtml

AddType application/x-httpd-php-source .phps

La primera indica las extensiones que serán interpretadas por el Apache. Por

ejemplo podemos añadir la extensión .htm o .html para que el Apache ejecute

el código PHP contenido en esas páginas (es decir, el uso de código PHP no

está limitado exclusivamente a archivos *.PHP). La segunda sirve para que si

entras en una página loquesea.phps entonces se muestra el código PHP a

color, muy útil si queremos por ejemplo mostrar el código fuente a color en una

página. De tal forma que al final todo queda así:

<IfModule mod_dir.c>

DirectoryIndex index.html index.htm index.php index.php3 index.php4

index.phtml

264

AddType application/x-httpd-php .php .php3 .php4 .phtml

AddType application/x-httpd-php-source .phps

</IfModule>

El directorio predeterminado para guardar nuestras páginas es el htdocs del

Apache:

C:\Archivos de programa\Apache Group\Apache\htdocs\

Pero podemos cambiarlo fácilmente. Buscamos DocumentRoot y nos sale

esto: DocumentRoot "C:/Archivos de programa/Apache Group/Apache/htdocs"

Nosotros sustituimos la carpeta htdocs del Apache por la que queramos. Todos

los archivos que vayas a probar con el Apache deberán estar localizados en

esta carpeta. Por ejemplo nos creamos una carpeta WEB dentro del directorio

del servidor:

DocumentRoot "C:/Servidor/WEB/"

Y ya podemos guardar el archivo httpd.conf

2.3.2 - Caso B: httpd.conf para Apache 2.0.X

Buscamos Dynamic Shared Object (DSO) Support que es donde se cargan

los módulos. Ahí vamos a cargar el módulo de PHP para Apache, dando la

dirección del archivo php4apache2.dll (PHP4) o php5apache2.dll (PHP5) que lo

contiene. Encontramos hasta un ejemplo:

# Example:

# LoadModule foo_module modules/mod_foo.so

#

Y ahora añadimos justo debajo:

- Si estamos instalando PHP4:

LoadModule php4_module C:/Servidor/PHP/sapi/php4apache2.dll

- Si estamos instalando PHP5:

LoadModule php5_module C:/Servidor/PHP/php5apache2.dll

De tal manera que para PHP4 tiene que quedar así:

# Example:

265

# LoadModule foo_module modules/mod_foo.so

#

LoadModule php4_module C:/Servidor/PHP/sapi/php4apache2.dll

Y para PHP5 tiene que quedar así:

# Example:

# LoadModule foo_module modules/mod_foo.so

#

LoadModule php5_module C:/Servidor/PHP/php5apache2.dll

El directorio predeterminado para guardar nuestras páginas es el htdocs del

Apache:

C:\Archivos de programa\Apache Group\Apache\htdocs\

Pero podemos cambiarlo fácilmente. Buscamos DocumentRoot y nos sale

esto:

#

# DocumentRoot: The directory out of which you will serve your

# documents. By default, all requests are taken from this directory, but

# symbolic links and aliases may be used to point to other locations.

#

DocumentRoot "C:/Archivos de programa/Apache Group/Apache/htdocs"

Nosotros sustituimos la carpeta htdocs del Apache por la que queramos. Todos

los archivos que vayas a probar con el Apache deberán estar localizados en

esta carpeta. Por ejemplo nos creamos una carpeta WEB dentro del directorio

del servidor:

DocumentRoot "C:/Servidor/WEB/"

Por lo que construiremos toda nuestra página dentro de ese directorio, que

equivale al directorio raíz de nuestro host local.

Ahora buscamos el DirectoryIndex y nos sale algo como esto:

#

# DirectoryIndex: sets the file that Apache will serve if a directory

# is requested.

266

#

# The index.html.var file (a type-map) is used to deliver content-

# negotiated documents. The MultiViews Option can be used for the

# same purpose, but it is much slower.

#

DirectoryIndex index.html index.html.var

Modificamos la última línea para que si entramos en un directorio tipo

http://127.0.0.1/directorio/ nos autoejecute el index predeterminado

(si existe) y no nos salga un mensaje de error. Puedes usar más nombres si lo

prefieres. Se ejecutarán por orden: si no encuentra el primero, pasa al

segundo; si no está el segundo, pasa al tercero, y así sucesivamente hasta que

si no encuentra ninguno entonces da error. En la siguiente línea, si en nuestro

directorio tenemos un index.htm y un index.php, por defecto se ejecutará el

index.htm ya que está antes.

DirectoryIndex index.html index.htm index.php index.php3 index.php4

index.phtml index.html.var

Ahora le añadimos debajo estas líneas (en la primera de ellas, si estamos

instalando PHP5 también podemos añadir la extensión .php5 además de las

que aparecen):

AddType application/x-httpd-php .php .php3 .php4 .phtml

AddType application/x-httpd-php-source .phps

La primera indica las extensiones que serán interpretadas por el Apache. Por

ejemplo podemos añadir la extensión .htm o .html para que el Apache ejecute

el código PHP contenido en esas páginas (es decir, el uso de código PHP no

está limitado exclusivamente a archivos *.PHP). La segunda sirve para que si

entras en una página loquesea.phps entonces se muestra el código PHP a

color, muy útil si queremos por ejemplo mostrar el

código fuente a color en una página. De tal forma que al final todo queda así:

#

# DirectoryIndex: sets the file that Apache will serve if a directory

267

# is requested.

#

# The index.html.var file (a type-map) is used to deliver content-

# negotiated documents. The MultiViews Option can be used for the

# same purpose, but it is much slower.

#

DirectoryIndex index.html index.htm index.php index.php3 index.php4

index.phtml index.html.var

AddType application/x-httpd-php .php .php3 .php4 .phtml

AddType application/x-httpd-php-source .phps

Y ya podemos guardar el archivo httpd.conf

2.4 - Probando nuestro servidor Apache

Ahora vamos a probar el Apache y PHP, para lo cual deberemos arrancar el

Apache.

Para Apache 1.3.X sólo tenemos que arrancar el apache.exe de la carpeta del

Apache para iniciar el servidor, con lo cual nos sale una ventanita de MS-Dos

donde nos indicará que está activo (running) o no. Basta cerrar la ventanita de

MS-Dos para desactivar el Apache.

Para Apache 2.0.X accederemos desde los accesos directos que se crean en

el menú de inicio al acceso directo Monitor Apache Servers y aparecerá un

icono al lado del reloj. Pinchando en el icono, sale un menú desde donde

podremos iniciar, apagar y reiniciar el Apache. Como queremos encenderlo, si

no lo hace automáticamente le daremos a Start. Si ya estaba encendido le

daremos a Restart útil si cambiamos alguna configuración de PHP "al vuelo")

para que al reiniciarlo nos coja los cambios que hemos hecho.

Si todo ha ido bien, podemos crear un archivo llamado por ejemplo info.php

dentro de la carpeta de nuestra web cuyo contenido sea exclusivamente el

siguiente:

<?

268

phpinfo();

?>

Si accedemos mediante nuestro navegador a la dirección

http://127.0.0.1/info.php o http://localhost/info.php (recuerda que 127.0.0.1

localhost) con el Apacheactivo deberemos visualizar una página de información

de PHP. Si no sale, algo ha fallado, revisa los pasos.

Como has podido observar, para acceder a nuestro servidor local y así poder

probar nuestros script y las páginas de nuestra web, siempre accederemos con

la dirección 127.0.0.1 o localhost (sin WWW) en el navegador pues esta es la

dirección del host local de nuestro ordenador. En general, para visualizar o

acceder a cualquier archivo (PHP, HTML, TXT, ZIP, GIF, JPG, etc.) que

tengamos en nuestra carpeta de la web, lo haremos de la siguiente forma:

http://localhost/CARPETA/ARCHIVO.EXT

Donde CARPETA es la carpeta (o serie de carpetas) relativas a la raiz en que

se encuentra el ARCHIVO.EXT

269

Por tanto resaltar que no sólo podemos hacer llamadas a script PHP, sino

también a páginas HTML, descarga de archivos, imágenes, etc., tan solo

poniendo la dirección correcta en el navegador. Es simplemente un servidor.

De esta forma, podemos tener nuestra web funcionando en nuestro propio

ordenador para construirla desde cero o bien hacer las pruebas que

necesitemos sin tener que estar conectados a Internet.

3 - Instalación de MySQL - Web oficial:

http://www.mysql.com

Vamos a hacer la instalación de una versión 4.0.X, por lo que en este caso

buscaremos la versión que corresponda en los downloads para Windows.

En la fecha de actualización de este manual, la versión utilizada fue la 4.0.23 Y

repito que usamos una versión 4.0.X, no una 4.1.X, pues la 4.1.X no funcionará

si sigues los pasos de este tutorial.

Existen dos tipos de archivo descargable, en ZIP y en EXE. Yo prefiero el ZIP

porque es descomprimir y listo, y luego para actualizar la versión es más

sencillo. El instalador EXE lleva un setup muy majo, por defecto se instala en

C:\MySQL\ Recomiendo elegir otra ruta de instalación, y por ejemplo lo vamos

a hacer en C:\Servidor\MySQL\ para tener el PHP y MySQL en la misma

carpeta. Una vez finalizada la instalación, solo hay que llamar al

winmysqladmin.exe que estaría en C:\Servidor\MySQL\bin\ y la primera vez

que lo ejecutemos nos pide un nombre de usuario y contraseña,

que introduciremos sin mayor complicación. Por ejemplo podemos poner el

usuario "Pepe" y la contraseña "hola", pero tú ponlo a tu gusto. Ahora

al lado del reloj saldrá un semáforo. Si el semáforo se pone en verde, perfecto,

si no, algo ha fallado.

270

Por defecto, MySQL crea un usuario de nombre root y sin contraseña, y éste

es el usuario que usaremos en nuestros script o en las aplicaciones que nos lo

pidan (foros, PHP Nuke, etc.). Sin embargo, al final de esta guía se expone

cómo crear nuestro propio usuario con nuestra propia contraseña, para así

evitar usar este usuario que se crea "por defecto" y conseguir un nivel de

seguridad mayor. Pero vayamos por partes, pues antes tendremos que instalar

el phpMyAdmin, una aplicación que nos simplificará la vida en el manejo de las

bases de datos.

4 - Instalación de phpMyAdmin - Web oficial:

http://www.phpmyadmin.net

PhpMyAdmin es una utilidad que nos sirve para inteactuar con una base de

datos de forma muy sencilla y desde una interfaz web. Nos sirve por ejemplo

para crear bases de datos, tablas, borrar o modificar dados, añadir registros,

hacer copias de seguridad, etc. Es una aplicación tan útil que casi todos los

hosting con MySQL disponen de ella, por ello se analizará su instalación.

Además, vamos a usarlo para crear los usuarios MySQL para así poder utilizar

las bases de datos de forma segura.

Al ser una aplicación escrita en PHP, necesita de Apache y MySQL para poder

funcionar. Si accedemos a la página oficial, nos encontramos en la sección de

downloads con una lista de links, y el que tenemos que elegir es el ZIP de la

última versión. En nuestro caso vamos a utilizar la versión 2.6.1 de esta

271

aplicación, que es la versión disponible en la fecha de actualización de este

manual.

La instalación es relativamente sencilla: extraer todo el ZIP en la carpeta raíz

de nuestra web. OJO: en la carpeta de nuestra web, C:\Servidor\WEB\ y no

dentro de la carpeta del PHP o similares. Como pone un nombre extraño a la

carpeta, mejor la renombramos a phpmyadmin, de forma que quedaria algo así:

C:\Servidor\WEB\phpmyadmin\ Ahora vamos a hacer una pequeña

configuración del phpMyAdmin. Para ello debemos editar

el archivo config.inc.php y, leyendo de arriba hacia abajo, buscamos la

primera aparición de la siguiente línea:

$cfg['PmaAbsoluteUri'] = ”;

Debemos darle la ruta absoluta donde tenemos el phpMyAdmin. En nuestro

caso sería así:

$cfg['PmaAbsoluteUri'] = ‘http://localhost/phpmyadmin/’;

Recuerda que podemos poner localhost o 127.0.0.1 (a gusto del consumidor).

Ahora buscamos si nos aparece algo como esto:

$cfg['blowfish_secret'] = ”;

Le pondremos una cadena de caracteres cualquiera, que servirá de semilla

para la encriptación de contraseñas al usar la autentificación con cookies:

$cfg['blowfish_secret'] = ‘aqui puedes poner lo que quieras’;

Y guardaremos el archivo, pero no lo cerraremos. Puedes probar phpMyAdmin

para ver si funciona, ya sabes: http://localhost/phpmyadmin/

5 - Configurando los usuarios del servidor MySQL

Si has llegado hasta aquí, ya tenemos todo instalado y listo para funcionar.

Recuerda que ahora nuestro usuario de MySQL es root sin password. Con

esto podría valernos para hacer pruebas utilizando MySQL en nuestro host

local. Sin embargo, en este paso vamos a ver cómo eliminar el usuario "por

272

defecto" y cómo crear nuestro propio usuario con contraseña, ya que así

evitamos la brecha de seguridad que produce el tener el usuario root y

dotamos de cierta seguridad a nuestro host local. Lo haremos mediante la

utilidad phpMyAdmin.

Ahora entramos a phpMyAdmin mediante la dirección

http://localhost/phpmyadmin/index.php (recuerda tener MySQL y Apache

activos para que phpMyAdmin funcione). Básicamente vamos

a realizar las siguientes tareas:

- Crear nuestro propio usuario.

- Borrar usuarios no deseados (ej. el usuario root).

- Aplicar los cambios realizados.

- Configurar phpMyAdmin y los script para el nuevo usuario.

5.1 - Creación de nuestro usuario para MySQL

Desde la portada de phpMyAdmin podemos seleccionar el idioma castellano si

lo deseamos. A continuación, pinchamos en el link Privilegios y en la siguiente

pantalla damos a Agregar nuevo usuario. Ahora vamos a agregar nuestro

usuario y contraseña, que será el que usemos luego en nuestros script locales

que hagan uso de MySQL. Por ejemplo, podemos poner el mismo usuario y

contraseña que tenemos en nuestro Hosting, pues así tendremos menos cosas

que recordar. Como ejemplo, pongamos el usuario Pepe y la contraseña hola.

Introduciremos el nombre de usuario y contraseña, le daremos acceso a

"Cualquier servidor" (para que se pueda acceder a MySQL desde cualquier IP,

incluidas las externas a nuestro ordenador) o a "Local" (si sólo queremos que

se acceda desde nuestro ordenador donde hemos instalado MySQL) y le

daremos todos los permisos y privilegios (marcando todas las casillas que

aparecen).

5.2 - Borrado de usuarios no deseados

Una vez creado nuestro usuario o usuarios, vamos a borrar aquellos que se

crean "por defecto" y que conviene borrar para evitar brechas de seguridad,

sobre todo si vamos a usar el PC como servidor hacia Internet y no sólo para

273

hacer pruebas desde nuestro hogar. Por ejemplo, vamos a borrar todos los

usuarios excepto el que acabamos de crear. Lo hacemos de una forma rápida y

sencilla desde el mismo link Privilegios de antes: seleccionar los usuarios que

no queramos y eliminarlos.

5.3 - Recarga de privilegios

Una vez eliminados, debemos buscar un link que sirve para recargar la página

de privilegios y pulsar en él para que los cambios sean efectivos. De todas

formas podemos hacer el anterior paso y éste de una vez: al eliminar usuarios,

asegúrate de marcar la casilla que indica que se eliminarán los usuarios y

posteriormente se cargará la página de privilegios. Este paso es importante,

pues si no recargas los privilegios, ningún cambio anterior habrá sido efectivo.

5.4 - Configurar los script para el nuevo usuario

Una vez borrado el usuario root y recargados los privilegios, phpMyAdmin deja

de funcionar. ¿Por qué? Pues porque phpMyAdmin venía configurado para

usuario root sin password, y éste lo acabamos de eliminar. Entonces ahora

tendremos que cambiar dicha configuración de phpMyAdmin para que funcione

con el nuevo usuario.

Volvemos al config.inc.php del phpMyAdmin, que no habíamos cerrado y

localizamos la primera aparición de estas variables:

$cfg['Servers'][$i]['auth_type']

$cfg['Servers'][$i]['user']

$cfg['Servers'][$i]['password']

Y les cambiamos su valor. En la primera ponemos config para que no nos

pida contraseña al entrar (útil si somos el único usuario que va a disponer

de este phpMyAdmin), o si queremos que nos la pida, ponemos http para

autentificación HTTP o bien cookie para autentificación y navegación

con cookies. A la segunda le damos el nombre de usuario y a la tercera la

contraseña del usuario que acabamos de crear.

274

$cfg['Servers'][$i]['auth_type'] = 'cookie';

$cfg['Servers'][$i]['user'] = 'Pepe';

$cfg['Servers'][$i]['password'] = 'hola';

NOTA: phpMyAdmin tiene un fallo (bug conocido) en esta zona. Al usar

autentificación HTTP, un usuario que acaba de abandonar la sesión no puede

volver a entrar con el mismo nombre. Para solucionarlo, se deben cerrar todas

las ventanas del navegador que estén abiertas, y a continuación si abrimos una

nueva ventana y volvemos a intentar entrar nos debería dejar sin problemas. Si

quieres poner contraseña a phpMyAdmin y para evitar este problema, te

recomiendo que de los dos métodos elijas el de cookies.

Si ahora desde tu navegador, y con el Apache y MySQL activos, accedes a la

dirección http://localhost/phpmyadmin/index.php podrás empezar a utilizar

phpMyAdmin con tu nuevo usuario y contraseña. Si elegiste pedir contraseña,

cuando accedas a phpMyAdmin tu usuario y tu contraseña serán las que

pusiste al crear el usuario: Pepe y hola en nuestro caso. Lo primero que harás

será crearte una nueva base de datos para meter ahí lo que quieras.

De la misma forma, en nuestros script PHP que usen MySQL usaremos el

usuario y contraseña que nos hemos creado, de tal forma que al hacer la

conexión a MySQL quede algo como esto:

<?php

// .....Funciones PHP.....

mysql_connect("127.0.0.1","Pepe","hola");

// .....Más funciones PHP.....

?>

O bien, si estamos instalando un prefabricado como PHP Nuke o un foro, o

incluso cualquier aplicación en la que nos solicitan un host, usuario y

contraseña, los datos que deberemos indicar son esos: 127.0.0.1 o localhost

como servidor, Pepe como usuario, hola como contraseña, y el nombre

de la base de datos que hayamos creado con phpMyAdmin. No obstante, se

275

recomienda tener unos conocimientos básicos sobre MySQL en PHP para

manejar correctamente estas funciones.

6 - Cómo realizar las actualizaciones a versiones superiores

Como nos gusta ir a la última y continuamente hay actualizaciones de

seguridad, voy a poner unas notas de cómo actualizar estos elementos una vez

los tengamos instalados y saquen una nueva versión. Ten en cuenta que al

sacar una nueva versión puede que haya cambios grandes en la forma de

instalación, pues estas notas se harán suponiendo que la forma de instalación

no cambia de una versión a otra, lo cual es habitual.

6.1 - Cómo actualizar Apache

Para actualizarlo lo primero será cerrar todos los procesos que usan Apache,

incluidos los que se ejecutan ocultos como servicio del sistema. Lo más sencillo

es ir al menú CTRL + ALT + Supr y cerrar todos los procesos en que esté

involucrado el Apache. Después desinstalaremos el programa desde el Panel

de Control – Agregar o Quitar Programas. A continuación borraremos

manualmente aquellas carpetas del Apache que el desinstalador no haya

borrado. Y finalmente, instalaremos la nueva versión de Apache y

configuraremos el httpd.conf igual que se explica en los pasos anteriores,

usando las mismas carpetas que usaste en la versión anterior de Apache para

que nada cambie.

6.2 - Cómo actualizar PHP

Empezaremos cerrando todos los procesos de Apache y MySQL de la forma

citada en el párrafo anterior. A continuación eliminaremos la carpeta PHP que

se encuentra en C:\Servidor\PHP\ Luego instalaremos la nueva versión de

PHP como se dice arriba, configuraremos el nuevo php.ini, y en los pasos que

se dice que copiemos ciertos archivos a los directorios de Windows,

sobreescribiremos todos archivos existentes con los nuevos, incluido el nuevo

php.ini Ya sólo te queda arrancar de nuevo el Apache y MySQL y ver si todo ha

ido bien.

276

6.3 - Cómo actualizar MySQL

Al igual que antes, cerraremos todos los procesos activos que tengan que ver

con MySQL para evitarnos problemas. Después copiaremos el directorio data

(que está dentro de la carpeta de MySQL y es el que contiene nuestras bases

de datos, tablas, etc. que queremos guardar) a otro directorio cualquiera de

forma temporal. Luego desinstalaremos MySQL, ya sea desde el Agregrar o

Quitar Programas si usaste la versión que trae instalador, o bien borrando el

directorio si usaste la versión que viene sin instalador. A continuación

instalaremos la nueva versión, tras lo cual volveremos a copiar el directorio

data de nuevo a la carpeta de MySQL sobreescribiendo el que haya, y de esta

forma no se pierden los datos de nuestras bases de datos. Y finalmente sólo

queda reiniciar MySQL, ver si el semáforo se pone verde y comprobar si los

script y phpMyAdmin siguen funcionando.

6.4 - Cómo actualizar phpMyAdmin

Éste es el más sencillo de actualizar, pues lo único que hay que hacer es borrar

el anterior y luego instalar y configurar el nuevo como se cita más arriba.

Además, asegúrate también de cambiar el usuario y contraseña para que luego

funcione.

7 - Extra: instalación de un servidor de correo SMTP

Si vamos a hacer pruebas con envío de correos o bien vamos a usar nuestro

PC como servidor de nuestra web, es posible que nos interese instalar un

pequeño servidor de correo para poder usar la función mail() de PHP. Con uno

de estos servidores podremos enviar correos desde PHP, pero obviamente no

podremos recibir nada ya que se tratan de servidores SMTP (enviar) y no

POP/IMAP (recibir). Vamos entonces a ello. En principio no hay que cambiar

nada en el php.ini ya que éste viene por defecto configurado para un servidor

de correo instalado en el localhost, que es de lo que trata este manual. Pero sí

podremos cambiar la variable sendmail_from, que será el remitente que le

277

aparecerá a la persona que reciba el correo si no ponemos el campo FROM en

las cabeceras del email mediante la función mail()

[mail function]

; For Win32 only.

SMTP = localhost

; For Win32 only.

sendmail_from = me@localhost.com

Lo que sí hay que tener en cuenta es que para que estos servidores de correo

funcionen, hay que tener conexión a internet. Una opción de servidor sería el

QK SMTP que encontramos en www.qksoft.com Este servidor es instalar y

listo. Sólo queda tenerlo abierto y ya podremos enviar correos mediante PHP.

Este servidor tiene una versión trial.

Otro servidor interesante sería el Argosoft Mail Server. Este servidor es gratuito

aunque requiere una pequeña configuración. En un artículo de la Asociación de

Internautas explican cómo configurar este servidor para enviar correo con

Outlook, pero dicha configuración también funciona con PHP, asi que nos sirve

plenamente.

La dirección del artículo es la siguiente:

www.internautas.org/article.php?sid=167 En dicha página encontraremos la

descarga del programa y cómo configurarlo.

8 - Extra: Apache Manager para Apache 1.3.X - Web oficial:

http://moonspot.net/apmgr.html

El Apache Manager para Windows es una pequeña utilidad que permite

ejecutar el Apache 1.3.X como un icono al lado del reloj y no como una ventana

de Ms-Dos que puede llegar a ser molesta. Además permite cerrar, pausar y

278

reiniciar el Apache si por ejemplo estamos haciendo una configuración. Este

programa se distribuye en un ZIP que contiene un ejecutable y más archivos;

estos archivos son el código fuente, pero el archivo que nos interesa es el

apmgr.exe que copiaremos en la misma carpeta que esté el apache.exe A

continuación, basta llamar al a apmgr.exe para arrancar el Apache. Si lo

acemos desde un acceso directo, en el destino podemos poner C:\Ruta-del-

Apache\apmgr.exe -r donde el -r indica que arranque automáticamente el

Apache al iniciar el apmgr.exe Bajo Windows XP ha funcionado la versión 1.0

del Apache Manager pero no la 2.1, y bajo Windows 98 parece que todas las

versiones funcionan.

9 - Notas finales

¡Y por fin, ya está todo! Largo, pero merece la pena. Ahora ya puedes empezar

a hacer tus pruebas en PHP y MySQL. Recuerda que estamos trabajando con

programas servidores, con lo cual estos programas tienen que estar activos

cuando vayamos a hacer nuestras pruebas. Esto quiere decir que el Apache

debe estar conectado (debe estar activado para poder interpretar los script) y

que el script debe estar dentro de la carpeta especificada anteriormente en

Documentroot, además también MySQL debe estar funcionando para trabajar

con bases de datos, y debemos tener tener el servidor de correo funcionando

con conexión a internet si vamos a usar funciones de envío de email.

Una nota importante es que tanto Apache 2.0.X como MySQL pueden

ejecutarse como servicio del sistema. Esto quiere decir que, aunque no veamos

ningún icono en la barra de tareas, ambos están funcionando de forma oculta.

Esto puede resultar útil si los usamos a menudo, pues nos evitamos el tener

que ejecutar Apache y MySQL para hacer las pruebas. Pero si deseas quitarlo,

deberemos usar la utilidad msconfig para evitar que arranquen de inicio: Inico

- Ejecutar – msconfig y en la pestaña Servicios desmarcaremos el Apache y

MySQL. Al reiniciar el ordenador, ya no se ejecutarán como servicio del

sistema y tendremos que arrancarlos manualmente.

279

Si no usamos estos servidores como servicio, habrá que arrancarlos

manualmente.

MySQL se arranca ejecutando el winmysqladmin.exe que está en la carpeta bin

del directorio de MySQL. El Apache 2.0.X se arranca desde el acceso directo

Monitor Apache Servers que se crea en el grupo de iconos en el menú Inicio.

Y el Apache 1.3.X se arranca también desde un acceso directo que se crea al

archivo apache.exe Para el servidor de correo no tendremos problemas, abrir

o cerrar el programa y listo.

Asimismo, resaltar que todo este tutorial y configuraciones han sido elaborados

bajo un sistema Windows XP Home Edition. Si tenemos un programa

cortafuegos instalado en el ordenador, es posible que tengamos que abrir los

puertos que se nos soliciten para que funcione el invento. También debemos

tener cuidado si tenemos el IIS funcionando, para que no se peguen el Apache

y el IIS entre sí.

280

PROGRAMACIÓN EN INTERNET

ANEXOS

A. Manual de php

B. Manual de sql

C. Utilizacion de Wamp5

281

PROGRAMACIÓN EN INTERNET

ANEXOS

A. Manual de php

282

Manual de PHP

PHP es un lenguaje interpretado que sirve principalmente para realizar

páginas html dinámicas

PHP no es case sensitive (no distingue mayúsculas de minúsculas), salvo

bugs en el tratamiento de objetos y variables.

en PHP no se declaran las variables y no tienen un tipo fijo, sino que una

misma variable puede almacenar a lo largo de su vida valores de todo tipo

(números, cadenas...).

Instalación de PHP en Windows

Antes de nada debe estar instalado el servidor apache, este se lo puede

realizar ejecutando el archivo apache_1.3.23-win32-x86-no_src.exe

Para instalar php se desempaqueta el archivo php-4.1.2-Win32.zip en algún

directorio de windows puede ser c:\php se busca el archivo PHP4TS.DLL y se

copia este en el directorio c:\windows\system, luego copie todos los archivos

que están en c:\php\php-4.1.2-Win32\dlls en la carpeta c:\windows\system. Si

utiliza Windows XP copiarlos también a la carpeta c:\windows\system32

Se crea la carpeta C:\Archivos de programa\Apache Group\Apache\php\ y se

copia todo lo que esta en C:\php\php-4.1.2-Win32\ incluido las carpetas a C:\

Archivos de programa\Apache Group\Apache\php\

En el directorio c:\php\php-4.1.2-Win32\ existen dos archivos el php.ini-

recommended y el php.ini-dist el primer archivo es la configuración de php con

algunos cambios para optimizar su ejecución el segundo archivo es la

configuración de php con las opciones por default, se va ha escoger el primer

archivo y se lo copiara en el directorio c:\windows cambiándolo de nombre a

php.ini.

Editamos el archivo php.ini y buscamos la línea extension_dir = ./ y la

cambiamos a:

283

extension_dir = c:\Archivos de programa\Apache Group\Apache\php\

extensions

esto nos permite agregar algunas capacidades extras a php. También

buscamos la línea:

doc_root =

y le modificamos para que quede de la siguiente forma:

doc_root = c:\Archivos de programa\Apache Group\Apache\htdocs

se busca la siguiente linea

register_globals = Off

se cambia a

register_globals = On

buscamos las siguientes lineas:

;extension=php_zlib.dll

;extension=php_ldap.dll

borramos el ; de cada línea para que quede de la siguiente forma:

extension=php_zlib.dll

extension=php_ldap.dll

Esto es para agregar esto módulos extras a php hay más módulos extras que

se los puede activar quitando ; del comienzo de la línea. Se guarda el archivo

php.ini con los cambios realizados. A continuación se edita el archivo httpd.conf

que es el archivo de configuración de apache que esta ubicado en el directorio:

284

C:\Archivos de Programa\Apache Group\Apache\conf\httpd.conf

Se busca la siguiente línea:

DirectoryIndex index.html

Se modifica esta línea por lo siguiente:

DirectoryIndex home.htm index.html index.php index.php3

ScriptAlias /php/ "C:/Archivos de programa/Apache Group/Apache/php/"

AddType application/x-httpd-php3 .php3

AddType application/x-httpd-php3-source .phps

AddType application/x-httpd-php .php .php4

AddType application/x-httpd-php-source .phps

AddHandler cgi-script .cgi

AddHandler php3-script .php3

AddHandler php-script .php .php4

Action php3-script /php/php.exe

Action php-script /php/php.exe

Se guarda el archivo http.conf y se borra el directorio c:\php con todo lo que

esta dentro de el.

PHP y HTML

Para escribir código PHP dentro de una página html, tenemos varias

alternativas:

Incluir el código entre <? y ?>

Incluir el código entre <?PHP y ?>

Incluir el código entre bloques <SCRIPT LANGUAGE= "php"> y </SCRIPT>

285

El resultado de la salida estándar de ese código será escrito en esa misma

posición de la página html.

La extensión de los archivos debe ser php

Comentarios

Los comentarios en PHP se escriben:

Con // o # para comentarios de una sóla línea. Entre /* y */ para comentarios de

una o más líneas.

Ejemplo:

/* Título: Mi Primera página PHP

Autor: Yo

*/

// Saludamos

echo("¡Hola Mundo!<BR>");

Salida

Se utiliza el comando echo y printf

echo $a,"<br>",$b,"<br>",$c;

printf(cadena formato, variable1, variable2...);

printf("El numero dos con diferentes formatos: %d %f %.2f",2,2,2);

%s Cadena de carácteres.

%d Número sin decimales.

%f Número con decimales.

%c Carácter ASCII.

Hay más tipos pero estos son los más importantes

Variables

286

Todas las variables en PHP empiezan con el carácter dólar "$".

Tipos

Los tipos básicos de PHP son Integer, Double, String, Array y Object. Las

variables booleanas no existen como tales, sino que cualquier valor numérico

distinto de 0 o cualquier cadena no vacía se considera TRUE.

$a = "25";

$b = 40;

$resultado = $a + $b;

echo $resultado; el resultado seria 65

Operadores

$a + $b Adición Suma de $a y $b.

$a - $b Resto Diferencia entre $a y $b.

$a * $b Multiplicación Producto de $a and $b.

$a / $b División Cociente de $a entre $b.

$a % $b Módulo Resto de $a dividido entre $b.

$a . $b Concatenar Concatena la variable $a con $b.

$a++

$a--

sqrt (4) Raiz Cuadrada de un número

pow(4,2) Eleva el número 4 a la potencia 2

Operadores de comparación

$a == $b Igualdad Cierto si $a es igual a $b.

$a === $ Identidad Cierto si $a es igual a $b y si son del mismo

tipo (sólo PHP4)

$a != $b Desigualdad Cierto si $a no es igual a $b.

$a < $b Menor que Cierto si $a es estrictamente menor que

$b.

287

$a > $b Mayor que Cierto si $a es estrictamente mayor que

$b.

$a <= $b Menor o igual que Cierto si $a es menor o igual que $b.

$a >= $b Mayor o igual que Cierto si $a es mayor o igual que $b.

Operadores Lógicos

&& Y (7>2) && (2<4) Devuelve verdadero cuando ambas

condiciones son verdaderas.

And Y (7>2) and (2<4) Devuelve verdadero cuando ambas

condiciones son verdaderas.

|| O (7>2) || (2<4)Devuelve verdadero cuando al menos una de las dos

es verdadera.

Or O (7>2) or (2<4) Devuelve verdadero cuando al menos una de

las dos es verdadera.

! No ! (7>2) Niega el valor de la expresión.

Bucles

While

$numero=1;

While ($numero<=10)

{

echo"<br>".numero;

$numero++;

}

Do

{

instrucciones;

instrucciones;

}While ( condición)

288

For

for($i=1 ; $i<=10 ;$i++)

{

echo "$i <br>"

}

Foreach

Este bucle recorre los valores de un array.

$capital=array("España"=> "Madrid","Francia" => "Paris","Italia" => "Roma");

Foreach ($capital as $indice=>$contenido)

{

echo "Pais: $indice Capital: $contenido<br>";

}

Condición

$edad=10;

if($edad = ='12')

{

echo "Su edad es de $edad años";

}

else

{

echo "Su edad es de $edad años";

}

Switch

Switch (expression) {

289

case expresion:

código

break;

default:

código

break;

}

switch (true) {

case (trim($cod_facultad) == "ME" && trim($tipo_encuesta) == "P" ):

include ('formato_ABP.php');

break;

case (trim($cod_facultad) == "ME" && trim($tipo_encuesta) == "C" ):

include ('formato_tutores.php');

break;

default:

include ('formato1.php');

break;

}

switch ($i) {

case 0:

print "i es igual a 0";

case 1:

print "i es igual a 1";

290

case 2:

print "i es igual a 2";

}

Funciones

function suma($a,$b)

{

$c=$a+$b;

return $c; // Devuelve el resultado de la suma

}

$resultado= suma(10,30);

echo $resultado; // Devuelve 40

?>

Pasar Parámetros a una hoja php

Lo podemos hacer introduciendo la variable dentro del enlace hipertexto de la

página destino.

$precio_billete = '30000';

$fecha_ida ='11/08/2001 '

<a href="billetes.php?precio=precio_billete&ida=fecha_ida">Consultar

billete</a>

Ahora el archivo billetes recibirá dos variables con los siguientes valores:

precio = 30000

ida = 11/08/2001

Vectores, Arrays, Arreglos

291

Para crear un arreglo se utiliza la función array. Ejemplo:

$capital=array("España"=> "Madrid","Francia" => "Paris","Italia" => "Roma");

que equivale a:

$capital["España"]=”Madrid”;

$capital["Francia"]=”Paris”;

echo "<br>";

echo $capital["España"],"<br>";

echo $capital["Francia"],"<br>";

Otra forma Sería:

$numeros=array(1, 2, 3, 4, 5, 6),

que equivale ha:

$numeros[0]=1

$numeros[1]=2

$numeros[2]=3

$numeros[3]=4

$numeros[4]=5

$numeros[5]=6

Un arreglo de dos dimensiones se puede crear de la siguiente forma:

$numeros[1][1]=6

array_key_exists :Función para ver la existencia de una llave del arreglo

devuelve true o false

Ejemplo para un arreglo de una dimensión:

$matriz_a_buscar = array('primero' => 1, 'segundo' => 4);

if (array_key_exists('primero', $matriz_a_buscar)) {

echo "El elemento 'primero' se encuentra en la matriz";

292

}

Ejemplo para un arreglo de dos dimensiones:

$s[$u][1]=2;

$s[$u][2]=3;

$s[$u][3]=2;

if (array_key_exists(6, $s[$u]))

{

Echo “llave 6 existe”;

}

Funciones para el manejo de Cadenas

strlen(cadena). Nos devuelve el número de caracteres de una cadena.

$cadena="pablo:esteban:esquivel:leon";

echo strlen($cadena);

split(separador,cadena). Divide una cadena en varias usando un

carácter separador.

$cadena="pablo:esteban:esquivel:leon";

$vector = split (":",$cadena);

echo $vector[0];

join(separador,vector). Une un arreglo mediante un separador de campos

$cadena="pablo:esteban:esquivel:leon";

$vector = split (":",$cadena);

$nuevo=join (" ", $vector);

echo $nuevo;

sprintf(cadena de formato, var1, var2...). Formatea una cadena de texto

al igual que printf pero el resultado es devuelto como una cadena.

$anno=2002;

$mes=6;

$dia=1;

$fechaiso = sprintf ("%04d-%02d-%02d", $anno, $mes, $dia);

echo $fechaiso;

293

//mostrará 2002-06-01 rellena con ceros los valores

substr(cadena, inicio, longitud). Devuelve una subcadena de otra,

empezando por inicio y de longitud.

chop(cadena). Elimina los saltos de línea y los espacios finales de una

cadena.

$anno="12 ";

echo strlen($anno);

$anno=chop($anno);

echo strlen($anno);

strpos(cadena1, cadena2). Busca la cadena2 dentro de cadena1

indicándonos la posición en la que se encuentra.

str_replace(cadena1, cadena2, texto). Reemplaza la cadena1 por la

cadena2 en el texto.

Strtolower(cadena) Pasa a minúsculas una cadena

$cad = strtolower($cad);

Strtoupper(cadena) Pasa a mayúsculas una cadena

$cad = strtoupper ($cad);

trim(cadena) elimina espacios al comienzo y al fin de la cadena

$cad=trim($cad);

ltrim(cadena) elimina espacios al comienzo de la cadena

$cad=ltrim($cad);

rtrim(cadena) elimina espacios al fin de la cadena

$cad=rtrim($cad);

ucfirst(cadena) Pasar a mayúsculas el primer carácter de una cadena

$cad=ucfirst($cad);

ucwords(cadena) Pone en mayúsculas el primer carácter de cada

palabra de una cadena

$cad=ucwords($cad);

Funciones de Fecha y Hora

Se utiliza la función getdate() de la siguiente forma:

$fecha=getdate();

294

Esta expresión crea un arreglo asociativo de la siguiente forma:

"seconds" - segundos

"minutes" - minutos

"hours" - horas

"mday" - día del mes

"wday" - día de la semana, en número

"mon" - mes, en número

"year" - año, en número

"yday" - día del año, en número; por ejemplo, "299"

"weekday" - día de la semana, en texto, completo; por ejemplo, "Friday"

"month" - mes, en texto, completo; por ejemplo, "January"

para mostrar los datos simplemente se pone:

echo $fecha[seconds]; // para mostrar segundos

echo $fecha[minutes];

echo $fecha[hours];

echo $fecha[mday];

echo $fecha[year];

Validar una fecha

Para validar una fecha se utiliza la función checkdate ( $mes, $dia, $anio) el

valor que devuelve puede ser verdadero o falso. Ejemplo:

$mes=12;

$dia=1;

$anio=2002;

If (checkdate($mes,$dia,$anio))

{

echo “fecha correcta”;

}

else

{

295

echo “fecha incorrecta”;

}

Envío de emails

mail ("pesquive@uazuay.edu.ec", "Hola Mundo", "Este es un buen tutorial

sobre PHP en castellano", "From:root@www.uazuay.edu.ec\nX-Mailer:Mi Script

PHP\n");

o si usas variables

mail($destinatario, $titulo, $mensaje, $otras_cabeceras);

296

Manejo de una base de datos en MySQL mediante PHP

Lectura de los campos del formulario:

Se utiliza $_POST si el formulario utiliza el método post

$variables=split(" ",trim($_POST["archivo_name"]));

$archivo_name=$variables[0];

Se utiliza $_GET si el formulario utiliza el método get

$variables=split(" ",trim($_GET["tipo"]));

$tipo=$variables[0];

Se utiliza $_FILES para leer un campo tipo file

$variables=split(" ",trim($_FILES["archivo"]["name"]));

$archivo=$variables[0];

$variables=split(" ",trim($_FILES["archivo"]["size"]));

$tamano=$variables[0];

$variables=split(" ",trim($_FILES["archivo"]["tmp_name"]));

$ubicacion=$variables[0];

Si el archivo php.ini tiene la variable register_globals = On se puede leer las

variables del formulario directamente en php sin necesidad de lo comentado

anteriormente. Pero también se almacenan estas variables en el vector tipo

hash $HTTP_POST_VARS . Este vector tiene el nombre del campo y su

valor, para mostrar el contenido de este vector se puede utilizar el siguiente

script.

foreach ($HTTP_POST_VARS as $llave => $valor)

{

echo "llave: $llave contenido: $valor<br>";

}

297

CREACIÓN DE UNA TABLA

//Nombre de la base de datos que se va ha crear

$basedatos=videoclub;

// se establece conexión con el servidor

$conexion = mysql_connect("localhost", "root", "admin");

if (! $conexion)

{

echo "<h2 align='center'>ERROR: Imposible establecer conexión con el

servidor</h2>";

exit;

}

//lista los nombres de las bases de datos que hay y los pone en la

variable $db

$db = mysql_list_dbs();

//da el número de bases que existen

$num_bd = mysql_num_rows($db);

//revisa si el nombre de la base de datos que se quiere crear existe

$existe = "NO" ;

for ($i=0; $i<$num_bd; $i++)

{

if (mysql_dbname($db, $i) == $basedatos)

{

$existe = "SI" ;

break;

}

}

//crea la base de datos

if ($existe == "NO")

298

{

if (! mysql_query("CREATE DATABASE $basedatos", $conexion))

{

echo "<h2 align='center'>ERROR2: Imposible crear base de datos</h2>";

exit;

}

}

// Se selecciona la base de datos con la cual se va ha trabajar

mysql_select_db($basedatos, $conexion);

//Forma la cadena sql con la que se creará la base de datos

$sql = "CREATE TABLE socios (";

$sql .= "id INT NOT NULL AUTO_INCREMENT, ";

$sql .= "nombre CHAR(20) , ";

$sql .= "apellidos CHAR(30) , ";

$sql .= "edad CHAR(4) , ";

$sql .= "telefono CHAR(10) , ";

$sql .= "poblacion CHAR(20) , ";

$sql .= "provincia CHAR(15) , ";

$sql .= "codpostal CHAR(5) , ";

$sql .= "KEY (id) ) ";

//Crea la tabla con la cadena sql formada

if (@mysql_db_query($basedatos, $sql, $conexion))

{

echo "<h2 align='center'><b><font face=Book Antiqua color=#008000>La

tabla se ha

creado con exito</font></b></h2>";

}

else

{

299

echo "<h2 align='center'><font color=red>No se ha podido crear la

tabla</font

></h2>";

}

//Cierra la conexión

mysql_close($conexion);

?>

INGRESO DE DATOS A UNA TABLA

Los datos de una forma se pasan automáticamente al archivo php los nombres

de los campos son los mismos dentro del programa php lo único que hay que

anteponerle es el símbolo $ que es la manera de identificar variables dentro de

PHP.

Archivo ingreso.htm

<html>

<head>

<title>Ingreso</title>

</head>

<body>

<form method=post action="ingreso.php">

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

<input type="text" name="edad" maxlength="2">

<input type="submit" value="Guardar datos">

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

</form>

</body>

</html>

Archivo ingreso.php

//Establece la conexión con mysql

$conexion = mysql_connect("localhost", "root", "admin");

if (! $conexion)

300

{

echo "<h2 align='center'>ERROR: Imposible establecer conexión con el

servidor</h2>";

exit;

}

//Selecciona la base de clientes

mysql_select_db("clientes",$conexion);

//Hace una consulta para ver si cliente existe

$result=mysql_query("SELECT * FROM prueba where nombre='$nombre'",

$conexion);

//Ve el número de filas que obtiene el select si es 0 el cliente no existe

$filas=mysql_affected_rows($conexion);

if ($filas==0)

{

echo " cliente no existe";

// Inserta los datos a la tabla

$sql ="INSERT INTO prueba (nombre,edad) VALUES ('$nombre','$edad')";

$result = mysql_query($sql);

// Muestra los datos de la tabla luego del ingreso del registro

$result = mysql_query("SELECT * FROM prueba", $conexion);

echo "<center>Listado general: <br></center><br><br>";

echo "<center><table border = '1' bgcolor='#336699'> \n";

while ($row = mysql_fetch_array($result))

{

echo "<tr> \n";

echo "<td> <font color='#ffffff' size=3> $row[nombre] </font> </td> \n";

echo "<td> <font color='#ffffff' size=3> $row[edad] </font> </td> \n";

echo "</tr> \n";

}

echo "</table> \n</center>";

}

else

{

echo "Cliente ya existe: Datos no se grabaron";

301

}

mysql_free_result($result);

mysql_close($conexion);

?>

BORRADO DE DATOS

Para el borrado igual se necesita una forma en donde se ingresa el nombre del

cliente que se desea borrar, y se llama al programa borrado.php el cual realiza

el borrado, para esto la única sentencia diferente es DELETE FROM el resto de

sentencias ya se ha utilizado en los ejercicios anteriores.

borrado.htm

<html>

<head>

<title>Borrado</title>

</head>

<body>

<form method=post action="borrado.php">

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

<input type="submit" value="Borrar Cliente">

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

</form>

</body>

</html>

borrado.php

<?PHP

$conexion = mysql_connect("localhost", "root", "admin");

if (! $conexion)

{

echo "<h2 align='center'>ERROR: Imposible establecer conexión con el

servidor</h2

>";

exit;

302

}

mysql_select_db("clientes",$conexion);

//sentencia para borrar el registro

$borrado = mysql_query ("DELETE FROM prueba WHERE

nombre='$nombre'",$conexion);

echo "registro eliminado";

echo "<center>Nuevo Listado general: <br></center><br><br>";

echo "<center><table border = '1' bgcolor='#336699'> \n";

$result = mysql_query("SELECT * FROM prueba", $conexion);

while ($row = mysql_fetch_array($result))

{

echo "<tr> \n";

echo "<td> <font color='#ffffff' size=3> $row[nombre] </font> </td> \n";

echo "<td> <font color='#ffffff' size=3> $row[edad] </font> </td> \n";

echo "</tr> \n";

}

echo "</table> \n</center>";

mysql_free_result($result);

mysql_close($conexion);

?>

MODIFICAION DE DATOS

archivo modifica.htm

<html>

<head>

<title>modifica</title>

</head>

<body>

<form method=post action="modifica.php">

Nombre:<input type="text" name="nombre" maxlength="20"><br>

Edad:<input type="text" name="edad" maxlength="2"><br>

<input type="submit" value="Modifica Datos">

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

</form>

303

</body>

</html>

archivo modifica.php

<?PHP

$conexion = mysql_connect("localhost", "root", "admin");

if (! $conexion)

{

echo "<h2 align='center'>ERROR: Imposible establecer conexión con el

servidor</h2>";

exit;

}

mysql_select_db("clientes",$conexion);

//sentencia SQL para actualizar datos

$consulta = "UPDATE prueba SET edad='$edad' WHERE

nombre='$nombre'";

$result = mysql_query($consulta);

echo "registro modificado";

echo "<center>Nuevo Listado general: <br></center><br><br>";

echo "<center><table border = '1' bgcolor='#336699'> \n";

$result = mysql_query("SELECT * FROM prueba", $conexion);

while ($row = mysql_fetch_array($result))

{

echo "<tr> \n";

echo "<td> <font color='#ffffff' size=3> $row[nombre] </font> </td> \n";

echo "<td> <font color='#ffffff' size=3> $row[edad] </font> </td> \n";

echo "</tr> \n";

}

echo "</table> \n</center>";

mysql_free_result($result);

mysql_close($conexion);

?>

304

CONSULTA DE DATOS

Se ha creado una base de datos llamada clientes, la cual tiene una tabla

llamada prueba, esta tabla tiene dos campo el primero se llama nombre

varchar(20) y el segundo edad int(2). Se va ha realizar una consulta de todos

los datos que tiene esta tabla y se lo va ha mostrar en la pantalla.

<?PHP

// Se realiza la conexión a la base de datos como usuario root y la clave de

acceso admin

$conexion = mysql_connect("localhost", "root", "admin");

if (! $conexion)

{

echo "<h2 align='center'>ERROR: Imposible establecer conexión con el

servidor</h2>";

exit;

}

// Se selecciona la base de datos con la cual se va ha trabajar

mysql_select_db("clientes", $conexion);

// Se extrae la información utilizando comando SQL

$result = mysql_query("SELECT * FROM prueba", $conexion);

echo "<center>Listado general: <br></center><br><br>";

echo "<center><table border = '1' bgcolor='#336699'> \n";

// extrae la información del idendtificador del resultado

//ha una matriz asociativa en este caso llamada $row

//despues se lo puede llamar mediante el nombre de los campos

while ($row = mysql_fetch_array($result))

{

echo "<tr> \n";

echo "<td> <font color='#ffffff' size=3> $row[nombre] </font> </td> \n";

echo "<td> <font color='#ffffff' size=3> $row[edad] </font> </td> \n";

305

echo "</tr> \n";

}

echo "</table> \n</center>";

//libera de memoria el resultado obtenido con el select

mysql_free_result($result);

// cierra la conexión con el servidor

mysql_close($conexion); //cierra la conexion

?>

Redireccionar a otra pagina

$host = $_SERVER['HTTP_HOST'];

$uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');

$extra = 'pub1.php?tipo='.$tipo.'&'."titulox=$titulox";

header("Location: http://$host$uri/$extra");

Inclusión de un programa dentro de otro

include ('/ruta_al_fichero/funciones.php');

Paso de un archivo del PC al servidor mediante PHP

El código html del formulario debe ser como el siguiente ejemplo:

<formaction="envio.php" method="post" enctype="multipart/form-data">

<input type=”file” name=”archivo” size=”50” maxlength=”100”>

Enctype es obligatorio poner.

El código php del archive envio.php es:

306

$variables=split(" ",trim($_FILES["archivo"]["name"]));

$archivo=$variables[0];

$variables=split(" ",trim($_FILES["archivo"]["size"]));

$tamano=$variables[0];

$variables=split(" ",trim($_FILES["archivo"]["tmp_name"]));

$ubicacion=$variables[0];

//Para saber la extensión del archivo

$extension = explode(".",$archivo);

Comando para pasar el archivo al servidor

if (!copy($ubicacion, "archivos/".$archivo))

{

echo "error al copiar archivo";

}

else

{

echo "archivo subido con exito";

}

Nota:

$archivo variable que tiene el nombre del archivo

$tamano variable que contiene el tamaño del archivo en bytes

En el archivo php.ini se modifica las siguientes variables para limitar el tamaño

de los archivos que se pasa y para permitir pasar archivos al servidor:

file_uploads = On

post_max_size = 50M

upload_max_filesize = 50M

307

En el archive php.conf (/etc/httpd/conf.d/php.conf ) se modifica la siguiente

variable

LimitRequestBody 5242880 para 5Megas

Borrado de un archivo en el servidor

unlink($archivo)

donde $archivo tiene el path de la ubicación fisica del archivo que se quiere

borrar ej:

$archivo=”/home/ua0333333/public_html/ejemplo/foto.jpg”;

Renombrar un archivo en el servidor

rename($antes,$despues)

donde $antes es el nombre del archivo y $despues es el nuevo nombre del

archivo

Listar el contenido de una carpeta en el servidor

<?PHP

$archivos = glob('*');

$contador=0;

Foreach ($archivos as $indice=>$contenido)

{

if ($contenido<>"home.php")

{

$contador++;

echo "&#8226; $contador.- <a href=\"$contenido\">$contenido</a> (".

(filesize($contenido)/1024).") Kb

<br>";

308

}

}

?>

filesize muestra el tamaño del archivo

Manejo de Archivos con PHP

Funciones para la lectura de archivos

Función Descripción Sintaxis

Fopen Abre un archivo y le

asigna un identificador

id.

$id = Fopen($archivo,

$modo)

Fgets Lee una línea de un

archivo hasta un numero

máximo de caracteres

fgets($id,$max)

Fwrite Escribe una cadena

dentro del archivo

fwrite($id, $cadena)

fseek Avanza o retrocede el

puntero del archivo un

cierto numero de

posiciones

fseek($id,$posiciones)

Feof Comprueba si el puntero

que lee el archivo ha

llegado al final

feof($id)

Fpassthru lee completamente el

archivo y lo muestra

fpassthru($id)

Fclose Cierra el archivo abierto

previamente

fclose($id)

Modos de apertura de archivos

Sintaxis Descripción

309

r Sólo lectura

r+ Lectura y escritura

w Sólo escritura

w+ Lectura y escritura. Suprime el contenido anterior si se escribe. El

archivo es creado si no existe.

a Sólo escritura. El archivo es creado si no existe y el puntero se coloca al

final.

a+ Lectura y escritura. El archivo es creado si no existe y el puntero se

coloca al final.

Ejemplos de manejo de Archivos

Verifica URL

<?PHP

function verificar_url($url)

{

//abrimos el archivo en lectura

$id = @fopen($url,"r");

//hacemos las comprobaciones

if ($id)

$abierto = true;

else

$abierto = false;

//devolvemos el valor

return $abierto;

//cerramos el archivo

fclose($id);

}

?>

Lee un archivo HTML y lo muestra

<?PHP

310

$file = fopen ("http://www.cidap.org.ec/aplicaciones/actividades/pub1.php?

tipo=$tipo=$titulox", "r");

if (!$file) {

echo "<p>Unable to open remote file.\n";

exit;

}

while (!feof ($file)) {

$linea = fgets ($file, 1024);

echo "$linea";

}

fclose($file);

?>

Escribir en un archivo

<?

function incremento_contador($archivo)

{

// $archivo contiene el numero que actualizamos

$contador = 0;

//Abrimos el archivo y leemos su contenido

$fp = fopen($archivo,"r");

$contador = fgets($fp, 26);

fclose($fp);

//Incrementamos el contador

++$contador;

//Actualizamos el archivo con el nuevo valor

$fp = fopen($archivo,"w+");

fwrite($fp, $contador, 26);

fclose($fp);

311

echo "Este script ha sido ejecutado $contador veces";

}

?>

Poner claves a un directorio del servidor

Se crea el archivo .htaccess en la carpeta que se quiere prohibir el acceso con

el siguiente contenido:

Crear el archivo oculto .htaccess

AuthName "Administrador"

AuthType Basic

AuthUserFile /home/ua0333333/claves.txt

require valid-user

Comando para crear usuarios en el archivo claves

htpasswd –b claves.txt ua033333 clave1

claves.txt es el nombre del archivo

ua033333 usuario al que se quiere dar permiso

clave1 clave para el usuario ua033333

312

PROGRAMACIÓN EN INTERNET

ANEXOS

B. Manual de sql

Iniciación al Lenguaje SQL

El lenguaje SQL

SQL es una herramienta para organizar, gestionar y recuperar datos

almacenados en una base de datos informática. El nombre "SQL" es una

abreviatura de Structured Query Languaje (Lenguaje de consultas

313

estructurado). Como su propio nombre indica, SQL es un lenguaje informático

que se puede utilizar para interaccionar con una base de datos y más

concretamente con un tipo especifico llamado base de datos relacional.

SQL es a la vez un lenguaje fácil de aprender y una herramienta completa para

gestionar datos. Las peticiones sobre los datos se expresan mediante

sentencias, que deben escribirse de acuerdo con unas reglas sintácticas y

semánticas de este lenguaje.

Su aprendizaje no solo sirve para esta aplicación sino , también, para todas las

existentes en el mercado que soporten este lenguaje ya que es un lenguaje

estándar por haberse visto consolidado por el Instituto Americano de Normas

(ANSI) y por la Organización de Estándares Internacional (ISO).

La información aquí resumida del lenguaje puede ser ampliada con multitud de

libros existentes en el mercado, todos con las siglas "SQL".

El SQL que se utilizará en esta aplicación cumple estrictamente con las

especificaciones de Microsoft ® Open Database Connectivity (ODBC) y a

continuación se podrán ver las características propias para el acceso a ficheros

en el formato Paradox ® de Borland.

 

Notación empleada en los formatos

MAYÚSCULAS Las palabras que figuren en el formato en mayúsculas se

escribirán en la sentencia igual que se escriben en el formato.

Minúscula cursiva Estas palabras deberán ser sustituidas en la sentencia por

nombres o palabras elegidas por el usuario de acuerdo con las descripciones

que se den en cada caso

Barra vertical | Indicará la elección de una de las opciones que este separando.

O una u otra no ambas. 

314

Corchetes [ ] Encerrarán elementos opciones de la sentencia que pueden

cogerse o no dependiendo del usuario.

Llaves { } Encerrarán elementos obligatorios de la sentencia que siempre

deberán de ser especificados.

 

Sentencias de selección o consultas

Las consultas son el corazón del lenguaje SQL. La sentencia SELECT, que se

utiliza para expresar consultas en SQL, es la más potente y compleja de las

sentencias SQL.

La sentencia SELECT recupera datos de una base de datos y los devuelve en

forma de resultados de la consulta. Consta de seis cláusulas: las dos primeras

(SELECT y FROM) obligatorias y las otras cuatro opcionales.

 La forma de la sentencia SELECT soportada por Paradox ® es:

SELECT [DISTINCT] {* | expresión_columna, ...} FROM nombretabla

[alias_tabla] ... [WHERE expresión1 operador expresion2] [GROUP BY

{expresión_columna, ...} ] [HAVING {condición} ] [UNION [ALL]

(SELECT ...)] [ORDER BY {expresión_orden [DESC | ASC], ... ]

 

Cláusula SELECT

La cláusula SELECT lista los datos a recuperar por la sentencia SELECT. Los

elementos o datos a seleccionar pueden ser columnas de la base de datos o

columnas a calcular por SQL cuando efectúa la consulta o también el asterisco

(*) para recuperar todos los campos de un fichero o tabla.

expresión_columna puede ser un simple nombre de campo (por ejemplo

MATRICULA). Expresiones más complejas pueden incluir operaciones

matemáticas o de manipulación de caracteres (por ejemplo APELLIDOS + ‘, ‘ +

NOMBRE). Mas adelante se verán estas expresiones de forma más amplia.

315

Las expresiones de columnas deben ir separadas por comas si existen más de

una (por ejemplo APELLIDOS, NOMBRE, DNI, DOMICILIO).

Los nombres de campos pueden ir precedidos por el nombre de la tabla o su

alias. Por ejemplo ALUMNOS.MATRICULA o A.MATRICULA donde A es el

alias para la tabla o fichero ALUMNOS.

El operador DISTINCT, si se incluye, debe preceder la primera expresión de

columna. Este operador elimina las filas o registros duplicados del resultado de

la consulta. Por ejemplo la sentencia:

SELECT DISTINCT PROVINCIA FROM ALUMNOS

mostrará las distintas provincias de las que proceden los alumnos del Centro.

 

Funciones de agrupamiento

Las funciones de agrupamiento pueden ser también parte de una cláusula

SELECT. Devuelven un único valor de un conjunto de registros. Pueden usarse

con un nombre de campo (por ejemplo, AVG(NUMERO_DE_HERMANOS) o

en combinación con una expresión de columna más compleja (por ejemplo,

AVG(NUMERO_DE_HERMANOS * 1.07) ). La expresión de columna puede ir

precedida por el operador DISTINCT. El operador DISTINCT eliminará los

valores repetidos de una expresión de agrupamiento. Por ejemplo,

SELECT COUNT(DISTINCT LOCALIDAD) FROM ALUMNOS

En este ejemplo, sólo aparecerán el nº de las distintas localidades donde

residen los alumnos.

Las funciones de agrupamiento permitidas son:

SUM Devuelve la suma total de los valores de una expresión de columna o

campo numérica . Por ejemplo, SUM(NUMERO_DE_HERMANOS) devolverá el

total de hermanos de los alumnos del Centro.

316

AVG Devuelve la media de los valores de una expresión de columna. Por

ejemplo, 

AVG(NUMERO_DE_HERMANOS) 

devolverá la media de hermanos que posee el alumnado del centro.

COUNT Devuelve el número de valores en una expresión de columna. Por

ejemplo, COUNT(MATRICULA) devolverá el número de registros con valores

no nulos en ese campo. COUNT(PAIS) nos dirá el número de alumnos que en

el campo país tiene alguna información y no está a blanco. Un ejemplo especial

es COUNT(*), que nos devuelve el número de registros incluyendo aquellos

registros con valores nulos.

MAX Devuelve el valor más alto de los contenidos en una expresión de

columna. Por ejemplo, MAX(MATRICULA) devolverá el nº de matrícula mas

elevado que existe en el fichero de alumnos.

MIN Devuelve el valor más bajo de los contenidos en una expresión de

columna. Por ejemplo, SELECT MIN(FECHA_NACIMIENTO) FROM

ALUMNOS nos devolverá la fecha de nacimiento del alumno mas viejo del

centro.

 

Cláusula FROM

La cláusula FROM lista las tablas o ficheros que contienen los datos a

recuperar por la consulta. El formato de esta cláusula es:

FROM nombretabla [alias_tabla] ...

nombretabla puede ser una o mas nombres de tabla en el directorio de trabajo

si se omite este, o en un directorio distinto si se especifica.

alias_tabla es un nombre que se usa para referirse a la tabla en el resto de la

sentencia SELECT para abreviar el nombre original y hacerlo más manejable,

317

en el caso de existir más de una tabla en la consulta y, también para poder

realizar consultas uniendo varias veces la misma tabla. Por ejemplo,

 

SELECT A.NOMBRE, A.APELLIDOS FROM MATRICUL M, ALUMNOS A

WHERE M.MATRICULA = A.MATRICULA AND M.GRUPO = ‘1A’ AND

ANNO = 1995

es mucho más práctico y sencillo que:

SELECT ALUMNOS.NOMBRE, ALUMNOS.APELLIDOS FROM

MATRICUL, ALUMNOS WHERE MATRICUL.MATRICULA =

ALUMNO.MATRICULA AND MATRICUL.GRUPO = ‘1A’ AND ANNO =

1995

Las dos sentencias son idénticas y nos devolverían los nombres y apellidos del

alumnado matriculado en el año 1995 y que figuran en el grupo 1A. El nombre

de tablas junto al nombre de campo es obligatorio cuando existan campos con

nombre idéntico en las tablas que formen parte de la sentencia. Así en el

ejemplo anterior NOMBRE y APELLIDOS no lo necesitarían (aunque este

puesto) pero MATRICULA si lo necesita porque en las dos tablas existe un

campo con ese nombre.

Si no se pudiera utilizar alias, no se podría unir una tabla consigo misma y la

siguiente consulta no se podría llevar a cabo:

SELECT A.NOMBRE, A.APELLIDOS, H.NOMBRE FROM ALUMNOS A,

ALUMNOS H WHERE A.PADRE = H.PADRE

que nos devolverá el nombre de aquellos alumnos/as que tienen el mismo

padre, es decir, son hermanos.

 

Cláusula WHERE

La cláusula WHERE dice a SQL que incluya solo ciertas filas o registros de

datos en los resultados de la consulta, es decir, que tienen que cumplir los

318

registros que se desean ver. La cláusula WHERE contiene condiciones en la

forma:

WHERE expresión1 operador expresion2

expresión1 y expresion2 pueden ser nombres de campos, valores constantes o

expresiones.

operador es un operador relacional que une dos expresiones. Más tarde se

verán los distintos operadores que se puede utilizar.

Por ejemplo, la siguiente sentencia nos muestra el nº de alumnos que han

nacido con posterioridad a 1985.

SELECT COUNT(*) FROM ALUMNOS WHERE

YEAR(FECHA_NACIMIENTO) > 1985

 

Cláusula GROUP BY

La cláusula GROUP BY especifica una consulta sumaria. En vez de producir un

fila de resultados por cada fila de datos de la base de datos, una consulta

sumaria agrupa todas las filas similares y luego produce una fila sumaria de

resultados para cada grupo.

Seguido de la cláusula GROUP BY se especifican los nombres de uno o más

campos cuyos resultados se desean agrupados. Tiene la forma:

GROUP BY expresión_columna

expresión_columna debe coincidir con la expresión de columna utilizada en la

cláusula SELECT. Puede ser uno o más nombres de campo de una tabla,

separados por coma o una o más expresiones separadas por comas. El

siguiente ejemplo nos dice cuantos alumnos están matriculados en cada grupo

en el año 1995:

319

 SELECT GRUPO, COUNT(*) FROM MATRICUL WHERE ANNO = 1995

GROUP BY GRUPO

Esta sentencia nos devolverá una fila por cada grupo de alumnos. Cada una de

ellas contendrá el grupo y el nº de alumnos en él.

 

Cláusula HAVING

La cláusula HAVING dice a SQL que incluya solo ciertos grupos producidos por

la cláusula GROUP BY en los resultados de la consulta. Al igual que la cláusula

WHERE, utiliza una condición de búsqueda para especificar los grupos

deseados. En otras palabras, especifica la condición que deben de cumplir los

grupos. Sólo es válida si previamente se ha especificado la cláusula GROUP

BY. La cláusula HAVING tiene la forma:

HAVING expresión1 operador expresión2

expresión1 y expresión2 pueden ser nombres de campos, valores constantes o

expresiones y estas no deben coincidir con una expresión de columna en la

cláusula SELECT.

operador es un operador relacional que une las dos expresiones. Más tarde se

verán los distintos operadores que se puede utilizar.

La sentencia siguiente nos mostrará el número de alumnos en cada grupo de

1995 cuyo numero de integrantes supera los 30:

SELECT GRUPO, COUNT(*) FROM MATRICUL WHERE ANNO = 1995

GROUP BY GRUPO HAVING COUNT(*) > 30

 

Operador UNION

El operador UNION combina el resultado de dos sentencias SELECT en un

único resultado. Este resultado se compone de todos los registros devueltos en

320

ambas sentencias. Por defecto, los registros repetidos se omiten. Para no

quitarlos se empleará la palabra ALL. Tiene la forma:

SELECT sentencia UNION [ALL] SELECT sentencia

Cuando se utilice el operador UNION, la lista de selección para cada sentencia

SELECT debe tener el mismo número de expresiones de columnas con el

mismo tipo de datos y en el mismo orden. Por ejemplo,

SELECT APELLIDOS, NOMBRE FROM ALUMNOS UNION SELECT

APELLIDOS, NOMBRE FROM PROFESOR UNION SELECT

APELLIDOS, NOMBRE FROM PERSONAL

Este ejemplo tiene el mismo nº de columnas y cada columna en orden con el

mismo tipo de datos. Nos devolverá una lista única de alumnos, profesores y

personal no docente.

 

Cláusula ORDER BY

La cláusula ORDER BY ordena los resultados de la consulta en base a los

datos de una o más columnas. Si se omite, los resultados saldrán ordenados

por el primer campo que sea clave en el índice que se haya utilizado.

Por tanto, indica como deben clasificarse los registros que se seleccionen.

Tiene la forma: 

ORDER BY {expresión_orden [DESC | ASC], ... ]

expresión_orden puede ser el nombre de un campo, expresión o el número de

posición que ocupa la expresión de columna en la cláusula SELECT. Por

defecto se ordenan ASCendentemente (de menor a mayor). Si se deseará de

mayor a menor se empleará DESC (DESCendente). Por ejemplo, para mostrar

los alumnos ordenados de mayor edad a menor, se utilizaría:

321

SELECT NOMBRE, APELLIDOS FROM ALUMNOS ORDER BY

FECHA_NACIMIENTO DESC

Para obtener un listado de alumnos por su lugar de nacimiento ordenado por

provincias y dentro de cada provincia ordenados por localidades se utilizaría:

SELECT NOMBRE+’ ‘+APELLIDOS, LOCALIDAD_NACIMIENTO,

PROVINCIA_NACIMIENTO FROM ALUMNOS ORDER BY PROVINCIA,

LOCALIDAD

o lo mismo de otra forma 

SELECT NOMBRE+’ ‘+APELLIDOS, LOCALIDAD_NACIMIENTO,

PROVINCIA_NACIMIENTO FROM ALUMNOS ORDER BY 3, 2

 

Enlace de varias Tablas o ficheros

Los ejemplos visto hasta el momento solo extraen datos de una única tabla y

pocas cosas podríamos hacer si no pudiéramos interrelacionar varios ficheros

para obtener las consultas que deseáramos.

La Base de Datos de IES2000 es una Base de Datos Relacional y, se llama de

esta forma, por las distintas relaciones que existen entre los distintos ficheros o

tablas que maneja.

En enlace o relación de dos tablas para realizar una consulta, se conoce con el

término de JOIN. Para expresar este término vamos a utilizar un ejemplo que

se utiliza muy a menudo en todas las consultas de GEIWIN: Deseamos un

listado alfabético con los Nombres y Apellidos de todos los alumnos que están

matriculados, de forma Oficial, actualmente en el centro.

El fichero de ALUMNOS contiene todos los datos generales del alumnado,

entre ellos Nombre y Apellidos, y el fichero MATRICUL los distintos datos de

las diferentes matrículas de cada uno de ellos, entre ellos el año y tipo de la

matrícula.

322

Para extraer los datos deseados deberemos de buscar un campo que contenga

información común en los dos ficheros, es decir, aquel por el que están

relacionados ambos. Este campo es el nº de expediente del alumno, que da la

casualidad que tiene el mismo nombre en los dos ficheros: MATRICULA y será

este campo el que nos sirva para efectuar el JOIN:

SELECT APELLIDOS, NOMBRE FROM MATRICUL, ALUMNOS WHERE

MATRICUL.MATRICULA = ALUMNOS.MATRICULA AND ANNO = 1996

AND TIPO = ‘O’ ORDER BY APELLIDOS, NOMBRE

El Join se indica en la cláusula WHERE como otra condición más, en este

caso, el nº de expediente en los dos fichero debe existir y, si no es así, el

alumno/a no aparecerá en la relación, aunque figure en uno de ellos.

 

Alias de las Tablas

Los alias son un instrumento para abreviar los nombres de las tablas o ficheros

y poder referirse a ellos en toda la sentencia. En el ejemplo anterior podríamos

emplear alias de la siguiente forma:

SELECT APELLIDOS, NOMBRE FROM MATRICUL M, ALUMNOS A

WHERE M.MATRICULA = A.MATRICULA AND ANNO = 1996 AND TIPO

= ‘O’ ORDER BY APELLIDOS, NOMBRE

Los campos que tienen nombre único en las sentencias no necesitan ir

precedidos por el nombre de la tabla o su alias. En el ejemplo ANNO y TIPO

solo existen en el fichero MATRICUL y por esa razón no se les ha precedido

por MATRICUL o su alias M.

 

Orden de las tablas en la cláusula FROM

Especial mención merece el orden de enumeración de las tablas en la cláusula

FROM. El Gestor de SQL, cuando existe un JOIN entre dos tablas, recorre la

323

tabla que figura en primer lugar, y por cada registro que encuentra que

satisface el resto de restricciones, comprueba si existe correspondencia en la

otra tabla.

Pongamos un ejemplo práctico: Si tenemos en el fichero de ALUMNOS 5000

registros y en el fichero MATRICUL 15000, de los cuales solo 1000 son del año

1996 y del tipo oficial, el Gestor realiza 1000 lecturas del fichero MATRICUL y

1000 más de ALUMNOS. Si los enumeráramos al revés, se realizarían 5000

lecturas de ALUMNOS y 5000 más de MATRICUL.

 

Enlace de tablas sin equivalencia por la derecha (Join RightOuter)

Por lo general efectuaremos enlaces de tablas con el signo de igualdad (Join

Equal), pero existirán consultas en las que desearemos que nos devuelva los

registros nulos de la tabla que no tenga correspondencia en la otra. Por

ejemplo, si deseamos una relación de todas las materias con el nombre del

departamento que las imparte tendríamos que escribir la sentencia:

SELECT M.NOMBRE, D.NOMBRE FROM MATERIAS M, DEPARTA D

WHERE M.DEPARTAMENTO = D.CLAVE

De esta forma solo nos aparecerían en la relación las materias que tienen

asignado departamento que las imparta. Si quisiéramos que aparecieran todas

y las que no tengan departamento asignado que apareciera el nombre de éste

vacío, cambiaríamos el signo = por *=

SELECT M.NOMBRE, D.NOMBRE FROM MATERIAS M, DEPARTA D

WHERE M.DEPARTAMENTO *= D.CLAVE

Enlace de más de dos tablas

El Gestor de SQL puede unir muchas tablas en una única sentencia, para ello

debemos efectuar el Join entre todas ellas y de la forma más óptima posible

para que el tiempo de respuesta sea mínimo.

324

SELECT A.APELLIDOS+' '+A.NOMBRE, S.ABREVIATURA1 FROM

MATRICUL M, NOTAS N, ALUMNOS A, MATERIAS S WHERE

M.MATRICULA = A.MATRICULA AND M.ANNO = @ACTUAL AND

M.GRUPO = '@Grupo' AND M.MATRICULA = N.MATRICULA AND

N.MATERIA = S.MATERIA AND N.ANNO = M.ANNO AND

N.EVALUACION = 'F'

La sentencia permitirá extraer el nombre y apellidos de cada uno de los

alumnos del Grupo que indiquemos cuando nos sea solicitado junto con

cada una de las materias que cursan en el año actual.

En la sentencia se han unido 4 fichero o tablas: Matriculas, Notas, Alumnos y

Materias, pues el nombre y apellidos del alumno están en el fichero Alumnos y

la abreviatura de las materias están en el fichero Materias; el fichero Matriculas

es necesario para saber que alumnos tienen matrícula en el curso actual y son

del grupo elegido, y el fichero Notas contiene cada una de las materias que

cursa el alumnado, siempre con la evaluación Final.

Tabulación de resultados

El Gestor de SQL siempre genera una salida plana, es decir, una serie de filas

con una serie de columnas. Pero existirán listados que serán mucho más

legibles si la información se representa como una tabla de datos. En el ejemplo

anterior el resultado tendrá un registro por cada materia que curse el alumno, y

su nombre figurará repetido en cada uno de ellos con una materia diferente.

Para mostrar los resultados como una especie de actilla en la que se refleje,

por cada registro, el nombre del alumno y todas las materias a cursar,

procederemos de la siguiente forma:

Una vez que tenemos el resultado de la consulta en pantalla

presionaremos el botón <Tabular>

Elegiremos, en este caso, el Tipo 2 presionando en dicho botón y la

aplicación hará el resto.

 

SELECT anidadas

325

Pueden existir consultas a la Base de Datos que requieran una restricción que

sea el resultado de otra consulta.

Por ejemplo: Deseamos saber cuantas materias posee el último curso de unos

determinados estudios. Mediante COUNT(Materia) puedo saber cuantas pero

la condición del último curso solo se puede saber después de ejecutar una

sentencia con MAX(Curso) del fichero PLANES

Cuando esto se produce podemos actuar de dos formas:

La primera efectuando la consulta que genera la restricción y posteriormente,

realizar la sentencia con el resultado de la restricción calculada:

SELECT MAX(CURSO) FROM PLANES WHERE ESTUDIO = '@Estudio’

Si, por ejemplo, el valor máximo nos devuelve 3, entonces realizaríamos la

sentencia definitiva con:

SELECT COUNT(MATERIA) FROM PLANES WHERE ESTUDIO =

'@Estudio' AND CURSO = ‘3’

La segunda forma es más compleja pero mucho más práctica. La sentencia

que genera la restricción compleja se anida dentro de la principal encerrándola

entre paréntesis:

SELECT COUNT(MATERIA) FROM PLANES WHERE ESTUDIO =

'@Estudio' AND CURSO = (SELECT MAX(CURSO) FROM PLANES

WHERE ESTUDIO = '@Estudio')

Las sentencias SELECT anidadas se utilizan con mucha frecuencia a la hora

de Actualizar o Borrar registros de una tabla que requieran condiciones o

restricciones en las que están implicadas otras tablas distintas de la que se va

a actualizar o borrar.

 

326

Expresiones SQL

Las expresiones se utilizan en las cláusulas WHERE, HAVING y ORDER BY

de las sentencias SELECT.

Las expresiones nos permiten utilizar operaciones matemáticas como también

cadenas de caracteres y operadores de manipulación de fechas para construir

consultas complejas.

Los elementos que compones las expresiones son:

Nombres de campos

Operadores numéricos

Operadores de fechas

Operadores lógicos

Constantes

Operadores de caracteres

Operadores de relación

Funciones

 

Nombres de campos

Las expresiones más comunes son los nombres de campos. Se pueden

combinar con otros elementos de las expresiones

 

Constantes

Las constantes son valores que no cambian. Por ejemplo, en la expresión

FECHA_NACIMIENTO + 30, el valor 30 es una constante y FECHA

NACIMIENTO es un nombre de campo.

Las constantes de caracteres se deben encerrar con una comilla simple (‘) o

una doble ("). Para que una comilla simple o doble aparezca en una constante

se pone doble.(Por ejemplo, si la constante deseada es O’Donnel deberá

figurar como ‘O’’Donnel’.

327

Las constantes de fechas deberán estar encerradas entre llaves ({ }), por

ejemplo, {01/30/89} representa la fecha 30 de Enero de 1989. El formato de las

fechas es MM/DD/YY o MM/DD/YYYY (MM = mes, DD = día y YY = Año).

 

Operadores Numéricos

Para realizar operaciones numéricas se puede utilizar los operadores:

operador significado

+ Suma

- Resta

* Multiplicación

/ División

** o ^ Exponenciación

 

Operadores de caracteres

Las expresiones de caracteres pueden incluir los siguientes operadores:

operador significado

+ Concatenación manteniendo espacios en blanco

- Concatenación moviendo los blancos al final

Si por ejemplo, NOMBRE contiene ‘Antonio ‘ y APELLIDOS ‘Rodríguez ‘

ejemplo

Valor resultado

NOMBRE + APELLIDOS ‘Antonio Rodríguez ‘

NOMBRE - APELLIDOS ‘AntonioRodríguez ‘

 

Operadores de fechas

Las expresiones de caracteres pueden incluir los siguientes operadores:

operador significado

328

+ Añade un número de días a una fecha para producir una nueva fecha.

- El número de días entre dos fechas o la resta de un número de días desde

una fecha para producir una nueva fecha.

Ejemplo Valor devuelto

{01/30/90} + 5 {02/04/90} (recuerde MM/DD/YY)

{01/30/90} - {01/01/90} 29

{01/30/90} - 10 {01/20/90}

 

Operadores de relación

Los operadores de relación que pueden separar dos expresiones pueden ser

cualquiera de los siguientes:

Operador Significado

= Igual a

<> Distinto de

> Mayor que

>= Mayor o igual que

< Menor que

<= Menor o igual que

Like Coincidencia con un patrón

Not Like No coincidencia con un patrón

Is Null Igual a nulo (vacío)

Is Not Null No es nulo (no está vacío)

Between Rango de valores entre una cota inferior y otra superior

In Pertenencia a un conjunto de valores o ser miembro de una subconsulta

Exist Cierto si una subconsulta devuelve como mínimo un registro

Any Compara un valor con cada valor devuelto por una subconsulta retornando

cierto si uno cualquiera de ellos cumple la condición. Any debe ir precedido de

=, <>, <, >, >= o >=. = Any es equivalente a In.

All Compara un valor con cada valor devuelto por una subconsulta retornando

329

cierto si todos ellos cumplen la condición. All debe ir precedido de =, <>, <, >,

>= o >=.

Ejemplos que utilizan operadores de relación:

evaluacion = ‘F’

Fecha_matricula >= {10/01/95}

Apellidos LIKE ‘Rodri%’

Grupo IS NULL

Anno BETWEEN 1985 AND 1995

WHERE M.ESTUDIOS = ANY (SELECT ESTUDIO FROM ESTUDIOS WHERE

NIVEL = ‘1’)

WHERE NOTA > ALL (SELECT NOTA FROM CALIFICA WHERE VALOR1 >

4)

 

COMPARACION DE CADENAS DE CARACTERES:

[NOT] LIKE

Like permite utilizar los siguientes caracteres especiales en las cadenas de

comparación:

% comodín para seleccionar cualquier cadena de 0 o más caracteres

_ comodín para seleccionar cualquier carácter

Las mayúsculas y minúsculas son significativas.

Ejemplo: LIKE 'MART%' cualquier cadena que empiece con MART...

 

Operadores Lógicos

Dos o más condiciones pueden ser combinadas para formar expresiones más

complejas con distintos criterios. Cuando existen dos o más condiciones

deberán estar unidas por AND o OR. Por ejemplo,

ANNO = 1995 AND CURSO = ‘2’

330

deben de cumplirse las dos condiciones para que sea cierta la condición total.

SEXO = ‘V’ OR PAIS IS NOT NULL

Basta con que una de las dos sea cierta para que lo sea la condición total.

El operador lógico NOT es útil para poner al contrario una condición. Por

ejemplo:

NOT (ANNO = 1995 AND CURSO = ‘2’)

 

Prioridad de los operadores

En expresiones con mas de una condición el orden en el que se evalúan es

muy importante. La siguiente tabla muestra el orden en el que son evaluados

los operadores. Los operadores que figuran en la primera línea se evalúa los

primeros, luego los de la segunda y así sucesivamente. Los operadores que

figuren en la misma línea se evalúan de izquierda a derecha según aparezcan

en la expresión.

prioridad operador

1 - unario, + unario

2 ** o ^

3 *, /

4 +, -

5 =, <>, <, >, >=, >=, Like, Not Like, Is Null, Is Not Null, Between, In, Exists,

Any, All

6 NOT

7 AND

8 OR

El siguiente ejemplo muestra la importancia de la prioridad de los operadores:

331

WHERE SEXO = ‘V’ OR FECHA_NACIMIENTO > {3/30/1970} AND

MATRICULA > 4000

Ya que el AND se evalúa primero, esta consulta nos devuelve aquellos

alumnos con nº de matricula mayor que 4000 y que hayan nacido con

posterioridad al 30 de marzo de 1970, como también aquellos que sean

Varones.

Para forzar a que la cláusula se evalúe en orden distinto, por ejemplo, que

muestre aquellos alumnos que sean Varones o que hayan nacido después de

esa fecha y que además de una de las dos condiciones anteriores, su nº de

matrícula sea mayor que 4000, será necesario usar paréntesis para encerrar

las condiciones que deban evaluarse primero, es decir:

WHERE (SEXO = ‘V’ OR FECHA_NACIMIENTO > {3/30/1970}) AND

MATRICULA > 4000

 

Funciones

Las funciones permiten realizar con los datos operaciones adicionales a las ya

vistas, pudiendo participar como operadores en las expresiones.

Una función representa un valor único que se obtiene aplicando unas

determinadas operaciones a otros valores dados, que se llaman argumentos.

Se especifica como una palabra predefinida seguida de los argumentos entre

paréntesis y separados por comas.

El lenguaje SQL dispone de un conjunto de funciones que pueden usarse en

las consultas y que aparecen aquí agrupadas por el tipo de valores que

devuelven.

Funciones que devuelven una cadena de caracteres:

Función Descripción

332

CHR Convierte un Código ASCII en una cadena de carácter

CHR(67) devuelve la letra C.

RTRIM o TRIM Quita los blancos que existan por la derecha en una cadena

RTRIM(‘ABC ‘) devuelve ABC.

LTRIM Quita los blancos por la izquierda que tenga una cadena

LTRIM(‘ ABC’) devuelve ABC.

UPPER Convierte cada letra de una cadena a mayúscula

UPPER(‘cadena’) devuelve CADENA.

LOWER Convierte a minúscula cada letra de una cadena

LOWER(‘CADENA’) devuelve cadena.

LEFT Devuelve los n primeros caracteres por la izquierda

LEFT(‘Cadena’,3) devuelve Cad.

RIGHT Devuelve los n últimos caracteres de una cadena

RIGTH(‘Cadena’,4) devuelve dena.

SUBSTR Devuelve una subcadena de una cadena. Los parámetros son la

cadena, la posición del primer carácter a extraer y el número de caracteres a

extraer.

SUBSTR(‘Cadena de letras’,4,6) devuelve ena de.

SUBSTR(‘Cadena’,5) devuelve na.

SPACE Genera una cadena de espacios en blanco.

SPACE(5) devuelve ‘ ‘.

DTOC Convierte una fecha a una cadena de caracteres. Un segundo

parámetro opcional determina el formato del resultado:

0 (por defecto) devuelve MM/DD/YY.

1 devuelve DD/MM/YY.

2 devuelve YY/MM/DD.

10 devuelve MM/DD/YYYY.

11 devuelve DD/MM/YYYY.

12 devuelve YYYY/MM/DD.

Puede existir un tercer parámetro opcional para determinar el carácter que se

quiere utilizar como separador. Si no se especifica se toma el (/).

DTOC({01/30/89}) devuelve 01/30/89

DTOC({01/30/89},0) devuelve 01/30/89

333

DTOC({01/30/89},1) devuelve 30/01/89

DTOC({01/30/89,11,’-’) devuelve 01-30-1989

DTPOS Convierte una fecha en una cadena de caracteres usando el formato

YYYYMMDD.

DTPOS({01/23/90}) devuelve 19900123.

IIF Devuelve uno de dos posibles valores. Los parámetros son tres: el primero

es una expresión lógica, el segundo el valor a devolver si la expresión es cierta,

y el último, el valor a devolver si es falsa.

IIF(SEXO=‘V’,’Masculino’,’Femenino’) devolvería la palabra Masculino si el

campo sexo contiene la V e caso contrario devolvería la palabra ‘Femenino’.

STR Convierte un numero en una cadena. Los parámetros son el número, el

total de posiciones a devolver (incluyendo el punto decimal) y otro opcional

para indicar el número de dígitos a la derecha de punto decimal.

STR(12.34567,4) devuelve 12

STR(12.34567,4,1) devuelve 12.3

STR(12.34567,6,3) devuelve 12.346

STRVAL Convierte un valor de cualquier tipo a una cadena de caracteres

STRVAL(‘Cadena’) devuelve Cadena

STRVAL({12/25/53}) devuelve 12/25/53

STRVAL(5 * 3) devuelve 15

STRVAL(4 = 5) devuelve ‘False’

TIME Devuelve la hora del día como una cadena.

A las 9:49 PM, TIME() devuelve 21:49:00

 

Funciones que devuelven números

Función Descripción

MOD Divide dos números y devuelve el resto de la división.

MOD(10,3) devuelve 1.

LEN Devuelve la longitud de una cadena.

LEN(‘Cadena’) devuelve 6

MONTH Devuelve el mes en cifras de un fecha.

MONTH({01/30/89}) devuelve 1

DAY Devuelve el día de una fecha.

DAY({01/30/89}) devuelve 30

334

YEAR Devuelve el año, con todas sus cifras, de una fecha.

YEAR({01/30/89}) devuelve 1989.

MAX Devuelve el mayor de dos números.

MAX(66,89) devuelve 89.

MIN Devuelve el menor de dos números.

MIN(66,89) devuelve 66.

POW Eleva un número a una potencia.

POW(2,3) devuelve 8

INT Devuelve la parte entera de un número.

INT(6.4321) devuelve 6

ROUND Redondea un número.

ROUND(123.456,0) devuelve 123

ROUND(123.456,2) devuelve 123.46

ROUND(123.456,-2) devuelve 100

NUMVAL Convierte una cadena de caracteres a un número. Si la cadena VAL

no es un número se devuelve el valor 0.

NUMVAL(‘123’) devuelve 123

NUMVAL(‘12A’) devuelve 0

 

Funciones que devuelven fechas:

Función Descripción

DATE Devuelve la fecha de hoy.

Si hoy es 25/12/89, DATE() devuelve {12/25/89}

DATEVAL Convierte una cadena de caracteres a una fecha.

DATEVAL(‘01/30/89’) devuelve {01/30/89}

CTOD Convierte una cadena de caracteres a una fecha. Se puede utilizar un

segundo parámetro para especificar el formato de la fecha devuelta: 0 (por

defecto devuelve MM/DD/YY, 1 devuelve DD/MM/YY y 2 devuelve YY/MM/DD.

CTOD(‘01/30/89’) devuelve {01/30/89}

CTOD(‘01/30/89’,1) devuelve {30/01/89}

Ejemplos de funciones de fecha:

SELECT SUM(AUSENCIAS) FROM FALTASAL WHERE TODAY()-

FECHA<= 5

335

Esta sentencia nos dirá el número total de horas ausencias de los alumnos en

los últimos 5 días.

SELECT NOMBRE+' '+APELLIDOS, YEAR(TODAY()) -

YEAR(FECHA_NACIMIENTO) FROM ALUMNOS

Mostrará a cada alumno con su edad en años (Cumplidos o que cumplirá)

Para tener en cuenta el mes y día actuales y calcular la edad sería:

SELECT NOMBRE+' '+APELLIDOS, IIF(MONTH(FECHA_NACIMIENTO)

> MONTH(TODAY()), YEAR(TODAY())-YEAR(FECHA_NACIMIENTO) - 1,

IIF(MONTH(TODAY()) = MONTH(FECHA_NACIMIENTO) AND

DAY(FECHA_NACIMIENTO) > DAY(TODAY()), YEAR(TODAY())-

YEAR(FECHA_NACIMIENTO) - 1, YEAR(TODAY())-

YEAR(FECHA_NACIMIENTO))) FROM ALUMNOS

 

Sentencias para crear o destruir tablas

La aplicación dispone de sus propias tablas que no deben ser creadas ni

destruidas. Si el usuario lo hiciera es bajo su propia responsabilidad. No

obstante se da la posibilidad de crearse sus propias tablas y, por supuesto,

borrarlas.

La sentencia para crear una tabla es CREATE y para destruirla DROP.

 

Creación de una tabla

La sentencia para crear una tabla tiene la forma:

CREATE TABLE nombre_fichero (definición_columna, ...)

nombre_fichero puede ser únicamente el nombre del fichero o el nombre

completo con su camino. Si se utiliza solo el nombre del fichero se crea en el

directorio donde se encuentran los ficheros de la aplicación (C:\geiwin\datos).

definición_columna esta compuesto por el nombre de la columna o campo,

seguida del tipo de dato de dicha columna.

336

Los nombres de columna no deben tener espacios en blanco y los tipos de

datos disponibles para Paradox ® son :

ALPHANUMERIC Sus valores pueden tener letras, números o caracteres de

puntuación. Se precisa un parámetro para la longitud máxima que se quiere

almacenar y esta no puede sobrepasar los 255 caracteres. Por ejemplo

ALPHANUMERIC(12). También se puede utilizar la palabra CHAR en lugar de

ALPHANUMERIC.

BLOB Sus valores contienen una clase de datos binarios de longitud indefinida

que se suelen utilizar para imágenes.

CURRENCY Sus valores contienen solo números empleados en cantidades

monetarias. Emplean el mismo formato que el tipo NUMBER.

DATE Se emplea para almacenar fechas.

MEMO Se emplea para texto de longitud indefinida cuando el tipo

ALPHANUMERIC se queda corto.

NUMBER Se emplea para cantidades numéricas en general. Pueden

almacenar decimales y signo. Internamente se almacenan como decimales de

coma flotante de doble precisión.

SHORT Solo puede contener números enteros entre los valores -32767 y

32767.

Nota: BLOB y MEMO no se pueden utilizar en la cláusula WHERE y tampoco

pueden formar parte de una clave.

Ejemplo de creación de una tabla de libros:

CREATE TABLE D:\LIBROS (TITULO CHAR(200), PAGINAS SHORT,

PRECIO CURRENCY, FECHA_COMPRA DATE, PORTADA BLOB,

RESUMEN MEMO)

 

337

Destrucción de una tabla

El formato para destruir o borrar un tabla es

DROP TABLE nombrefichero

nombre_fichero puede ser únicamente el nombre del fichero o el nombre

completo con su camino. Si se utiliza solo el nombre del fichero se utiliza el

directorio donde se encuentran los ficheros de la aplicación (C:\geiwin\datos).

La sentencia para borrar la tabla antes creada es

DROP TABLE D:\LIBROS

 

Sentencia INSERT

La sentencia de INSERT se utiliza para añadir registros a las tablas de la base

de datos. El formato de la sentencia es:

INSERT INTO nombre_fichero [(nombre_columna, ...)] VALUES (expr, ...)

nombre_fichero puede ser únicamente el nombre del fichero o el nombre

completo con su camino. Si se utiliza solo el nombre del fichero se utiliza el

directorio donde se encuentran los ficheros de la aplicación (C:\geiwin\datos).

nombre_columna es una lista opcional de nombres de campo en los que se

insertarán valores en el mismo número y orden que se especificarán en la

cláusula VALUES. Si no se especifica la lista de campos, los valores de expr en

la cláusula VALUES deben ser tantos como campos tenga la tabla y en el

mismo orden que se definieron al crear la tabla.

expr es una lista de expresiones o valores constantes, separados por comas,

para dar valor a los distintos campos del registro que se añadirá a la tabla. Las

cadenas de caracteres deberán estar encerradas entre comillas ‘ o " y las

fechas entre llaves { }.

338

Ejemplo para añadir un registro a la tabla creada en el ejemplo de CREATE:

INSERT INTO D:\LIBROS (TITULO, PAGINAS, FECHA) VALUES

(‘Gestión Escolar Integrada’, 234,{12/27/95})

Cada sentencia INSERT añade un único registro a la tabla. En el ejemplo solo

se han especificado 3 campos con sus respectivos valores, el resto de campos

quedaran a nulo. Un valor nulo NULL no significa blancos o ceros sino

simplemente que el campo nunca ha tenido un valor.

Se pueden insertar registros en un fichero de la Base de Datos, procedentes de

un fichero de texto, mediante la sentencia propia de IES2000que tiene la forma:

INSERT INTO nombre_fichero [(nombre_columna, ...)] FROM fichero_ascii

Para entender el funcionamiento de esta sentencia, simplemente, se indicará

que por cada línea del fichero de texto el programa la convertirá en una

sentencia IINSERT y la ejecutará. Por lo tanto, en el fichero de texto, las líneas

deberán ser de la misma forma que se explicó en expr, con la diferencia, de

que las fechas no irán entre llaves, ya que es el programa el que se encarga de

ponerlas.

Mediante esta última sentencia, podremos importar datos de cualquier

aplicación, siempre y cuando se hayan convertido, previamente, a ASCII.

También podremos añadir registros de un fichero de la Base de Datos a otro o

al mismo con la utilidad de exportar el resultado de una consulta SQL y,

posteriormente importarlos con la sentencia vista anteriormente.

 

Sentencia UPDATE

La sentencia UPDATE se utiliza para cambiar el contenido de los registros de

una tabla de la base de datos. Su formato es:

339

UPDATE nombre_fichero SET nombre_columna = expr, ... [WHERE {

condición }]

nombre_fichero puede ser únicamente el nombre del fichero o el nombre

completo con su camino. Si se utiliza solo el nombre del fichero se utiliza el

directorio donde se encuentran los ficheros de la aplicación (C:\geiwin\datos).

nombre_columna es el nombre de columna o campo cuyo valor se desea

cambiar. En una misma sentencia UPDATE pueden actualizarse varios campos

de cada registro de la tabla.

expr es el nuevo valor que se desea asignar al campo que le precede. La

expresión puede ser un valor constante o una subconsulta. Las cadenas de

caracteres deberán estar encerradas entre comillas ‘ o " y las fechas entre

llaves { }. Las subconsultas entre paréntesis.

La cláusula WHERE sigue el mismo formato que la vista en la sentencia

SELECT y determina que registros se modificarán.

Por ejemplo, subir el precio de compra de la tabla de libros un 10% de aquellos

que tengan más de 250 páginas, sería:

UPDATE D:\LIBROS SET PRECIO = PRECIO * 1.1 WHERE PAGINAS >

250

Otro ejemplo, para fijar la fecha de matrícula de todos aquellos alumnos que la

tienen vacía a la fecha de hoy, se pondría:

UPDATE MATRICUL SET FECHA_MATRICULA = TODAY() WHERE

FECHA_MATRICULA IS NULL

Ejemplo utilizando una subconsulta:

UPDATE D:\LIBROS SET PRECIO = (SELECT AVG(PRECIO) FROM D:\

LIBROS WHERE PRECIO IS NOT NULL) WHERE PRECIO IS NULL

340

Con esta última sentencia se ha puesto precio a todos los libros que no lo

tenían. Ese precio ha sido el resultante de calcular la medía entre los libros que

si lo tenían.

 

Sentencia DELETE

La sentencia DELETE se utiliza para borrar registros de una tabla de la base de

datos. El formato de la sentencia es:

DELETE FROM nombre_fichero [WHERE { condición }]

nombre_fichero puede ser únicamente el nombre del fichero o el nombre

completo con su camino. Si se utiliza solo el nombre del fichero se utiliza el

directorio donde se encuentran los ficheros de la aplicación (C:\geiwin\datos).

La cláusula WHERE sigue el mismo formato que la vista en la sentencia

SELECT y determina que registros se borrarán.

Cada sentencia DELETE borra los registros que cumplen la condición impuesta

o todos si no se indica cláusula WHERE.

DELETE FROM D:\LIBROS WHERE MOD(TODAY - FECHA,365) > 20

Con el ejemplo anterior se borrarían todos los registros de la tabla libros cuya

antigüedad, desde la fecha de adquisición, fuera mayor de 20 años.

Para borrar las notas de evaluaciones que, no sean la Final, de los alumnos de

años anteriores se utilizaría la sentencia:

DELETE FROM NOTAS WHERE ANNO < 1995 AND EVALUACION <> ‘F’

 

Ficheros de índices

341

Un índice es una herramienta utilizada por el sistema para optimizar el acceso

a los datos de los ficheros o tablas de la base de datos. Los índices en Paradox

® se almacenan en ficheros distintos de donde lo hacen los datos y pueden ser

de dos clase primarios y no-primarios.

 

Índice primario

Un índice primario en una tabla Paradox está compuesto de uno o más campos

consecutivos de la tabla, comenzando con el primero y estos forman la clave

primaria. Una tabla solo puede tener un índice primario.

La clave primaria de una tabla identifica a cada registro en la tabla, por tanto,

dos registros cualesquiera no pueden tener los mismos valores en los campos

que forman la clave primaria. Si a una tabla sin índice primario se le crea todos

aquellos registros que tuvieran valores idénticos en la clave primaria de

borrarían, a excepción del primero que se mantendría.

Los índices primarios se mantienen automáticamente; es decir, si se modifica,

añade o borra un registro en la tabla, el índice primario se actualiza

automáticamente para reflejar el cambio.

Un índice primario es un único fichero con el mismo nombre que la tabla en la

que esta basado pero con la extensión .PX

Índice no-primario

Al contrario de lo que ocurre con los índices primarios, un índice no-primario no

identifica de forma única a cada registro de una tabla; es decir, dos o más

registros pueden compartir los mismos valores en los campos que forman la

clave no-primaria. Una tabla Paradox puede tener más de un índice no-

primario, y pueden estar basados en distintos campos y en el orden deseado.

Existen dos clase de índices no-primarios: mantenidos y no-mantenidos. La

diferencia entre unos y otros estriba en que los primeros se actualizan

automáticamente cuando la tabla cambia, mientras que los segundos

342

simplemente quedan marcados como desactualizados y se actualizan la

próxima vez que son usados.

Para poder disponer de índices no-primarios en una tabla, es preciso tener

creado antes el índice primario.

Los índices no-primarios que constan de un único campo clave y que hacen

distinción entre mayúsculas-minúsculas comparten los mismos nombres de

ficheros que las tablas a las que pertenecen pero se les asigna las

extensiones .X01 hasta XFF dependiendo del nº de campo en el que están

basados. Los índices con un único campo en la clave pero que no hacen

distinción entre mayúsculas y minúsculas o los que tienen más de un campo en

la clave poseen el mismo nombre que su tabla pero con las extensiones que

empiezan en .XG0 con incrementos en hexadecimal hasta el nº de índices que

posea la tabla.

 

Sentencias para crear o destruir índices

Las tablas de la aplicación disponen de sus propios índices que no deben ser

modificados ni destruidas. Si el usuario lo hiciera es bajo su propia

responsabilidad. No obstante se da la posibilidad de crearse los índices para

sus propias tablas o añadir otros a las de la aplicación. Como también borrar

los propios.

La sentencia para crear un índice es CREATE INDEX y para destruirlo DROP

INDEX.

Sentencia crear índice primario

La sintaxis para crear un índice primario es la siguiente:

CREATE INDEX PRIMARY ON nombre_fichero (nombre_columna [,

nombre_columna ... ])

nombre_fichero es el nombre de la tabla en la cual se basa el índice.

nombre_columna es la lista de campos que componen la clave primaria del

índice. Debe enumerar uno o más campos consecutivos de la tabla,

comenzando por el primero.

343

Por ejemplo,

CREATE INDEX PRIMARY ON D:\LIBROS (TITULO, PAGINAS)

 

Sentencia crear índice no-primario

La sintaxis para crear un índice no-primario es:

CREATE INDEX nombreindice [/NON_MAINTAINED]

[/CASE_INSENSITIVE] ON nombre_fichero (nombre_columna [,

nombre_columna ... ])

nombreindice sirve para identificar a cada índice no-primario por un nombre

que crea el usuario.

La opción NON-MAINTENED hace que el índice sea no mantenido. Por

defecto, si no se incluye, se crea mantenido .

La opción CASE-INSENSITIVE hace que el índice no distinga entre

mayúsculas y minúsculas. Por defecto, si no se incluye, si hay distinción.

nombre_fichero es el nombre de la tabla en la que se basa el índice.

nombre_columna es el nombre del campo o campos que forman la clave no

primaria del índice, puede estar en cualquier orden.

Por ejemplo,

CREATE INDEX POR_FECHAS ON D:\LIBROS (FECHA)

 

Sentencia de borrado de índice

La sintaxis para la destrucción de un índice primario es:

344

DROP INDEX nombre_camino.PRIMARY

Por ejemplo: 

DROP INDEX D:\LIBROS.PRIMARY

La sintaxis para borrar un índice no-primario es

DROP INDEX nombre_camino.nombre_indice

Por ejemplo: 

DROP INDEX D:\LIBROS.POR_FECHAS

nombre_camino es el nombre de la tabla cuyo índice se quiere borrar. Puede

consistir solamente de un nombre de fichero o de un camino completo.

nombre_indice es el nombre que se le dio cuando fue creado.

 

Transacciones

Una transacción es una serie de cambios en la base de datos que deben ser

tratadas como una sola. En otras palabras, que se realicen todos o que no se

haga ninguno, pues de lo contrario se podrían producir inconsistencias en la

base de datos.

Cuando no se tiene activada una transacción el gestor de base de datos

ejecuta inmediatamente cada sentencia INSERT, UPDATE o DELETE que se

le encomiende, sin posibilidad de deshacer los cambio en caso de ocurrir

cualquier percance. Cuando se activa una transacción los cambios que se van

realizando quedan en un estado de provisionalidad hasta que se realiza un

COMMIT, el cual hará definitivos los cambios o hasta realizar un ROLLBACK

que deshará todos los cambios producidos desde que se inició la transacción.

345

El interprete SQL, que se verá más adelante, permite realizar transacciones.

Con el botón <Transacción> la iniciará, con el botón <Realizar> producirá un

COMMIT y con el botón <Deshacer> producirá un ROLLBACK.

 

Mejoras en el rendimiento del interprete SQL

El lenguaje SQL es no procedimental, es decir, en las sentencias se indica que

queremos conseguir y no como lo tiene que hacer el interprete para

conseguirlo. Esto es pura teoría, pues en la practica a todos los gestores de

SQL hay que especificar sus propios truquitos para optimizar el rendimiento.

Por tanto, muchas veces no basta con especificar una sentencia SQL correcta,

sino que además, hay que indicarle como tiene que hacerlo si queremos que el

tiempo de respuesta sea el mínimo. En este apartado veremos como mejorar el

tiempo de respuesta de nuestro interprete ante unas determinadas situaciones:

Se procurará elegir en la cláusula WHERE aquellos campos que formen

parte de la clave del fichero por el cual interrogamos. Además se

especificarán en el mismo orden en el que estén definidos en la clave.

Por ejemplo, si interrogamos al fichero MATRICUL la sentencia where

deberá llevar en primer lugar MATRICULA = valor, después puede llevar

ANNO = valor, y así sucesivamente siguiendo el orden en el que está

definida la clave. (Ver el apartado de estructura de la Base de Datos

para observar el fichero MATRICUL).

Si el fichero contiene otras claves, además de la primaria, se puede

utilizar el mismo criterio. Por ejemplo, como MATRICUL contiene dos

claves secundarias, con la primera podemos interrogar de forma optima

indicando en la cláusula where ANNO = valor AND GRUPO = ‘valor’

AND ...., y con la segunda clave ANNO = valor and ESTUDIOS = ‘valor’

AND ... .Por lo tanto si en la cláusula where al acceder a este fichero no

indicamos que MATRICULA contenga un determinado valor o que

ANNO no tenga otro, no se conseguirá un acceso rápido pues el gestor

no podrá utilizar ningún índice y tendrá que hacerse un recorrido

secuencial por todo el fichero.

346

Cuando se realicen enlaces de tablas, el hacerlo y en el orden adecuado

utilizando índices, ayudará mucho a optimizar el rendimiento, pues de lo

contrario puede consumir mucho tiempo.

  

Por ejemplo, dada la sentencia:

SELECT APELLIDOS FROM ALUMNOS, MATRICUL WHERE

ALUMNOS.MATRICULA = MATRICUL.MATRICULA AND

MATRICULA.ANNO = 1995 AND MATRICUL.TIPO = ‘O’

En esta sentencia se han enlazado la tabla ALUMNOS y MATRICULas

utilizando el campo clave MATRICULA de ambas tablas. Pero el interprete se

recorrerá cada uno de los registros del fichero ALUMNOS y comprobará para

cada uno de ellos si posee MATRICULa Oficial en el año 1995.

Lo más lógico sería hacerlo al contrario, es decir, para cada MATRICULa

Oficial del año 1995 se accede al fichero ALUMNOS con el campo

MATRICULA y se consigue sus apellidos. De esta forma nos ahorramos el

tener que recorrernos todo el fichero de ALUMNOS. Quizá piense que nos

tenemos que recorrer todo el fichero de MATRICULas y que hemos complicado

el problema, pero lo cierto es que como imponemos restricciones con campos

clave el acceso es únicamente a los registros que cumplan la condición

impuesta.

Por tanto, la sentencia anterior debería ser:

SELECT APELLIDOS FROM MATRICUL, ALUMNOS WHERE

ALUMNOS.MATRICULA = MATRICUL.MATRICULA AND

MATRICULA.ANNO = 1995 AND MATRICUL.TIPO = ‘O’

Lo único que ha cambiado es el orden de enumeración de los ficheros en la

cláusula From. Tenga siempre en cuenta que el recorrido se efectuará siempre

empezando por el fichero que enumeremos en primer lugar, luego por el

segundo y así sucesivamente.

347

PROGRAMACIÓN EN INTERNET

ANEXOS

C. Utilización de Wamp5

INSTALACIÓN DE WAMP5

348

WAMP es el acrónimo que se utiliza para definir un sistema informático que

comprende las siguientes herramientas:

Sistema operativo: Windows.

Servidor Web Apache.

Gestor de bases de datos: MySQL.

Lenguaje de programación: PHP.

Existen paquetes que son capaces de instalar de manera sencilla todas estas

herramientas en nuestro equipo y dejarlo preparado para que pueda

funcionar como un completo servidor Web.

Uno de estos paquetes se puede encontrar en la página

http://www.wampserver.com/ .

Según nos cuentan en su página de presentación del producto, WAMP5

instala automáticamente Apache 1.3.31, PHP5, MySQL, PHPmyadmin y

SQLitemanager en nuestro sistema. Además incorpora un administrador para

poder configurar y acceder fácilmente a cada uno de los servicios instalados.

Cuando finaliza la instalación, WAMP5 arrancará automáticamente los

servicios Apache y MySQL con las siguientes denominaciones

-  servicio ' wampapache' : apache servicio

-  servicio 'wampmysql' : mysql servicio

La instalación de WAMP5 es compacta. Esto significa que todos los ficheros

349

se copian dentro de un directorio llamado c:wamp. Sólo hay un fichero,

concretamente el fichero de configuración de MySQL (my.ini), que se

almacena en el directorio de Windows pero lo hace con otro nombres

"mywamp.ini" para evitar posibles conflictos con otras instalaciones.

1. Obtener la aplicación.

En primer lugar debemos descargarnos la última versión de la herramienta.

Para ello debemos visitar la página oficial en la siguiente dirección,

http://www.wampserver.com/en/download.php [Fig.1]

Nos saldrá un cuadro de diálogo en el que se nos preguntará si deseamos

guardar el fichero. Aceptamos y después ejecutamos el instalador. [Fig.2]

350

Una vez descargado el programa, lo ejecutamos para realizar la instalación

de Wamp Server

2. Instalación del paquete (wamp5.1.7.3.exe).

351

Se nos indicará que debemos cerrar todos los programas antes de continuar

con nuestra instalación y desinstalar las versiones anteriores de los

programas que incluye el paquete si tuviésemos alguno de ellos ya instalados

en nuestro equipo. [Fig.3]

Pulsamos “Next”.

3. Aceptamos la licencia y pulsamos el botón “Next”. [Fig.4]

352

4. Selección de la carpeta de instalación.

En esta pantalla escribiremos el directorio en el que deseamos que se

instalen los programas del paquete WAMP5. Por defecto se instalaran en el

directorio c:wamp.

5. Selección del nombre de la carpeta en el menú de inicio.

Este instalador crea una carpeta en el menú inicio con los accesos directos

353

"start Wampserver" y "uninstall Wampserver".Debemos indicar el nombre de

esta carpeta o dejar la que se nos indica por defecto. [Fig.6]

6. Configuración de arranque.

Debemos decidir si queremos que los servicios se arranquen cuando

encendamos el sistema o no.

7. Ya estamos preparados para instalar [Fig.8].

Se nos muestra un resumen con las opciones de configuración seleccionadas

y, si todo es correcto, pulsamos el botón “Install” para comenzar con la

instalación. [Fig.9]

354

8. Selección de la carpeta raíz de nuestra página Web.

Si no estamos seguros podemos dejar perfectamente la que el instalador nos

ofrece por defecto.[Fig.10]

355

9. Parámetros para configurar el servidor de correo PHP.

En la mayoría de los casos funcionará correctamente si dejamos la opción

por defecto, es decir, localhost.[Fig.11]

10.Dirección de correo por defecto.

Normalmente deberá ser la dirección de correo del administrador del sistema.

11.Selección del navegador por defecto de tu sistema.

356

NOTA: Si tienes instalado un cortafuegos recibirás una ventana de alarma en

la que debes desbloquear el puerto 80, correspondiente a Apache, para el

buen funcionamiento del servidor.

12. Instalación finalizada.

Ya hemos terminado la instalación. Seleccionamos la casilla "Launch WAMP5

now" y esperamos a que arranquen todos los servicios, incluido el

357

administrador del WAMP5.[Fig.15] y .[Fig.16]

A partir de ahora, en nuestra barra de tareas aparecerá el icono de WAMP5.

[Fig.17]

Una vez instalado el WAMP5 lo que primero hacemos es cambiar a español

para ello se hace clic derecho en el incono de WAMP que esta en la barra de

tareas.

358

Ahora si podemos inciar los servicios del WAMP5 para ello se hace clic en el

icono

Luego que se ha incializado los servicios del WAMPS,

COMPROBACIÓN DE LA INSTALACIÓN.

Si todo ha ido bien podemos arrancar nuestra página de inicio tecleando en la

barra de navegación http://localhost. Debemos ver una pantalla parecida a la

359

siguiente:

Si no sale nada puede que haya habido un problema o un error al iniciar los

servicios, generalmente el Apache, que utiliza el puerto 80 que a veces está

ocupado por otro programa como Skype o IIS. (Tuve que desinstalar skype

en mi caso)

Ahora podremos colocar en nuestro servidor todas las páginas PHP que

queramos probar o los proyectos que hayamos creado anteriormente. El

directorio donde generalmente se localiza la raíz de publicación es: C:\wamp\

www

En esa carpeta podríamos subir cualquier archivo PHP 4 o PHP 5 y debería

ejecutarse perfectamente. Otra cosa que puede fallar es que los inicios de

bloques de código PHP que debéis utilizar son con “<?php” y no sólo con

“<?”, que está deshabilitado por defecto.

Les aseguro que leer este artículo os llevará más tiempo que instalar PHP 5

360

en vuestro ordenador. Con Wamp Server 2 es muy fácil.

Nos iremos en primer lugar a PHPmyadmin y le pondremos una contraseña al

usuario root. [Fig 22 , 23 y 24]

Al abrir el phpMyadmin se observa que ha salido un error, con respecto a la

contraseña, para solucionarlo se hace clic en privilegios

361

Y se procede a poner la contraseña del root, en este caso la contraseña es

root

Crear la base de datos

Para la creación de la base de datos utilizamos el mismo phpmyadmin,

El Nombre de la base de datos va ha ser: clientes

La base de datos clientes tiene una tabla de nombre prueba con tres campo:

el primero es un autonumerico con el nombre ID, nombre y edad.

362

Una vez que se ha creado la base de datos, la tabla y susrespectivos campos

podemos hacer una inserción en la base de datos clientes. Para lo cual se

crea dos archivos el uno de nombre ingreso.htm y el otro ingreso.php.

Con el siguiente código cada uno:

Archivo ingreso.htm

<html><head><title>Ingreso</title></head><body> <form method=post action="ingreso.php"> <input type="text" name="nombre" maxlength="20"> <input type="text" name="edad" maxlength="2"> <input type="submit" value="Guardar datos"> <input type="reset" value="Borrar"> </form></body></html>

363

Archivo ingreso.php

<?PHP//Establece la conexión con mysql$conexion = mysql_connect("localhost", "root", "root");if (! $conexion){ echo "<h2 align='center'>ERROR: Imposible establecer conexión con el servidor</h2>"; exit;}//Selecciona la base de clientesmysql_select_db("clientes",$conexion);//Hace una consulta para ver si cliente existe$result=mysql_query("SELECT * FROM prueba where nombre='$nombre'",$conexion);//Ve el número de filas que obtiene el select si es 0 el cliente no existe $filas=mysql_affected_rows($conexion);if ($filas==0){ echo " cliente no existe"; // Inserta los datos a la tabla $sql ="INSERT INTO prueba (nombre,edad) VALUES ('$nombre','$edad')"; $result = mysql_query($sql); // Muestra los datos de la tabla luego del ingreso del registro $result = mysql_query("SELECT * FROM prueba", $conexion); echo "<center>Listado general: <br></center><br><br>"; echo "<center><table border = '1' bgcolor='#336699'> \n"; while ($row = mysql_fetch_array($result)) { echo "<tr> \n"; echo "<td> <font color='#ffffff' size=3> $row[nombre] </font> </td> \n"; echo "<td> <font color='#ffffff' size=3> $row[edad] </font> </td> \n"; echo "</tr> \n"; } echo "</table> \n</center>";}else{ echo "Cliente ya existe: Datos no se grabaron";}mysql_free_result($result);mysql_close($conexion);?>

Estos dos archivos los vamos a guardar en C:\wamp\www, puesto que aquí

364

esta los archivos de nuestro sitio Web.

Y lo podemos visualizar al escribir en el Browser Http://localhost/ingresar.htm

Nota: las bases de datos estas ubicadas en la siguiente carpeta C:\wamp\bin\

mysql\mysql5.0.51b\data

BIBLIOGRAFIA

http://www.hotscripts.com/Detailed/13698.html

http://www.programacion.com/articulos/php_windows.php

http://www.planetalinux.com.ar/article.php?aid=51&page=0

http://bulmalug.net/body.phtml?nIdNoticia=215&nIdComentario=-1

http://www.portalmw.com/cursos/php/index.php

http://www.webestilo.com/php/

http://www.php.net/manual/es/manual.php

http://www.maestrosdelweb.com/editorial/phpmysqlap/

365