1

Índice

2.2. Vistas....................................................................................................................................... 62.3. Trabajar con textos, enlaces, imágenes, tablas, formularios, marcos y comportamientos. ....... 82.4. JavaScript: Introducción. Características. Utilización. ............................................................ 472.5. Fundamentos ........................................................................................................................ 502.6. Eventos.................................................................................................................................. 592.7. Objetos .................................................................................................................................. 622.8. Estilos: CSS........................................................................................................................... 64

2

Unidad 02

Editor WYSIWYG de Páginas Web – JavaScript y CSS

Objetivo

Mostraremos de una forma fácil y didáctica como sacar provecho a los editores WYSIWYGcon unos pocos clics y nos pondremos en la senda para poder penetrar mejor en sus secretos.El objetivo de este curso es mostrar las principales funcionalidades de los editores web, demanera que cuando acabemos la unidad cualquiera sea capaz de comprender un programa yeste capacitado para afrontar la creación de una página Web.

En esta unidad se desarrollaran los siguientes conceptos:

Características de algunos Editores HTML del mercado

Texto en HTML: formato, fuente, colores. Trabajar con textos, enlaces, imágenes, tablas,formularios, marcos y comportamientos.

Listas

Propiedades básicas de las páginas Web

Pantalla inicial. Vistas.

Introducción. Características. Utilización. Definición. Fundamentos. Eventos. Objetos.

Introducción. Sintaxis Básica. Utilización. Ejemplos. Clases. Estilos en Dreamweaver.

Hacer más atractivas tus páginas ingresándole gráficos.

La relación entre las imágenes y las páginas Web.

Formatos de imágenes y sus propiedades.

Utilizar inteligentemente las imágenes.

Las imágenes, sus atributos y HTML.

Imágenes como fondo de página.

3

Introducción: Editores HTML

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear losdocumentos con la extensión HTML o HTM, e incluir como contenido del documento el códigoHTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando uneditor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de loselementos de la página, al mismo tiempo que es más complicado crear una aparienciaprofesional para la página.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, yque destaca por su sencillez y por las numerosas funciones que incluye, es MacromediaDreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, comopueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, Araneae, Netscape Composery Dev-PHP, algunos de los cuales tienen la ventaja de ser gratuitos.

2.1. Pantalla Inicial

Al arrancar Dreamweaver aparece una pantalla inicial como la siguiente, vamos a ver suscomponentes fundamentales. Así conoceremos los nombres de los diferentes elementos y serámás fácil entender el resto del curso. La pantalla que se muestra a continuación (y en generaltodas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, yaque cada usuario puede decidir qué elementos quiere que se vean en cada momento.

4

Las barras

La barra de título

La barra de título contiene el nombre del programa (Marcromedia Dreamweaver 8) yseguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, suubicación y el nombre del archivo en formato html. En el extremo de la derecha están losbotones para minimizar, maximizar/restaurar y cerrar.

La barra de menús

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menúsdesplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas conlos diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas espreferible o indispensable hacerlas desde los paneles.

La barra de herramientas estándar

5

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata

algunas de las operaciones más habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediataalgunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estasoperaciones son las de cambio de vista del documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (enla imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta<body>).

También nos es posible alternar entre los modos de selección, mano (para arrastrar lapágina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde eldesplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al100%).

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que seconocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general,la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada unode los paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elementoseleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elementoseleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva,etc.

Pulsando sobre el botón se despliega para mostrar más opciones. Este botón seencuentra en la esquina inferior-derecha.

Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.

6

La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en undocumento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificadossegún su categoría: tablas, texto, objetos de formulario, etc.

En Dev-PHP la vista inicial tiene un formato similar al siguiente:

7

2.2. Vistas

En Dreamweaver la ventana de documento muestra el documento actual. Puede elegirentre una de las vistas siguientes:

La vista Diseño es un entorno de diseño para el diseño visual de la página, la ediciónvisual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra unarepresentación visual del documento completamente editable, similar a la que aparecería enun navegador.

La vista Código es un entorno de codificación manual para escribir y editar código HTML,JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion MarkupLanguage (CFML), y otros tipos de código.

Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventanade documento.

8

Cuando la ventana de documento tiene una barra de título, ésta muestra el título de lapágina y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios queaún no se han guardado, después del nombre del archivo Dreamweaver incluye un asterisco.

En Dev-PHP podemos alternar entre las vistas

Editor: nos muestra el código

Vista Previa Interna: Donde aparecerá la apariencia que va tomando nuestra página.

9

2.3. Trabajar con textos, enlaces, imágenes, tablas, formularios,marcos y comportamientos.

Objetos de una página

El lenguaje HTML permite incluir una gran variedad de objetos dentro de las páginas, comopor ejemplo texto, imágenes, tablas, etc.

Cada objeto puede poseer diferentes atributos, algunos específicos, otros comunes avarios objetos. Ejemplo: la ‘justificación’ en la página (centrado, derecha e izquierda) escomún a casi todos los objetos. En el caso del texto, los atributos específicos son el formato, latipografía y el tamaño (del texto). En una imagen los atributos son las dimensiones. En amboscasos pueden existir enlaces.

Para poder acceder y definir estos diferentes atributos, los editores HTML recurren a‘Ventanas de Propiedades’ o ‘Inspector de Propiedades’ que presentan los atributos del objetoseleccionado en el momento para que los especifiques. A lo largo de esta unidad iremosintroduciendo cada uno de los principales objetos que podes utilizar, empezando por: el texto.

Texto

Al momento de crear y visualizar la página, lo estas haciendo en tu computadora, perofinalmente será visualizada por diferentes usuarios, accediendo a diferentes velocidades deacceso a Internet, al servidor Web que aloje finalmente tu sitio. Las imágenes son recursosque ocupan un importante espacio en disco, espacio que deberá ser transmitido cada vez queun visitante solicite la página. Seguramente has visitado algún sitio con grandes imágenes queno terminan de cargarse nunca, y te has visto obligado a abandonarlo. Por lo tanto, debestener esto siempre en cuenta al momento de decidir cómo transmitir tu mensaje. Por otraparte, el texto es simplemente un conjunto de caracteres que ocupan mucho menos espacio yagilizan la carga de las páginas en los navegadores de los visitantes. Hay que llegar a unbalance entre cantidad de texto y cantidad de imágenes.

Dentro de los atributos del texto tenemos los siguientes:

Formato

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos,introducir viñetas, numeraciones o bien resaltar cierto texto en negrita, cursiva...

La Web fue concebida para presentar contenidos fuertemente estructurados, principalmenteasociados a las ciencias. Es por ello que existen ‘formatos predefinidos’ incluyendo seis nivelesde ‘títulos’ o ‘encabezados’ (Headings), además del ‘párrafo’ o ‘normal’ (Paragraph) y texto

10

‘con formato’ (Preformatted). Pero luego se dispone de otros elementos de formato de texto,como ser: listas numeradas y de viñetas, entre otros.

El lenguaje HTML toma como base el tamaño del texto del párrafo, que puede ser definidopor el usuario en la configuración de preferencias de su navegador. De ahí en más, los otrosformatos son ‘relativos’ a ese tamaño.

La característica de ‘relatividad’ del tamaño del texto supone que un título de nivel 1 deberesaltar más que uno de nivel 2, y así sucesivamente. Hay que destacar el carácter de'suposición' ya que no obliga a que esto suceda en todos los casos. Diseñar una página Web esdiferente que diseñar otros documentos, como por ejemplo un documento de texto conMicrosoft Word, ya que un documento Word siempre se va a visualizar e imprimir igual encualquier computadota, en cambio, en el caso de las páginas Web, su visualización e impresiónvan a depender del navegador utilizado y de su configuración actual.

Encabezados

Los ‘encabezados’ o ‘títulos’ se definen por ‘niveles’ de importancia o jerarquía. El nivel ‘1’es el más importante y se visualizará con el tamaño más grande, el nivel ‘2’ es el siguiente yasí sucesivamente hasta el nivel ‘6’. Las etiquetas HTML son <H1> y su correspondienteetiqueta de cierre </H1> para el nivel 1, <H2> y </H2> y así sucesivamente.

En Dreamweaver podes asignar estos formatos desde el menú ‘Texto >Formato dePárrafo’ o desde el ‘inspector de propiedades’.

Párrafos

Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce unsalto y deja una línea en blanco antes de continuar con el resto del documento. Si se modificael ancho de la pantalla del navegador, el texto dentro del párrafo se reacomoda. Losnavegadores de Internet (Mozilla Firefox, IE) van presentando los distintos elementos (Texto,imágenes, etc.) de izquierda a derecha, cuando se topa con el margen derecho de la ventana,los acomodan en una nueva línea, y así sucesivamente. Por lo que si queremos expresar

11

explícitamente el comienzo de una nueva línea con determinado texto, debemos insertarlo enun nuevo párrafo.

En Dreamweaver, desde la vista diseño, cuando empezás a escribir, lo haces en un párrafodeterminado hasta que pulses la tecla ENTER, que lo que hace es insertar un nuevo párrafo enel documento.

Podemos también, desde la vista código, usar la etiqueta <br>, de la cual ‘no existe’ sucierre correspondiente (</br>), que define una ‘nueva línea’ o ‘salto de línea’, con lo que nodejas una línea en blanco sino que solo cambiamos de línea dentro del mismo párrafo ‘siempre’y no solo cuando el navegador lo determina.

Por definición, si se escriben en código HTML más de un espacio, estos se ignoran y secoloca sólo uno. Lo mismo sucede con los múltiples 'retornos de carro' (Pulsaciones de la teclaEnter). Para ingresar más espacios hay que utilizar un mecanismo especial que se verá cuandoveamos ‘Caracteres Especiales’.

Ojo!!!, no confundas ‘escribir código HTML’ con ‘editar páginas Web’. Lo primero es escribirdirectamente el código, lo segundo es utilizar un aplicativo como el Dev-Php o Dreamweaverpara diseñar la página, pero sin escribir una sola línea de código HTML.

Preformateado

A veces es preferible que el texto aparezca en la ventana del navegador tal y como se haescrito. Ya comentamos que los navegadores acomodan los párrafos para que entren en laventana e ignoran tanto los ‘espacios en blanco’ como también los ‘retornos de carro’ (Enter)sobrantes. Pero HTML permite utilizar un formato especial llamado ‘Preformateado’ que obligaal navegador a mostrar el texto tal cual lo encuentra en el archivo fuente de la página, o sea,el archivo .html.

Para aplicarlo se debe encerrar el texto deseado entre las etiquetas <PRE> y </PRE>. O enDreamweaver seleccionando el texto y aplicarle el formato ‘Texto con Formato Predeterminado’desde el menú Texto>Formato de Párrafo.

Ejemplos con y sin formato. Se mostrarán fragmentos de código HTML y su correspondientevisualización en el navegador. Primero con un párrafo común y luego con uno preformateado.

12

Como podes observar, por definición de HTML, los espacios en blanco y retornos de carroadicionales en los párrafos normales son ignorados. Si deseas agregar retornos de carro,deberías insertar ‘saltos de línea’ (<BR>) y si querés insertar espacios adicionales entrepalabras, un caracter especial de espaciado (&nbsp;), que se verá a continuación, para lograrlo mismo.

Tipografía o fuente

Tipo

Al texto incluido en una página, al igual que los documentos Word, se le puede asignar unatipografía (Font).

Los documentos Web no incorporan las tipografías utilizadas en la creación de los mismos(como el caso de los documentos creados con Adobe Acrobat). Lo que el diseñador hace es‘sugerir’ una tipografía, y el navegador intentará usarla. Si no la encuentra, usará la definidapor defecto en su configuración (Ej.: En Internet Explorer: Times New Roman).

En algunos editores HTML (Dreamweaver) es posible seleccionar una lista de posiblesfuentes, separadas por comas. En este caso el navegador comprobará que dispone del primertipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipoque posea o bien acabar la lista y poner la fuente por defecto.

Además de esta primera situación (si el usuario tiene o no la tipografía) nos encontramoscon el hecho de que existen diferentes (o al menos, diferentes nombres de) tipografías paralos diferentes ‘Sistemas Operativos’. Ejemplo: Arial (PC Compatible), Helvetica (Macintosh),sans-serif (que es la denominación genérica de este tipo de letra).

Hay que prestar atención a que podemos utilizar tipografías muy atractivas que tengamosen nuestra computadora, pero con posibilidades remotas de existir en la computadora delusuario final al cual esta destinado realmente el diseño de la página. No hay que olvidar queeste es un caso más de ‘sugerencia’ de diseño, el que realmente va a decidir cómo sevisualizará finalmente la página va a ser el navegador de elección del usuario.

FrontPage toma la lista de fuentes instaladas en el sistema operativo (Windows), por lotanto va a variar de PC a PC según los programas y paquetes de fuentes instalados. ‘Muchocuidado’ con esto. Como decíamos con anterioridad, podes obtener textos con fuentes muylindas y atractivas, pero el objetivo de las páginas Web es que puedan ser visualizadas por la‘mayor cantidad posible de visitantes’. Y cuando pasa que la fuente no esta instalada en elsistema operativo (Windows, Mac OS, Linux, etc.) del visitante, la experiencia final del mismopuede resultar muy alejada de lo que vos hayas planeado.

Fuentes aconsejables: Arial, Times New Roman, Verdana, Courier New.

Volviendo a FrontPage Express. Para asignar una tipografía, simplemente debes primeroseleccionar el texto y luego la tipografía desde la lista de fuentes disponibles.

13

Las etiquetas HTML para definición de tipografías son <FONT> y su correspondiente cierre</FONT>, encerrando entre ellas el texto a aplicársele.

En este caso, la etiqueta posee atributos, como es el ‘tipo’ de fuente. Estos atributos seingresan dentro de la etiqueta de inicio y se le asigna su valor entre comillas. Ejemplo defuente Arial:

<FONT face="Arial">Texto a aplicar una tipografía</FONT>

En Dreamweaver desde el inspector de propiedades del texto podremos seleccionar fuente:

Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de unasola, ya que es posible que al establecer una únicafuente el usuario no la tenga en su ordenador. Elseleccionar un conjunto de fuentes posibilita que enel caso de que el usuario no tenga una fuente seaplique otra del conjunto. Por ejemplo, siseleccionamos Arial, Helvetica, Sans-serif, el texto severá con la fuente Arial, pero si esta no existe severá en Helvetica.

Otros atributos son el tamaño por ejemplo, que veremos a continuación.

Tamaño

Los tamaños tipográficos son ‘relativos’ al tamaño definido para el formato de los párrafos.Este tamaño es definido como '3'. No confundir con los tamaños ‘absolutos’ en píxeles, porejemplo de Word, que utiliza tamaños como:

12 o 14 ‘píxeles’.

Si se selecciona un número mayor, por ejemplo 5 o 6, el texto resultará en un tamañomayor. ¿Cuán mayor? Depende del navegador que se utilice. En general, si '3' es el nivel base,'4' representa el siguiente tamaño mayor, y así sucesivamente. También puede definirse un

14

tamaño relativo al que se está utilizando: aplicar '+2' en un texto titular nivel 3 resultará en untamaño diferente que si se aplica en un párrafo.

En FrontPage Express podes hacer uso de los botones para agrandar y achicar la fuente queestán a la derecha de la lista de fuentes:

El tamaño final, o sea el que visualice el navegante, puede variar. Por ejemplo, en InternetExplorer podes ir al menú ‘Ver > Tamaño de Fuente > Mayor’ y así agrandar el tamañodefinido por la persona que desarrolló el sitio. Si es que este no utilizó ‘Cascading StylesSheets (CSS)’ que sí utiliza ‘tamaños absolutos’, pero su estudio cae fuera de esta unidad.

Este atributo se representa dentro de la etiqueta <FONT> con la palabra ‘size’. Siguiendo elejemplo anterior:

<FONT face="Arial" size=”4”>Texto a aplicar una tipografía</FONT>

No confundir los tamaños de fuente relativos (HTML) con los absolutos (Microsoft Word).

Dreamweaver: Tamaño:

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades,en píxeles, centímetros, etc...

Color

El color del texto puede ser definido mediante el atributo color de la fuente. El color que sepuede seleccionar es un color plano, o sea, el mismo color para todo el texto a aplicársele.Cada color es definido por un número que esta compuesto de tres partes. Cada una de estaspartes representa la contribución del rojo, verde y azul al color en cuestión o RGB (Red, Greenand Blue), desde 0 (contribución nula) hasta 255 (máxima contribución).

Ejemplo: Sólo rojo = 255, 0, 0 (decimal) o #FF0000 (Hexadecimal).

No te preocupes por estos números, la mayoría de los editores facilitan una paleta decolores de la cual podes seleccionar el color que desees con un solo clic. Por ejemplo, podesutilizar la ‘Paleta de Colores’ de Dreamweaver y seleccionar el color deseado, al igual que enun procesador de textos.

15

Anteriormente el atributo ‘Color’, se representaba dentro de la etiqueta <FONT> con lapalabra ‘color’ que recibe un valor hexadecimal, esto no significa que no se pueda realizar soloque no se recomienda. Siguiendo el ejemplo anterior:

<FONT face="Arial" size=”4” color=”#FF0000” >Texto a aplicar una tipografía</FONT>

El resultado sería:

Texto a aplicar una tipografía

O en Dev-PHP desde el menú Herramientas podes seleccionar insertar color y aparecerá lapaleta de colores.

Estilos Especiales

HTML permite aplicar estilos especiales al texto. Estos estilos, al igual que la asignación deuna tipografía, se pueden aplicar a cualquier selección de texto.

No es necesaria aplicarla a ‘todo’ el párrafo, como en el caso de los encabezados.

Se puede ver a continuación los estilos permitidos, en este caso con FrontPage Express(Menú: ‘Formato > Fuente’, pestaña ‘Estilos Especiales’).

Primero deberías seleccionar el texto al cual querés aplicarle el etilo.

16

Se puede ver una variedad de estilos y a su derecha la correspondiente etiqueta HTML autilizar para encerrar el texto al cual se de desea aplicar el estilo en particular.

Los más utilizados son:

Negritas y cursiva: estos estilos ya los debes conocer de algún procesador de texto.Ejemplo: En negrita. En Cursiva

Posición vertical: Este es el caso cuando deseas utilizar super o subíndice.

Ejemplos. Superíndice: x + x2. Subíndice: x0 +x1

Otros: los otros son simplemente distintos estilos semánticos para diferenciar ciertaspartes del texto que estamos escribiendo, como por ejemplo segmentos de código,ejemplos, definiciones.

También se pueden utilizar otros efectos que se encuentran en la pestaña ‘Fuente’ delmenú: ‘Formato > Fuente’. Estos son: Subrayado, tachado y máquina (simula la máquina deescribir).

Justificación

Al igual que en los editores de texto, en HTML se pueden justificar los párrafos a izquierda,centro y derecha. Para ello simplemente hay que situar el cursor en el párrafo deseado yseleccionar algunas de las justificaciones posibles.

Ejemplo de editor Dreamweaver

17

La justificación es representada por el atributo ALIGN, es una de las propiedades que se lepuede asignar a muchos objetos que se utilizan dentro de las páginas Web. Como ser:imágenes, tablas, líneas horizontales, etc. Y se aplica de la misma manera. Primero seleccionarel objeto a aplicarle la justificación y luego hacer clic en el icono correspondiente (izquierda,centro o derecha).

Existen atributos que son comunes a muchos objetos HTML. La justificación es uno de ellos.

Caracteres Especiales

Una página Web se ha de ver en países distintos, que usan conjuntos de caracteresdistintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros queuna serie de caracteres ‘raros’ (al menos para algunos países) se van a ver bien en todas lascomputadoras del mundo, independientemente de su juego de caracteres utilizado paravisualizarlo.

Este conjunto son los ‘caracteres especiales’. Cuando queremos poner uno de estoscaracteres en una página, debemos sustituirlo por su código HTML.

A este trabajo lo hace, en casi todos los casos, el editor HTML.

Por ejemplo, la ‘á’ (a minúscula acentuada) se escribe "&aacute;" de modo que la palabra‘página’ se escribiría en código HTML de este modo: p&aacute;gina

Seguramente que si escribís tu HTML y no sustituís los acentos por su correspondientecódigo, los vas a poder ver bien, ya que tu navegador está configurado para poder visualizarestos caracteres especiales sin ser necesario el código. Pero si alguien en otro país, digamosFrancia, desea visualizarlo, va a tener problemas.

Como dijimos, estos caracteres especiales se representan en HTML mediante un código queresultará en un nombre o un número, denominado entidad. HTML incluye nombres de entidadpara caracteres como el símbolo de copyright ©, el signo & y el símbolo de marca comercialregistrada (®). Así también existen símbolos para representar monedas, como ser: £ (Libra),¥ (Yen) y € (Euro).

Desgraciadamente, muchos navegadores (especialmente, los productos más desfasados yde marcas distintas que Mozilla Firefox e Internet Explorer) no muestran correctamentemuchas de estos símbolos.

En Dreamweaver se puede ingresar caracteres especiales desde el menú: ‘Insertar >HTML> Caracteres especiales’.

Ejemplos de códigos de caracteres especiales:

Marca registrada: TM (&trade;)

CopyRight: ® (&copy;)

El texto en HTML debe ser interpretado por navegadores de distintos lenguajes (ingles,francés, etc.). Las ‘particularidades’ de cada uno se representan con caracteres especiales (è,é, ë).

18

Listas

Según lo que quieras transmitir, podes asociar cierto formato al texto.

Cuando es necesario listar, y hasta aún enumerar, cierta información con texto, disponemosde las ‘Listas’ de HTML. Estas son exactamente iguales a las utilizadas en la mayoría de los'Procesadores de Texto' (numeración y viñetas).

Las listas son utilizadas para citar, numerar y definir objetos.

Los diferentes tipos de listas son:

desordenadas, con un símbolo de viñeta a tu elección;

ordenadas, con un esquema propio de numeración;

lista de definición, listado de términos junto a su definición.

Dreamweaver podes hacer uso de estas listas desde la ‘Texto>listas’ o desde el inspector depropiedades:

Desordenadas

Si lo que deseas es simplemente hacer un listado en el que no importe el orden, podeshacer uso de las ‘listas desordenadas’ o conocidas como ‘listas de viñetas’. También podesdefinir el tipo de viñeta empleada para cada elemento (círculo relleno, círculo hueco ocuadrado).

En FrontPage Express haciendo un clic derecho sobre la lista, una vez creada, podesseleccionar la opción ‘Propiedades de Lista’ y elegir la viñeta que te guste. Desde esa mismaventana de propiedades de lista podes cambiar el tipo de lista a ordenada y seleccionar elformato de orden.

19

Ejemplo:

Países:

Argentina

Brasil

Uruguay

En HTML las listas son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cadauno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunqueno hay inconveniente en colocarlo).

Por lo que el ejemplo anterior quedaría así:

<p>Paises:</p><ul><li>Argentina</li><li>Brasil </li><li>Uruguay</li></ul>

Ordenadas

A diferencia de las listas desordenadas, estas listas en vez de mostrar una viñeta puedenpresentar información que indique un orden. Este puede ser por números ascendentesdecimales o romanos (con letras mayúsculas o minúsculas), también se pueden presentar loselementos listados con letras ordenadas alfabéticamente (mayúsculas o minúsculas).

20

Figura 8 - Propiedades de Lista Ordenada

Ya se ha mostrado cómo se puede aplicar una lista en FrontPage Express.

Primero seleccionando el texto y luego, o bien seleccionando ‘lista numerada’ desde la ‘listade estilos’ o haciendo clic sobre el icono de lista ordenada.

Ejemplo de lista ordenada con números romanos comenzando por el número I:

La etiqueta HTML cambia a <ol> por ‘ordered list’ (lista ordenada). Y se pueden observarlos atributos ‘Type’ y ‘Start’. El primero para definir el tipo de ordenamiento (númerosdecimales, romanos, letras, etc.) y el segundo para determinar por que número comenzar.

De definición

Esta lista simplemente es utilizada para presentar elementos junto con su definición. Escomúnmente aplicada para representar glosarios.

La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y sudefinición son <dt> (definition term) y <dd> (definition definition) respectivamente.

Ejemplo de lista de definiciones:

21

Otras

También existen otros tipos de listas que no se usan a menudo pero que podes explorar:

Lista de Directorio

Lista de Menú

Anidamientos

Nada nos impide utilizar todas estos tipos de listas de forma anidada. De esta forma,podemos conseguir listas mixtas como por ejemplo: listas ordenadas dentro de listas deviñetas. Ejemplo:

Marquesina

Existe un objeto HTML que permite agregarle dinamismo visual al texto permitiendo undesplazamiento horizontal del mismo. Este objeto es la ‘Marquesina’.

En FrontPage Express, para insertar una ‘Marquesina’ en la página Web, debes hacer clic en

el lugar que desees incluirla y luego ir al menú: ‘Insertar > Marquesina’. El programa tepresentará la ventana de propiedades de la marquesina.

22

Las principales propiedades son:

Texto: el texto que querés mostrar en movimiento.

Dirección: la dirección horizontal de movimiento.

La mejor manera de entender este objeto es ir probando los distintos valores de susatributos (movimiento alternativo: rebota, etc.). No es bueno abusar de este recurso ya que alos visitantes los pone ‘nerviosos’ ver muchas cosas en movimiento que los distraigan de sulectura.

Ejemplo en HTML de una marquesina que rebota de izquierda a derecha:

<p><marquee behavior="alternate" width="100%" dir="ltr">Hola mundo!</marquee></p>

No se puede mostrar el resultado de la visualización de esta marquesina en papel por sereste estático)

Propiedades de la Página Web

Las páginas Web pueden construirse con variedad de atributos que le pueden dar unaspecto muy personalizado. Los títulos de página, las imágenes y colores de fondo, y loscolores del texto y de los enlaces son propiedades que les podes definir a tus páginas Web. Eltítulo de página identifica y da nombre al documento (no al archivo). Una imagen o un color defondo definen la apariencia global del documento. Los colores del texto y los vínculos ayudan alos usuarios a distinguir entre el texto normal y los enlaces (Hyperlink), así como a reconocerqué enlaces han visitado y cuáles no.

23

Título

El título de una página Web ayuda a los visitantes del sitio a realizar un seguimiento de loque ven mientras navegan, al tiempo que identifica la página en listas de historial y defavoritos de los navegadores que utilicen para visualizarla. Si no asignas un título a unapágina, ésta aparecerá en la ventana del navegador y en las listas de favoritos y de historialcomo ‘Untitled Document’ (documento sin título, u otra descripción similar). Asignar unnombre de archivo al documento (al guardarlo) no equivale a asignar un título a la página.

También importante si deseas que tu página aparezca en la lista de resultados de algúnbuscador como Yahoo o Google. Sería muy feo que alguien busque información que tu sitiopueda brindar y le aparezca como resultado ‘Sin Título’.

Ejemplos:

Título en Ventana del Navegador

Al agregar la página a ‘Favoritos’

En la lista ‘Historial’ de páginas visitadas.

Las páginas son almacenadas finalmente en archivos con un determinado nombre y extensión .htm o.html. Además poseen un título.

Imágenes y Color de Fondo

A una página también se le puede especificar tanto un color como una imagen de fondo. Elcolor que se puede seleccionar es un color plano, o sea, el mismo color para toda la página.Esta propiedad funciona exactamente igual que la atributo ‘color’ del texto. Debes seleccionarel color desde la ‘paleta de colores’ que te presente el editor de tu elección y luego este seencarga de traducir ese color a un número hexadecimal que se le asociará al atributo ‘color’ dela página.

24

También se puede asignar de una imagen como fondo de la página. La imagen se colocahaciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondode la página. Más adelante, cuando lleguemos al tema ‘Imágenes’, veremos como se insertanimágenes y los tipos de imágenes que se pueden utilizar.

Cuando evalúes si utilizar un color o una imagen de fondo, tené en cuenta que muy pocosde los 100 sitios más visitados tienen imágenes. Los pocos que las utilizan presentan imágenesmuy discretas, y ágiles para cargar, que no dificulten la lectura de su contenido. La mayoría deestas imágenes simulan ‘texturas’ (Ej.: papeles, telas, etc.). Lo que hay que priorizar es la‘facilidad de lectura’, por eso que el fondo blanco es siempre el ganador.

No confundir título con nombre de archivo

En Dreamweaver podes acceder a las propiedades de la página para asignarle un título y uncolor o imagen de fondo haciendo un clic con el botón derecho de tu mouse sobre la página yseleccionando la opción ‘Propiedades de página. . .’ o mediante el menú: ‘Modificar >Propiedades de página’.

El programa te presentará la siguiente pantalla:

Dentro de la categoría ‘Título/Codificación’, por ahora solo asignaremos un ‘título’ a lapágina. Pero como podes ir viendo en las distintas categorías, existen varias propiedades quepodes utilizar para hacer tu página un poco más particular.

Para los colores e imágenes de fondo debes hacer clic en la categoría ‘Aspecto’.

25

En esta categoría podes configurarle a tu página una imagen de fondo haciendo clic en lacajita ‘Imagen de fondo’ y luego en el botón ‘Examinar’ para ir hasta la carpeta en donde estaalmacenado el archivo de la imagen.

Es ‘muy aconsejable’ guardar la página antes que nada, ya que en esta se van a ingresarreferencias a otros archivos (imágenes, enlaces, etc.) y es necesario que el editor HTML sepadónde estará almacenada.

Continuando con las propiedades de fondo, podes también definir el color del fondo de lapágina desde la ‘Color de fondo’.

Color de texto

También podes definir el color que va a tomar ‘todo’ el texto que incluyas en la página deuna sola vez y no cada vez que ingreses texto. Este color lo podes seleccionar, de la mismaforma que el color de fondo, desde la ‘Color de texto’.

Otras

Podes también definir los colores de los enlaces (vínculo) según su estado:

Vínculo visitado: el visitante ya ha hecho clic (navegado) sobre el enlace alguna vez.

Color de vínculo: el visitante aún no ha hecho clic en el enlace.

Existen otras propiedades que se irán viendo más adelante en esta o en la próxima unidad.

Agregando Imágenes

Los sitios Web conformados por páginas con solamente texto altamente estructurados hanquedado ya muy fuera de moda. Cualquiera que haya navegado recientemente por la Webreconocerá que ésta se asemeja más a una explosión gráfica. Por lo tanto, no queda duda queuno de los aspectos más vistosos y atractivos de las páginas Web es el grafismo. La

26

introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente elmensaje a transmitir y darle un aire mucho más estético. No obstante, el abuso puedeconducirnos a una sobrecarga que se traduce en una distracción para el navegante, quientendrá más dificultad en encontrar la información necesaria, y un mayor tiempo de carga de lapágina, lo que puede resultar en un efecto nefasto si nuestro visitante no tiene una buenaconexión a Internet o si es un poco impaciente.

Según dice el dicho, en el área de diseño gráfico: ‘Una imagen vale más que mil palabras’.Esto no debe tomarse al pie de la letra, se le podría agregar un comentario para aplicarlo alárea de desarrollo de sitios Web:

‘También pesa mil veces más que el texto de las palabras.’, entendiendo por ‘pesa’ altamaño en ‘bytes’ del archivo de la imagen que debe transmitirse al navegador de Internetpara que el visitante pueda visualizarla.

Las imágenes se utilizan para mostrar: fotos, logos, botones, elementos de navegación(flechas, etc.) y un montón de otras cosas. También existe el caso de utilizar imágenes concierto texto que debe ir si o si con cierta tipografía (imagen institucional). Recordá el potencialproblema de utilizar fuentes muy raras que difícilmente estén instaladas en las computadorasde tus visitantes. En este caso, dicho texto sería una imagen.

Aquí nos enfocaremos en utilizar las imágenes en las páginas Web. La creación, captura,tratamiento, optimización, etc. de imágenes tanto como el trabajo artístico y las herramientaspara hacerlo quedan fuera del alcance de esta unidad.

Tipos de imágenes (GIF, JPG y PNG)

En las páginas Web suelen utilizarse tres formatos de archivos gráficos:

GIF, JPEG y PNG. Actualmente, la mayoría de los navegadores sólo reconocen sin problemaslos formatos de archivo GIF y JPEG. Microsoft Internet Explorer (4.0 y posterior) y MozillaFireFox Navigator (4.04 y posterior) admiten parcialmente la visualización de imágenes PNG. Amenos que los destinatarios del sitio utilicen navegadores que admitan el formato PNG,deberías utilizar imágenes GIF o JPEG para conseguir una mayor compatibilidad.

Los archivos ‘GIF’ (Formato de Intercambio Gráfico) utilizan un máximo de 256 colores. Elformato GIF es el mejor para mostrar imágenes de tonos no continuos o imágenes congrandes áreas de colores planos, como barras de navegación, botones, iconos, logotipos yotras imágenes con colores y tonos uniformes. Puede crear GIF con ‘fondos transparentes’, GIF‘entrelazados’ que se enfoquen lentamente a medida que se cargue una imagen en elnavegador y GIF ‘animados’, que son varios GIF guardados en un solo archivo y se muestranen secuencia para brindar la ilusión de movimiento.

El formato de archivo ‘JPEG’ o ‘JPG’ (Grupo Conjunto de Expertos Fotográficos) es el mejorpara imágenes fotográficas o de tonos continuos, ya que puede contener millones de colores.Los archivos JPEG suelen ser más grandes (mayor tamaño en bytes) que los archivos GIF yPNG. Cuando aumenta la calidad de un archivo JPEG, también aumenta su tamaño y el tiempoque tarda en visualizarlo el visitante. A menudo es posible conseguir un equilibrio adecuadoentre la calidad de la imagen y el tamaño de archivo comprimiendo el archivo JPEG.

El formato de archivo ‘PNG’ (Grupo de Redes Portátiles) es un sustituto del formato GIF sinpatente que incluye soporte para imágenes con color indexado, escala de grises y colorverdadero, además de soporte de canal alfa para transparencias. PNG es el formato de archivo

27

nativo de Macromedia Fireworks. Los archivos PNG conservan toda la información original decapas, vectores, colores y efectos (por ejemplo, de sombra), así como todos los elementos quese pueden editar plenamente.

Imágenes y la página

Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) oJPG (para fotos). A estos archivos los podes crear vos con algún programa para gráficos otambién los podes bajar de Internet.

Al insertar una imagen en una página Web mediante un editor HTML, éste generaautomáticamente una ‘referencia’ al archivo gráfico en el código HTML de la página. La imagenen sí no es ingresada en el documento HTML, como en el caso del texto y otros objetos.

Cuando navegas una página que contiene imágenes, el navegador se encarga depresentarte todo como una unidad: ‘una página Web’. Pero en realidad esa página estacompuesta por diversos archivos: uno con el código HTML que define la estructura, referenciasa imágenes y el contenido de texto de la página (entre otras cosas) y un archivo por cadaimagen diferente que te presenta el navegador.

Si querés hacer la prueba, el navegador Microsoft Internet Explorer (desde la versión 4 enadelante) te permite almacenar páginas completas en tu disco duro. Ingresa en algún sitio quetenga imágenes (Ej.: www.yahoo.com.ar que tiene varias imágenes para el correo, noticias,etc.), anda al menú: ‘Archivo > Guardar como ...’ y te va a aparecer un cuadro de diálogo quete pregunta dónde guardar los archivos. Indícale donde quieras guardarlos, es mejor en unacarpeta creada para esto (Ej.: C:\Mis documentos\Mis paginas\yahoo), y hace clic en el botón‘Guardar’. El navegador va a comenzar a guardar diversos archivos. Cuando termine, fijate conel ‘Explorador de Windows’ la carpeta en donde indicaste que se almacene la página. Vas aencontrar otra carpeta, creada automáticamente por Internet Explorer, con el nombre de lapágina y le agrega la palabra ‘Archivos’ (siguiendo el ejemplo: ‘Yahoo! Argentina_archivos’) endonde vas a poder ver los distintos archivos de imágenes referenciados desde la páginaprincipal (puede que también encuentres otros archivos utilizados en la página que no seanimágenes).

Volviendo a la ‘referencia’ a la imagen desde la página, para asegurarse de que seacorrecta, el archivo de imagen deberá estar almacenado en el sitio local, o sea, bajo la ‘carpetaraíz’ del sitio o en alguna subcarpeta de esta (Ej.: c:\missitios\miprimersitio\imagenes).También existe la posibilidad de incluir imágenes que ya estén en la Web, en este caso vas atener que utilizar como referencia su dirección URL (Ej.:www.algunservidor.com/imagenes/logo.gif).

Una gran ventaja del GIF es su capacidad para definir un color como transparente.

Todas las imágenes son rectangulares, si deseas un contorno no rectangular, deberíasutilizar GIF con el fondo que queda fuera del contorno como ‘transparente’.

Una imagen en sí, no es ingresada en el documento .html, sino que en él se incorpora unareferencia al archivo gráfico.

Insertar imágenes

Para insertar una imagen en Dreamweaver, debes ir al menú ‘Insertar > Imagen’ o desde elicono de la barra de herramientas insertar:

28

Te presentará un cuadro de diálogo en donde podrás insertar la referencia a la imagendesde un archivo o desde una ubicación en la Web (URL). En caso de que tengas la imagen enun archivo, que es la mayoría de las veces, simplemente hace clic en el ‘Buscar en’ yselecciónala desde el pequeño explorador de archivos que te presenta. El programa te va amostrar directamente los archivos contenidos en la carpeta en donde fue almacenada la páginaa la que le estas insertando la imagen. Ojo, siempre guarda el documento antes de insertarlealguna imagen, ya que se toma como referencia la ubicación en donde fue almacenada. Unavez que encuentres el archivo de la imagen, hace clic en ‘Abrir’ y te aparecerá inmediatamenteen la página.

La etiqueta que HTML utiliza para insertar una imagen es <img> (image).

Esta etiqueta no posee su cierre correspondiente y en ella se debe especificar‘obligatoriamente’ el paradero de nuestro archivo grafico mediante el atributo ‘src’ (source ofuente).

La sintaxis queda entonces de la siguiente forma:

<img src="camino hacia el archivo">

Ya se verá con más detalle, cuando se vea el tema ‘Enlaces’, como expresar el ‘caminohacia el archivo’.

Si mi página esta almacenada por ejemplo en la carpeta ‘C:\missitios\primersitio’ y ademáscreo otra carpeta llamada ‘imagenes’ bajo esta (para lograr una mayor organización). Luegoinserto una imagen cuyo nombre de archivo es ‘logo1.gif’, la etiqueta resultante será:

<img src="imagenes/logo1.gif">

Aparte de este atributo, indispensable obviamente para la visualización de la imagen, laetiqueta <img> nos propone otra serie de atributos de mayor o menor utilidad que se verán acontinuación.

Modificar tamaño

Al insertar una imagen, los editores HTML ingresan también un par de atributos asociados ala misma, su ancho y alto ‘original’ en píxeles. Si querés, podes modificar estos valores‘originales’ mediante los atributos: ‘width’ (ancho) y ‘height’ (alto). También se puedenespecificar los valores ‘relativos’ en porcentaje (de 0 a 100 %) que implica, en este caso, elporcentaje de la pantalla que debería cubrir (si insertas la imagen en una celda de una tabla,significará cuánto espacio de la celda debe cubrir, no de la página).

En FrontPage Express, al igual que en la mayoría de los editores HTML, simplemente podesseleccionar la imagen y el programa te mostrará un cuadradito negro en cada esquina de ella.Utilizando el mouse, haciendo clic (sin soltar el botón) en cualquiera de ellos y podes mover elpuntero del Mouse hasta lograr el tamaño deseado de la imagen. Si querés especificarletamaños relativos, podes hacer un clic derecho sobre la imagen y seleccionar ‘Propiedades deimagen’, se te presentará un cuadro de diálogo con todas las propiedades de la imagen (deaquí en adelante la llamaremos ‘ventana de propiedades’), selecciona la pestaña ‘Apariencia’ yencontrarás el área ‘Tamaño’ en donde podes probar lo anteriormente presentado.

29

En general, no es aconsejable utilizar otros tamaños que no sean los originales. Si cambiasel tamaño, trata de hacerlo en ‘proporción’ con el original.

En el caso de que agrandes la imagen, perderá calidad porque se ‘estirará’ la imagenoriginal hasta alcanzar el tamaño especificado deformándose. Y en el caso de que la ‘achiques’,esto solo va a reducir el espacio que cubrirá en la página Web cuando se navegue, pero‘SIEMPRE’ la imagen se transmite al navegador como archivo, especifiques el tamaño queespecifiques, este archivo va a ‘pesar’ tantos bytes y esto no va a cambiar. Debe quedar claroque los atributos ‘alto’ y ‘ancho’ solo modifican la apariencia de la imagen en la página, no a laimagen en si. Por lo tanto, si tenés una imagen grande y querés mostrarla pequeña, es mejorque achiques el ‘original’ de la imagen con un programa de tratamiento de gráficos (Ej.: CorelPhotoPaint, PaintShop Pro, Adobe PhotoShop, etc.).

Te preguntaras: ¿Cuál es el problema de utilizar una gran imagen y mostrarla chiquita? Larespuesta es: el navegante va a tener que esperar que se descargue el gran archivo de laimagen a su navegador antes de poder verla. ‘A tamaño de archivo más grande, más tarda endescargarse’.

No es obligatorio ingresar los atributos de tamaño. El hecho de explicitar en el código lasdimensiones de tus imágenes ayuda al programa navegador a confeccionar la página de laforma que deseas antes incluso de que las imágenes hayan sido descargadas.

Así, si las dimensiones de las imágenes han sido proporcionadas, durante el proceso decarga, el navegador reservara el espacio correspondiente a cada imagen creando una‘maqueta de página’ correcta. El usuario podrá comenzar a leer tranquilamente el texto sin queeste se mueva de un lado a otro cada vez que una imagen se cargue.

Bordes

Con el atributo ‘border’ se define el tamaño en píxel del cuadro que rodea la imagen. Deesta forma podes recuadrar tu imagen si lo deseas con el grosor que especifiques.

Ejemplo de imagen con borde de 2 píxeles:

Es particularmente útil cuando deseamos eliminar el borde que aparece cuando se le asignaa la imagen un enlace (ya llegaremos a esto). En dicho caso tendremos que especificarborder="0" para eliminar esta característica antiestético (esta es una opinión personal, sideseas un borde es mejor hacerlo directamente en la imagen).

FrontPage Express: ventana de propiedades > Apariencia > Diseño > ‘Grosor del Borde’.

Texto alternativo

Podes asignarle a tu imagen una breve descripción mediante el atributo ‘alt’ (textoalternativo). No es indispensable pero presenta varias utilidades.

Primero, durante el proceso de carga de la página, cuando la imagen no ha sido todavíacargada, el navegador podrá al menos mostrar esta descripción, con lo que el navegante sepuede hacer una idea de lo que va en ese lugar, hasta que haya finalizado de descargar laimagen y pueda mostrarla.

Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con unaopción del navegador que desactiva el muestreo de imágenes, con lo que tales personaspodrán siempre saber de qué se trata el grafico y eventualmente cambiar a modo conimágenes para visualizarla.

30

En general podemos considerar como ‘aconsejable’ el uso de este atributo, salvo paraimágenes de poca importancia, y absolutamente ‘indispensable’ si la imagen en cuestión sirvede enlace a otra página.

FrontPage Express: ventana de propiedades > General > ‘Representaciones alternativas’ >‘Texto’.

Espaciado alrededor

Existen los atributos pare agregar espacio libre, en píxeles, arriba y abajo de la imagen:‘Vspace’ y a la derecha e izquierda de la misma: ‘Hspace’. Este espacio la separará de otroselementos que la rodeen, como texto, otras imágenes, etc.

FrontPage Express: ventana de propiedades > apariencias > ‘Espacio Vertical’ y ‘EspacioHorizontal’.

LowSource

Con este atributo podemos indicar un archivo de la imagen de ‘baja resolución’, o sea, lamisma imagen pero almacenada en otro archivo con menor calidad que ‘pese’considerablemente menos en bytes. Cuando el navegador detecta que la imagen tiene esteatributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y quese descarga más rápido).

Posteriormente descarga y muestra la imagen de resolución adecuada (señalada con elatributo src, que se supone que ocupará más y será más lenta de transferir).

FrontPage Express: ventana de propiedades > General > Representaciones Alternativas >‘Baja Resolución’.

Alineamiento

Cuando vimos el tema ‘textos’, presentamos el atributo ‘Align’ que nos permitía justificar eltexto a derecha, izquierda o centro de nuestra página.

Dijimos que este atributo no era exclusivo del texto sino que podía ser aplicado a otro tipode objetos (imágenes, tablas, etc.).

El caso es que en las imágenes funciona un poco diferente, no especifica ‘justificación’, sino‘alineamiento’ con respecto a los objetos que la rodea.

Para ‘justificar’ la imagen, se puede utilizar en FrontPage Express lo botones dejustificación:

Esto en realidad justifica el párrafo que contiene a la imagen, no a la imagen en sí (o sea,no el atributo ‘Align’ de la imagen).

Para especificar la ‘alineación’ de la imagen en FrontPage Express: ventana de propiedadesde imagen > Apariencia > Diseño > ‘Alineación’, y las posibilidades son:

Sin Especificar (o por defecto, ‘default’): suele ser una alineación con la línea de base. Elvalor predeterminado puede variar en función del navegador del visitante del sitio.

Inferior (‘bottom’) y Línea de base (‘baseline’) : alinean la línea de base del texto (u otroelemento) con la parte inferior (o línea base) de la imagen.

31

Medio (‘middle’): alinea la línea de base del objeto con el punto medio de la imagen.

Superior (‘top’): alinea una imagen con la parte superior del elemento más alto (imageno texto) de la línea actual.

Inferior absoluto (‘absbottom’): alinea en relación con la parte inferior absoluta (incluidoslos trazos bajos, como en la letra g) del objeto seleccionado.

Medio absoluto (‘absmiddle’): alinea la imagen en relación con el punto medio absolutode la línea actual.

Texto superior (‘texttop’): alinea la imagen con la parte superior del carácter más alto dela línea de texto.

Izquierda (‘left’): sitúa el objeto seleccionado en el margen izquierdo, ajustando a laderecha el texto que está a su alrededor. Si hay texto alineado a la izquierda delante delobjeto, los objetos alineados a la izquierda suelen pasar a una nueva línea.

Derecha (‘right’): sitúa el objeto en el margen derecho, ajustando a la izquierda el textoque está a su alrededor. Si hay texto alineado a la derecha delante del objeto, losobjetos alineados a la derecha suelen pasar a una nueva línea.

Las dos últimas opciones de alineación (Left y Right) permiten un párrafo de múltipleslíneas, mientras los otros no.

Propiedades de páginas: imagen de fondo

Para agregarle a tus páginas una imagen de fondo, hay ciertas cosas de deberíasconsiderar:

¿Es la imagen de fondo lo suficientemente discreta para no competir con el contenido dela página?

¿No presentará dificultad de lectura teniendo en cuenta el color del texto y de losenlaces?

¿No presentará dificultades de identificación de otras imágenes que quieras incluir?

Y una de las cosas más importantes, ¿cuándo tiempo le va a llevar al navegador cargardicha imagen de fondo? ¿Es simplemente muy grande?

Si querés que cubra toda la página, ¿tendrá problemas en distintas resoluciones dedistintos visitantes?

Cuando se asigna a una página una imagen de fondo, si esta no ocupa la totalidad de laventana del navegador, forma un mosaico (se repite) para completarla, a no ser que se leespecifique que sea ‘fija’. Por lo tanto no es necesario, según la intención, utilizar imágenesenormes para darle un fondo especial. Existen las imágenes que simulan ‘texturas’ que sonrealmente pequeñas, pero con la característica que al repetirse en el navegador, forma unefecto de continuidad simulando un fondo homogéneo. Veamos el ejemplo a continuación.

Es bueno especificar un color de fondo (parecido a la imagen). Esto te asegura que, hastaque el navegador descargue la imagen de fondo, el navegante podrá ver el texto sobre dichocolor. Es importante si se han utilizado una imagen oscura y texto claro. La mayoría de losnavegadores te mostrarán un fondo blanco hasta que se descargue la imagen y esto teimpedirá que puedas leer el texto claro hasta que finalice dicha descarga.

32

Si estas trabajando en una página cuyo contenido es más grande que el que puede mostrarla ventana del navegador, deberás utilizar las barras de desplazamiento vertical (u horizontal),comúnmente llamadas ‘Scroll’. Al utilizarlas, tanto el contenido de la página como la imagen defondo se desplazarán, a no ser que especifiques dicha imagen como ‘fija’ (Fixed). En este caso,solo el contenido se desplazará y el fondo quedará fijo. En FrontPage se llama ‘Marca de Agua’(característica que solo funciona en Microsoft Internet Explorer)

Enlaces

No podríamos hablar de navegante si no disponemos del concepto de ‘navegación’ en laWeb. Si estos archivos HTML no estuviesen debidamente ‘entrelazados’ o ‘conectados’ entreellos y con el exterior de nuestro sitio por medio de enlaces de hipertexto (o hiperenlaces), laWeb en sí no tendría razón de existir.

El atractivo más importante de la Web radica en la posibilidad que se le traslada a losnavegantes de poder recorrer los contenidos puestos a su disposición en la secuencia que ellosdecidan. Y esto se logra introduciendo referencias bajo la forma de enlaces que permitan unacceso a la información deseada de una manera fácil y rápida.

El objetivo de los ‘hiperenlaces’ (o ‘enlaces’ de aquí en adelante) es establecer conexionesdesde sus documentos hasta otros documentos o tipos de archivo. Brindan la posibilidad de‘navegación’ en la Web.

Se pueden crear enlaces hacia documentos, imágenes, archivos multimedia, correoselectrónicos o software transferible.

Un enlace puede ser fácilmente detectado en una página. Basta con deslizar el puntero delratón sobre las imágenes o el texto y ver como cambia de su forma original transformándose,en la mayoría de los casos, en una mano con un dedo apuntador. Adicionalmente, estosenlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el visitante notenga dificultad en reconocerlos. Si no cambiamos las propiedades generales de la página,estos enlaces de texto estarán subrayados y en color azul.

En el caso de las imágenes que sirvan de enlace, veremos que están delimitadas por unmarco azul por defecto (que podíamos eliminar mediante el atributo de borde)

Estructura de navegación

Es realizar una planificación previa a la construcción de las páginas, que tengas en cuenta:

‘Árbol del sitio’ y ‘Esquema de Página’. Una vez que definas el árbol de tu sitio, estarás encondiciones de llevarlo a cabo agregando los enlaces a tus páginas.

Estos pasos previos sirven para que los visitantes no tengan que, y no deberían, navegarpor decenas de páginas hasta encontrar lo que desean. Es extremadamente aconsejablediagramar la estructura general de nuestros sitios. Por lo que con una estructura y elementosde navegación asistiremos a realizar el objetivo final del sitio: comunicar de la mejor maneraposible nuestro mensaje.

33

Ubicar al visitante

Uno de los problemas que trae aparejada la gran libertad de navegación que introducen losenlaces es que, la mayoría de las veces, el usuario desconoce dónde esta y cómo ha llegadohasta ahí, incluso dentro de un mismo sitio.

Uno empieza por la página principal, hace clic en un enlace, luego en otro y asísucesivamente va navegando y en un momento determinado, la página que esta visualizandono tiene relación alguna con el interés de su búsqueda.

¿Cómo vuelve a donde estaba? Puede utilizar las flechas de navegación del navegador(atrás y adelante) para volver por donde vino. Pero no es una buena solución dejarles estaresponsabilidad tanto al navegador como al visitante.

Muchas veces es necesario presentar información de ubicación explícitamente.

Existen diversas posibilidades de presentar información de ubicación. Es aconsejable ponera disposición del visitante la ruta de categorías (o niveles) en las que se ha ido navegando elusuario desde un comienzo, por ejemplo:

‘Principal > Vehículos > 4 x 4 > Ford Explorer’. Como puedes ver, las categorías (osecciones) anteriores a Ford Explorer están subrayadas, lo que significa que pueden brindarenlaces (saltos) a las mismas. El usuario puede ir fácilmente a otras categorías, distintas de4x4, haciendo un solo clic sobre el enlace en Vehículos. Esta característica agilizará lanavegabilidad de tus páginas.

Hiperenlaces o Hipervínculos (HyperLinks)

Para agregar un enlace, el HTML ofrece la etiqueta <A> y su correspondiente etiqueta decierre </A>. A la hora de su creación, resulta fundamental conocer el ‘camino o ruta’ entre eldocumento de origen del enlace, o sea, donde lo estamos agregando, y el documento dedestino. A este atributo lo llamaremos ‘destino’ del enlace, y su correspondienterepresentación en HTML es mediante el atributo de enlace: ‘href’ (por referencia hipertexto).

Por lo tanto, la sintaxis general de un enlace sería:

<A href="destino">elemento con enlace</A>

‘Elemento con enlace’ puede ser generalmente un texto o una imagen, como se verápronto. Esta será la parte de la página que se presentará como ‘activa’ permitiéndole alvisitante hacer un clic sobre ella y así ‘navegar’ hacia la información contenida en eldocumento referenciado por ‘destino’.

¿Qué forma puede tomar destino? Destino podría ser otra página Web, un correoelectrónico, otro sitio o un archivo (imagen, archivo comprimido, archivo de Word, Excel, etc.).

En función del destino, los enlaces pueden ser agrupados de la siguiente manera:

internos: los que se dirigen a otras partes dentro de la misma página Web.

locales: los que se dirigen a otras páginas dentro del mismo sitio Web.

remotos: los dirigidos hacia otros sitios Web o páginas particulares de estos.

con direcciones de correo: para crear un mensaje de correo dirigido a una dirección.

34

con archivos: para ofrecerles la posibilidad a tus visitantes de ‘descargarse’ archivosdesde tu sitio.

Internos

Cuando no es posible fragmentar lo suficiente la información (o contenido), como resultadonos quedan páginas Web de un tamaño superior al que puede visualizar un navegador en suventana, viéndose este obligado a ofrecer al usuario barras de desplazamiento. Es aconsejableevitar estas situaciones, pero hay veces que son inevitables (Ej.: página de documento legal,páginas de detalles, etc.).

Para estos casos dispones de enlaces que pueden apuntar a un lugar específico ‘dentro’ dela ‘misma página’, ofreciendo al visitante la posibilidad de acceder rápidamente al principio ofinal de la página o bien a diferentes párrafos o secciones de la misma. Esta es la utilidad delos ‘enlaces internos’.

Esta solución en particular hace necesario la presencia de dos elementos: un enlace queapunte a un destino local (enlace interno) y la definición del destino local en sí (ancla o puntode fijación con nombre).

Lo primero que hay que definir son los destinos posibles dentro del documento (Ej.: Tope,abajo, título X, sección Y, etc.) y luego agregar los enlaces que presenten como destinos losanteriormente definidos.

Para ejemplificarte esta característica, imagínate un documento Word con 25 páginas y unatabla de contenidos al comienzo, que haciendo clic en cada uno de los títulos de los contenidoste lleve a la página específica, siempre dentro del mismo documento. Ese es esencialmente elconcepto.

Ya se presentó la definición general en HTML de los enlaces, ahora falta la de los destinoslocales o anclas.

<A name=”abajo”></A>

La particularidad de estos es que no contienen ningún elemento entre su etiqueta deapertura y su correspondiente etiqueta de cierre. Simplemente definen un destino local. Elnombre (name) es necesario para distinguirlo de otros destinos locales que puedan llegar adefinirse en la misma página.

Supongamos que tenemos una página con el detalle de un producto, como ser: nombre,descripción, precio, características técnicas, etc. Muy difícilmente todo esto entre en la ventanadel navegador sin necesitar las barras de desplazamiento vertical. Por lo que podemosagregar, al comienzo de la página, una serie de enlaces ‘locales’ a cada uno de estos detalles(al estilo de índice). Lo que habría que hacer es crear primero los destinos locales o anclas‘antes’ de cada uno de los títulos o secciones (nombre, descripción, precio, etc.) y luego losenlaces a cada uno de ellos.

Ahora solo falta saber cómo se conforman los ‘enlaces internos’ (a destinos locales). Estostoman la misma forma general que ya se presentó, y en el campo destino se antecede eldestino local precedido por el símbolo ‘#’.

Ejemplo:

<A href=”#caract_tecnicas”>Ir a las características técnicas</A>

35

Es el símbolo ‘#’ quien especifica al navegador que el enlace apunta a una seccióndeterminada del mismo documento que se esta visualizando.

A modo de conclusión, aunque útiles, estos enlaces no son los más aconsejables. Lo mejores fragmentar la información en diversas páginas independientes que puedan ser visualizadaspreferentemente en una sola ventana del navegador y luego asociarlas mediante enlaceslocales. No son atractivas las páginas en las que los visitantes se ven obligados a desplazarseverticalmente una y otra vez. Además, al ser más reducidas las páginas, más ágiles de cargary no sobrecargamos una sola página con información que quizá el visitante aún no desea.

Una aplicación tradicional de estos enlaces consiste en poner un pequeño índice al principiode tu documento donde introducís enlaces internos a las diferentes secciones. Paralelamente,al final de cada sección podes introducir un enlace que apunta al índice de manera que ofrecesuna guía al visitante en la búsqueda de la información útil para él.

Los enlaces internos cuentan con dos partes:

destino

ancla o punto de fijación

Local

Al presentar el concepto de ‘sitio Web’, te contamos que definía un conjunto de páginasWeb entrelazadas, asociadas a un tema u objetivo en común (Información institucional de unaempresa, Club de Fans, etc.). Ahora llega el momento de definir el mecanismo deinterconexión entre estas páginas.

Los enlaces locales siguen el mismo modelo general que se presentó anteriormente, peroespecificando como ‘destino’ a un archivo de una página Web perteneciente al mismo sitio.

<A href="URL o camino al archivo">Texto del enlace</A>

En general, el destino del enlace representado en el campo ‘href’ se puede especificar dedos maneras. Con la ‘URL’ (Universal Resource Locator), que es la dirección en el formato‘estándar’ de direcciones en la Web, del archivo HTML de la página Web destino (Ej.:www.nombredelservidor.com.ar/carpeta/archivo.html). O bien, si este destino es ‘local’ (lapágina pertenece al mismo sitio), se puede abreviar y solamente especificar el camino desde lapágina en donde se esta definiendo el enlace hacia el archivo HTML destino. Ventaja: si cambiael nombre de dominio (Ej.: de www.nombredelservidor.com.ar a www.zzz.com.ar), no vas atener que actualizar ‘todos’ los enlaces locales en ‘todas’ las páginas de tu sitio.

En los sitios pequeños este camino va a resultar muy simple. Lo único necesario sería incluirsolamente el nombre del archivo destino. En este caso se supone que por el pequeño tamañodel sitio todas las páginas se encuentran almacenadas bajo la misma carpeta, que sería lacarpeta raíz.

Cuando los sitios son más grandes, es conveniente ‘organizar’ los archivos (páginas,imágenes, otros) en subcarpetas según criterios como ser: por secciones, imágenes en otracarpeta, distintos personas trabajando sobre el mismo sitio, etc. Y, utilizando estaorganización, se puede hacer uso de ‘subsitios’ (Ej.: www.misitio.com/ventas,www.misitio.com/ofertas, etc.). En este caso, el camino hacia el archivo destino puedecontener también una o varias carpetas de por medio, dependiendo del lugar (carpeta) endonde este almacenado.

36

Este camino debe seguir las especificaciones de la conformación de las URLs, o sea, cadaparte del camino (carpeta, subcarpeta o archivo) separada por una barra inclinada: ‘/’. Ojo, enlos sistemas operativos Windows se utiliza la barra invertida: ‘\’, que no es lo mismo. Hay quetener esto siempre en mente.

Para los que no hayan tenido experiencia en armar los caminos (Paths) de archivos, aquívan algunas sugerencias:

1. Sitúate mentalmente en la carpeta en donde se encuentra almacenada la página a la quele estas agregando en enlace (página origen).

2. Si la página destino se encuentra en la misma carpeta, simplemente con el nombre delarchivo es suficiente. Si se encuentra en alguna subcarpeta, hay que escribir el caminoindicando cada subcarpeta por los que hay que ir ‘bajando’ en la estructura (jerarquía decarpetas) hasta llegar al archivo destino, siempre separándolos con la barra ‘/’. La ruta nocomienza con ‘/’.

3. Si la página destino se encuentra almacenada una carpeta ‘superior’ a la carpeta de lapágina origen, hay que ir ‘subiendo’ por la estructura (jerarquía de carpetas) mediante laespecificación de ‘carpeta superior’: ‘../’ Tantas veces como niveles se tenga que subir, hastadar con la carpeta que contiene a la página destino. Y de ahí, si es necesario bajar por dichaestructura, ha de hacerse de la misma manera que como se indicó en el punto anterior (con labarra ‘/’).

Ejemplo de caminos hacia archivos (extraído de un sitio local administrado porDreamweaver):

Los siguientes ejemplos presentan distintos enlaces desde la página ‘a.htm’, localizada en lacarpeta ‘productos’, hacia diferentes archivos almacenados en diferentes lugares:

Hacia ‘b.htm’ (ambos archivos se encuentran en la misma carpeta ‘productos’), elatributo href será: “b.htm”.

Hacia ‘c.htm’ (en la subcarpeta llamada ofertas), el atributo href será: “ofertas/c.htm”.

(Cada barra diagonal (/) representa un nivel por debajo en la jerarquía de carpetas.)

Para establecer un enlace con ‘pagina_principal.html’ (en la carpeta padre, un nivel porencima de a.htm), el atributo href será: “../pagina_principal.html”.

37

(Cada ../ representa un nivel por encima en la jerarquía de carpetas.)

Para establecer un enlace con ‘horarios.htm’ (en una subcarpeta distinta de la carpetapadre), el atributo href será: “../atencion/horarios.htm”.

(../ sube a la carpeta padre; atencion/ baja a la subcarpeta atencion)

Por suerte la mayoría de editores HTML ofrecen un mecanismo de ‘exploración de archivos’que permite seleccionarlos de una ventana (al igual que cuando se abre un archivo en Word oFrontPage) y el programa luego ingresa automáticamente el valor del destino en el campohref.

Remotos

¿Y si lo que deseas es ofrecer un enlace a otros sitios o a documentos específicos de otrossitios? Esto es posible mediante los enlaces remotos. O sea, cualquier documento que noforma parte de tu sitio.

En este caso, el ‘destino’ a asignarle al atributo ‘href’ debe ser especificado por la URLcompleta del documento hacia donde apuntará el enlace.

Ejemplo:

<A href=”http://www.yahoo.com.ar”> Ir a Yahoo Argentina!</A>

Hay que tener en cuenta que estas direcciones deben comenzar con ‘http://’. Esto especificaque se trata del ‘Protocolo de Transferencia de HiperTexto’ (HTTP) que utiliza la Web, o enotras palabras, estas enlazando una página Web. Si te olvidas de incluirlo, los enlaces serántratados como locales y resultará en los que comúnmente se llama ‘un enlace roto’ (el destinodel enlace es inaccesible).

Lo anterior tiene importancia porque HTML nos permite crear enlaces a distintosdocumentos utilizando distintos ‘protocolos de transferencia’, por ejemplo ‘FTP’ (Protocolo deTransferencia de Archivos). En esta caso, el destino debería comenzar con ‘ftp:// . . .’ en vezde ‘http:// . . .’.

Híbridos

Les llamamos enlaces ‘híbridos’ (combinación de distintos tipos) a los que hacen uso almismo momento de más de una de las posibilidades anteriormente presentadas. Estos puedenser una combinación de enlaces ‘locales o remotos’ y enlaces ‘internos’.

En cualquier momento podes crear un enlace a cualquier parte de otra página,perteneciente a tu sitio o no, siempre y cuando conozcas los nombres de los puntos de fijacióno anclas, y estos a su vez estén definidos.

Ejemplo: local + interno

<a href="producto1.html#descripcion">Descripción del Producto 1</a>

Ejemplo: remoto + interno

<a href="www.zzz.com/ventas.html#ofertas">Ofertas de ZZZ</a>

A correos electrónicos

Seguramente alguna vez se te ha presentado un enlace que, una vez que le hiciste clic, envez de dirigirte a otra página te abrió una ventana de nuevo correo (en el programa de correo

38

electrónico que hayas tenido instalado en tu computadora). Bien, estos enlaces especiales sonlos de correo electrónico. La única diferencia es que en vez de apuntar a un documento enInternet, apuntan a una dirección de correo determinada.

Son de gran ayuda al momento de presentar direcciones de email en una página Web (Ej.:contacto, ventas, webmaster, etc.).

En el caso de estos enlaces, el campo destino va a cambiar un poco. Lo que hay que haceren él es anteceder la dirección de correo con ‘mailto:’ (del ingles: email a). Ejemplo:

<a href="mailto:docente@curso.com">Email al Profesor</a>

Al igual que el resto de los enlaces, las etiquetas <A . .> y </A> pueden encerrar tantotexto como imágenes (en la mayoría de estos casos). Por lo que también es común ingresar enuna página una imagen de un buzón y agregarle un enlace a correo electrónico. Ejemplo:

<a href="mailto: docente@curso.com "><img src=”buzon.gif”></a>

Ojo, cabe aclarar que ese enlace solo funciona si el visitante tiene configurado un programade correo electrónico en su computadora. Por lo que es conveniente ingresar también con‘texto’ la dirección de correo entre las etiquetas <A href=”mailto:. .”> y </A>. De estamanera, si el usuario quiere anotar la dirección de correo o ‘copiarla y pegarla’ en otro ladopuede hacerlo.

Además de la dirección de destino, le podes agregar más detalle al ‘nuevo correo’ que elvisitante enviará, como ser: ‘Asunto’, ‘Con Copia a’, etc. Esto se logra agregando luego de ladirección de correo el símbolo ‘?’ y los distintos campos en ingles con sus determinados valoresseparados por el símbolo ‘&’. Asunto se transforma en ‘Subject’ y ‘Con Copia a’ en ‘CC’.

Ejemplo: mandar un email con asunto “Email desde la Web” a “docente@curso.com” conuna copia a “webmaster@curso.com”.

<a href="mailto:docente@curso.com?Subject=Email desde laweb&CC=webmaster@curso.com">email al docente – docente@curso.com </a>

En este caso hay que encerrar todo el valor de href entre comillas, y no agregárselas luegode los signos = de Subject y CC.

A otros archivos

En ningún momento hemos limitado los tipos de archivos que puedan existir en la Web asolo páginas Web (HTML) e imágenes (GIF, JPG, PNG).

También podes poner en la Web a disposición de tus visitantes otros archivos como ser:PDF, documentos (DOC), ejecutables (Exe), comprimidos (Zip, Arj, rar, ACE, etc.), y cualquierotro tipo de archivo.

La gran diferencia es que en este caso no se estaría ‘navegando’. El mecanismo defuncionamiento es el siguiente: el navegador de Internet, como Internet Explorer, analiza eldestino del enlace, si reconoce dicho destino, o sea, que sabe como mostrarlo, no hayproblema. En el caso que no lo reconozca, simplemente ofrece la posibilidad al usuario paradescargarlo al disco duro ( o rígido). Por lo que estos enlaces no serían de navegación pero side descarga.

39

Siguen el mismo modelo que los enlaces en general. Con la particularidad que en vez deestar dirigidos a una página o sitio Web, están dirigidos a un archivo de otro tipo.

Ejemplo: deberías crear un enlace ‘local’ en la página que desees hacia dicho archivo.Supongamos que el archivo se encuentra en una carpeta llamada ‘archivos’ situada por debajode la carpeta en donde esta almacenada la página a la que querés agregarle el enlace.

<a href="archivos/mi_trabajo.zip">Descarga mi Trabajo: mi_trabajo.zip</a>

Cuando los visitantes de la página hagan clic sobre el enlace anterior, el navegador lepresentará una ventana preguntándole ‘¿Qué desea hacer con el archivo: Abrirlo o guardarloen disco?’. Para abrirlo desde Internet hay que tener también instalado algún programa queentienda los archivos con esa extensión, en este caso ‘.zip’. Si desean guardarlo en disco, se lepresentará una ventanita para que elijan en qué carpeta guardarlo.

Cabe señalar que hoy en día existen algunos ‘Plugins’ o ‘conectores’ que se instalan comoextensión a los navegadores más tradicionales (IE y Mozilla FireFox) que te permitiránvisualizar algunos tipos de archivos no contemplados por el HTML. Ejemplo: Microsoft Office,Acrobat Reader, Macromedia Flash, VRML (Realidad Virtual), etc.

Targets o ventanas destino

Hasta el momento siempre hablamos de navegación dentro de la misma ventana que nosofrece el navegador. Pero existe un atributo especial de los enlaces que te permiten cambiaresta conducta. Por ahora vamos a presentar solo unas pocas posibilidades, en cuanto se veanlos ‘Marcos’ se presentarán el resto.

Se le puede indicar al navegador que ‘abra’ el destino del enlace según el valor del atributo‘target’ (o destino):

blank: en una ventana a parte. El navegador abrirá otra ventana y presentará elcontenido especificado en el destino del enlace (href).

self: Se abre en la misma ventana. Es el valor por defecto.

Esta propiedad se representaría de la siguiente manera:

<A href="http://www.zz.com" target="_blank">Abrir en una nueva ventana el sitio deZZ</A>

Desde dónde crear enlaces

Existen distintos orígenes desde donde crear enlaces dependiendo de tus necesidades.Desde la más simple, crear enlaces desde un texto, hasta enlaces desde lugares parciales deuna imagen.

Texto

En el caso más simple, hay que encerrar el texto que querés que aparezca como enlace conlas etiquetas <A . .> y </A> con sus correspondientes atributos. Este texto no tiene por queser una palabra entera, puede ser parte de ella o más de una palabra.

Imágenes

Este caso es muy similar al del texto, se encierra la etiqueta correspondiente a la imagen(<IMG . .>) con las etiquetas del enlace.

40

Lugares parciales de imágenes

Este es un caso particular en el que se pueden definir más de un enlace desde una mismaimagen definiéndole áreas dentro de la misma. Los editores HTML más avanzados ofrecenmecanismos de sombreado y selección de estas áreas simplemente utilizando el mouse. EnHTML puro se complica un poco.

Estructura: Tablas y Marcos

Introducción a las Tablas

Los elementos que vamos insertando en un documento conforman un secuencia de objetos(texto e imágenes generalmente) que se acomodan de izquierda a derecha en una 'tira' cuyoancho esta determinado por el de la ventana del navegador utilizado para visualizarlo. Cadavez que cambiamos este ancho, estos objetos se reacomodarán pudiendo pasar a una líneanueva en caso de que no quepan en la original (Ej.: comportamiento de los párrafos de texto).En este caso los programas navegadores van acomodando el contenido hasta donde pueden.Ellos saben que los párrafos están compuestos por palabras que están separadas entre si porespacios, por lo tanto pueden pasar palabras a una nueva línea sin problemas. Lo que nosaben hacer es dividir una palabra. Por lo que, en el caso del texto, el navegador va areacomodar el contenido sin presentar la ‘barra de desplazamiento horizontal’ mientras pueda,o sea mientras quepa la palabra más ancha en la ventana. En el caso de las imágenes, losnavegadores no pueden dividirlas, por lo que si estas no entran en sus ventanas se venobligados a presentar la barra de desplazamiento horizontal.

¿Qué sucede cuando deseamos que un objeto aparezca siempre en un lugar específico?Además muchas veces no sólo es una cuestión de estética o diseño, ocurren situaciones endonde se debe presentar información en un formato tabular, por ejemplo: lista de sucursales ysus correspondientes teléfonos, tabla de costos y beneficios, etc.

Las tablas proporcionan a los diseñadores Web formas de añadir estructura vertical yhorizontal a una página. Estas constan de tres componentes básicos:

Filas (espacio horizontal) Columnas (espacio vertical) Celdas (los contenedores que se originan en las intersecciones de las filas y las

columnas).

El objetivo de una tabla es, precisamente, ordenar filas y columnas según nuestrasnecesidades. Las celdas son las que pueden contener diversos objetos HTML: textos, gráficos,e inclusive, otras tablas. O bien, pueden estar vacías.

Esquema de página

En la unidad anterior se vio lo importante de realizar un ‘esquema de página’ para poderplanificar tanto la navegación del sitio como también realizar una maqueta con los diferenteselementos que se incluirán en dicha página.

No creo que luego de ‘esquematizar’ tu página quieras permitirle al navegador que, en casode estar mostrándola en una ventana pequeña, reacomode los elementos según pueda para nomostrar la barra de desplazamiento. (Ej.: visualice el logo y en vez de mostrar el nombre de laempresa a la derecha, lo ubique debajo del mismo.)

41

Aquí ayudan las tablas para explicitar que elemento va en cada lugar.

Creando tablas

Para crear una tabla, desde el Dreamweaver, ubicá el puntero del mouse en el lugar de laventana de documento donde desees que aparezca dicha tabla. Luego mediante el menú‘Insertar > Tabla’ aparecerá el cuadro de diálogo ‘Tabla’.

Desde el inspector propiedades podemos ver las otras propiedades son:

Alinear: igual que con los párrafos, alinea la tabla con respecto a la página. Opciones:Izquierda, centro o derecha. Ojo que no alinea el contenido de las celdas, sino la tabla ensí.

Tamaño del borde: especifica el ancho en píxeles del borde de la tabla. Podes utilizar ‘0’si no deseas que la tabla tenga borde.

Relleno de celdas: especifica el espacio (en píxeles) que habrá entre el contenido de lacelda y el borde de ésta. Podes introducir 0 para especificar que no deseas relleno.

Espacio entre celdas: espacio entre los bordes de las celdas (en píxeles). Podes introducir0 para especificar que no deseas espacio, o sea, para crear tablas al estilo Word.

Ancho: al igual que con las imágenes, podes especificar el ancho de la tabla en untamaño ‘absoluto’, o sea, especificando el número de píxeles (puntos de pantalla) quedeseas que cubra. O bien, el tamaño ‘relativo’ a la página, ingresando el porcentaje delancho de la ventana del navegador a cubrir. La diferencia radica que en el primer caso, elancho será fijo, y en el segundo, éste se adaptará (modificara) al ancho de la ventanaactual del navegador (que puede ser diferente de visitante a visitante).

42

Hay que tener en cuenta que estas propiedades se definen para ‘toda’ la tabla, si luego seespecifican propiedades específicas a algunas celdas que puedan llegar a interferir con las de latabla, siempre las propiedades de celda serán priorizadas.

Otras propiedades de tabla

Las tablas poseen otras propiedades. Estas se pueden acceder, una vez creada la tabla,haciendo un clic ‘derecho’ sobre la misma y seleccionado la opción ‘Propiedades’, o situando elpuntero del mouse sobre cualquier parte de la tabla y dirigiéndote al menú ‘Modificar >Propiedades de la selección ’. Aparecerá el inspector de propiedades de la tabla.

Las opciones de ‘diseño’ y ‘ancho mínimo’ ya las recorrimos al momento de insertar la tabla.Pero existen otras propiedades destinadas a darle a la misma un aspecto particular mediantela asignación de un color o imagen de fondo y configurando los colores del borde. Cabe aclararque el nombre de la propiedad a modificar se visualiza cuando nos posicionamos sobre alpropiedad.

Fondo: es exactamente igual al fondo de las páginas (propiedades de página). Se lepuede asignar tanto una imagen como un color. Las reglas de las imágenes permitidas ysu comportamiento es idéntico al de las páginas. En caso de que la página ya tenga uncolor o imagen de fondo asignada, al especificarle a la tabla otro color o imagen, esteaparece por encima del de la página. Pudiendo lograr así efectos interesantes.

Color: puedes modificar el color del borde seleccionando un color de la paleta que sedesplegará al hacer clic sobre esta propiedad.

Etiquetas HTML

Las tablas son definidas por las etiquetas <table> y </table>. Dentro de estas dosetiquetas podes colocar todas las otras etiquetas, textos e imágenes que darán forma ycontenido a la tabla. Las tablas son descriptas, como ya vimos, por ‘filas’ de izquierda aderecha. Cada una de estas ‘filas’ es definida por otra etiqueta y su cierre: <tr> y </tr> (delingles: table row).

Asimismo, dentro de cada ‘fila’, habrá diferentes ‘celdas’. Cada una de estas celdas serádefinida por otro par de etiquetas: <td> y </td> (del ingles: Table data). Dentro de estasetiquetas será donde se coloque el contenido, o sea, serán los contenedores.

Atributos de las columnas, filas y celdas

Se pueden seleccionar si lo deseas columnas enteras o filas enteras al estilo Microsoft Word,posicionando el puntero del mouse en el comienzo de la fila o columna hasta que este setransforme en una pequeña flecha negra rellena (para columna: apuntando hacia abajo, parafila: apuntando de izquierda a derecha). Algunas de las propiedades que especifiques sepodrán asignar a la fila entera y otras serán específicas de una celda, por lo que se asignará lapropiedad celda por celda. Las celdas constituyen un ‘entorno independiente’ del resto deldocumento. Esto quiere decir que:

Podemos usar prácticamente cualquier tipo de etiqueta dentro de la celda (etiqueta<td>) para, de esta forma, dar forma a su contenido.

Las etiquetas situadas en el interior de la celda no modifican el resto del documento.

Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta. Empecemos viendoalgunas de las propiedades de las celdas. En FrontPage Express debes hacer ‘clic

43

derecho’ sobre la celda (o columna o fila seleccionada) y seleccionar la opción‘Propiedades de Celda. . .’ (o mediante el menú ‘Tabla > Propiedades de Celda’ una vezsituados sobre la celda). Te aparecerá el siguiente cuadro de diálogo:

Empezaremos primero a ver las diferentes posibilidades de alineación interna a la celda paraluego avanzar hacia su tamaño, colores o imagen de fondo y finalmente los colores de losbordes.

Propiedades de diseño:

Alineación horizontal: justifica el contenido de la celda del mismo modo que si fuese el deun párrafo (izquierda, centro y derecha).

Alineación vertical: podes elegir si querés que el contenido aparezca arriba (Superior), enel centro (Medio) o abajo (Inferior) de la celda. Esto se da cuando en la misma fila haycontenidos que necesitan diferentes ‘alturas de celda’, por lo que en algunas de ellassobrará espacio arriba o abajo, dependiendo de esta propiedad.

Estas dos propiedades se pueden combinar para lograr una de las siguientesconfiguraciones: arriba-izquierda, arriba- centro, arriba-derecha, etc.

Celda encabezado: ya casi no se utiliza, indica que la celda contiene el título de lacolumna y le da un formato especial (Casi siempre: centrado y en negritas). A estotambién lo logras seleccionando el texto ingresado y dándole las propiedades de textoque desees.

No ajustar: la celda ampliará su tamaño para tratar de no dividir las oraciones.

Propiedades de Ancho:

Especificar ancho: define la anchura de la celda en píxeles (tamaño absoluto) o enporcentajes (tamaño relativo). Ojo con esto, ya que las columnas deben ser coherentes.Si las celdas de una misma columna tienen especificados anchos diferentes, se tomará elmayor de ellas. Además, el tamaño en porcentaje, ya no es relativo a la página sino queal tamaño de la tabla. Cabe hacer una aclaración acerca del ancho de las celdas: si esasignado un ancho a una celda, este será respetado, y si dicha celda tiene mucho texto ocualquier otro contenido, la celda crecerá hacia abajo (en altura) todo lo necesario paraque quepa lo que hemos colocado (nunca deja su contenido afuera). O sea, si definimosuna celda de un ancho de 100 píxeles, y colocamos en ella un contenido como unaimagen que mida más de 100 pixeles, la celda crecerá horizontalmente todo lo necesariopara que la imagen quepa (de ahí lo de ‘ancho mínimo’). Si el elemento, aunque másancho, fuera divisible (como un párrafo de texto) el ancho sería respetado y el textocrecería hacia abajo. Las propiedades de ‘Fondo Personalizado’ y ‘Colores Personalizados’son idénticas a las de la tabla, obviamente que si a una celda se le asigna alguna deellas, estas ‘sobrescribirán’ las propiedades ‘generales’ de la tabla con las propiedades‘particulares’ de la misma. Con esto se pueden logras diseños de tablas muy interesantes(Ej.: filas alternando colores de fondo, colores de fondo diferente para la primer columnay fila, distintas celdas con colores de borde distintos, etc.). Las propiedades de ‘Intervalode celdas’ las trataremos a continuación.

Combinación y división de celdas

Existen un par de atributos especiales que te permiten combinar varias celdas en una odividir una celda en varias. Para la combinación, la única condición es que deben ser horizontal

44

o verticalmente adyacentes. Comencemos por la más fácil, la división de celdas. EnFrontPage Express simplemente debes situarte sobre la celda que deseas dividir y luego ir almenú ‘Tabla > Dividir Celdas ...’. Te presentará un cuadro de diálogo preguntándote si deseasdividir la celda en filas o columnas, y luego en qué número. Como se puede observar en lasiguiente figura.

Para el caso de la combinación de celdas, lo que hay que hacer es seleccionar primeramentelas celdas que deseas combinar en una sola. Como ya se dijo, estas deben ser horizontal overticalmente adyacentes. Para poder seleccionar fácilmente las celdas en FrontPage, deberássituarte sobre una de ellas e ir al menú ‘Tabla > Seleccionar Celda’ luego, manteniendo la teclade control ‘Ctrl’ presionada, hacer clic sobre las otras celdas. En el caso de que deseesdeseleccionar una celda, simplemente (con la tecla Ctrl presionada) hace un clic sobre lamisma. Una vez realizada la selección de las celdas a combinar, la tarea se lleva a cabomediante el menú ‘Tabla > Combinar Celdas’.

Como puede verse los resultados en la figura, primero se seleccionaron las dos celdasinferiores (de la 2da fila) y luego se llevó a cabo la combinación.

En cualquier momento podes también modificar la estructura de tu tabla añadiendo oeliminando filas o columnas. Para el caso de las columnas en FrontPage Express, si queréseliminar una primero la tenés que seleccionar. Ya vimos un método, posicionando el punterodel mouse sobre el extremo superior de la columna hasta que este puntero se convierta enuna flecha sólida apuntando hacia abajo. En ese momento con un simple clic la columnaquedará seleccionada. Otro método posible se basa en simplemente posicionarse en una de lasceldas de la columna y hacer uso de la opción de menú ‘Tabla > Seleccionar Columna’.

Ambos métodos funcionan de manera similar con las filas, a diferencia que en el primerodeberías posicionar el puntero del mouse en el extremo izquierdo de la fila. Una vezseleccionada la fila o columna podes pulsar la tecla ‘Supr’ o ’Del’ para eliminar la selección.Para el caso opuesto, de insertar filas o columnas, deberás posicionarte en el lugar deinserción (simplemente en una celda) y seleccionar la opción de menú ‘Tabla > Insertar Filas oColumnas’.

45

Este cuadro de diálogo ofrece la posibilidad de seleccionar si deseas insertar filas ocolumnas junto al número de ellas. Y, dependiendo de lo que selecciones, te ofrecerá para lasfilas: ‘insertar arriba o debajo’ de donde estas situado, y en el caso de las columnas: a la‘derecha o izquierda’.

Anidamiento de tablas

Cuando introducimos el concepto de celdas, dijimos que simplemente son contenedoras deobjetos, entre ellos textos, imágenes e inclusive otras tablas. Es parecido al concepto que visteal aprender las ‘listas’, que podías anidar una lista dentro de otra. Por lo tanto no hay ningúnproblema en insertar una tabla dentro de una celda (lo que comúnmente se llama ‘anidar’).Simplemente hay que situarse en la celda en que desees agregar la nueva tabla y seleccionardel menú ‘Tabla > Insertar Tabla’ en donde podes especificar todas las propiedades que hemosvisto hasta el momento. Algo para recordar es que para estas tablas dentro de celdas, corre elmismo mecanismo de alineación horizontal y vertical de celda que vimos con anterioridad.Simplemente especificá estos atributos antes de insertar la tabla y esta se acomodará segúntus especificaciones.

En esta figura se puede observar la inserción de una tabla de 2x2 en la primera celda de lasegunda fila, con alineación horizontal: centro.

Es muy común esta aplicación de anidamiento cuando se utiliza una tabla para realizar el‘esquema de una página’ y dentro de las áreas o secciones definidas se utilizan otras tablaspara una mejor y más precisa estructuración del contenido.

Un poco acerca de los marcos

Una de las más modernas características de HTML son los ‘frames’, que se añadieron, tantoen Mozilla FireFox Navigator como en Internet Explorer, a partir de sus versiones 2.0. Los‘frames’, que significan en castellano ‘marcos’, son una manera de partir la página en distintosespacios independientes unos de otros, de modo que en cada espacio se coloca una páginadistinta que se codifica en un archivo HTML distinto, pero se visualizan en la misma ventanadel navegador.

Los frames, como decíamos, nos permiten partir la ventana del navegador en diferentesáreas. Cada una de estas áreas es independiente y han de ser codificadas con archivos HTML

46

también independientes. Como resultado, cada frame o marco contiene las propiedadesespecíficas que le indiquemos en el código HTML a presentar en ese espacio. Así mismo, ydado que cada marco es independiente, tendrán sus propias barras de desplazamiento,horizontales y verticales, por separado. Es como tener una misma ventana de navegación,dividida en varios navegadores sin que nos muestren todos los menús e iconos de sus barrasde herramientas.

Es un recurso muy utilizado en la actualidad. Se suelen aplicar para colocar en una parte dela ventana una barra de navegación, que generalmente se encuentra fija y permite el acceso alas principales secciones del sitio Web (separada en un archivo HTML específico). Y en otraparte el contenido que varía según vamos seleccionando (navegando) las opcionespresentadas por la barra de navegación (en otros archivos HTML). Por lo que si es necesario uncambio en la ‘barra de navegación’, este se realiza en un solo archivo. Sin la utilización de esterecurso, deberías recorrer todas las páginas de tu sitio que ofrezcan la barra de navegación ymodificarlas una por una.

Una de las principales ventajas de la utilización de frames viene derivada de laindependencia de los distintos frames, pues podemos navegar por los contenidos de nuestroWeb con la barra de navegación siempre visible, y sin que se tenga que recargar en cada unade las páginas que vamos visitando.

A los frames se les puede asignar un nombre para identificarlos, este nombre luego sepuede utilizar en los enlaces para especificar en que marco abrir el destino de que enlace. Estees un atributo de los enlaces: ‘Target’.

FrontPage Express no provee soporte para la utilización de frames directamente. En la clasese verá como otros editores ofrecen facilidades para trabajar con ellos.

Ejemplo de utilización de frames.

Se puede observar un esquema de marcos para separar la navegación e independizar laspáginas de un sitio simple. Cabe destacar que una vez que se cargue este sitio y solo presenteenlaces en la barra de navegación, la única área que cambiaría las páginas a visualizar, sería lade ‘contenido’.

Logo y nombre de la empresa

Barra deNavegación

Área para páginas de ‘contenido’

2.4. JavaScript: Introducción. Características. Utilización.

Introducción

El JavaScript permite crear aplicaciones específicamente orientadas a su funcionamiento enla red Internet. Usando JavaScript, se pueden crear páginas HTML dinámicas que procesen laentrada del usuario y que sean capaces de gestionar datos persistentes usando objetosespeciales, archivos y bases de datos relacionales.

47

Con JavaScript se pueden construir aplicaciones que varían desde la gestión de lainformación corporativa interna y su publicación en Intranets hasta la gestión masiva detransacciones de comercio electrónico.

Aunque se trata de algo que se sale del alcance de este curso, es importante reseñar queJavaScript puede utilizar una tecnología propietaria de Netscape, denominada LiveConnect;con el propósito de que las aplicaciones JavaScript puedan tener acceso a aplicaciones basadasen objetos distribuidos CORBA y Java.

En cualquier caso, es importante señalar que, pese a la similitud de nombres, JavaScript noes Java.

Las aplicaciones cliente y servidor en JavaScript comparten el mismo núcleo de lenguaje.Este núcleo se corresponde con ECMA-262, el lenguaje de scripts estándar de la Oficina deEstándares de la Unión Europea, con algunos añadidos extra. Aunque Javascript de cliente y deservidor comparten el mismo conjunto base de funciones y características; en algunos casos seutilizan de distinta forma. Los componentes de JavaScript son los siguientes:

-Núcleo de JavaScript (Core JavaScript).

-JavaScript para Cliente.

-JavaScript para Servidor.

JavaScript para cliente engloba el núcleo del lenguaje y algunos elementos adicionalescomo, por ejemplo, una serie de objetos predefinidos que sólo son relevantes para la ejecuciónde JavaScript en el contexto de un cliente Web.

Así mismo, JavaScript para servidor incluye también el núcleo de lenguaje y los objetospredefinidos y funciones necesarias para el correcto funcionamiento en el marco de unservidor.

Características

El código JavaScript para cliente se integra directamente en páginas HTML y esinterpretado, en su totalidad, por el cliente Web en tiempo de ejecución.

Puesto que con frecuencia es necesario ofrecer el mayor rendimiento posible, lasaplicaciones JavaScript desarrolladas para servidores se pueden compilar antes de instalarlasen dichos servidores.

Los clientes Web que soportan JavaScript, tales como el Netscape Navigator/Communicator(desde la versión 2.0) o el Microsoft Internet Explorer (desde la versión 3.0) puedeninterpretar sentencias JavaScript colocadas en un documento HTML.

Cuando el cliente Web solicita una página de este tipo, el servidor envía por la red al clienteel contenido completo del documento; incluyendo todos los códigos HTML y las sentenciasJavaScript que pudieran existir en éste.

El cliente lee entonces la página de forma secuencial, desde el principio hasta el final,representando visualmente los códigos HTML y ejecutando las sentencias JavaScript conformeavanza el proceso de lectura e interpretación.

48

Las sentencias JavaScript colocadas en una página Web pueden dar respuesta a eventos deusuario, tales como la pulsación de un botón del ratón (clic), la entrada de datos en unformulario y la navegación por una página.

Por ejemplo, se puede crear una función JavaScript que permita verificar que la informaciónintroducida por el usuario en un campo de entrada de datos de un formulario (número deteléfono, código postal, número de tarjeta de crédito, etc.) tiene el formato correcto.

En este caso, lo importante es que, sin necesidad de realizar ninguna transmisión de datospor la red, se puede validar dicha información, mostrando al usuario un cuadro de diálogo encaso de que ésta sea incorrecta.

Utilización

Se ofrece aquí un primer ejemplo en el que se ilustra la integración directa de códigoJavaScript en un documento HTML:

<HTML>

<HEAD>

<TITLE>Primer ejemplo de JavaScript</TITLE>

</HEAD>

<BODY>

Esto es texto normal de un documento HTML

<SCRIPT LANGUAGE="JavaScript"> docurnent.write("Texto generado desde JavaScript")

</SCRIPT>

Esto es, de nuevo, HTML

</body>

</HTML>

Como se puede observar, este ejemplo tiene la apariencia de un documento HTML estándar.La única novedad viene dada por la presencia del fragmento correspondiente al códigoJavaScript:

<SCRIPT LANGUAGE="JavaScript"> document.write('Texto generado desde Javascript")

</SCRIPT>

Para poder ver el resultado de su ejecución, bastará con cargar dicho documento concualquiera de los clientes Web antes mencionados.

49

La salida se compone de tres líneas de texto:

- Esto es texto normal de un documento HTML

- Texto generado desde JavaScript

- De nuevo HTML

En realidad no se trata de un script útil, puesto que todo lo que ofrece (mostrar una línea detexto) se podría haber hecho en HTML directamente y, sin duda, con mayor comodidad. Sólose trata de mostrar el funcionamiento del código <SCRIPT>.

En efecto, cualquier elemento que quede delimitado por los códigos <SCRIPT> y</SCRIPT> se considera código JavaScript.

En este caso particular, se ha utilizado document.write, una de las funciones másimportantes de JavaScript, que permite escribir algo en el documento actual (en este caso, eldocumento HTML que contiene el ejemplo).

2.5. Fundamentos

JavaScript reconoce los siguientes valores:

-Valores numéricos.

-Valores lógicos (true, false)

-Cadenas de caracteres

-Valor null

-Valor no definido (undefined)

Además de estos valores, existen otros elementos propios de JavaScript como los objetos ylas funciones.

JavaScript trata de forma dinámica los datos y se puede realizar la siguiente operación:

var unValor=50

Y después asignar a un Valor un valor de tipo cadena de caracteres:

unValor="Ahora está lloviendo"

Variables.- Las variables pueden comenzar por un carácter o un subrayado bajo (_).

Cuando a una variable no se le asigna un valor, tiene valor indefinido (undefined). Si se lepone un valor, pueden ocurrir dos cosas:

-Si fue declarada sin "var", se produce un error en tiempo de ejecución.

-Si fue declarada con "var", devuelve el valor NaN (Not a Number).

Veamos un ejemplo:

50

function f1(){

return y-2;

}

f1() // Esta llamada a f1 provoca un error en tiempo de ejecución

function f2(){

return var y-2;

}

f2() // devuelve el valor NaN

Podemos utilizar el valor "undefined" para ponerle valor a una expresión:

var miVar;

if(miVar==undefined){

hazunacosa();}

else{

hazotracosa();}

El valor "undefined" se comporta como falso cuando se usa como tipo booleano.

Las variables pueden ser:

Globales: cuando se le asigna un valor fuera de una función. El uso de "var" es opcional.

Locales: Se realiza la operación de asignación dentro de una función. El uso de "var" esobligatorio.

Por último, es bueno saber que se puede acceder a una variable de un documento HTML deun FRAME desde otro:

parent.miVar

Un literal es un valor fijo que se especifica en el script.

Existen varios tipos de literales que explicaremos a continuación:

-Arrays-Booleanos-Coma Flotante-Enteros-Objetos-Cadenas

51

1. Arrays: conjunto de 0 o más expresiones encerradas entre corchetes ([]).

Ejemplo:

coches=["BMW","Mercedes","Audi","Volvo"]

Coches es un array de 4 elementos.

Podemos dejar elementos del array vacíos:

ciudades=["Madrid",,"Valladolid"]

ciudades=[,,"Pamplona"]

ciudades=["Madrid","Pamplona",,]

2. Los boléanos: tienen 2 valores booleanos: true y false.

3. Coma flotante: un literal de coma flotante puede tener las siguientes partes:

Un entero decimal

Un punto decimal (".")

Una parte fraccionaria

Un exponente ("e" o "E")

Literales

Un literal de coma flotante debe tener al menos un dígito y un punto decimal o una "e"(o"E").

Ejemplos:

3.1415-6.23E11.2e102E-10

4. Los enteros: los literales enteros se pueden expresar como:

Decimales: del 0 al 9.

Octales: comienzan por 0. Del 0 al 7.

Hexadecimales: comienzan por "0x" o "0X". Del 0 a 9 y a(o A) a f(o F).

52

5. Los objetos: conjunto de cero o más parejas de parejas nombre: valor.

Ejemplo:

avión={marca:"Boeing",modelo:"747",npasajeros:"450"}

Para referirnos desde JavaScript a una propiedad del objeto avión:

document.write(avión.modelo)

6. Las cadenas: el literal de cadena es una secuencia de caracteres entre los signos decomillas simples o dobles.

En un literal de tipo cadena podemos utilizar los métodos del objeto String.

Existe un conjunto de caracteres que comienzan por \. Algunos de ellos son:

\b: retroceso

\f: avance de línea

\n: salto de línea

\r: return

\t: tabulación

\' , \", \\: los símbolos ', " y \ respectivamente.

Los operadores

Existen varios tipos de operadores en JavaScript:

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

var resultado=50

Asigna a la variable "resultado" el valor 50.

Existen abreviaturas de algunas operaciones de asignación:

x + = y x = x + y

x - = y x = x - y

x * = y x = x * y

x % = y x = x % y

x / = y x = x / y

2. Comparación: en JavaScript, se pueden comparar variables de distinto tipo, pues escapaz de forzar conversiones:

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

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

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

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

53

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

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

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

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

3. Aritméticos: los operadores aritméticos, a partir de varios operandos, devuelven un solovalor; resultado de la operación realizada con los anteriores operandos.

En JavaScript existe notación postfija y prefija, por lo que variable++ y ++variable son dosformas distintas de incrementar una variable. En primer lugar, se procesa la variable, y luegose incrementa. Sin embargo, en el segundo caso, primero se incrementa la variable y despuésse procesa.

>% Binario: devuelve el resto de una división.

++ Unitario: incrementa el valor de la variable.

-- Unitario: disminuye el valor de una variable.

- Unitario: cambia el signo de una variable.

4. Lógicos: los operadores lógicos devuelven un valor binario.

&&

AND

||

OR

!

NOT

Es importante saber que si en una evaluación ya se conoce el resultado, no se pone valor alos demás términos:

true || devuelve true.

false && devuelve false.

Las sentencias

Las sentencias en JavaScript se dividen en varios tipos:

1. Condicionales: las sentencias condicionales sin "if" y "switch". La sintaxis de "if" es lasiguiente:

if(condición){

acciones

}

else{

54

acciones

}

Ejemplo:

var i=5

if(i>5){

document.write("i es mayor que 5")

}

else{

document.write("i es menor o igual que 5")

}

La sentencia "switch" toma una variable, y la evalúa según unos posibles valores:

switch(variable){

case valor1:

acciones1;

break;

case valor2:

acciones2;

break;

.........

.........

case valorN:

accionesN;

break;

default acciones;

}

Veamos cada una de las partes:

case valor1: en el caso de que la variable tenga el valor "valor1", realizará las acciones"acciones1".

break: si no se incluye esta sentencia después de cada "case", se realizarían todos los casesdel "switch" hasta el final. De este modo, sólo se realizarán las acciones referentes al "case"concreto.

Default: si el valor de la variable no concuerda con ningún case, se realizarán las accionesde default.

Veamos el segundo tipo de sentencia: los bucles.

55

Bucles.- Estas sentencias se caracterizan porque el flujo puede pasar varias veces por ellashasta que se cumple una condición.

"for" representa una o varias sentencias que se repiten un número determinado de veces:

for(inicio;final;incremento){

acciones

}

"do...while" es un bucle que al menos se recorre una vez, antes de analizar la condición alfinal.

do(condición){

acciones

}while(condición)

"while" es una sentencia de bucle que puede que no se realice ninguna vez, pues lacondición se evalúa al principio del bucle.

while(condición){

acciones

}

Con la sentencia "break", se puede salir de una sentencia de bucle sin limitaciones.

Con la sentencia "continue", se termina el bucle actual y se comienza con el siguiente.

Manipulación de Objetos.- Existen dos sentencias (for y with) que permiten acceder a laspropiedades de un objeto de forma rápida.

La sentencia "for" recorre todas y cada una de las propiedades de un objeto con un índice.

for(variable en objeto){

acciones

}

"with" establece un objeto por defecto al que aplica un conjunto de acciones:

with(objeto){

acciones

}

La forma de introducir comentarios en JavaScript es con //. Si se trata de una línea, loscomentarios se introducirán con /* ...*/, si queremos tomar un bloque como comentario.

Las funciones

Una función es un elemento del programa creado con la finalidad de realizar unadeterminada acción. Una función puede ser llamada desde otra.

En JavaScript, las funciones se definen en la cabecera del documento HTML. Su sintaxis es:

56

function nombreFunción([parámetros]){

acciones

}

Veamos un ejemplo: el siguiente script es una función que toma los valores de unformulario, y devuelve en un cuadro de texto del mismo el valor de la primera casilla elevado ala potencia de la segunda:

<script>

function potencia(){

var i=0;

var resul=1;

if(document.cálculo.elevado.value==0)

document.cálculo.resultado.value=resul;

else

{

resul=document.cálculo.base.value;

for(i=1;i<document.cálculo.elevado.value;i++)

resul=resul*document.cálculo.base.value;

}

document.cálculo.resultado.value=resul;

}

</script>

Importante: las funciones siempre irán situadas en la cabecera del documento HTML.

Se debe recordar cómo se accede a los diferentes elementos de un documento HTML.Primero, document, después los nombres de los distintos elementos que existen en eseelemento:

-Cálculo: es el valor que se le ha dado al atributo "name" del formulario.

-Resultado, base, elevado: es el valor que se le ha dado al atributo "name" de una de lascajas de texto del formulario.

Veamos la parte HTML de este documento:

<form name="cálculo">

Número: <input type="text" name="base">

Potencia: <input type="text" name="elevado">

Resultado: <input type="text" name="resultado">

<input type="button" name="poten" Value="Calcular potencia" onClic="potencia()">

</form>

57

En JavaScript, los parámetros de las funciones se pasan por valor, es decir, si una variablecambia de valor en la función, fuera de ella sigue teniendo el mismo valor que cuando entró enella.

Si una función devuelve su resultado con return, la función debe ser asignada o formarparte de una respuesta. En caso contrario, si una función no devuelve un valor con "return",puede ser llamada sin ser asignada.

Los argumentos de las funciones se gestionan con un array propio de cada una de ellas. Alarray se accede con "nombreFunción.arguments[i]", donde "i" es un índice que comienza por0.

Para conocer el número de parámetros, podemos utilizar: "arguments.length".

Existe un conjunto de funciones predefinidas, veamos algunas de ellas:

Fecha:

getDate(): día del mes

getDay(): día de la semana

getMonth(): día del mes

getYear(): año (con dos dígitos)

getTime(): milisegundos transcurridos desde 1/1/1970

getHours(): hora entre 0 y 23

getMinutes(): minutos entre 0 y 59

getSeconds(): segundos entre 0 y 59

Existen las mismas funciones pero con "set" en lugar de "get", de modo que nos permitencambiar el valor de esas variables.

Las ventanas

Tenemos tres formas de mostrar un mensaje al usuario en una ventana de aviso:

Alert: muestra el contenido de lo que le pasamos en una ventana con un botón de aceptar.

alert("Esto es una prueba")

Confirm: muestra un mensaje como "alert", pero con dos botones: aceptar y cancelar. Si seevalúa, al pulsar aceptar devuelve true y con cancelar, false.

Prompt: muestra una ventana donde podemos escribir un valor, de modo que despuéspueda ser asignado a una variable.

prompt("mensaje",valor por defecto)

Matemáticas.- Se trata de las propiedades de Math:

abs(): valor absoluto

max(v1,..,vn): valor máximo

min(v1,..,vn): valor mínimo

round(): redondear

58

exp(): exponencial

log(): logaritmo

pow(base,exponente): potencia

sqrt(): raíz cuadrada

sin(): seno

cos(): coseno

tan(): tangente

asin(): arcoseno

acos(): arcocoseno

atan(): arcotangente

2.6. Eventos

Evento se considera cualquier acción que el usuario realiza con el sistema: hacer clic,posicionarse con el ratón en un lugar determinado, enviar un formulario, posicionarse en uncuadro para texto,....

Para referirnos a un evento en HTML, el nombre del evento irá precedido por "on". Porejemplo, el gestor de eventos de "Clic" será "onClic".

La forma de llamar a un evento es la siguiente. Imaginamos que tenemos un botón en unformulario, y queremos que al pulsarlo realice una acción determinada:

<form ....>

<input type="button" onClic="función([parámetros])">

</form ....>

Con esta acción, asociamos al evento clic sobre el botón las acciones que realice la función.

Veamos los eventos que conoce JavaScript:

DragDrop: arrastrar un objeto a la ventana del navegador.

Error: se produce un error en la carga de un documento.

Focus: el usuario se posiciona en una ventana o cuadro de texto de un formulario.

KeyDown: se pulsa una tecla.

KeyPress: se pulsa o libera una tecla

KeyUp: se libera una tecla

Load: se carga un documento en el navegador

59

MouseDown: se pulsa un botón del ratón

MouseMove: se mueve el cursor

MouseOver: el puntero del ratón se posiciona sobre un enlace

MouseOut: el puntero del ratón sale de un enlace o imagen mapa

MouseUp: se libera un botón del ratón.

Move: se mueve la ventana. Esta acción también la puede realizar el script.

Reset: se pulsa sobre el botón reset del formulario.

Resize: las dimensiones de la ventana cambian.

Select: se selecciona una de las opciones de un cuadro combo del formulario.

Submit: se pulsa el botón submit del formulario.

UnLoad: el usuario sale de la página.

Recuerde que para llamar a los eventos, se debe anteponer "on" al nombre del evento.

Veamos un ejemplo del evento Clic:

<script>

function contar(objetoSelect){

var seleccionadas=0

for (var i=0;i < objetoSelect.options.length;i++){

if (objetoSelect.options[i].selected)

seleccionadas++;

}

return seleccionadas;

}

</script>

El resto de código HTML es el siguiente:

<BODY BGCOLOR="#FFFFFF">

60

<form name="formulario">

Selecione los temas que son de su interés

y pulse después el botón

<select name="temas" múltiple>

<option selected>Informática

<option>Naturaleza

<option>Música

<option>Deportes

<option>Economía

<option>Coleccionismo

</select>

<input type="button" value="¿Cuántos hay selecionados?"

onclic="alert('Número de opciones selecionadas: ' + contar(document.formulario.temas))">

</form>

Vamos a estudiar este ejemplo con detenimiento:

Este formulario cuenta el número de opciones de un cuadro combo.

Hemos definido un formulario llamado formulario que posee un cuadro combo (llamadotemas) y un botón.

Si nos fijamos en el botón, veremos que con el evento Clic llama a la función definidapreviamente contar.

Esta función toma como parámetro el cuadro combo (document.formulario.temas) y loprocesa, devolviendo un valor con return

Obsérvese también que el resultado no se escribe en un cuadro de texto, sino que usamosalert para mostrar un mensaje en otro cuadro, que concatena un literal y el resultado de lafunción contar.

La captura

JavaScript permite definir eventos y asignarlos a objetos por encima de los elementosdonde nacen dichos eventos.

Para definir estos eventos, los objetos window, document y layer utilizan los siguientesmétodos:

61

-captureEvents: captura eventos del tipo que se especifique.

-releaseEvents: ignora la captura del tipo especificado.

-routeEvent: envía el evento capturado a un objeto.

Ahora vamos a ver la secuencia de captura, definición y activación de un gestor de eventos:

Debemos especificar el tipo de eventos que queremos capturar:

window.captureEvent(Event.CLIC [| Event.* | Event.*])

De este modo, todos los eventos de tipo CLIC que se produzcan serán capturados. Nóteseque se pueden especificar varios eventos, siempre separados por | que significa OR.

Tras capturar dicho(s) evento(s), deberemos especificar una función que realice las accionesasociadas a dicho evento:

function evento_nombre([parámetros]){

acciones

return true o false }

La función devolverá true cuando la acción sea posible y false en caso contrario.

Ya tenemos el evento capturado y la función asociada, sólo queda asignar al evento lafunción especificada:

window.onClic=evento_nombre;

2.7. Objetos

Definimos como objeto, una entidad con una serie de propiedades que definen su estado yunos métodos (funciones) que actúan sobre esas propiedades.

La forma de acceder a una propiedad de un objeto es la siguiente:

nombreobjeto.propiedad

También se puede referir a una propiedad de un objeto por su índice en la creación. Losíndices comienzan por 0:

casa[0]=casa.localidad

casa[1]=casa.superficie

casa[2]=casa.precio

Vamos a crear un objeto con una serie de propiedades. La forma de crear un objeto es lasiguiente:

-Crear una función constructora

62

function casa(localidad,superficie,precio){

this.localidad=localidad

this.superficie=superficie

this.precio=precio

}

Instanciar objetos con "new"

casa1=new casa("Pamplona",90,15000000)

casa2=new casa("Bilbao",110,23000000)

Dos observaciones importantes:

-Gracias a new creamos nuevos objetos con las propiedades de los ya creados.

"this" hace referencia al propio objeto.

-A un objeto se le pueden seguir añadiendo propiedades tras ser definido, aunque es unapráctica que no se aconseja, pues todos los objetos ya creados hasta entonces añadentambién esa propiedad con valor nulo. Para ello se utiliza la palabra prototype:

casa.prototype.año=null

casa.año="1980"

Otra forma de crear objetos de forma literal es la siguiente:

nombreobjeto={propiedad1:valor;propiedad2:valor;.....propiedadN:valor}

Finalmente, sólo añadir que una propiedad puede estar formada por varias subpropiedadesde modo que, para referenciarlas deberemos seguir una notación similar a la anterior:

nombreobjeto.nombrepropiedad.nombreSubpropiedad

Ejemplo:

casa1={localidad:"Pamplona",precio:15000000,superficie:{interior:90,terraza:10}}

En este ejemplo, casa1 es un objeto en el que, la propiedad "superficie", está a su vezformada por dos subpropiedades: interior y terraza.

Cómo se crean métodos.- Veamos ahora cómo se crean los métodos:

Un método no es más que una función asociada a un tipo de objeto:

objeto.nombremétodo=nombrefunción

Veamos un ejemplo. Este método sirve para mostrar las propiedades de un objeto casa:

function VerCasa(){

var mostrar="La casa está en " + this.localidad + ", tiene " + this.superficie +" m2 y cuesta" +this.precio +" ptas."

return(mostrar)

}

63

Si en la función constructora de casa añadimos:

this.VerCasa=VerCasa

Ya tenemos un método llamado VerCasa que nos permite ver las propiedades de cualquierobjeto de tipo casa.

Una vez creado un objeto, si lo que queremos es eliminarlo, sólo tenemos que llamar aloperador "delete".

delete casa

Este operador es interesante, porque, si consigue eliminar el objeto, devuelve "true" si se lepone valor, por lo que se puede saber cuando un objeto ha sido borrado satisfactoriamente.

2.8. Estilos: CSS

Describen cómo los documentos serán presentados en la pantalla. Intentan separar elcontenido de una página de la forma en que se visualizará en pantalla. El estándar másutilizado para la utilización de estilos es el de cascada: CSS (Cascading Style Sheets)

Hay tres formas de agregar información de estilo a una página:

· Estilos en línea.· Estilos embebidos.· Estilos asociados.

ESTILOS EN LÍNEA

Aplica el atributo STYLE a un elemento (etiqueta) determinado.<ETIQUETA STYLE=“propiedad:valor; propiedad:valor;...”></ETIQUETA>Ejemplo:<B STYLE=“color:navy”>Texto en negrita y azul marino</B>El estilo en línea sólo modifica la instancia del elemento (etiqueta) al cual se está aplicando.

ESTILOS EMBEBIDOS

Para usarlos debe definirse un bloque, delimitado por las etiquetas:<STYLE> y </STYLE>, el cual se ubicará en la sección del encabezado del documento. El

bloque consiste de un conjunto de reglas de estilo, donde cada regla define un estilo para cadaelemento (etiqueta) HTML o para cada grupo de elementos.

Una regla de estilo tiene dos partes:· Un selector, que identifica el elemento o grupo al que el estilo se aplicará.· Una declaración de propiedades a ser aplicadas al selector.Ejemplo:<STYLE TYPE=“text/css”><!—H2 {color:blue}>--></STYLE>

64

Un atributo requerido del tag STYLE es TYPE y debe tener el valor text/ccs si es que se estáutilizando el estándar de hojas de estilo en cascadas.

Los comandos de estilo sólo son aplicados al documento en el cual están incluidos.

ESTILOS ASOCIADOS

Una extensión de estilo asociada es un archivo separado que contiene información de estilo.Para asociar el estilo a la página se usa el tag LINK en la sección de encabezado deldocumento.

Los atributos requeridos para el tag LINK son: HREF=“url del archivo de estilo” yREL=“STYLESHEET”. Atributos opcionales: TITLE y TYPE.Ejemplo:<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">El archivo estilos.css es un archivo de texto plano y podrá tener la siguiente estructura:p { color: blue}h1 {color: fuchsia}Para reducir el tamaño de las hojas de estilo, es posible agrupar los selectores en una lista

separada por comas:H1, H2, H3 { font-family: helvetica }

HERENCIA DE ESTILOS

Las propiedades definidas para un elemento se trasladan a los elementos que éste“encierra”.

Ejemplo:<H1>Este t&iacute;tulo es<EM> muy</EM> importante!</H1>Si no se definió un color para el elemento 'EM', entonces se utiliza el color definido para el

elemento H1 (el que lo encierra). De esta manera el elementoEM “hereda” las propiedades de H1. Otros atributos heredados serán: 'fontfamily' y 'font-

size'.

CLASES E IDENTIFICADORES

Se utiliza cuando hay varios formatos para una misma componente o cuando un mismoformato se aplica a varias componentes.

Ejemplo:H1.verde { color: green}En la página:<H1 class=“verde”> Esto se verá color verde</h1><H1> Esto se verá con el color por defecto</h1>

PROPIEDADES DE LOS BLOQUES

65

PROPIEDADES DEL TIPO DE LETRA

Los tipos de fuentes genéricos son serif, sans-serif, cursive, fantasy y monospace. Cada unode estos tipos es equivalente a alguno de los instalados en la computadora del cliente.

66

PROPIEDADES DE FORMATO DEL TEXTO