Introduccion Al Diseno Web Sitio Completo Muy Bueno

Introduccin
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins opcionales.
Introduccin
Actualizado el 15 de Mayo de 2000
Cada pgina tiene tres partes:

Qu es?, explica el elemento o el estilo objeto del
comentario.
Porqu est mal o bien?, explica eso, por qu est
mal o bien (no te quejars de falta de claridad).
Qu puedes hacer?, muestra la forma de pasar de
Guatepeor a Guatemala.
P. S.: Estas pginas no pretenden ser un manual de estilo,
ni mucho menos fijar unas normas de diseo. Slo
pretenden reflejar las experiencias (mas y de otras
personas) que se han aventurado por los procelosos
ocanos de la red. Estn hechas con la mejor voluntad y
con el mejor humor que he podido encontrar en el nterin.
Todas las crticas y sugerencias son bienvenidas. As que
anime;os.
Para empezar pincha en la flecha inferior, o haz una eleccin en el

men lateral.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Ir a la primera pgina de Psimo
http://perso.wanadoo.es/catwalk/paginilla/intro.html (1 of 2)11/12/2003 01:02:01 p.m.
Introduccin
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
http://perso.wanadoo.es/catwalk/paginilla/intro.html (2 of 2)11/12/2003 01:02:01 p.m.
Diseo Web Profesional
Est buscando a un profesional que le disee la

pgina de su pequea empresa, por un precio
razonable?. Entonces, por favor, introduzca sus
datos en el formulario inferior y me pondr en
contacto con usted rpidamente.
Tiene alguna duda?

Por qu necesita mi empresa
una pgina Web?
Nombre:
(necesario)
En qu consiste el diseo?
Compaa:
Email:
(necesario)
Tiene algo pensado? *
Quin se ocupa del

mantenimiento?
Cunto cuesta disear una

pgina?
Enviar informacin
Limpiar formulario
Si prefiere el correo electrnico:

catwalk@wanadoo.es
ICQ: 98346763
Contacto telefnico: 953 571728
http://perso.wanadoo.es/catwalk/Inicio.html11/12/2003 01:02:26 p.m.
* No sabe qu puede poner en

su pgina?
Tienes poco dinero o eres un

particular?
Tarifas
Por qu necesita mi empresa una pgina Web?
Por qu necesita mi empresa una pgina Web?
La presencia de las empresas en Internet se est convirtiendo en una prioridad para

muchas de ellas por mltiples y variadas razones:
Por los servicios aadidos y facilidades que aporta a sus clientes, tales como
publicidad, relaciones pblicas y servicio de atencin al cliente.
Intercambio interactivo con los clientes en tiempo real.
Incremento de ventas y disminucin de prdidas de ventas a causa de pedidos no
atendidos
Los clientes pueden tener acceso a la informacin distribuda por la empresa y
realizar consultas y pedidos desde su propio domicilio, las 24 horas del da, los 365
das del ao.
Captacin de clientes ocasionales.
Ahorro en la distribucin de informacin de inters comercial. Por ejemplo los
catlogos y listas de precios son fcilmente actualizables, sin tener que recurrir a
costosas impresiones; las actualizaciones son inmediatas; se dispone de la
informacin en cualquier lugar, las 24 horas del da...
Ahorro de costes de personal, de facturacin, de atencin al cliente...
Se puede reunir automticamente informacin acerca del comportamiento de los
clientes y sus intereses.
Mejora de la imagen corporativa.
Disponer de una pgina Web no es slo tener un escaparate virtual con una dudosa
eficacia comercial. Hay una gran cantidad de servicios y opciones que su empresa puede
ofrecer a travs de la Red, y todo ello sin necesidad de nuevas inversiones en equipos
informticos.
http://perso.wanadoo.es/catwalk/queries/page.html11/12/2003 01:02:43 p.m.
El diseo de una pgina Web (o de un Sitio completo) es un proceso complejo en el que

intervienen fundamentalmente dos partes:
1. El promotor de la pgina, que aportar la idea bsica del proyecto.

2. El diseador y/o programador de la misma, que le darn forma.
Objetivos: Antes de iniciar cualquier desarrollo es necesario establecer los objetivos que
perseguir el Sitio Web, y el mensaje que llevar a su nicho de mercado. No es lo mismo
disear un Sitio marcadamente comercial, que un Sitio exclusivamente diseado para
promover la imagen de la empresa. Tambin hay que decidir el tipo de servidor y dominio
en los que habr de instalarse el proyecto.
Desarrollo: En esta etapa se crean los mapas del Sitio; se generan los grficos e
imgenes; y se decide la apariencia general del Sitio. Pueden crearse varios diseos
diferentes que se presentarn a una evaluacin. Finalmente se elige alguno de ellos. Se
realiza la programacin del conjunto de pginas, cuidando aspectos esenciales como
estabilidad en el servidor, tiempo de carga, funcionalidad, ausencia de errores, etc...
Instalacin: En esta fase se aborda la contratacin del servidor y del dominio (solamente
si es necesario), se procede a la subida del conjunto de pginas al servidor, y a la prueba
y puesta a punto de todos los archivos y sistemas. Para terminar se procede a dar de alta
el Sitio en los buscadores ms indicados, y si es necesario, a la contratacin de publicidad
especfica del Sitio.
Si desea ver algunos de los diseos realizados, mire en PORTFOLIO.
http://perso.wanadoo.es/catwalk/queries/design.html11/12/2003 01:02:51 p.m.
Quin se ocupa del mantenimiento?
Quin se ocupa del mantenimiento?
El mantenimiento de un Sitio Web comprende varias tareas.

En principio se reduce a la comprobacin de que el Sitio funciona correctamente; a la
actualizacin de los archivos, como puede ser el caso de variacin en los precios, o la
presentacin de nuevos artculos; y, en su caso, a la administracin de la informacin
suministrada por el Sitio. Dependiendo de los objetivos fijados y las caractersticas de
venta del producto o servicio se pueden ir realizando cambios y modificaciones de textos,
grficos e imgenes. Puede ser que el dia de maana sea ms conveniente promover un
producto diferente a aqul con el que se inici el sitio, quizs tenga nuevas oficinas o
sucursales, direcciones, telfonos, etc...
Por otra parte el mantenimiento puede ser realizado por personal propio de la empresa,
que cuente con experiencia en el manejo de sistemas informticos, y siempre que el Sitio
Web no posea ni una estructura ni una programacin relativamente compleja. En caso
contrario, debe ser un profesional quien aborde el mantenimiento.
http://perso.wanadoo.es/catwalk/queries/work.html11/12/2003 01:03:04 p.m.
Cunto cuesta disear una pgina?
Cunto cuesta disear una pgina?
El precio por pgina vara enormemente, dependiendo de las necesidades del Sitio y de la
complejidad de la programacin requerida. Y por supuesto, dependiendo del profesional
elegido. En general, una pgina normal, que presente informacin comercial de la
empresa, e incluya formularios para solicitud de informacin, o realizacin de pedidos,
tiene un coste que oscila entre las 15.000 y las 50.000 pesetas. El costo aumentar en
dependencia directa del diseo del Sitio. Cuanto ms complejo, ms caro.
Si el Sitio tiene una gran cantidad de informacin que organizar y ofrecer, o gran cantidad
de programacin, puede alcanzar, y superar, las 250.000 pesetas.
Y finalmente, el desarrollo de Sitios que contengan programacin especializada como
bases de datos, motores de bsqueda o sistemas como Macromedia, se cotizan segn el
proyecto.
En cuanto al coste de mantenimiento, sucede lo mismo. Un Sitio que requiera un
mantenimiento mnimo no llega a 5.000 pesetas mensuales, mientras que un Sitio
complejo puede llegar a, y superar, las 100.000 pesetas mensuales.
Por ltimo, hay que considerar el hecho de poseer un dominio propio, y alojamiento en un
servidor especfico. Un dominio propio es del tipo www.suempresa.com, y su coste se
sita a partir de 10.000 pesetas al ao, evitando el tener una direccin larga y dficil de
retener. Combinado con un servidor de pago, ya que los servidores gratutos no permiten
habitualmente pginas comerciales, es la mejor forma de alojar una pgina de empresa.
Si desea consultar los precios, mire en Tarifas.
http://perso.wanadoo.es/catwalk/queries/cost.html11/12/2003 01:03:19 p.m.
No sabe qu puede poner en su pgina?
No sabe qu puede poner en su pgina?
Qu productos o servicios ofrece su empresa?

Si su empresa fabrica, por ejemplo, puertas de madera, puede incluir en la pgina el
catlogo completo, precios includos, de forma que cliente pueda consultarlo, y realizar los
pedidos sin necesidad de desplazarse a la fbrica, o de recibir un caro catlogo impreso,
que puede estar obsoleto en dos meses.
Si tiene una empresa de servicios, como por ejemplo un catering, puede incluir los mens
disponibles, con fotografas de los distintos platos, aspectos de los salones donde los haya
servido, instalaciones, etc...
Si lo que tiene es un grupo de empresas, puede presentar una pgina central de
bienvenida, y pginas especficas para cada una de las empresas del grupo, enlazadas
entre s. As, sus clientes pueden acceder a las diferentes secciones de su empresa con
un mnimo esfuerzo.
Puede incluir listas de correo, para mantener a sus clientes informados de las novedades
que se produzcan; buzones de sugerencias; pginas de atencin al cliente...
Y, en general, casi cualquier cosa que se le ocurra...
http://perso.wanadoo.es/catwalk/queries/idea.html11/12/2003 01:03:27 p.m.
Tienes poco dinero o eres un particular?
Tienes poco dinero o eres un particular?
No desesperes, todava tienes oportunidades.

El diseo de una pgina no es caro. Puede costarte 5.000 pesetas si lo que quieres es una
pgina sencilla, pero eficaz. Una pgina personal no necesita estar llena de JavaScript, ni
de animaciones con FLASH, ni nada de eso. Necesita lo que t quieras poner en ella, si es
medianamente interesante.
Si de todas formas, no tienes ni esas 5.000 pesetas (me pregunto cmo pagas la factura
WebTutor. WebTutor es un grupo de tutoriales

del telfono), date una vuelta por
con los que aprenders HTML bsico, necesario para construir una pgina. Si aprendes lo
suficiente, tal vez un da te decidas a abordar el diseo profesional, y me hagas la
competencia, y...
http://perso.wanadoo.es/catwalk/queries/poor.html11/12/2003 01:03:35 p.m.
As que quieres hacer una pgina Web
Hola a todos.
Bienvenidos a WebTutor. Parece que, como mucha otra gente, te
has decidido a hacer tu propia pgina web. Y tambin, como mucha
otra gente, le has echado una ojeada al cdigo de las pginas y has
pensado "Nunca podr hacer algo como eso".
Bueno, s puedes. No es tan difcil como parece, y yo voy a
ensearte. As que, si ests listo, prepara una taza de caf y vamos a
empezar a trabajar...
Empieza aqu
Tabla General de Contenidos
Para conseguir el smbolo del Euro () se utiliza el cdigo siguiente:
http://perso.wanadoo.es/catwalk/WebTutor/Index.html11/12/2003 01:03:51 p.m.
Diseo Web Profesional - As que quieres hacer una pgina web!
As que quieres hacer una
Pgina Web!
Correo
Tambin disponibles: Tutor de Tablas, Tutor de Formularios & Tutor de
Marcos (Frames).
Diez formas de saber si tienes una paginucha, y Psimo; Malo, malo;
Mejorando y Consejos extras.
Si quieres saber cmo se hacen botones mgicos y otros "efectos
especiales", mira aqu.
Tutorial bsico de JavaScript.
Este tutorial es uno de la serie de tutoriales WebTutor.
WebTutor tambin est disponible para descarga como un archivo zip.
(1.4Mb)
Aprende tranquilamente en tu casa.
Sin visitas comerciales.
Una notita - este tutorial est pensado para usarlo con Windows 95/98
Tambin est desvergonzadamente pensado para Netscape. Pero tambien funcionar muy bien con
Internet Explorer, AOL y usuarios de otros sistemas operativos.
Hola. Mi nombre es Jose Angel

y voy a darte unas pocas y simples lecciones acerca de cmo hacer
una pgina Web. Debo advertirte que todo esto es para novatos absolutos. Si ya tienes experiencia en esta
clase de cosas probablemente encontrars este tutorial demasiado bsico.
Te gustar saber que aprender a hacer esto es realmente muy simple. La idea bsica es sta... Una pgina
web no es ms que un archivo, un archivo HTML para ser exacto. Se llama HTML porque los documentos
que componen las pginas web tienen como extensin .html o .htm. HTML es Hyper Text Mark-up
Language. (Lenguaje de Marcado de HyperTexto). Si ni siquiera conoces este tipo de extensin,
realmente ests muy verde!! (date un tour rpido para aclarar algunos de estos conceptos).
Empecemos. Primero, si tienes uno de esos bonitos editores de HTML y ests pensando en usarlo al mismo
tiempo que este tutorial... olvdalo. La peor manera de aprender es usar una de esas cosas, por la sencilla
razn de que no aprenders los fundamentos del asunto. Cuando se presente un problema (y se presentarn,
no lo dudes) slo podrs resolverlo si has aprendido la mecnica del HTML. Cul es, entonces, la mejor
manera de aprender HTML? El Bloc de Notas*. Lo s, lo s, tienes ese MegaAsistente PaginarioWeb de 49
http://perso.wanadoo.es/catwalk/WebTutor/makapage/index.html (1 of 4)11/12/2003 01:04:50 p.m.
Mb. que dice que hace las pginas Web con menos dificultad que
rascarse un grano. Confia en m por esta vez vale? Bien.
Otra herramienta que necesitas es un navegador para ver tus pginas
Web. Netscape Navigator es uno de los normales. Aunque ltimamente
Internet Explorer (que tambin es un navegador) se est imponiendo.
Adems como supongo que sers usuario de Win9x, Internet Explorer
est integrado en tu sistema.
Hola,
Slo quiero mandarte unas
lneas para hacerte saber
cunto me han gustado tus
tutoriales. Despus de leerlos,
elimin mi antiguo sitio web,
que estaba hecho con *** y
empec a hacerlo de nuevo
con el Bloc de Notas. Fu
como salir de un pozo. Ahora
puedo hacer exactamente lo
que tengo pensado.
Si ests usando algn servicio en lnea como Amrica Online, MSN,

etc., tambin puedes hacer una pgina web. No estoy muy
familiarizado con sus navegadores, as que si quieres utilizarlos, t
mismo. De todas formas, el hecho de que uses AOL (o algn otro
Gracias,
servicio en lnea), no quiere decir que tengas que utilizar todas sus
una ex-alma en pena.
herramientas... puedes utilizar lo que te d la gana. No s
absolutamente nada de la WebTV, pero s que hay gente que ha hecho pginas web con ella. Busca sitios
especficos de WebTV para saber cmo lo han hecho. Entonces puedes volver aqu y seguir con las
lecciones.
*** Creo que ser mejor omitir el nombre verdadero del "MegaAsistente PaginarioWeb" al que se
refera el correo arriba mostrado.
* PREGUNTA: Qu demonios en el Bloc de Notas y dnde puedo encontrarlo?

R: El Bloc de Notas es el editor de texto por defecto de Windows. En la mayora de los
sistemas de Win9x, haz clic en Inicio, Programas y Accesorios. Aparecer un pequeo bloc
de notas azul. Para nuestros fines, CUALQUIER editor de texto servir perfectamente.
Puedes ir a cualquier sitio donde haya shareware/freeware y elegir el editor que te parezca,
muchos de ellos gratis. Pero por ahora, Notepad estar bien.
Una cosa que debes evitar es utilizar un procesador de texto para crear tus archivos HTML
(en Office, Word se instala como editor predeterminado de pginas Web). En primer lugar
porque raramente estn bien preparados para este tipo de archivos, y en segundo lugar,
porque a menos que sepas bien lo que ests haciendo, tu archivo no se grabar como un
archivo html de texto simple; probablemente lo har con el formato propio del procesador
de textos, que incluye caracteres especficos de control, y no funcionar en el navegador.
No te preocupes si no entiendes bien lo anterior. Un poco ms adelante te explicar
claramente lo que debes hacer.
Y una cosa ms, por lo menos mientras ests aprendiendo... deja el WebComposer, no
toques Front Page, olvdate del SperCompiladorWeb. Utiliza el Bloc de Notas. Confa en
m. Por qu tendra que mentirte? ;-)
Como segunda cuestin en esta introduccin (prometo que las lecciones sern ms divertidas), quiero hacer
hincapi en una cuestin fundamental: El cdigo HTML est en ingls, por lo que si no tienes ni idea de
este idioma puede que haya expresiones que te resulten extraas. Para facilitar la comprensin de aquellos
que estn pez en ingls cada vez que aparece una sentencia nueva la he mostrado de la siguiente forma:
HEAD (ENCABEZAMIENTO)
es decir la
sentencia y su traduccin
(a veces aproximada, para mejorar la claridad)
Aunque esta estructura se mantendr a lo largo y ancho del tutorial, la traduccin slo aparecer la primera
vez que se vea la sentencia, nunca posteriormente. Esto se ha hecho para que os familiaricis con los
trminos del cdigo, ya que tendris que usarlos en ingls.
En cuanto a erratas y errores: He hecho un gran esfuerzo por eliminar ambos, pero en una empresa de esta
magnitud, algo estar mal. Si os percatis de que algo no est bien, por favor, remitidme un correo aqu con
la descripcin del error y lo corregir ipso-facto. Vaya desde aqu mi agradecimiento a todos aquellos que
me han escrito para ponerme al tanto de una errata, y a todos los que han escrito para que les aclarara algn
concepto que no haba quedado suficientemente claro.
Gracias tambin a todos los que habes parado aqu, y gracias a todos los nuevos. Divertos.
Bien, ahora que te has ledo todo el latazo anterior, y que no tienes ningn programa de esos que hacen
milagros, puedo decirte que ests a menos de cinco minutos de hacer tu primera pgina web. As que... a
por la Leccin 1.
Basado en la idea original de Joe Barta
Adelante -->
As que quieres hacer una pgina Web! - Introduccin

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
DISEO WEB PROFESIONAL
Gua
bsica de
HTML
Diseo Web Profesional - Tutor de Tablas
Tutor de
Tablas
Tambin disponibles: Tutor de Formularios, Tutor de Marcos (Frames) y para los novatos - As que quieres hacer
una pgina Web!
Este tutorial es uno de la serie de tutoriales WebTutor y tambin est disponible para descarga como archivo zip.
Aprende confortablemente en tu casa. Sin visitas comerciales.
Hola. Mi nombre es Jose Angel y voy a darte unas pocas y simples lecciones para que aprendas a hacer
tablas para tus documentos web. Puedes pensar que una tabla es simplemente algo as pero si alguna vez
has visto alguna pgina fantstica debes estar interesado en averiguar cmo hacer un buen uso de las
sentencias <TABLE> (TABLA). Como ilustracin, aqu est la misma pgina con un fondo gris y el
BORDE de la tabla activado.
El asunto en s tiene bsicamente slo 3 sentencias...
<TABLE> (TABLA)
La sentencia principal. Se usa para decirle al navegador "esto es una tabla", y adems puede
contener una serie de atributos como tamao, anchura del borde, y algunas otras cosas.
<TR> (LNEA O RISTRA HORIZONTAL)
TableRow (TR) define una ristra o sucesin horizontal de celdas <TD> (TableData - o Celda de
Datos)
<TD> (CELDA DE DATOS)
Especifica un bloque individual o celda en un ristra horizontal.
Parafraseando: Una tabla est hecha de lneas horizontales que a su vez estn hechas celdas...
<--Esto es---
---una
lnea---
-horizontal--
-----o
una-----
----TR--->
celda
celda
celda
Bien, esta tabla es una cuadrcula nada ms. Ahora s ests preparado para hacer tablas de verdad. Y
tambin es un buen momento para que te des cuenta de que si quieres hacer documentos html de calidad,
tienes que tomarte un poco de tiempo para aprenderte bien las sentencias. Si ests tentado de utilizar los
Asistentes de tablas o los "editores facilongos de html", te vas a ver seriamente limitado en tu flexibilidad, y
por lo tanto el resultado puede que no sea lo que ests intentando conseguir. En mi opinin los mejores
http://perso.wanadoo.es/catwalk/WebTutor/tables/index.html (1 of 2)11/12/2003 01:05:27 p.m.
editores de HTML son los basados en editores de texto. Unos pocos bastante buenos los puedes encontrar
aqu. Estos editores harn que codifiques el html ms fcilmente. Pero no intentarn hacerlo por t.
Adelante -->
Tutor de Tablas - Introduccin
Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/tables/index.html (2 of 2)11/12/2003 01:05:27 p.m.
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Marcos (Frames)
Tutor de
Marcos
(Frames)
Tambin disponibles: Tutor de Formularios, Tutor de Tablas y para los novatos - As que quieres hacer una pgina
Web!
Este tutorial es uno de la serie de tutoriales WebTutor y est disponible para descarga como archivo zip.
Aprende confortablemente en tu hogar. Sin visitas comerciales.
Hola. Mi nombre es Jose Angel y voy a darte unas pocas y sencillas lecciones acerca de cmo hacer marcos
(o frames) en tus pginas web. El uso inteligente de los frames le dar a tus pginas un aspecto atractivo y
las har ms fciles para la navegacin. Perctate de que la palabra operativa es inteligente. Vale?
Dividir una pgina en frames es bastante simple. El concepto subyacente es: Cada frame es un completo y
regular documento html. Si quieres dividir tu pgina en dos frames, uno al lado del otro, entonces necesitas
un documento html para el lado derecho y otro documento html para el lado izquierdo. Adems necesitas
un tercer documento html. Esta es la PGINA MAESTRA y contiene las sentencias <FRAME> que
especifican dnde va cada cosa. En realidad sa es su nica funcin.
Slo hay dos sentencias frame con las que nos las tendremos que ver: <FRAMESET> y <FRAME>. La
forma ms fcil de explicar su uso es empezar a hacer directamente frames. Te garantizo que en 90 minutos
vas a ser una mquina de hacer frames.
Y tambin es un buen momento para que te des cuenta de que si quieres hacer documentos html de calidad,
tienes que tomarte un poco de tiempo para aprenderte bien las sentencias. Si ests tentado de utilizar los
Asistentes de frames o los "editores facilongos de html", te vas a ver seriamente limitado en tu flexibilidad,
y por lo tanto el resultado puede que no sea lo que ests intentando conseguir. En mi opinin los mejores
editores de HTML son los basados en editores de texto. Unos pocos bastante buenos los puedes encontrar
aqu. Estos editores harn que codifiques el html ms fcilmente. Pero no intentarn hacerlo por t.
Adelante -->
Tutor de Marcos (Frames) - Introduccin
Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/frames/index.html (1 of 2)11/12/2003 01:06:36 p.m.
Plantillas
Gua
bsica de HTML
http://perso.wanadoo.es/catwalk/WebTutor/frames/index.html (2 of 2)11/12/2003 01:06:36 p.m.
Diez formas de saber si tienes una paginucha
Diez formas de saber tu pgina es ms bien malilla, o si es un completo
peazo
Eres el visitante nmero
, bueno, ms o menos.
Aviso: Que no te de un patats si algo de sto aparece en tus pginas. Anmate a hacer tus
pginas de la forma que te de la gana, aunque alguien diga que son muy malas!.
Un buen diseo es cuestin de TU gusto y estilo personal, no el de algn otro!. Adems, las
reglas se hacen para romperlas. Yo lo s....porque ya las he roto algunas veces.
Tu imagen de encabezamiento mide ms de 50K!
10
No todos tenemos lneas RDSI, sabes?. Haz tus imgenes tipo

thumbnail, y los dems ya decidiremos si nos interesa verlas o
descargarlas.
Has colocado una fotografa de t mismo que mide 400K!, y
apareces en la esquina inferior izquierda ocupando
solamente 20K.
Sabes lo que significa "RECORTAR"?
Utilizas demasiadas imgenes de tus mascotas.
"...y este es mi gato: Flufo. Esta es mi perra: Flufa. Este es mi

loro: Flufe. Y este es mi delfn: Flufy...
Y este soy yo: Fluf."
http://perso.wanadoo.es/catwalk/paginilla/paginilla.html (1 of 3)11/12/2003 01:07:08 p.m.
No me digas que tienes msica de fondo!

Piensa un poco... Si estamos intentando navegar desde la
oficina sin que el jefe lo sepa, puedes estar seguro de que en el
momento preciso en que cargues la paginilla, zs!, aparece el
jefazo. Lo siento, pero tu pgina ya es historia (y mi conexin a
Internet tambin).
Usas un escner malo, remalo, requetemalo...o no tienes ni

idea de cmo se maneja.
Como esa especie de archivo GIF de 4 bits, que parece un

negativo fotogrfico despus de pasar cinco aos en el desierto.
Mensajes en la barra de estado.
Bueeeeno....eso estaba bien hacia el 1997.
Usas imgenes de construccin en tu pgina.
Personalmente pienso que todos sabemos a estas alturas que

las pginas SIEMPRE estn en construccin.
Tu pgina es un lamento desesperado para encontrar
trabajo.
http://www.resumen.com/aburrido.html
Intermitencias
y
marquesinas
Sin comentarios.
Ests en tu propia lista de enlaces recomendados!
En Psimo; Malo, malo; Mejorando y Consejos extra hay mucho ms acerca de lo anterior.
Date una vuelta, tal vez veas algo que te interese, y quizs te ras un rato.
De todas formas gracias por parar, espero que te hayas divertido.
Correo - Volver
Si quieres aprender algo ms mira en WebTutor.
Idea original de Jeffrey M. Glover
Pop-up windows
Correo
Pop-up windows
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?:
Esas ventanas que aparecen inopinadamente, muchas veces
cuando entras a una pgina, y otras muchas veces cuando sales!.
Las peores con diferencia son stas ltimas. Porque habitualmente
cuando cierras esa nueva ventana se abre otra, u otras dos, y
cuando cierras una de esas se abre otra y....bueno, as "ad
infinitum". Los que hayas experimentado esto sabres que puede
ser muy frustante. Y s, parece que slo pasa en "cierto tipo" de
pginas (pilln, pilln, o pillina, pillina), pero no, est ms
extendido de lo que parece.
Por qu estn mal?:
Porque complican sobremanera la navegacin inundando el
escritorio y la barra de tareas de ventanas abiertas del navegador
que no tienen ninguna utilidad, y obligan al visitante a hacer un
trabajo extra cerrndolas. Adems el hecho de tener abiertas
muchas ventanas del navegador, puede hacer que el ordenador se
cuelgue (en ciertos equipos), con lo que hay que reiniciar, volver a
conectar, etc., etc., etc...
Qu puedes hacer?:
Ciertos servidores obligan a sus "servidos" a incorporar una ventana
de este tipo en sus pginas, y contra eso no puede hacerse nada,
aparte de darse de baja en el servidor. En cuanto a las otras,
desafortunadamente tampoco puede hacerse mucho, salvo no
volver a visitar la pgina en cuestin jams. Para que aprendan,
cosa que dudo.
Por ltimo no confundas este tipo de ventanas con las que se
abren cuando ejecutas un enlace. Si tienes una pgina con frames
los enlaces a pginas que no sean de tu sitio deben hacerse con el
http://perso.wanadoo.es/catwalk/paginilla/p\1.html (1 of 2)11/12/2003 01:07:21 p.m.
Pop-up windows
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
atributo TARGET="_top" que abre una nueva ventana del

navegador para la nueva pgina. La razn de hacer sto as es que
la nueva pgina tendr su diseo propio y por tanto no debe cargar
dentro de uno de tus frames que puede constreirla gravemente.
Siguiente
Siguente Psimo
Diseo Web Profesional - Mapa del sitio y Tabla General de Contenidos
Para conseguir el smbolo del Euro () se utiliza el cdigo siguiente:

Mapa del sitio & Tabla General de Contenidos

Los enlaces rojos son parte de la descarga de WebTutor (y por supuesto
tambin estn disponibles en el sitio web).
Los enlaces azules slo estn disponibles en el sitio web, aunque alguno
tambin puede descargarse.
(Si ests leyendo esto, entonces tu navegador no muestra bien los colores
alternativos de enlace.)
As que quieres hacer una pgina Web!

Lecciones:
Introduccin
Leccin 1: empezando, grabando como html
Leccin 2: colores de fondo, imgenes de fondo
Leccin 3: negrita, itlica, subrayado, sentencias anidadas
Leccin 4: fuentes de espacio uniforme, tamao de fuentes, tipo de
fuentes
Leccin 5: color de fuentes, ms acerca de anidar sentencias
Leccin 6: encabezamientos, colores de enlaces
Leccin 7: retornos de carro
Leccin 8: prrafos y alineamiento en prrafos, centrado
Leccin 9: el "cdigo de espacio en blanco", caracteres especiales
Leccin 10: insertando imgenes, caminos relativos
Leccin 11: atributo ALT, dimensin de imgenes, lineas coloreadas
Leccin 12: enlaces simples
Leccin 13: enlaces con correo, enlaces de imgenes
Leccin 14: ms acerca de los enlaces
Leccin 15: tamaos de los archivos de imgenes, el Optimizador GIF
Leccin 16: haciendo y usando thumbnails (imgenes en miniatura)
Leccin 17: ms acerca de las imgenes y los enlaces, enlaces a lugares
http://perso.wanadoo.es/catwalk/WebTutor/other/toc/toc-tutor.html (1 of 4)11/12/2003 01:11:51 p.m.
determinados de un documento
Leccin 18: resolucin de pantalla, blockquote
Leccin 19: listas numeradas y sin numerar
Leccin 20: listas definidas
Leccin 21: lneas horizontales
Leccin 22: preformato, comentarios
Leccin 23: recomendaciones finales
Leccin 24: ms recursos
ndice y Referencia rpida
Quickres
Color Picker
Descargar ColorPicker
El visor de fuentes Handy Dandy - (intro)
Los 216 colores de Netscape
Caracteres especiales
Acerca de los archivos
Optimizador GIF
Sube tu pgina a la Web
Lista corta de Editores gratutos de HTML
Acerca de Paint Shop Pro e IrfanView
Descargar Paint Shop Pro versin 3
Tablas de Colores:
Los 216 colores de Netscape (imagen)
Los 216 colores de Netscape (pgina)
Tabla de 1536 colores (pgina)
Tutor de Tablas
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10
11 - 12 - 13 - 14 - 15 - 16
ndice rpido
Por qu hay espacios en mis tablas?
Ms ejemplos - Hazlo con una Tabla!
Lineas coloreadas horizontales usando tablas
Encastramiento de imgenes usando tablas
Tutor de Formularios
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10
11 - 12 - 13 - 14
Referencia rpida
Convertidor de correo
Acerca de la manipulacin de Formularios CGI
Tutor de Marcos (Frames)

Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10
11 - 12 - 13 - 14 - 15 - 16
Plantillas
Cambia 2 (o ms) marcos con un clic:
Mtodo HTML (recomendado)
Mtodo JavaScript
Eliminando esas malditas lneas
Mi pgina Frame
Preguntas habituales
Gua Bsica de HTML (de Kevin Werbach)
Sugerencias
Leme de WebTutor
Psimo; Malo, malo; Mejorando y Consejos extras
Botones Mgicos. Aprende a hacerlos con Javascript
ndice de Ejemplos
MegaContador, un contador "configurable" que se amolda a todas tus necesidades
Web Counter, crea un contador ms o menos fiable para tus pginas. 27 de Agosto
de 2003
Tutorial bsico de Javascript. 22 de Diciembre de 2000
Tutorial de ThumbsPlus. 10 de Marzo de 2003
Mini-tutorial bsico de seguridad. 18 de Mayo de 2003
Mapa del sitio y Tabla General de Contenidos

Tabla General
Tutor de Tablas - Tutor de Formularios - Tutor de Marcos (Frames) - Tutorial
de Contenidos
de JavaScript
Gua
bsica de
HTML
Diseo Web Profesional - As que quieres hacer una pgina Web!
Leccin 1
Esto va a ser fcil, abre el Bloc de Notas y empieza con esto...

<HTML>
</HTML>
Cada una de estas cosas se llama sentencia. Hay sentencias de inicio y de cierre. Para hacer una sentencia
de cierre slo tienes que aadir esto: / a la sentencia de inicio. Muchas sentencias, pero no todas, tienen
sentencia de cierre. Piensa que las sentencias le hablan al navegador, o mejor an, que le dan instrucciones.
Lo que le has dicho al navegador es (ms o menos): esto es el inicio de un documento HTML (<HTML>) y
esto es el final de un documento HTML (</HTML>). Ahora necesitamos poner algo en medio.
Cada documento HTML necesita un par de sentencias HEAD (ENCABEZAMIENTO)

<HTML>
<HEAD>
</HEAD>
</HTML>
Lo nico que nos interesa ahora mismo de las sentencias HEAD son las sentencias TITLE (TTULO).
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
http://perso.wanadoo.es/catwalk/WebTutor/makapage/lesson01.html (1 of 3)11/12/2003 01:12:37 p.m.
Y el grueso de la pgina que ir entre sentencias BODY (CUERPO).

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Oh, y una cosa ms, ponle un ttulo al documento, y pon algo en el cuerpo.
<HTML>
<HEAD>
<TITLE>Mi primera paginilla</TITLE>
</HEAD>
<BODY>
Hola, Jose Angel!
</BODY>
</HTML>
Ahora grbalo, no como documento de texto, sino como documento html. Grbalo como Pgina1.html
en una nueva carpeta. Si no ests muy seguro de cmo hacer esto... yo te lo explico. En la ventana del Bloc
de Notas haz clic en Archivo, y despus en Guardar como.
Se abrir un cuadro de dilogo. Haz una nueva carpeta haciendo clic en un icono como ste ->
Pnle el nombre que quieras, o djalo como Nueva carpeta. Ahora haz doble clic en esta carpeta para
abrirla. En la parte inferior del cuadro de dilogo, donde pone Nombre de archivo escribe Pgina1.
html (o el_nombre_que_quieras.html). Y debajo, donde pone Guardar como archivos de tipo:
asegrate de escoger la opcin Todos los archivos(*.*).
Pulsa Aceptar y...
Felicidades! Eres el orgulloso pap (o mam) de una pgina web completamente funcional. Puedes subirla
a un servidor y el mundo entero podr ver tu creacin. Si ests usando Netscape, el archivo debe parecerse a
esto...
(no hay problema si el icono es un poco diferente)

Ahora puedes hacer doble click en el icono y ver los resultados de tu trabajo.
Una cuestin ms que es importante. Cada vez que hagas una modificacin en tu documento HTML (en el
Bloc de Notas), necesitas grabar el documento (en Archivo, Guardar), y despus pinchar en el botn
Actualizar del navegador para poder ver los cambios. Esto es as porque el navegador lee el documento
directamente del disco duro, no de la memoria. Si haces cambios y no grabas, lo que vers en el navegador
no tendr nada que ver con el contenido actual del documento HTML. No te preocupes si no entiendes bien
la mecnica en un principio. En menos de 10 minutos lo tendrs perfectamente dominado.
La mejor manera de usar este tutorial es arrancar el Bloc de Notas, y arrancar el navegador dos veces. Una
ventana del navegador contendr el tutorial y la otra tu nueva pgina. Lo nico que tienes que hacer es
saltar de una a otra entre las tres ventanas. Como doy por supuesto que ya tienes arrancado el navegador (de
otra forma no estaras leyendo esto), abre una segunda ventana para ver el resultado de tu trabajo. Puedes
hacerlo de tres formas
- 1) Busca el icono del archivo html que acabas de hacer (pgina1.html) y haz doble clic en l (en
general debes encontrarlo dentro de la carpeta C:\WebTutor\makapage o algo parecido, dependiendo de
dnde hayas instalado el tutorial).
- 2) En el navegador, haz clic en Archivo, Abrir, Examinar y busca el archivo en cuestin: pgina1.
html.
- 3) Pincha en Inicio, Buscar, Archivos o Carpetas,, introduce pgina1.html en Nombre y pincha en
Buscar ahora. Cuando el archivo aparezca, pincha dos veces en l y el navegador se arrancar
automticamente.
El siguiente paso es poner algo ms o menos interesante en la pgina.
Dos cosas antes de entrar en la leccin 2. Una, lo que has hecho es el esqueleto de un documento HTML .
Esto es la mnima informacin requerida para un documento web, y todos los documentos web deben
contener estos componentes bsicos. Y dos, el ttulo del documento es lo que aparece en la barra superior
de la ventana del Navegador.
<-- Atrs
Adelante -->
As que quieres hacer una pgina Web! - Leccin 1

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Mi primera paginilla
Hola Jose Angel!
http://perso.wanadoo.es/catwalk/WebTutor/makapage/xample01.html11/12/2003 01:12:43 p.m.
Leccin 2
Para hacer las cosas ms claras slo mantendr las sentencias <BODY>. Voy a omitir <HTML>, <HEAD> &
<TITLE>. Desde luego, mantn estas sentencias en tu documento.
<BODY>
</BODY>
Escribe Algo realmente bonito.

<BODY>
Algo realmente bonito
</BODY>
Cuando hagas un cambio en el documento, grbalo. Es decir, en el Bloc de Notas, utiliza Archivo,
Guardar , y despus pincha en el botn Actualizar de tu navegador. Algunas veces pinchar en botn
Actualizar no har que el documento cambie... en ese caso pincha en Actualizar, pulsando la tecla
Maysculas.
La primera cosa que vamos a aprender es cmo cambiar los colores del fondo.
<BODY BGCOLOR="#CCFFCC">
</BODY>
CCFFCC es la palabra en la jerga del ordenador para verde claro. Aqu hay unos pocos ms.
En el modo de 256 colores, todas las imgenes se reducen a estos colores. Adicionalmente si el color de
fondo especificado no es uno de estos 256, el navegador elegir el color que ms se le parezca. Aunque en
estos momentos no es muy importante entender cmo los navegadores y los colores trabajan juntos, tal vez
te interese echarle un vistazo a los famossimos 216 colores de Netscape.
Puedes especificar una imagen de fondo en lugar de un color. (Nota, la imagen debe estar en la misma
carpeta que el archivo HTML. Se ver algo ms de esto ms abajo.)
<BODY BACKGROUND="ondas.gif">
</BODY>
Aqu est la imagen de fondo
Para que la imagen pueda verse, es evidente que el navegador debe poder encontrarla. Por ahora,
mantendremos las imgenes en la misma carpeta que el documento HTML (pgina1.html). La forma
ms fcil de hacer esto es hacer clic con el botn derecho del ratn sobre la imagen superior y elegir
Guardar Imagen como (o la variante que sea). Ahora busca la carpeta donde pusiste el documento
pgina1.html y guarda la imagen all. Ms adelante veremos todo esto con mucho ms detalle.
Problablemente es obvio que la imagen est repetida varias veces. Si usas otro tipo de imagen puedes
conseguir un efecto como ste...
<BODY BACKGROUND="bluebar.gif">
</BODY>
Esta es la imagen de fondo

(Mide 1700x4, pero aqu est comprimida a 560x4 para que quepa en cualquier pantalla)
PREGUNTA: He visto pginas en las que la imagen de fondo est fija, y el resto se
desliza sobre esta imagen. Cmo puedo hacer eso?
R: Simple... aade BGPROPERTIES=FIXED a la sentencia BODY...
<BODY BACKGROUND="mifondo.gif" BGPROPERTIES=FIXED>
Ten en cuenta que este truco es especfico de Internet Explorer. Es decir, slo la gente que
use Internet Explorer o navegadores basados en l podrn verla. Aqu hay un ejemplo.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Los 216 colores de Netscape

TABLA DE COLORES PARA PGINAS WEB
Este archivo mide 41Kb y es complicado para el navegador mostrarlo, as que dale unos cuantos segundos para que cargue.
Los 216 colores de Netscape:

Para una tabla mucho ms grande, que contiene los 216 colores bsicos del Web y otros 1300 colores ms ven aqu. Para conseguir una
imagen GIF de la tabla de 216 colores pincha aqu. Para una explicacin de dnde vienen estos colores mira aqu. Si quieres un archivo zip
que contenga las DOS tablas haz clic aqu (14 Kb). (No odias esos montones de enlaces que dicen haz clic aqu, haz clic all y haz clic
all?)
330000 333300 336600 339900 33CC00 33FF00 66FF00 66CC00 669900 666600 663300 660000 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00
3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 66FFCC 66CCCC 6699CC 6666CC 6633CC 6600CC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC
3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 66FFFF 66CCFF 6699FF 6666FF 6633FF 6600FF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF
0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 99FFFF 99CCFF 9999FF 9966FF 9933FF 9900FF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF
0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 99FFCC 99CCCC 9999CC 9966CC 9933CC 9900CC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC
http://perso.wanadoo.es/catwalk/WebTutor/makapage/bgcolors216.html (1 of 2)11/12/2003 01:14:49 p.m.
Diseo Web Profesional - Los 216 colores de Netscape
000099 003399 006699 009999 00CC99 00FF99 99FF99 99CC99 999999 996699 993399 990099 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99
Estos son los grises:
000000 333333 666666 999999 CCCCCC FFFFFF
Estos son los ms parecidos (ms o menos) a los 16 colores bsicos de Windows:
000000 000099 009900 009999 990000 990099 999900 CCCCCC 999999 0000FF 00FF00 00FFFF FF0000 FF00FF FFFF00 FFFFFF
As que quieres hacer una pgina Web! - Los 216 colores de Netscape
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/bgcolors216.html (2 of 2)11/12/2003 01:14:49 p.m.
Gua
bsica de
HTML
Diseo Web Profesional - 1536+ colores

TABLA EXPANDIDA DE COLORES
Este archivo mide 172Kb y es muy complicado para el navegador mostrarlo, as que dale algunos segundos para que cargue. Para algunos usuarios este archivo puede ser tan grande y complejo, que bloquee el sistema. Si eso sucede, pincha en el botn detener y atrs. (Por alguna razn, IE parece manejarlo mejor que Netscape). Y ten en cuenta
que no puedes ver TODOS LOS COLORES a menos que ests en modo de color de alta densidad o de color verdadero.
1536 colores ms bastantes grises:

Debes estar en el modo de color de alta densidad (64,000 colores) o superior para poder distinguir todos los colores. Una tabla ms pequea que contiene los 216 colores solamente est aqu. Para una explicacin de dnde vienen estos colores ven aqu. Hay un archivo zip con las DOS tablas de colores aqu.
Los 216 colores bsicos estn en NEGRITA
<TD kk BGCOLOR="#FF3399"
330000 331100 332200 333300 334400 335500 336600 337700 338800 339900 33AA00 33BB00 33CC00 33DD00 33EE00 33FF00 66FF00 66EE00 66DD00 66CC00 66BB00 66AA00 669900 668800 667700 666600 665500 664400 663300 662200 661100 660000 FF0000 FF1100 FF2200 FF3300 FF4400 FF5500 FF6600 FF7700 FF8800 FF9900 FFAA00 FFBB00 FFCC00 FFDD00 FFEE00 FFFF00
http://perso.wanadoo.es/catwalk/WebTutor/makapage/bgcolors1536.html11/12/2003 01:15:41 p.m.
Diseo Web Profesional Web Design - Acerca de los 216 colores de Netscape

Una acotacin rpida: Los puntos descritos abajo no son fundamentalmente importantes para hacer
pginas web. Una pgina perfectamente aceptable puede hacerse sin saber nada de esto. Es una
addenda para estudiantes "avanzados" de HTML. Si slo quieres aprender HTML para uso propio,
te recomendara que volvieras al tutorial y no te calientes la cabeza con todo esto. Creme, tienes
tiempo de sobra para aprender sto. Una vez que tengas unos conocimientos bsicos, puedes volver
y aprender entonces todo sto.
Has estado navegando alguna vez y has visto algunas imgenes que cargan de forma extraa? No
parecen que estn llenas de pequeas facetas? Bueno, no eres el primero que caes vctima de los
CLUT (o paletas).
Ahora, antes de llegar ms lejos, djame avisarte de que no soy ningn gur de los ordenadores, as
que slo puedo explicar las cosas tal y como yo las entiendo. Esto quiere decir que s de lo que estoy
hablando... casi todo el tiempo. Dicho esto, te voy a explicar cmo muestra el ordenador los
colores... tal y como yo lo entiendo.
*
La mayora de los ordenadores pueden ejecutar 3 modos (quizs ms) de color 1. 256 colores
2. color de alta densidad (64,000 colores)
3. y color verdadero (16.7 millones de colores)
Si ests ejecutando el modo de color verdadero tu ordenador est configurado para mostrar hasta
16.7 millones de colores distintos. Esto supone un par de millones de tonalidades slo para el rojo.
Esto est muy bien porque los bordes difuminados aparecen difuminados, las fotografas tienen un
aspecto fantstico y las buenas imgenes de fondo realmente se ven bien.
Pero, claro, hay que pagar un precio por ello. Tu pobre cacharro tiene que hacer un trabajo extra para
mostrarlo todo tan bien. Consecuentemente las cosas tienden a funcionar un poco ms despacio, y a
veces, el ordenador se colgar. Pero hay que admitirlo, las imgenes aparecen muy bien.
Si quieres darle un respiro a tu procesador, puedes configurar tu pantalla para que reproduzca 64,000
colores en vez de 16.7 millones. Esto es el color de alta densidad. Aunque hay una gran diferencia
entre 16.7 millones y 64,000 para tu ordenador, la diferencia es dficilmente visible para la gran
mayora de mortales. An dispones de imgenes fantsticas, bordes difuminados y evitas en parte la
posibilidad de que el ordenador se cuelgue, aparte de conseguir ms velocidad.
http://perso.wanadoo.es/catwalk/WebTutor/makapage/net216/net216.html (1 of 3)11/12/2003 01:16:33 p.m.
Pero, si las imgenes de super alta calidad se llevan un montn de tiempo para cargar, o quieres
utilizar los mnimos recursos posibles de memoria, o si tienes un viejo ordenador, lo mejor que
puees hacer es correr el modo de 256 colores. Todo esto quiere decir lo siguiente: Tu ordenador dice
"Escucha, s que existen 16.7 millones de colores. Pero lo que voy a hacer es utilizar solamente 256
a la vez. Si tengo que mostrar una imagen que tcnicamente tiene 80,000 colores, lo que voy a hacer
es encontrar los 256 ms parecidos y usar esos 256 colores. Ya me las arreglar."
Ahora demos un paso ms. Supongamos que ests en el modo de 256 colores y ests con Netscape
abierto. Netscape dice, "Voy a ver esos colores. Como slo tienes 256 colores para mostrar, voy a
asignar un valor permanente a 216 de ellos. Los 40 restantes se pueden usar para lo quieras y como
quieras". El resultado final es que Netscape reduce (dither) todas las imgenes a esos 216 colores.
La reduccin se efecta cuando el ordenador

toma una pareja de colores y trata de
mezclarlos para hacer un color del que no
dispone. Esta "reduccin" es lo que hace que
algunas imgenes se vean a veces facetadas.
Cmo se hace todo sto? Supongamos que tienes una pgina web con dos imgenes. Una imagen
contiene 150 colores. La otra imagen contiene otros 150 colores distintos. Si intentas mostrar las dos
al mismo tiempo, tu ordenador tiene que manejar de repente 300 colores diferentes, eso sin
mencionar los colores de la barra de herramientas, de los botones, etc. Esto es una seria amenaza
para la idea de los 256 colores. As que Netscape va y dice "Aqu hay 216 colores que usar para
TODAS las imgenes. Todo lo dems se reducir a estos colores".
Este grupo de colores se llama CLUT (o paleta). Por lo que yo s, todos los navegadores tienen uno.
De todas formas no s si todos los navegadores usan los mismos colores en su paleta, o cmo
funcionan los colores o las paletas en un sistema operativo diferente de Windows. (Hey, te dije que
no lo saba todo!)
Adelante -->
As que quieres hacer una pgina Web! - Acerca de los 216 colores de Netscape
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional Web Design - Acerca de los 216 colores de Netscape - parte 2
Gradiente 1 - 1021 colores
Gradiente 2 - 66 colores
Si las dos imgenes superiores te parecen iguales, entonces ests ejecutando el modo de 216 colores y Netscape
est reduciendo la imagen a sus 216 colores. Si la imagen de la izquierda aparece ms suave y la de la izquierda
ms facetada, entonces ests ejecutando el modo de color de alta densidad o el de color verdadero. La imagen de la
izquierda son unos pocos gradientes simples, grabados en un formato jpg de baja compresin. En color verdadero,
el gradiente se difumina muy bien y en el modo de color de alta densidad tambin se mantiene bastante bien
(aunque el nmero de colores diferentes cae a 419). La imagen de la derecha es una captura de pantalla en el modo
de color de 256 colores.
S que, para los que usan color de alta densidad o color verdadero es una tentacin pasar de los 256 colores, pero
ten en cuenta que hay mucha gente que los usa. Si tu imagen es una fotografa en formato jpg no hay mucho que
puedas hacer. Las fotografas van a aparecer simplemente un poquito peor para aquellos que usan 256 colores.
Foto 1 - 20186 colores
Foto 2 - 61 colores
Una vez ms, si la imagen parece la misma, ests en el modo de 256 colores. Si la imagen de la
izquierda es significativamente mejor que la de la derecha entonces ests en alguno de los otros dos
modos. Si ste es el caso, entonces la imagen de la derecha est tal y como la ver la gente que
utiliza el modo de 256 colores. Pero como ya he dicho, con las fotografas no hay mucho que se
pueda hacer.
En una situacin muy similar nos encontramos cuando se utilizan imgenes gif. Aunque una imagen
gif slo puede contener 256 colores, si stos no son los colores de Netscape, la imagen ser
reducida... ...excepto cuando ves la imagen solamente a travs del navegador. Con esto quiero decir
que no vers la imagen en la pgina web, sino ver la imagen directamente. Como ejercicio, haz clic
con el botn derecho en la imagen Bola 1 y elige Ver Imagen (slo para Netscape). Lo que vers
entonces es al navegador mostrando la imagen directamente y no a travs de la pgina web. Como el
navegador sabe que no va a haber otra imagen interfiriendo relajar las normas de color y permitir a
tu ordenador mostrar los 256 colores que necesita.
http://perso.wanadoo.es/catwalk/WebTutor/makapage/net216/net216-2.html (1 of 2)11/12/2003 01:18:05 p.m.
Diseo Web Profesional Web Design - Acerca de los 216 colores de Netscape - parte 2
Bola 1 - 232 colores
Bola 2 - 62 colores
Un rea donde s podemos marcar diferencias es en los dibujos. Cualquiera que no contenga un
montn de gradientes. Abajo hay un par de buenos ejemplos.
Bandera 1 - 18 colores
Botn 1 - 18 colores
Botn 2 - 12 colores
Botn 3 - 5 colores
Tenemos la Imagen 1 y la Imagen 2 tal y como antes (dependiendo de tu navegador y su

configuracin). Pero ahora tenemos una tercera imagen. La tercera debe parecerle perfecta a todo el
mundo. Est perfecta incluso para los de 256 colores.
<-- Atrs
Adelante -->
As que quieres hacer una pgina Web! - Acerca de los 216 colores de Netscape - parte 2
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Acerca de los 216 colores de Netscape - parte 3
Hice esto usando la paleta de Netscape en mi editor de grficos. T tambin puedes hacerlo. Si cargas esta
imagen...
...en cualquier editor de grficos, puedes hacer una paleta a partir de ella. (Consulta las instrucciones de tu
editor de grficos si no sabes cmo hacerlo). Ahora ests listo!. Puedes importar una imagen existente y
substituir los colores de la misma por los ms parecidos a los de Netscape. Como puedes ver en las
imgenes anteriores los resultados son muy buenos y no lleva ms de dos minutos hacerlo. Si ests creando
una imagen nueva, es buena idea empezar con estos 216 colores. Si la mayora estn hechas de acuerdo con
los colores de Netscape, y cambias a 16.7 millones de colores para alguna edicin posterior, cuando vuelvas
a cargar los colores de Netscape, la imagen te parecer mucho mejor de lo que creas. Y adems la ver bien
todo el mundo.
Si quieres profundizar un poco ms en la paleta de Netscape, aqu vers por qu salen los 216 colores y no
otro nmero. En la vida normal, utilizamos un sistema de base 10 con diez dgitos...
0-1-2-3-4-5-6-7-8-9
En algn momento de la evolucin, la gente de los ordenadores decidi que ciertas cosas seran ms fciles
utilizando un sistema de base 16...
0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F
Como no tenemos smbolos especiales para representar el 10, 11, 12 etc., utilizamos letras para representar
esos valores. Abajo aparecen los dos sistemas de numeracin hasta el 50...
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
50
0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A
1B 1C 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31
32
As que cuando alguien habla de "cdigo hexa" o de "nmeros hexadecimales" o si ves cdigos de color
crpticos como 09EC0A, CCFFCC, 00AACC, etc., es de sto de lo que estn hablando y de ah viene.
Llevando las cosas un poco ms lejos, tu ordenador entiende las cosas en trminos de rojo, verde y azul...
ROJO - VERDE - AZUL
o
R-G-B
(RED - GREEN - BLUE)
Cada uno de ellos puede tener un valor que va desde 0 a 255. 0 indica la ausencia de color, 255 indica
saturacin de color. Usando esta escala, conseguimos los siguientes valores...
ROJO (R)= 255-0-0
VERDE (G)= 0-255-0
AZUL (B)= 0-0-255
NEGRO= 0-0-0
BLANCO= 255-255-255
Como tenemos 3 colores, cada uno con un valor que puede variar desde 0 hasta 255 tenemos 16,777,216
combinaciones de color posibles (256 ). Es por esto que hablamos de 16.7 millones de colores.
Si reemplazamos los nmeros decimales con sus equivalentes hexadecimales empezamos a ver algo
parecido a esos "cdigos hexadecimales".
ROJO (R)= FF-0-0
VERDE (G)= 0-FF-0
AZUL (B)= 0-0-FF
NEGRO= 0-0-0
BLANCO= FF-FF-FF
SI utilizamos 00 en vez de 0, 01 en vez de 1, etc., y eliminamos los guiones (-), entonces nos quedamos
con los genuinos cdigos de color!
ROJO (R)= FF0000
VERDE (G)= 00FF00

AZUL (B)= 0000FF
NEGRO= 000000
BLANCO= FFFFFF
Ahora, cmo se las arregla Netscape para escoger los colores a utilizar? En vez de utilizar 256 valores para
cada uno de los tres colores, slo utiliza 6. Sus valores son 0, 51, 102, 153, 204 y 255. Si trasladamos stos
a sus equivalentes hexadecimales tenemos 00, 33, 66, 99, CC y FF. Y como hay seis valores diferentes para
cada uno de los 3 colores, tenemos 216 combinaciones de colores posibles (6 ).
Si vuelves a la tabla de colores que vistes anteriormente, vers esas combinaciones de color.
Una ltima cosa. Si alguien est utilizando una pantalla a 256 colores y t has elegido un color de fondo
que no es uno de los 216 de Netscape, entonces Netscape elegir el ms parecido de sus propios colores. A
veces esto no es bueno. He visto pginas en las que el texto era casi ilegible. Una vez ms, s que eso de los
256 colores parece una tontera, pero es que hay un montn de gente que los utiliza. Y si tu prioridad es
crear pginas web buenas y elegantes, debes considerar el perder un par de minutos en ajustar tus grficos,
para que los vea bien todo el mundo.
"Y eso es todo lo que tena que decir." - Forrest Gump
1999 Addendum: Aunque hay todava muchas pantallas en modo de 256 colores, varias estadsticas
muestran que el nmero est disminuyendo rpidamente. La gran mayora de los internautas navegan en
modo de color de alta densidad o superior. De todas formas, la paleta de 216 colores es siempre un buen
comienzo para los grficos web.
<-- Atrs
As que quieres hacer una pgina Web! - Acerca de los 216 colores de Netscape - parte 3
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/net216-2.gif
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/net216-2.gif (1 of 2)11/12/2003 01:19:16 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/net216-2.gif
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/net216-2.gif (2 of 2)11/12/2003 01:19:16 p.m.
Diseo Web Profesional - Fondo fijo
CONSTITUCIN ESPAOLA , 1978

TTULO PRELIMINAR
Artculo 1.
1. Espaa se constituye en un Estado social y democrtico de Derecho, que propugna como
valores superiores de su ordenamiento jurdico la libertad, la justicia, la igualdad y el pluralismo
poltico.
2. La soberana nacional reside en el pueblo espaol, del que emanan los poderes del Estado.
3. La forma poltica del Estado espaol es la Monarqua parlamentaria.
Artculo 2.
La Constitucin se fundamenta en la indisoluble unidad de la Nacin espaola, patria comn e
indivisible de todos los espaoles, y reconoce y garantiza el derecho a la autonoma de las
nacionalidades y regiones que la integran y la solidaridad entre todas ellas.
Artculo 3.
1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles tienen el deber de
conocerla y el derecho a usarla.
2. Las dems lenguas espaolas sern tambin oficiales en las respectivas Comunidades
Autnomas de acuerdo con sus Estatutos.
3. La riqueza de las distintas modalidades lingsticas de Espaa es un patrimonio cultural que
ser objeto de especial respeto y proteccin.
Artculo 4.
1. La bandera de Espaa esta formada por tres franjas horizontales, roja, amarilla y roja, siendo
la amarilla de doble anchura que cada una de las rojas.
2. Los Estatutos podrn reconocer banderas y enseas propias de las Comunidades Autnomas.
Estas se utilizaran junto a la bandera de Espaa en sus edificios pblicos y en sus actos oficiales.
Artculo 5.
La capital del Estado es la villa de Madrid.
Artculo 6.
Los partidos polticos expresan el pluralismo poltico, concurren a la formacin y manifestacin
de la voluntad popular y son instrumento fundamental para la participacin poltica. Su creacin
y el ejercicio de su actividad son libres dentro del respeto a la Constitucin y a la Ley. Su
estructura interna y funcionamiento debern ser democrticos.
Artculo 7.
Los sindicatos de trabajadores y las asociaciones empresariales contribuyen a la defensa y
promocin de los intereses econmicos y sociales que les son propios. Su creacin y el ejercicio
http://perso.wanadoo.es/catwalk/WebTutor/makapage/fixedbg.html (1 of 2)11/12/2003 01:20:07 p.m.
Diseo Web Profesional - Fondo fijo
de su actividad son libres dentro del respeto a la Constitucin y a la Ley. Su estructura interna y
funcionamiento debern ser democrticos.
Artculo 8.
1. Las Fuerzas Armadas, constituidas por el Ejercito de Tierra, la Armada y el Ejercito del Aire,
tienen como misin garantizar la soberana e independencia de Espaa, defender su integridad
territorial y el ordenamiento constitucional.
2. Una Ley orgnica regulara las bases de la organizacin militar conforme a los principios de la
presente Constitucin.
Artculo 9.
1. Los ciudadanos y los poderes pblicos estn sujetos a la Constitucin y al resto del
ordenamiento jurdico.
2. Corresponde a los poderes pblicos promover las condiciones para que la libertad y la
igualdad del individuo y de los grupos en que se integra sean reales y efectivas; remover los
obstculos que impidan o dificulten su plenitud y facilitar la participacin de todos los
ciudadanos en la vida poltica, econmica, cultural y social.
3. La Constitucin garantiza el principio de legalidad, la jerarqua normativa, la publicidad de
las normas, la irretroactividad de las disposiciones sancionadoras no favorables o restrictivas de
derechos individuales, la seguridad jurdica, la responsabilidad y la interdiccin de la
arbitrariedad de los poderes pblicos.
As que quieres hacer una pgina Web! - Fondo fijo
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/fixedbg.html (2 of 2)11/12/2003 01:20:07 p.m.
Gua
bsica de
HTML
Leccin 3
Volvamos a la vieja pantalla

<BODY>
</BODY>
Podemos hacer que la letra sea negrita.

<BODY>
Algo realmente <B>bonito</B>
</BODY>
Algo realemente bonito
Lo que hacemos (ms o menos) es decirle al navegador: cuando veas una <B> empieza a hacer la letra en
negrita, y cuando veas una </B> deja de hacer las letras en negrita.
Lo mismo se aplica a la cursiva o itlica...

<BODY>
Algo <I>realmente</I> <B>bonito</B>
</BODY>
...y al subrayado.
<BODY>
<U>Algo</U> <I>realmente</I> <B>bonito</B>
</BODY>
Volvamos al principio.
<BODY>
</BODY>
Tambin podemos usar sentencias combinadas si queremos.

<BODY>
Algo realmente <I><B>bonito</B></I>
</BODY>
Esto es un ejemplo de sentencias anidadas. Si vas a usar un par de sentencias combinadas (como
probablemente has hecho hace un momento), procura no confundir al navegador, y anida las sentencias sin
solaparlas. Djame explicarlo...

<ESTO><AQUELLO></ESTO></AQUELLO>
<ESTO><AQUELLO></AQUELLO></ESTO>
<-- Atrs
Sentencias solapadas.... mal hecho

Sentencias anidadas.... bien hecho
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 4
Un tipo de texto muy til es la fuente de espacio uniforme, o Texto de Mquina de Escribir.
<BODY>
<TT>Algo realmente bonito</TT>
</BODY>
Cada letra utiliza la misma cantidad de espacio horizontal...
Este es el tipo normal ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
Este es el tipo de espacio uniforme ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
ao de la fuente. Es muy sencillo!.
Podemos cambiar el tam
Primero aade las sentencias <FONT> (FUENTE) ...

<BODY>
Algo realmente <FONT>bonito</FONT>
</BODY>
Ahora especifica un atributo SIZE (TAMAO) .
<BODY>
Algo realmente <FONT SIZE="6">bonito</FONT>
</BODY>
Algo realmente
bonito
Las fuentes vienen en 7 tamaos:
minsculo
pequeo medio
normal grande y realmente

4
enorme!
7
Dos cosas que quiero discutir ahora. Primero, una sentencia o <TAG> le dice al navegador que haga
algo. Un ATRIBUTO va dentro de la sentencia o <TAG> y le dice al navegador cmo hacerlo. La
sentencia <FONT> le dice al navegador que debe utilizar un tipo de fuente, el atributo SIZE le dice
que debe utilizar un tamao determinado. <FONT SIZE="5"> le dice al navegador que utilice el
tamao de fuente 5.
La segunda cosa es acerca de los valores por defecto. Como probablemente sabrs, el valor por
defecto es un valor que el navegador asume si no se le dice otra cosa. Un buen ejemplo es el tamao
de la fuente. El valor por defecto es 3 (habitualmente). Si t no lo dices nada ser 3. Si le chillas al
ordenador ser 3.
Cada navegador tiene una fuente por defecto, que incluye el nombre de la fuente (tambin llamado
tipo), tamao y color. A menos que hayas estado tocando donde no debes y lo hayas liado
probablemente ser Times New Roman 12pt (que se traduce como 3 para nosotros) en negro. Por
supuesto podemos especificar otros nombres de fuentes. Como ARIAL y COMIC SANS.
<BODY>
Algo realmente <FONT FACE="ARIAL">bonito</FONT>
</BODY>
La fuente slo se mostrar correctamente si est instalada en tu ordenador. Repito... Si la persona que est
viendo la pgina no tiene instalada en su ordenador la fuente especificada, slo ver la fuente por defecto.
As que procura ser prudente en el uso de las fuentes. Arial y Comic Sans MS son omnipresentes en
Impact!
. Puedes ampliar tus opciones especificando ms de una fuente (S!

Windows. Tambin lo es
puedes hacerlo!). Prueba esto... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Otras
fuentes ocultas</FONT>.
Para cabezas cuadradas como yo que no entienden bien lo que sucede, esto es lo pasa: El navegador busca
ARIAL. Si la encuentra, la utiliza. Si no, busca HELVETICA. Si tampoco la encuentra, busca LUCIDA
SANS. Y si tampoco encuentra sta ltima usa la fuente por defecto.
Qu fuentes son las ms habituales? Estas:
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times Rew Roman
Trebuchet MS
Verdana
Para ver cmo se muestran las fuentes realmente en tu navegador, tal vez quieras utilizar el Visor de
Fuentes Handy Dandy.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Visor de Fuentes Handy Dandy
Visor de Fuentes Handy Dandy

La sentencia <FONT> nos da mucha flexibilidad en el diseo de pginas con cdigo HTML.
Un uso inteligente de las fuentes puede aadir mucho valor a tu pgina. Este pequeo
programa te ayudar a ver diferentes fuentes, en diferentes tamaos, a travs de tu navegador.
Recuerda - un visitante de tu pgina slo podr ver las fuentes si las tiene instaladas en
su ordenador. Recuerda tambin que puedes especificar ms de una fuente. As puedes
incrementar la posibilidad de que todo el mundo vea tu trabajo como lo has previsto.
Otra cuestin a tener en cuenta son los problemas potenciales con los nombres de las fuentes.
No hay reglas para los nombres de las fuentes. Puedes tener instalada en tu sistema una
fuente llamada TomaYa con un aspecto fantstico. Alguien en la calle puede hacer una fuente
con siluetas de chicas desnudas y llamarla TomaYa. Ahora supongamos que yo tengo
instalada en mi sistema esa fuente de chicas desnudas, y t has especificado en tu pgina
como fuente TomaYa. Bueno, lo nico que podr ver de tu pgina es un montn de chicas
desnudas, toma ya!. En ciertos niveles, esto es divertido. En otros, esto es un problema. As
que procura ser juicioso en el uso de las fuentes.
Abrir el Visor de Fuentes Handy Dandy
(Se requiere Javascript)
PREGUNTA: Puedo hacer de alguna manera que las fuentes se instalen en el ordenador
de mis visitantes, de forma que puedan usar automticamente las fuentes que yo uso?
R: Prcticamente... no. La nica forma de ver una fuente especfica es tenerla instalada en
el ordenador. Hay algunas tecnologas emergentes que pueden incluir las fuentes en la
pgina web, pero se usan muy poco, no estn ampliamente distribuidas y no las soportan
muchos navegadores, y en fin... Siempre puedes ofrecer un enlace a tu fuente. Tus
visitantes pueden bajarla e instalarla si quieren.
http://perso.wanadoo.es/catwalk/WebTutor/makapage/dafonts/index.html (1 of 2)11/12/2003 01:22:10 p.m.
Diseo Web Profesional - Visor de Fuentes Handy Dandy
Qu es esto? Te ha gustado el Visor de Fuentes Handy Dandy? Quieres uno para bajrtelo y
utilizarlo dnde te de la gana? Creo que podrs hacerlo. Vamos all . (3 Kb)
As que quieres hacer una pgina Web! - Visor de Fuentes Handy Dandy
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/dafonts/index.html (2 of 2)11/12/2003 01:22:10 p.m.
Gua
bsica de
HTML
Leccin 5
Creo que es un buen momento para decir algo acerca de la sintaxis. Habrs notado que uso comillas en
varios lugares, y esto es importante. Dondequiera que haya un ATRIBUTO="valor", el valor debe estar
entre comillas. Aunque las ltimas versiones de los navegadores soportan atributos sin entrecomillar,
algunos navegadores no los soportan, lo que dar lugar a errores. Adems debes procurar ser ordenado, y te
dir por qu.
No te puedes hacer una idea de cantas veces he hecho una pgina y todo se ha liado... Y quiero decir que
todo estaba mal porque haba olvidado poner unas simples comillas o un espacio, o haba olvidado un signo
>. Algn da no necesitaremos este tipo de cdigo, pero mientras tanto debemos ser cuidadosos. Otra
cuestin es mi uso de las LETRAS MAYSCULAS para muchas cosas. Esto es slo una preferencia
personal. Encuentro ms fcil visualizar las sentencias cuando uso letras maysculas. Puedes utilizar
<font> en lugar de <FONT>. Tambin puedes usar <fOnT> si eso es lo que te hace feliz. El HTML es
completamente INsensitivo a las maysculas o las minsculas dentro de las sentencias.
Bien, volvamos al divertido trabajo...
Tambin puedes cambiar el color de la fuente.
<BODY>
Algo realmente <FONT COLOR="#FF0000">bonito</FONT>
</BODY>
Tambin podemos, por supuesto, utilizar ms de un ATRIBUTO en una sentencia <FONT>...

<BODY>
Algo realmente <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">bonito</FONT>
</BODY>
Algo realmente
bonito
Vaya, esto empieza a cambiar!

<BODY BGCOLOR="#FFFFFF">
Algo realmente <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="7">bonito</FONT></B></I></U>
</BODY>
Algo realmente
bonito
Creo que es necesario apuntar otra vez que las sentencias mltiples deben estar anidadas.
<TAG3><TAG2><TAG1>Hola!</TAG1></TAG2></TAG3>
No importa qu sentencia vaya primero. Es decir, si quieres hacer una fuente roja y en negrita no tienes
que especificar obligatoriamente el color primero y el tipo despus. Puedes hacerlo en el orden que quieras.
Como ahora...
La forma ms rpida de confundir al navegador, y no digamos a t mismo, es solapar las sentencias...
(No veo una forma ms fcil de explicarlo as que espero que el uso de los colores en los ejemplos lo aclare
lo suficiente.)
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 6
Otras sentencias muy tiles son los encabezamientos. Aunque estn un poco obsoletos en las pginas
actuales, tan llenas de grficos, son una buena herramienta que deberas tener en cuenta. Vienen en tamaos
del 1-6.
<H1>Algo
<H2>Algo
<H3>Algo
<H4>Algo
<H5>Algo
<H6>Algo
realmente
realmente
realmente
realmente
realmente
realmente
bonito<H1>
bonito<H2>
bonito<H3>
bonito<H4>
bonito<H5>
bonito<H6>

Un atributo muy til es ALIGN (ALINEAR)...el ejemplo lo explica claramente.

<H2 ALIGN="left">Algo realmente bonito<H2>
(izquierda)
<H2 ALIGN="center">Algo realmente bonito<H2>
(centro)
<H2 ALIGN="right">Algo realmente bonito<H2>
(derecha)

Una cosa ms y daremos por terminada esta leccin. El navegador tiene una configuracin por defecto para
el color del texto, el color de los enlaces, el color del enlace activo y el color de los enlaces visitados. La
configuracin es
El texto es habitualmente negro
Los enlaces son habitualmente azules
El enlace activo es habitualmente rojo
Los enlaces visitados son habitualmente
morados
Puedes cambiar esta configuracin si es necesario (advierte que he dicho si es necesario). Todo el mundo
sabe que los enlaces son azules. Por qu confundirlos?. Adems el color de los enlaces ayuda a saber cales
se han visitado y cales no, lo que en una pgina con 25, 30 o 200 enlaces ayuda bastante a no perderse.
Puedes cambiar esta configuracin para el documento completo en la sentencia <BODY>.
<BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33"
ALINK="#00CCFF">
</BODY>

S que no hemos hablado de cmo hacer los enlaces, por lo que esa informacin no se muestra
arriba (para qu liar las cosas?). Esto es simplemente para mostrarte cmo hacer los cambios de
color para cuando aprendas a hacer los enlaces.
Ahora el color de fondo es negro y el texto es amarillo.
Los enlaces son ahora verde nen (LINK)
Los enlaces visitados son verde oscuro (VLINK)
Y los enlaces activos son azul cielo (ALINK)
He escrito un pequeo bloque de HTML & JavaScript llamado Color Picker que hace muy fcil (y
divertido) experimentar diferentes configuraciones de color. Con l, no slo puedes elegir colores, sino que
puedes elegir diferentes fuentes y diferentes tamaos, cambiar a negrita o itlica, y tambin experimentar con
las imgenes de fondo. La sentencia <BODY> se genera automticamente para que la puedas utilizar en tu
documento.
Sigamos. Ahora ya sabes lo suficiente como para manipular el texto en tus documentos. Puedes hacer
grandes letras rojas o letras pequeas en negrita. Puedes usar otras Fuentes, o fuentes
de
espacio uniforme.
ube y baja.
Y tambin puedes hacer un s
(El cdigo para el sube y baja est aqu por si quieres verlo.)
Antes de que acabemos esta leccin, hay algo sobre lo que quiero llamar tu atencin. Puedes ver el cdigo
HTML de cualquier pgina pinchando en Ver/Cdigo fuente en la barra de rdenes de tu navegador. Los
trminos pueden ser algo diferentes, pero todos los navegadores incorporan esta utilidad. As que, cuando
ests navegando y te encuentres preguntndote a t mismo "Cmo ha hecho eso?", ya sabes que la respuesta
est solamente a un par de clics de distancia.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/roller.txt
Puedes hacer un s<FONT SIZE=4>u</FONT><FONT SIZE=5>b</FONT><FONT SIZE=6>e</

FONT><FONT SIZE=7>y</FONT><FONT SIZE=7>b</FONT><FONT SIZE=6>a</FONT><FONT
SIZE=5>j</FONT><FONT SIZE=4>a</FONT><FONT SIZE=1>!</FONT>
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/roller.txt11/12/2003 01:23:28 p.m.
Leccin 7
Creo que empezaremos ahora aprendiendo algo acerca de cmo funcionan los navegadores.
Primero un ejemplo...
<BODY>
como un pajarito!
</BODY>

como un pajarito!
<BODY>
Hey!
Qu
est
pasando
aqu?
</BODY>
Hey! Qu est pasando aqu?
El navegador no reconoce el formato. A menos que le digas otra cosa, muestra todos los caracteres
seguidos. Si quieres empezar en una lnea nueva debes usar un indicador de lnea nueva.
<BODY>
Hey!
<BR>Qu
<BR>est
<BR>pasando
<BR>aqu?
</BODY>
Hey!
Qu
est
pasando
aqu?
<BR> bsicamente dice: empieza en una nueva lnea.
Puedes usar la sentencia <BR> para saltarte una lnea? Claro.
<BODY>
<BR>Qu
<BR>est
<BR>
<BR>pasando
<BR>
<BR>aqu?
</BODY>
Qu
est
pasando
aqu?
Quieres saltarte varias lneas? Facilongo.
<BODY>
<BR>Qu
<BR>est
<BR>
<BR>pasando
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>aqu?
</BODY>
Qu
est
pasando
aqu?
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 8
Volvamos a nuestra paginilla simple.

<BODY>
</BODY>
Esta es la sentencia de prrafo. Piensa en un prrafo como en un bloque de texto.

<BODY>
<P>Algo realmente bonito</P>
</BODY>
Por s misma no es muy espectacular no?. Aunque para muchos navegadores, empezar un nuevo prrafo
tiene el efecto de saltarse una lnea.

<BODY>
<P>Algo realmente bonito</P>
<P>como un pajarito</P>
</BODY>

como un pajarito
Bueno, pero para qu ms sirve la sentencia <P>? Bien, es muy buena para alineamientos.
<BODY>
<P ALIGN="left">Algo realmente bonito</P>
<P ALIGN="center">como un pajarito</P>
<P ALIGN="right">o una florecilla</P>
<P ALIGN="left">
<BR>como un pajarito
<BR>o una florecilla
</P>
<P ALIGN="center">
</P>
<P ALIGN="right">
</P>
</BODY>

como un pajarito
o una florecilla
como un pajarito
o una florecilla
como un pajarito
o una florecilla
como un pajarito
o una florecilla
Algo ms acerca de la sentencia <P>... aunque en los ejemplos superiores he utilizado la sentencia de cierre
(</P>), no es enteramente necesaria. Casi todos los navegadores asumen que cuando un nuevo <P>rrafo
ha empezado, el antiguo ha terminado. As que...
<P>Algo que decir
<P>Algo por aadir
es lo mismo que...
<P>Algo que decir</P>
<P>Algo por aadir</P>
Y una ltima cosa antes de terminar. Hemos visto antes cmo hacer que algo aparezca centrado. Hay otro
camino para centrar las cosas que deberas tener en tu lista de trucos. Es claramente obvio. Puedes centrar
una sola palabra o la pgina completa. Todo lo que vaya entre sentencias <CENTER> (CENTRAR) ,
acabar centrado.
<BODY>
<CENTER>Algo realmente bonito</CENTER>
</BODY>
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 9
chale un ojo a esto...

<BODY>
Algo
</BODY>
realmente
bonito
El navegador no reconocer ms de un espacio entre letras. S que a primera vista esto puede parecer una
estupidez, pero realmente es bueno que esto sea as. Porque as tienes un control absoluto sobre la apariencia
del documento.
Hay un pequeo trozo de cdigo que le dice al navegador: "espacio" ->
Ahora prueba esto...
<BODY>
Algo
realmente
bonito
</BODY>
Algo
realmente
bonito
El smbolo & quiere decir que vamos a empezar un carcter especial y el smbolo ; significa que acaba el
carcter especial. Los smbolos entre ambos son el cdigo para ese carcter especial. Hay slo unos pocos
de estos caracteres especiales. Aqu hay seis ms. (Nota: siempre hay que utilizar letras minsculas)

<
>
&
"

espacio en blanco
smbolo < (menor que)
smbolo > (mayor que)
smbolo &
" (comillas)
guin
No tienes por qu usarlos siempre, solamente cuando la utilizacin del carcter real pueda confundir al
navegador. Cmo puedes saber cando es eso?. No hay una 'regla' especial y explcita. Lo averiguars con
un poco de prctica y unas pocas meteduras de pata.
Por cierto, acerca de las meteduras de pata. Hay gente que piensa que los errores son malos. Tienen miedo
de probar cualquier cosa nueva por temor a romperla. Cometer el mismo error una y otra vez es de tontos,
pero cuando ests aprendiendo (especialmente), no tengas miedo de liarlo todo. Los errores son tus
amigos :-) Si no metes patas, probablemente no ests aprendiendo mucho y seguramente no ests haciendo
nada. Recuerda, meter patas es un forma perfectamente aceptable de aprendizaje.
Bueno, basta de bla, bla, bla... Hay ms caracteres especiales an. Dificilmente los usars pero quiero que
sepas que existen.
Volvamos sobre lo anterior, porque si eres como yo, tal vez ests un poco liado. El navegador mostrar tu
texto en una lnea continua, a menos que t le digas lo contrario con retornos de carro, etc. Tambin
reducir todas las reas vacias a 1 slo espacio. Si quieres ms espacios, debes usar el cdigo de espacio
( ). Una cosilla ms que no hemos dicho... Si el retorno de carro (o Enter) lo haces mientras escribes
el texto, la mayora de los navegadores lo interpretarn como un espacio... a menos que ya haya un espacio
all.
Un ejemplo rpido ms.
<BODY>
Algo<BR>realmente<BR>bonito<BR>
como<BR>un<BR>pajarito
</BODY>
Algo
realmente
bonito
como
un
pajarito
Lo tienes claro? Eso espero. Lo he explicado lo mejor que s!
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 10
Ahora vamos a empezar a colocar imgenes en la pgina. Usaremos sta. Una vez ms, haz clic con el botn
derecho del ratn para copiarla de esta pgina y guardarla en la tuya.
Se inserta una imagen con la sentencia <IMG> (IMAGEN) .

<BODY>
<IMG>
</BODY>
Tambin debemos especificar el archivo y el tamao.
<BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101> (ANCHURA y ALTURA)
</BODY>
PREGUNTA: Cmo puedo saber la ALTURA y la ANCHURA de una imagen?

R: Bueno, hay un par de formas diferentes. Una es cargar la imagen en un programa de
grficos. En Propiedades aparece la altura y la anchura. Uno muy bueno (y gratis) es Irfan
View. Un editor de grficos muy popular es Paint Shop Pro. Es shareware con caducidad,
pero es un buen editor. Hay una versin ms antigua que RECOMIENDO a los
principiantes, y sta no caduca. Est (o estaba) disponible aqu.
Otro mtodo es utilizar un editor de texto o de html que importa el tamao cuando se
inserta la imagen. Puedes hacerlo con NoteTab, y la sentencia de imagen se construye
automticamente cuando se arrastra el archivo de imagen al documento actual. Se puede
insertar una imagen en 6 dcimas de segundo.
Ahora djame hacer hincapi en que no slo hay que especificar qu imagen, sino que tambin hay que
especificar dnde est la imagen. La entrada anterior, "chef.gif", le dice al navegador que busque la
imagen llamada chef.gif en la misma carpeta (o directorio) en que se encuentra el documento html.
Abajo hay unos pocos diagramas.
SRC="chef.gif" quiere decir que la

imagen est en la misma carpeta que
contiene el documento html.
SRC="images/chef.gif" quiere
decir que la imagen est en un
subdirectorio de la carpeta que contiene el
documento. Puede haber tantos
subdirectorios como sea necesario.
SRC="../chef.gif" quiere decir que

la imagen est en el directorio superior a
aquel en que se encuentra el documento
html.
SRC="../../chef.gif" quiere decir

que la imagen est dos directorios por
encima de aquel en que se encuentra el
documento html.
SRC="../images/chef.gif" quiere
decir que la imagen est en un
subdirectorio del directorio superior. Es
decir, el directorio superior contiene dos
subdirectorios, uno con la imagen y otro
con el documento html.
SRC="../../../other/images/
chef.gif" Bueno, esto no voy a
intentar explicarlo. Espero que captes la
idea.
Hay otra forma de hacer todo esto. Todas las referencias a imgenes pueden incluir su URL completa. La
URL es la direccin completa de un archivo cualquiera en la red, y cada una de ellas es nica. Por ejemplo:
http://www.servidor.net/usuario/mipagina/varios/imagenes/chef.gif
Por qu, te preguntars, utilizamos entonces las referencias URL relativas (parciales) en contraposicin a
las referencias URL absolutas (completas)? Pues porque normalmente construirs tu sitio web localmente
(lese en tu propio disco duro) y todos los enlaces funcionarn perfectamente. Cuando las pginas estn
terminadas, solo tienes que subir al servidor todo el montn de archivos y todo funcionar tal y como tenas
previsto. Adicionalmente, es ms fcil para el navegador conseguir localizar la imagen y las pginas cargan
ms rpido. Entonces, hay an alguna razn para usar una URL? Por supuesto que s, si la imagen est un
servidor completamente diferente.
PREGUNTA: En cuanto subo mis pginas a la Red, todos mis enlaces a las imgenes se
estropean, aunque en mi disco duro funcionan perfectamente. Uso URLs relativas y estoy
completamente seguro de que he subido y actualizado las imgenes, porque puedo verlas
en mi programa FTP. Qu sucede?
R: Suena a problema de maysculas/minsculas. Para un sistema basado en Windows,
Chef.gif es lo mismo que CHEF.GIF y lo mismo que chef.gif. Para un servidor de tipo
UNIX (de los que hay muchos) son tres imgenes completamente diferentes. Si le ests
diciendo al servidor que busque Chef.gif, pero lo que el servidor encuentra es CHEF.GIF,
la imagen no aparecer.
La solucin? Utiliza siempre letras minsculas para los nombres de archivo. Haz de esto
un hbito y nunca ms tendrs este tipo de problemas.
Otro hbito realmente bueno es evitar los espacios en tus nombres de archivo. Cambia los
espacios por subrayados. Cambia Mi Mamita.gif por mi_mamita.gif.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Acerca de Paint Shop Pro e IrfanView
No es ni muchsimo menos una exageracin decir que Paint Shop Pro es el Gran Abuelo y el
Padrino de los grficos web. La versin shareware completamente funcional y sin caducidad
PSP3 es una ayuda impagable para mejorar el crecimiento de la WWW, haciendo posible el
acceso a la manipulacin de grficos y a su conversin a millones de personas. Despus de una
modesta descarga de unos 2 Mb ... te convertirs en un artista de la red.
No es un secreto que slo un pequeo porcentaje de las copias se pagan, pero de todas formas el
programa se ha distribuido por todo el mundo, y a los que han pagado, muchas gracias.
Bueno, Paint Shop Pro est en la versin 6 ahora. Es una demostracin limitada a 30 das. La
versin completa vale 99 dlares. Es una aplicacin potentsima y, dlar a dlar es una de las
ms rentables. Si quieres saber ms pincha aqu.
Si eres nuevo trabajando con grficos y ests buscando un buen programa, pero que no sea muy
complicado de manejar y no tenga un tocho de instrucciones de 2000 pginas, agrrate una copia
de PSP versin 3. Esta fu la versin inicial. Hay una copia sin caducidad ah abajo
(Win95/98)...
psp312-32.zip
Toma de pantalla
Con l puedes examinar tus imgenes hasta el nivel de pxeles. Aprenders acerca de los colores,
profundidad de color, paletas, edicin bsica de imgenes, y adems convierte sin esfuerzo los
ms populares formatos de imgenes. Una vez que te familiarices con la versin 3, las
posteriores te sern mucho ms fciles de utilizar.
http://perso.wanadoo.es/catwalk/WebTutor/makapage/psp/index.html (1 of 2)11/12/2003 01:26:25 p.m.
IrfanView es un visor de grficos muy extendido. Es rpido, maneja todos los formatos de
imgenes normales (y algunos no tan normales), hace encadenamientos de fotos, conversiones de
formatos, miniaturas de fotos, reproduce videos y sonidos Y ADEMS ES GRATIS (Bueno,
postcardware en realidad. Es decir, envale una postal al autor y ser feliz).
Visita este sitio y bjatelo.
As que quieres hacer una pgina Web! - Acerca de Paint Shop Pro e IrfanView
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/psp/index.html (2 of 2)11/12/2003 01:26:25 p.m.
Gua
bsica de
HTML
Captura de pantalla de Paint Shop Pro v3
As que quieres hacer una pgina Web! - Acerca de Paint Shop Pro e IrfanView
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/psp/psp3_cap.html11/12/2003 01:27:04 p.m.
Gua
bsica de
HTML
Leccin 11
Otro atributo de la sentencia IMG que merece mencin especial es ALT...

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">
ALT es un subttulo para la imagen cuando un usuario tiene un navegador que (por la razn que sea) no
muestra imgenes. Puede que est utilizando un navegador de slo texto, puede haber cancelado la muestra
de imgenes para conseguir ms velocidad o cualquier otra cosa. En estos casos, el atributo ALT puede ser
muy importante para tu visitante.
Algo muy importante que debes saber acerca de las imgenes es el tamao.
Prueba esto...
<BODY>
<IMG SRC="chef.gif">
</BODY>
Como puedes ver, el navegador averigua el tamao de la imagen por s mismo. Por qu, entonces, andar
enredando con las dimensiones de la imagen?. Porque con las dimensiones el navegador puede reservar
espacio para la imagen y cargar el resto de la pgina. Una vez que la pgina entera ha cargado, el navegador
vuelve atrs y empieza a cargar las imgenes. Sin dimensiones, cuando el navegador llega a una imagen
tiene que hacer una pausa, cargar la imagen, y despus continuar cargando la pgina. En definitiva, el
navegador funciona mucho mejor con las dimensiones de la imagen declaradas.
Bueno Jose Angel, todo eso est muy bien pero aaaaaahhh!, para qu demonios sirve?
Prueba esto...
<BODY>
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>
<BODY>
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>
Puedes especificar las dimensiones que te parezcan, aunque no tengan nada que ver con las dimensiones
originales de la imagen. An no te percatas de para qu sirve?
Bueno, mira bien este pequeo punto rojo -> Es un cuadrado de 1x1. Mira lo que puedo hacer con l...
<BODY>
<P ALIGN="center"><IMG
</BODY>
SRC="red_dot.gif"
SRC="red_dot.gif"
SRC="red_dot.gif"
SRC="red_dot.gif"
WIDTH=500 HEIGHT=1>
WIDTH=500 HEIGHT=2>
WIDTH=500 HEIGHT=8>
WIDTH=2 HEIGHT=200>
Te ha gustado?
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 12
Ahora vamos a aprender a hacer enlaces (s, por fin!).

Es verdaderamente simple. Enlazaremos con Yahoo.
Empieza con esto...
<BODY>
Ir a Yahoo!
</BODY>
Ir a Yahoo!
Ahora aade dos sentencias de enlace.

<BODY>
Ir a <A>Yahoo!</A>
</BODY>
Ir a Yahoo!
Aade la URL y ya est!. URL es una abreviatura de Universal Resource Locator (Localizador Universal
de Recursos). Una frase rimbombante como muchas de las que usan la gente de los ordenadores. Una URL
es simplemente una direccin.
<BODY>
Ir a <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>
Ir a Yahoo!
Hagamos uno ms.

<BODY>
Ir a Netscape!
</BODY>
Ir a Netscape!
<BODY>
Ir a <A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>
Ir a Netscape!
No es fcil?.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 13
Una direccin de correo electrnico enlaza de la misma forma. Utilizaremos la direccin de correo en lugar
de la direccin de la pgina.
<BODY>
Envame un <A HREF="mailto:forrest@bubbagump.com">correo!</A>
</BODY>
Envame un correo!
Observa que en los enlaces a las pginas la direccin empieza con

HREF="http://
mientras que en las direcciones de correo se usa
HREF="mailto:
PREGUNTA: Cmo puedo aadir un Asunto a mi mensaje de correo?

R: Es muy sencillo, pero hay un truco. Puedes aadir el Asunto al enlace como sigue...
<A HREF="mailto:forrest@bubbagump.com?subject:Hola chico!">
... pero, advierte que por ah fuera hay algunos programas de correo que no saben qu hacer
con sto. Para esos programas el mensaje puede parecer enviado, cuando en realidad ha
cado en el olvido. Si crees que tus pginas las van a visitar gente que tiene ese tipo de
programas, no lo especifiques.
PREGUNTA: Cmo puedo librarme de ese odioso subrayado en mis enlaces?

R: Bien, tcnicamente no puede hacerse con HTML. Pero s puede hacerse usando Style
Sheets (Hojas de estilo). Si colocas lo siguiente entre las sentencias HEAD de tu
documento, cualquier navegador que soporte las Style Sheets puede reproducir los enlaces
sin subrayado...
<style type="text/css"><!-a:link, a:visited, a:active {text-decoration: none}
--></style>
Tambin podemos hacer que una imagen sea un enlace. Usando el ejemplo anterior de 'Ir a Netscape!',
simplemente substituiremos con sentencia <IMG> la palabra Netscape!
<BODY>
Ir a <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130
HEIGHT=101></A>
</BODY>
Ir a
PREGUNTA: Cmo te libras de ese borde azul tan feo que rodea a la imagen?
R: Simple... aade BORDER=0 (BORDE) a la sentencia IMG.
PREGUNTA: Cmo hago un enlace a un archivo cualquiera de forma que la gente

pueda bajrselo?
R: Simple tambin, haz un enlace al archivo en cuestin. Supongamos que tienes unos
pocos documentos de Microsoft Word que te gustara ofrecer. Enlaza con ellos...
<A HREF="miresumen.doc">Descargar mi resumen</A>
<BR><A HREF="mibio.doc">Descargar my autobiografa</A>
Descargar mi resumen
Descargar mi autobiografa
Te preguntars cmo ests seguro de que el archivo se grabe en el disco duro en vez de
mostrarse en la pantalla o cargarse donde sea. De hecho tienes muy poco control sobre lo
que sucede cuando un usuario descarga un archivo. La gran mayora sabe que haciendo clic
con el botn derecho lo puede grabar en el disco duro. Otros pueden tener un programilla
para manejar el archivo. Deja a la gente que lo haga como quiera. Tu trabajo es
simplemente ofrecerlo para la descarga.
Si el archivo es grande (ms de 200Kb) o una coleccin de archivos, tal vez quieras
comprimirlos y/o agruparlos en un archivo zip.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 14
PREGUNTA: Cmo puedo hacer un enlace que abra una nueva ventana del navegador?
R: Bueno, lo primero es que esto puede hacerlo fcilmente tu visitante si quiere. Todo lo que tiene que
hacer es clic con botn derecho y elegir "Abrir vnculo en una ventana nueva".
Si queremos que esta accin se produzca automticamente debes aadir TARGET="_blank" al
enlace...
Ir a <A HREF="http://home.netscape.com/" TARGET="_blank">Netscape!</A>
Hay mucho ms de esto en el Tutor de Marcos (Frames).
Te recuerdo cmo librarte del borde azul, pero ten en cuenta que a veces no es obvio que una imagen es un
enlace. Por lo que, a veces, el borde azul es til.
<BODY>
Ir a <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130
HEIGHT=101 BORDER=0></A>
</BODY>
Ir a
Una nota ms acerca de los enlaces... Es perfectamente aceptable enlazar a la pgina de cualquiera sin pedir
permiso. Los enlaces son lo que hacen que la Red sea la Red.
Ahora que ya sabes hacer enlaces, voy a decirte algo acerca de ciertas pginas que me ponen enfermo. Odio el
buscar informacin acerca de un tema y encontrarme con una pgina con 14 docenas de enlaces acerca de ese
tema, pero absolutamente nada ms. Sigues uno de esos enlaces y lo nico que consigues son MS ENLACES
a otras pginas que enlazan con otras pginas que enlazan... pero no ves ni una simple pgina que tenga lo que
ests buscando!
Si ests haciendo una pgina, por supuesto incluye enlaces si crees que le aaden inters, pero trata de no hacer
una pgina que slo consista en enlaces, enlaces y ms enlaces!.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 15
Antes de continuar, necesitamos volver a algo que hemos visto. Cuando incluyas imgenes en tus pginas
recuerda que contienen un montn de datos y pueden ser muy lentas en cargar. Una forma de reducir el
tamao (por tamao quiero decir ahora Kilobytes) es reducir sus dimensiones. Reducir las dimensiones a la
mitad produce una imagen con slo 1/4 del tamao en Kb. Tambin se puede reducir el nmero de colores.
Por ejemplo:
Dimensiones 310 x 304

Nmero de colores- 238
Tamao - 69 Kb

Tamao 34 Kb

Tamao - 19 Kb
Toda la edicin de estas imgenes se ha hecho con Paint Shop Pro.

( Una vieja versin, pero sin caducidad, est disponible aqu. Aunque es un poco antigua y no tan buena como la
ltima versin, sigue siendo un GRAN editor de grficos - PERFECTO para los nuevos autores en la red.)
Ahora veamos, la primera es una imagen grande, bonita y con mucha calidad, pero mralo de esta forma... si
tus pginas tardan mucho en cargar, los visitantes probablemente se larguen y entonces no vern nada.
Para ver cmo se pueden reducir las imgenes, prueba el Optimizador GIF inferior. T le envas una
imagen, y l te la devuelve "optimizada". Observa que el Optimizador no es parte de este tutorial. Es un
programa residente en otro ordenador. Esto es slo una interfaz, y debes estar conectado para usarlo.
Optimizador GIF
GifOptimizer es una herramiento GRATUITA, y en lnea que reduce el tamao de los archivos
GIF, hasta el 75%, permitiendo a ls pginas web cargar ms rpido. La optimizacin se
produce en cuatro pasos sencillos:
1. Sube tu imagen GIF al servidor del Optimizador.

2. Reduce el nmero de colores usado en la imagen. Este paso tambin elimina los datos
extras y los comentarios del archivo GIF.
3. Reduce la altura y la anchura de la imagen.
4. Graba la imagen optimizada GIF en tu ordenador para usarla en tu sitio web.
GifOptimizer puede reducir el tamao de las imgenes GIF hasta 150K,
incluso GIFs animados. salo tan a menudo como quieras, sin cargo.
Paso 1: Subir la imagen GIF
Archivo remoto
Si la imagen a optimizar est en alguna parte de la Red:
1. Introduce la URL en el campo inferior (Asegrate de introducir la URL de la imagen en

s, no la URL de la pgina en la que est.)
2. Pincha en el botn "Subir".
(Ejemplo: http://www.algunsitio.com/linda_imagen.gif )
http://
Subir
Archivo local
Si la imagen est en tu ordenador: (Los usuarios de Internet Explorer deben tener al menos la
versin 3.02 y los aadidos de la versin que estn disponibles aqu.)
1. Pulsa el botn Examinar.

2. Localiza la imagen GIF en tu disco duro.
3. Pincha en "Subir".
Browse...
Subir
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 16
Otra opcin que se puede utilizar, sobre todo si vas a ofrecer un montn de fotografas es hacer thumbnails
(o fotos en miniatura) que enlazan con las versiones normales de la imagen. Supongamos que quiero
ofrecer tres fotografas de, digamos tres de mis coches (qu ms quisiera yo).
Haz clic en la miniatura para ver una imagen mayor
Lo primero que necesitas hacer es arrancar tu editor de imgenes y hacer versiones ms pequeas de las que
necesites. Tambin ayudar el hecho de reducir la profundidad del color. Este punto es muy importante. He
visto a mucha gente intentando hacer una miniatura, por el simple procedimiento de reducir las dimensiones
de la sentencia <IMG>. Lo nico que hace esto es empaquetar la misma foto en un espacio ms pequeo.
Lo que necesitas es crear una copia menor de la imagen y usarla como enlace a la imagen original.
Como la mejor forma de aprender es practicar, hagamos una. Creo que utilizaremos el Corvette (es decir, el
coche azul, por si hay algn ignorante que no lo sepa). Coloca la imagen original y la imagen pequea en tu
carpeta de trabajo. Una vez ms, haz clic con el botn derecho y Guardar imagen como.
Empieza con tu sentencia <IMG>.
<BODY>
<IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62>
</BODY>
Aade las sentencias <A>.

<BODY>
<A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>
Y la URL de la fotografa original, y bingo, ya lo tienes!

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
</BODY>
Si quieres puedes eliminar el borde azul. Pero quizs quieras mantenerlo para que tus visitantes sepan que
se trata de un enlace. Es tu eleccin.

<BODY>
<A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></
A>
</BODY>
Un programa fantstico para hacer esto es ThumbsPlus. Puedes encontrar un tutorial acerca del programa
aqu.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/car2.jpg
http://perso.wanadoo.es/catwalk/WebTutor/makapage/pics/car2.jpg11/12/2003 01:31:09 p.m.
http://perso.wanadoo.es/catwalk/tp/tp1.html
Gua de ThumbPlus - Barra de navegacin

>>Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Autor
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 7
Procesos
por lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
ThumbsPlus, gua de la aplicacin

Introduccin
En estos das de pginas web y desarrollo visual de aplicaciones cualquier diseador web o
programador tiene que trabajar con archivos de imgenes. Dichas imgenes requieren
diferentes tratamientos, como recortes, cambios de tamao, copias o muchos otros. En
cualquier pgina web se generan como mnimo una o dos decenas de imgenes, a veces
cientos de ellas. Todas estas imgenes requieren visualizaciones previas, organizacin en
carpetas y estructuracin de hipervnculos. Para un manejo cmodo y rpido de las imgenes
existe ThumbPlus, una aplicacin pensada expresamente para estas realizar estas funciones.
As, el presente documento es una gua rpida de ThumbsPlus. No pretende ser una gua
exhaustiva, ya que la aplicacin es bastante completa y compleja, pero s ofrece un panorama
completo de las habilidades de la aplicacin, que son bastantes. ThumbsPlus es un visor,
localizador y organizador de grficos, que simplifica el proceso de buscar y mantener grficos,
fuentes y animaciones. Muestra una pequea imagen (thumbnail en ingls, miniatura en
espaol) de cada archivo. ThumbsPlus permite la navegacin, edicin, recortado y copiado
de imgenes, puede lanzar editores externos (como Corel o Paint) y copiar imgenes al
portapapeles. Otra utilidad es la generacin automtica de pginas web con miniaturas y sus
enlaces correspondientes. Tambin soporta arrastar y soltar e instala fuentes de Windows; por
ltimo pueden efectuarse operaciones consecutivas sobre varios ficheros mediante un proceso
por lotes, de forma automtica. Y an hay bastantes cosas ms, como impresin de archivos
http://perso.wanadoo.es/catwalk/tp/tp1.html (1 of 3)11/12/2003 01:31:46 p.m.
individuales o por grupos, conversin de formatos, mini-catlogos... En esta gua se vern las
opciones ms generales y tiles, queda para el lector el profundizar en su manejo, e investigar
otros aspectos de la aplicacin que aqu no se tratan. La mejor forma de aprender es
practicar, as que es recomendable tener este documento y la aplicacin abiertos al mismo
tiempo. A diferencia de otros tutoriales publicados por m, en ste no encontrars mi direccin
de correo, ya que no responder a preguntas relativas a esta aplicacin. Si tienes dudas
acerca de algn aspecto, ser mejor que lo investigues por t mismo. La pgina web es www.
cerious.com. All encontrars la ltima versin, documentacin adicional y las ltimas

noticias, eso s, todo en ingls.
ThumbsPlus est generalmente disponible en dos versiones, la 3.0 y la actual, que en el
momento de redactar este manual es la 5. La 3.0g1 es una versin demo algo antigua, pero
completamente funcional, y ser la que se utilice en este documento. La versin 5 es ms
completa y compleja, pero si decides migrar o actualizar a dicha versin te resultar de mucha
utilidad comprender los conceptos bsicos de uso de la aplicacin, ya que prcticamente no
han variado.
Instalacin
La aplicacin no necesita grandes requerimientos del sistema, y funcionar en cualquier
sistema Windows9x, 2000 o XP, ocupando algo menos de 5Mb. de espacio en el disco duro.
La instalacin se inicia con un doble clic en thmpls32.exe;

el archivo se adjunta a este manual.
Como es habitual se puede escoger el directorio de instalacin,

pinchando en Browse...
...y la carpeta del men Inicio. Si la casilla inferior est

marcarda, un icono de acceso directo aparecer en el
escritorio. Lo mejor es dejar las opciones que aparecen por
defecto.
En la ventana DLL Instalation Options aparecen marcadas 3

casillas. Estas casillas corresponden a la instalacin de
bibliotecas grficas necesarias para el programa. Es
conveniente desmarcarlas, con lo que las correspondientes
bibliotecas se instalarn en el directorio del programa
(tpicamente X:\Archivos de programa\Thumbs32, donde X es
la letra de la unidad raz), contribuyendo a una instalacin ms
limpia.
La aplicacin tiene los datos necesarios para instalarse, pincha
en Next (Siguiente).
En la ltima ventana desmarca la casilla Show me the

release notes (Mostrar las notas de la versin) , con lo que
finaliza la instalacin.
En el Escritorio y en Inicio->Programas->ThumbsPlus,
aparecen los iconos de acceso. Los iconos Database Utility y
Registry Utility pueden ser eliminados ya que no funcionan
con la versin demo.
La desintalacin del programa se hace de la forma habitual, Inicio->Configuracin->Panel
de Control->Agregar o quitar programas. Seleccionar ThumbsPlus y pinchar en
Agregar o quitar. El programa efectuar la desinstalacin automticamente.

Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Autor
>>Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 7
Procesos por
lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Arrancando por primera vez

Al arrancar la aplicacin aparece una ventana de bienvenida que desaparece al hacer clic o
pulsar cualquier tecla.
La ventana principal de la aplicacin tiene el aspecto que se

observa. En ella se pueden distinguir cuatro zonas:
1. Barra de herramientas: como en todas las aplicaciones
Windows, la barra donde se sitan todos los mens y opciones
de la aplicacin. La barra de iconos sirve para localizar y utilizar
rpidamente las opciones ms comunes.
2. Miniaturas: La zona principal de la ventana, donde se sitan
las miniaturas de las imgenes existentes en el directorio
seleccionado.
3. rbol de directorios: El rbol de directorios del disco duro, al
estilo del Explorador de Windows. Existe un cdigo de colores
para distinguir los directorios, cdigo que se ver
posteriormente.
4. Barra de estado: Muestra informacin variada, como la
ocupacin de disco, el tamao del directorio o el tamao de la
imagen seleccionada.
Cuando se selecciona un directorio en el rbol, en la zona de

miniaturas aparecen tantos cuadros como imgenes vlidas haya
en el directorio en cuestin. Sin embargo, estos cuadros
solamente muestran el nombre del archivo y la leyenda
Thumbnail not available (miniatura no disponible). Pichando en
el botn que muestra varios pulgares, o Thumbnail->Update
All, o Maysculas+F2, aparecern las miniaturas de las
imgenes. Si deseamos ver la miniatura de un solo archivo,
seleccionamos el archivo y pinchamos en el icono con un solo
pulgar.
Como se observa, una mini-imagen aparece en el lugar del cuadro.
Es evidente que este modo de tratar directorios que contengan
varias imgenes es mucho ms cmodo que cualquier mtodo
tradicional, sobre todo cuando se manejan directorios que
contienen decenas o cientos de imgenes. Adems puede verse
que tambin ha cambiado algo en el rbol de directorios. Antes
todas las carpetas eran de color amarillo, ahora hay carpetas
amarillas, azules y verdes. El significado de estos colores es el
siguiente:
Una carpeta amarilla indica que el programa no ha realizado ninguna
miniatura en ese directorio y sus subdirectorios.
Una carpeta azul indica que ese directorio no tiene miniaturas, pero que s
las hay en algn subdirectorio del mismo. Las carpetas Asim2 e IA no tienen
miniaturas, pero s las hay en Proyecto, que es una subcarpeta de ellas.
Una carpeta verde indica que hay miniaturas realizadas en ella.
Este sistema de colores nos permite saber de un golpe de vista dnde se situan las
miniaturas realizadas.

Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Leccin 2
Arrancando
por primera
vez
Leccin 7
Procesos
por lotes
Autor
>>Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 8
Creando una
pgina web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Bases de datos en ThumbsPlus

ThumbsPlus, a diferencia de otras aplicaciones similares, no deja rastros en los directorios en
los que se generan las miniaturas; por el contrario, utiliza una base de datos centralizada, lo
que supone grandes ventajas y algn pequeo inconveniente. Dicha base de datos se sita en
el directorio de instalacin, tpicamente X:\Archivos de programa\Thumbs32\Thumbs.tDB. Es
bastante til asociar dicha base de datos con la aplicacin.
Para hacer esto, abrir dicho directorio, seleccionar el archivo
Thumbs.tDB, y hacer clic derecho. En el cuadro de dilogo que se
abre, escoger ThumbsPlus, y asegurarse de que la casilla Utilizar
siempre este programa para abrir estos archivos est
marcada. Si se desea se puede incluir una descripcin en el cuadro
de texto que aparece en la parte superior de la ventana.
La utilizacin de la base de datos centraliza todas las miniaturas
efectuadas. Como puede verse en la barra de ttulo, la aplicacin
muestra el nombre de la base de datos abierta en este momento,
Thumbs.tDB (el nombre de la base de datos) in ThumbPlus.
El inconveniente de este sistema es que si se realizan muchas miniaturas el tamao de la base
de datos puede hacerse considerable (decenas de MB.), lo que puede llegar a ralentizar el
programa. Este efecto indeseado puede evitarse utilizando varias bases de datos.
Sin embargo hay muchas ventajas, y vamos a ver una de ellas rpidamente: supongamos que
disponemos de un CD-ROM con bastantes fotografas, cosa que empieza a ser bastante
habitual, y nos gustara disponer de todas las miniaturas del CD completo, para poder trabajar
con ellas. Pero si tenemos diferentes CD-ROMs, cada uno de ellos con cientos o miles de
fotografas, la base de datos podra llegar a ser demasiado grande. Lo ideal sera tener una
base de datos diferente para cada CD-ROM. Pues bien, hagamos una base de datos nueva, de
forma que podemos utilizar la base predeterminada (Thumbs.tDB) para el trabajo habitual, y
las nuevas bases de datos exclusivamente para nuestros CD-ROMs. Adicionalmente,
podramos grabar esta base de datos en el CD-ROM, con lo que lo tendramos todo integrado.
Pinchando en File->New Database (o Control+N), se abre
el cuadro de dilogo de la nueva base de datos. Elegiremos la
carpeta donde la vamos a guardar, y le pondremos un nombre
descriptivo, por ejemplo Fotos1. Abajo a la izquierda aparece
el tamao que tendrn las miniaturas (el predeterminado es
perfecto, salvo que utilices tamaos de pantalla exticos), y a
la derecha puede seleccionarse el formato de color. Lo mejor
es escoger 15-bit color y dejar marcada la casilla
Compressed. Si las fotos son en blanco y negro o se desea
reducir mucho el tamao de la base de datos puede elegirse
32-level grayscale. Una vez guardada la base de datos,
vemos que en la barra de ttulo aparece ahora nuestra nueva
base de datos, con todas las carpetas en amarillo, porque no
hemos efectuado ninguna miniatura con ella.
El siguiente paso ser seleccionar la unidad de CD-ROM,
pinchar con el botn derecho y elegir Scan Volume, con lo
que le estamos diciendo al programa que efecte todas las
miniaturas existentes en el volumen indicado.
Esta accin lanza el proceso de generacin de miniaturas, lo
que puede llevar bastante tiempo, dependiendo de la cantidad
y del tamao de los archivos grficos existentes. Pinchar en
Cancel, cancelar el proceso; pinchar en Background har
que el proceso siga ejecutndose, pero en segundo plano, de
forma que podamos trabajar en otras cosas mientras el
proceso realiza las miniaturas. Este cuadro de dilogo tambin
aparece cuando se ejecutan procesos por lotes, cuestin
que se tratar ms adelante.
Si hacemos un acceso directo a la nueva base de datos

(Fotos1.tDB), y previamente la hemos asociado con la
aplicacin, podremos acceder a ella directamente. Si abrimos la
base de datos SIN introducir el CD-ROM correspondiente en la
unidad, en vez de abrirse el rbol de directorios aparecer un
icono de CD con el nombre de la base de datos . En este caso
las subcarpetas aparecern en color gris oscuro, y los nombres
de los archivos tambin aparecern en gris, lo que quiere decir
que no puede accederse al archivo original. Sin embargo,
podemos seguir haciendo operaciones con la base de datos.
Autor
Leccin 1
Instalacin
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
>>Leccin
4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 6
Manipulando
archivos
Leccin 7
Procesos
por lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las bases
de datos
Leccin 10
Personalizacin
Manejando directorios
Ya se ha visto el cdigo de colores de los directorios. Ahora se vern algunas opciones ms.
. En
Si se selecciona un directorio y se hace clic derecho aparece el men contextual
dicho men hay una serie de opciones:

Expand One Level, Expand Branch y Collapse Branch expanden y contraen las
subcarpetas que cuelgan del directorio seleccionado.
Delete Directory BORRA un directorio con todo su contenido. Cuidado con esta opcin, ya
que el borrado es COMPLETO. Dado que en ThumbsPlus NO aparecen de forma
predeterminada los archivos de texto, por ejemplo, pueden ser eliminados inadvertidamente.
Particularmente recomiendo no utilizar esta opcin.
Create Directory crea un directorio nuevo, con el nombre que se introduce en el cuadro de
dilogo que se abre.
Scan Tree realiza las miniaturas de todos los archivos existentes en este directorio y en sus
subdirectorios
Remove Thumbnails elimina las miniaturas (no los archivos) de este directorio y de sus
subdirectoiros.
En el men Tree aparecen tambin varias opciones para expandir y contraer directorios
. En este mismo men, al final, aparecen unas opciones tiles: Indicate

Thumbnails, que muestra el cdigo de colores, List Thumb Dirs Only, que muestra
nicamente los directorios en los que se han realizado miniaturas y Show Offline Volumes
que tiene el efecto de mostrar los volmenes que no estn disponibles, como en el ejemplo
anterior de nuestro CD-ROM. Si la casilla no estuviera marcarda, la marca del CD-ROM Fotos1
no aparecera en el rbol de directorios.
Si hacemos clic derecho en una unidad de disco aparecen en el men contextual opciones
adicionales. Properties muestra las propiedades de volumen, y Label Disk permite poner o
cambiar la etiqueta del disco. Volume Alias asigna un alias al volumen en cuestin, de forma
que el nombre del volumen sigue siendo el mismo, pero internamente ThumbsPlus se
referir al volumen por el alias elegido.
En la barra de herramientas vemos dos iconos tiles:

El que muestra varios
pulgares realiza las miniaturas de la carpeta seleccionada. Evidentemente est desactivado si
no hay ninguna carpeta seleccionada o la carpeta seleccionada no tiene ninguna imagen. El
que muestra el icono de la unidad y una flecha debajo realiza todas las miniaturas del
volumen actualmente elegido, sin importar en qu carpeta se encuentra uno situado.
Tambin en la barra de herramientas, en Thumbnail,

tenemos varias
opciones para trabajo con volmenes (un volumen es una unidad de disco, CD-ROM o
disquette): Update all es equivalente al icono de varios pulgares, Scan Drive realiza las
miniaturas de todo el volumen, Scan Tree del directorio seleccionado y sus subdirectorios, y
por ltimo Scan System lo hace con todo el sistema. Esta ltima opcin puede llevar un
tiempo considerable y generar una base de datos gigantesca.
Las opcin Remove Tree elimina las miniaturas (no los archivos) del directorio seleccionado y
de sus subcarpetas. Remove Orphans elimina de la base de datos las miniaturas de archivos
que por alguna razn han sido borrados o movidos con otra aplicacin, por ejemplo desde el
Explorador de Windows. El nombre de estas miniaturas aparece desactivado, lo que indica que
el archivo no est disponible. Es recomendable ejecutar de vez en cuado esta accin para
mantener la base de datos limpia de miniaturas innecesarias.
Para teminar veremos cmo conectar a un volumen situado en una red: Pinchando en File>Volumes->Map Network Drive... se abre un cuadro de dilogo que nos permite enlazar
con discos situados en otros ordenadores
En Unidad elegiremos la letra que nuestra mquina le adjudicar a la unidad de red, y

pinchando en Examinar... podemos navegar por la red para buscar el disco o carpeta que
nos interese. Las opciones inferiores suponen tener algunos conocimientos acerca de la
configuracin de redes Windows, tema que est fuera del mbito de este manual. Recomiendo
desmarcar la casilla Conectar de nuevo al iniciar la sesin, si la mquina a la que se hace
referencia est generalmente apagada o no conectada a la red. Evidentemente la opcin
Disconnect Network Drive... desconecta la unidad de red.

Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Autor
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
>>Leccin 5
Manejando
archivos
Leccin 7
Procesos
por lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Manejando archivos
La operacin ms simple sobre un archivo es hacer clic sobre l, con lo que el nombre que
aparece en la parte inferior del cuadro queda marcado en azul, lo que indica que est
seleccionado
.
Para seleccionar archivos se sigue el sistema Windows:
Varios archivos consecutivos: Hacer clic en el primero, pulsar Maysculas, hacer clic en
el ltimo.
Varios archivos no consecutivos: Manteniendo pulsada la tecla Control, ir haciendo clic
en los archivos deseados.
Estas opciones pueden combinarse y, con un poco de prctica, pueden seleccionarse decenas
de archivos con unos pocos clics.
Tambin puede hacerse la seleccin de archivos mediante Edit->Select All, lo que
selecciona todos los archivos del directorio. Edit->Clear All, deselecciona todos los archivos.
La opcin Edit->Select Mask muestra un cuadro de dilogo donde se puede introducir una
mscara de bsqueda de archivos, por ejemplo: *.bmp selecciona todos los archivos con
extensin bmp del directorio.
Mi*.jpg selecciona todos los archivos que empiecen por Mi, y tengan como extensin jgp. La
ayuda de Windows proporciona ms datos acerca de cmo utilizar estas mscaras.
Para realizar la miniatura del archivo seleccionado se puede hacer clic en el icono del pulgar
, o tambin abir el men contextual, Make Thumbnail. Para eliminar la miniatura

(no el archivo), Remove Thumbnail.
Si el archivo ha sufrido cambios, por ejemplo si se ha editado y modificado, ThumbPlus
muestra un puntito rojo en la miniatura del archivo:
. Para actulizar la miniatura
pinchar en el icono con el pulgar.

Casi todas las operaciones que se pueden realizar con un archivo pueden hacerse desde este
men contextual
, por lo que nos centraremos en l. Evidentemente estas opciones
tambin estn disponibles (con algunas utilidades ms) en el men (File, Edit, Tree). Y una
observacin: si se tienen seleccionados varios archivos, estas operaciones se aplicarn a todos
los archivos seleccionados. Para terminar una operacin con un archivo y pasar al siguiente
solamente hay que pulsar el espaciador.
1. View: Muestra el archivo a su tamao real. El archivo aparece en una ventana
independiente (pueden abrirse muchas de estas ventanas), con su propia barra de
men. Lo veremos en Manipulando archivos. Un doble clic sobre la miniatura
tiene el mismo efecto.
2. Edit: Lanza el editor predeterminado para este tipo de archivo. En el caso de un archivo
bmp, Paint abrira el archivo seleccionado.
3. Properties: Muestra las propiedades del archivo

. En la pestaa Physical
aparecen los datos de tamao, modificacin, fecha de creacin, etc... En la pestaa
Details aparece el tamao en pxeles, el tipo de color y la resolucin, as como los
comentarios. Las pestaas Database y Keywords se tratarn en el apartado Ms
acerca de las bases de datos. Igualmente haremos con las opciones Annotate
y Keyword del men contextual.
4. Copy: Copia los archivos a la carpeta seleccionada, es decir, crea una copia del archivo
manteniendo el original.
5. Move: Mueve los archivos. A diferencia de la anterior, el archivo se borra de su
ubicacin original y se copia a la nueva ubicacin. Como en todos los sistemas
Windows, tambin pueden copiarse los archivos seleccionndolos, arrastrndolos al
rbol de directorios, y soltndolos en la carpeta elegida. En este caso el cursor aparece
con unos rectngulos amarillos, lo que indica que se estn arrastrando archivos. Si la
carpeta pertenece al mismo volumen el archivo se MOVER, mientras que si pertenece
a un volumen distinto el archivo se COPIAR.
6. Rename: Permite cambiar e nombre del archivo.
7. Delete: Borra el archivo, y en consecuencia la miniatura.
8. Wallpaper: Coloca el archivo elegido como fondo del escritorio.

Leccin 1
Instalacin
>>Leccin 6
Manipulando
archivos
Autor
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 7
Procesos
por lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Manipulando archivos
Una vez que hemos abierto un archivo, mediante su seleccin previa y View del men
contextual, o bien haciendo doble clic sobre la miniatura, tendremos una ventana con el
archivo y una barra de men, con cuatro opciones principales, File, Edit, Image, View
. Las exploraremos una a una.
1. File: Operaciones a realizar con archivos. Algunas propiedades de este men ya se han
visto. Otras son:
Save, guarda las modificaciones hechas en el archivo.
Save As guarda el archivo con otro nombre.
Save Selection As aparece cuando una parte de la imagen ha sido seleccionada

(ver seccin 2. Edit) e interesa guardar esa seleccin como una imagen nueva.
Reload recarga el archivo original, descartando los cambios efectuados.
Previous File y Next File cargan el archivo anterior o el siguiente
respectivamente.
Close cierra el archivo abierto, Close All cierra todos los archivos abiertos.
Print enva el archivo a la impresora.
Page Setup abre la ficha de opciones de impresin

. Margins indica
los mrgenes del papel, Print Size indica si la imagen se ajustar al tamao del
papel (Stretch to fit), si se imprime con la resolucin de la imagen (Use image
resolution), o con la resolucin de la impresora (Printer resolution). La casilla
Mantain aspect ratio mantiene las proporciones de la imagen. Desactivarla
puede provocar que la imagen se imprima distorsionada. Por ltimo Items to
Print imprime datos acerca de la imagen: Border imprime un borde, File name
imprime el nombre del archivo (con el Path o la Extensin), File size el tamao,
Dimensions las dimensiones, etc. Desmarcar todas las casillas implica que
solamente se imprimir la imagen. El botn Font... cambia la fuente con la se
imprimirn los datos antes mencionados.
2. Edit: Operaciones de edicin de archivos. Cuando abrirmos un archivo vemos que el

cursor cambia a una especie de estrella, con el que podemos seleccionar una parte la
imagen, pinchando y arrastrando. Aparece un cuadrado que nos indica la parte de la
imagen que hemos seleccionado.
Undo: Deshace la ltima operacin. Cant Undo indica que no puede

deshacerse.
Copy o Copy Selection, copia al portapapeles la imagen o la seleccin
efectuada.
Crop recorta la imagen dejando exclusivamente la seleccin y descartando todo
lo dems.
Autocrop auto-recorta la imagen. Este concepto requiere algunas aclaraciones.
Cuando una imagen sufre un proceso de redimensionamiento o de rotacin,
puede suceder que la imagen nueva no se ajuste exactamente al cuadriltero
externo de la imagen. La imagen de abajo a la izquierda es una imagen normal, y
la de la derecha una imagen que ha sufrido un proceso de transformacin,
modificando su altura o anchura. En imagen de la derecha aparecen unas zonas
negras que afean la presentacin final. Esta opcin de autocrop elimina estas
zonas negras, recortndolas y ajustando la superficie de la imagen, de forma que
aparezca igual que la imagen izquierda.
3. Clone crea un clon de la imagen, es decir abre una nueva ventana con una copia de la
imagen actual.
4. Image: Operaciones de manipulacin de imgenes. Muchas de estas operaciones
requieren algn conocimiento de los formatos grficos y de las peculiaridades de las
imgenes, por lo que no se entrar en profundidad en su anlisis.
Adjust
abre la ficha de ajustes de color, donde puede ajustarse el
brillo, contraste, saturacin, balance de colores y luminosidad (gamma) de la
imagen. El botn Clear elimina las operaciones efectuadas, Last vuelve a la
ltima operacin, Cancel sale sin guardar, y View muestra los cambios. OK
acepta los cambios. Dentro de la pestaa Gamma, la casilla Disable Monitor
correction desactiva la correccin de luminosidad del monitor si estuviera
activada.
Depth
abre la ficha de ajustes de profundidad de color. Puede
elegirse desde un bi-nivel (blanco-negro bsico) pasando por 16, 64, 256 colores
o color verdadero (Truecolor). Con Custom puede elegirse el nmero de
colores. En Palette hay 17 paletas diferentes para elegir. Se recomienda la
Optimized (8-bit median cut) para archivos normales a color, Grayscale para
pasar a blanco y negro y Web (Netscape/Explorer) para las imgenes cuyo
destino final sea una pgina web. Tambin pueden establecerse los diferentes
tipos de mezcla (Dither), y ajustar el nivel de ruido. Preview muestra una
previsualizacin de los cambios efectuados.
Rotate & Resize

abre la ficha de rotaciones y cambios de
tamao. En New Size hay una serie de tamaos predeterminados para las
imgenes, o bien pueden introducirse la Anchura (Width) y la altura (Height) en
los cuadros de dilogo que hay debajo. Rotation angle indica el ngulo de giro
que se puede aplicar a la imagen, y Zoom Percentage el zoom que se puede
aplicar. Background color fija el color de fondo si las operaciones efectuadas
dejan una imagen resultante con un tamao menor del fijado. Esta opcin no es
necesaria si se activa la casilla Autocrop after resize, que recortar
automticamente la imagen, ajustndola al cuadro, tal y como se ha visto
anteriormente. En Interpolation se recomienda fijar o Best for sizing o Bilinear. Por ltimo Aspect Fit determina las dimensiones de la imagen a retocar.
Si se elige Both puede fijarse la anchura y la altura. Si se elige Width puede
fijarse la anchura, pero no la altura (Height aparece desactivada), y lo
equivalente sucede con Height. Esta opcin resulta muy til si se quiere cambiar
el tamao de varias imgenes y sabemos que la altura mxima va a ser 600
pxeles, por ejemplo, para fijar imgenes de fondo para el escritorio. Se ver
cmo hacer esto en la seccin Procesos por lotes. Boundig Box ajusta el
tamao final de la imagen de forma que tenga las mismas dimensiones que la
imagen original. Esta opcin solamente est disponible para giros (las opciones
Width y Height se desactivan). Resulta particularmente til cuando desea
girarse una imagen rectangular.
Swap Red & Blue intercambia el rojo por el azul, mientras que Invert hace el
negativo de la imagen y Count Unique colors cuenta los colores de la imagen.
Turn and mirror gira la imagen 90, 180 o 270 grados, sin tener que entrar en el
apartado Rotate&Resize, y mediante Flip Verticaly y Flip Horizontaly se
puede invertir la imagen vertical y horizontalmente respectivamente.
Filter y Process proporcionan filtros y efectos variados. Estos apartados

requeriran un manual expreso para ellos, as que no se entrar en su
descripcin. En todo caso, puedes ir probando y ver por t mismo qu hace cada
efecto.
5. View: Establece las diferentes vistas posibles de la imagen.
Full Screen muestra la imagen a pantalla completa.
Autosize window redimensiona la ventana actual al tamao de la imagen.
Maintain aspect ratio mantiene la imagen sin distorsiones si se cambia el

tamao de la ventana.
Zoom fija el aumento de la imagen, Zoom In aumenta y Zoom Out disminuye,
Zoom to Fit All o F6 fuerza a que la imagen quepa en la pantalla si es mayor, y
Zoom to Fit Width fuerza a que la imagen se ajuste a la anchura de la pantalla.
Wallpaper fija la imagen como fondo del escritorio, centrado (Centered),
apilado (Tiled), lo elimina (Remove), o ajustado (Stretched).
Toolbar muestra/oculta una barra de herramientas compuesta por botones de
acceso rpido, y Status line muestra/oculta la barra de estado.
Autor

Leccin 1
Instalacin
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 6
Manipulando
archivos
>>Leccin
7
Procesos
por lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Procesos por lotes

Una de las caractersticas ms potentes y tiles de ThumbsPlus es su capacidad para
procesar mltiples archivos. Si seleccionamos varios archivos, podemos ir al men y pinchar
en Edit->Batch Convert/Edit. Se abre un cuadro de dilogo donde tenemos muchas
opciones. En principio todas las casillas de verificacin estn desmarcadas. Cuando se
selecciona alguna opcin de las disponibles la casilla de verificacin correspondiente queda
marcada. Evidentemente puede haber varias casillas marcadas. Hay que tener algo de
cuidado, ya que ThumbsPlus guarda las opciones utilizadas en el cuadro de dilogo para la
prxima vez, lo que puede crear efectos indeseados. Si no estamos seguros de lo ltimo que
hicimos lo mejor ser desmarcar todas las casillas antes de empezar. Veamos la utilidad de
estas casillas una por una:
1. Output format: Selecciona el formato de salida. Muy til para pasar masivamente
archivos bmp a formato jpg, por ejemplo.
2. Filter: Filtros y efectos variados.
3. Misc: Funciones varias, como rasterizacin, autorecorte, inversiones...
4. Resize: Todas las opciones de cambio de tamao y rotacin de imagen vistas
anteriormente en Rotate & Resize.
5. Color: Operaciones de ajuste de color (vistas en Adjust).

6. Color Depth: Operaciones de profundidad de color (vistas en Depth).
7. Output path: Directorio final donde se guardarn los archivos resultantes. Same dir
guarda en el mismo directorio. Specific dir guarda en el directorio elegido mediante el
botn Browse (Navegar).
8. Overwrite existing files: Si est marcada los archivos se sobreescribirn. No es muy
conveniente dejarla marcada salvo que se est completamente seguro del resultado, o
bien si el formato de salida es diferente del original. Puede dejarse marcada si, por
ejemplo, las imgenes se van a guardar en formato jpg, mientras que las originales
estn en formato bmp. Lo mejor es enviar las imgenes resultantes a un directorio
nuevo donde se puedan comprobar, de forma que siempre se disponga de las imgenes
originales.
Como ejemplo de proceso batch, supongamos que tenemos 10 imgenes en formato jpg, de
tamaos variados, que queremos utilizar como imgenes de fondo de nuestro escritorio, que
tiene 800x600 de resolucin. Unas imgenes miden 900x1000, otras 500x700 y otras tienen
formatos an ms raros. Nos interesa que todas las imgenes midan 600 pxeles de altura,
para que entren completamente en el escritorio y queden igualadas, mientras que la anchura
de cada imagen evidentemente variar en consonancia, con lo que cada imagen tendr una
anchura diferente. Una opcin sera cambiar el tamao de las imgenes una a una, lo que
como mnimo es tedioso y probablemente dara lugar a algunos errores. As que usaremos un
proceso batch:
Guardaremos todas las imgenes en un directorio, por ejemplo

D:\Fotos.
Abrimos ThumbsPlus y seleccionamos el directorio en

cuestin. Si queremos ver las miniaturas, ya sabemos cmo
hacerlo, pinchando en los pulgares.
Menu->Edit->Select All o Control+A, con lo que

seleccionamos todas las imgenes.
Menu->Picture->Batch Converter/Edit o Control

+Entrar, con lo que se abre la ventana del editor batch.
En Output Format seleccionamos bmp.
Hacemos clic en Resize, con lo que abriremos la ventana

correspondiente. En Aspect Fit seleccionamos Height, con lo
que la casilla Width se desactiva; en Height introducimos 600
y marcamos la casilla Autocrop after resize, para que la
imagen se recorte automticamente y no queden bordes. Nos
aseguramos de que Rotation Angle est a 0 y Zoom
Percentage a 100. Aceptamos para volver a la ventana del
editor batch.
Observamos que la casilla de verificacin correspondiente a
Resize est ahora marcada, y que adems aparece una breve
descripcin de las operaciones a realizar. En Output Path
seleccionamos Same Dir, ya que el formato de salida no va a
ser el mismo de entrada y los archivos resultantes sern
diferentes a los originales. De todas formas para asegurarnos
de que no sobreescribimos desmarcamos la casilla Overwrite
existening files.
Pinchamos en OK, con lo que el proceso batch se lanza, y
ThumbsPlus muestra una pantalla con el progreso del
proceso. Si se produjera algn error, ThumbsPlus mostrar
una descripcin del mismo en la parte inferior. Dichos errores
pueden guardarse en un fichero de texto pinchando en Save
errors.
Por ltimo si miramos en el directorio veremos nuestros

archivos antiguos en formato jpg y los nuevos archivos en
formato bmp.

Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Autor
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 7
Procesos
por lotes
>>Leccin
8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Creacin de una pgina web

Una de las utilidades ms interesantes de ThumbsPlus es la posibilidad de crear una pgina
web con mltiples fotos. En estas pginas aparecen precisamente una serie de miniaturas; si
se hace clic en una de ellas se puede ver la foto a tamao original. La ventaja de este tipo de
pgina es evidente: las miniaturas miden generalmente entre 3 y 5 KB., lo que hace que la
carga de la pgina sea muy rpida, permitiendo al visitante seleccionar exclusivamente
aquellas fotos que desea ver, sin obligarlo a descargar todas las fotos. Este manual se ha
hecho siguiendo esa idea. En general, para crear una pgina de este tipo se requieren ciertos
conocimientos del cdigo HTML y hacer las miniaturas, que es un proceso largo y tedioso.
ThumbsPlus incluye un asistente que facilita enormemente todo el proceso. Como en la
seccin anterior lo veremos con un ejemplo, paso a paso. Supongamos que tenemos 10
fotografas, las cuales deseamos que aparezcan en miniatura en una pgina web, y queremos
tambin que se genere un enlace (o hipervnculo), de forma que al pinchar sobre la miniatura
se pueda ver la imagen original. Y por supuesto, supondremos que no tenemos ni idea de
cmo se escribe el cdigo HTML necesario. Vamos por partes:
Nuestra carpeta de inicio ser D:\Fotos, y

tendremos 10 imgenes en formato jpg,
numeradas del 1 al 10. Abrimos
ThumbsPlus y seleccionamos el directorio
en cuestin. Si no tuviramos las miniaturas
generadas, y quisiramos verlas, ya sabemos
cmo hacerlo, pinchando en los pulgares.
Menu->Thumbnail->Web Page Wizard

o Maysculas+F8, con lo se nos abre el
asistente para pginas web.
Podemos seleccionar cuatro estilos diferentes

para la pgina en Web page style, y en
Page name prefix podemos introducir el
nombre que tendr nuestra pgina. A dicho
nombre se le aadir la extensin .htm, de
forma que si elegimos como nombre
Mi_pagina, el resultado final ser Mi_pagina.
htm. Con la opcin Thumbnail table only
la pgina resultante solamente contendr las
miniaturas y sus correspondientes enlaces,
sin adornos adicionales. En general la
dejaremos desmarcada. Pinchar en
Siguiente.
En esta ventana podremos elegir el nmero
de columnas (columns) que tendr la
pgina, y el nmero de filas (rows). Border
size determina el ancho que tendr el borde
que rodear a las miniaturas. En nuestro
caso dejaremos el nmero de columnas en 5,
y bajaremos el nmero de filas a 2, 5 por 2,
diez, las fotos que tenemos. Es importante
resaltar una cuestin: Supongamos que
tenemos 100 fotos y queremos que
aparezcan 20 por pgina. Simplemente
seleccionaremos, por ejemplo, 5 columnas y
4 filas. ThumbsPlus generar
automticamente 5 pginas de 20 fotos cada
una, incluyendo los enlaces entre las pginas

no es fantstico?. Las pginas se llamarn,
por ejemplo, Mi_pagina1.html, Mi_pagina2.
html, etc...
En esta ventana podemos elegir la anchura y
altura de las miniaturas (Thumbnail Width
y Thumbnail Height). Los tamaos
predeterminados son perfectos.
En Format podemos elegir el formato de
salida de las miniaturas. Salvo excepciones
(por ejemplo, que todas las imgenes sean
dibujos) dejaremos Jpeg. En Jpeg Quality
podemos escoger la calidad de la miniatura.
Tambin podemos dejar la predeterminada.
Ser mejor desmarcar la casilla Include
Low-res, porque si la dejamos marcada se
nos generarn dos series de miniaturas: las
'normales' y otra serie en baja resolucin,
que hoy por hoy ya no usa nadie, y que no
hacen ms que ocupar espacio.
Por ltimo, la casilla Use original files if
smaller... indica que se utilicen las
imgenes originales como miniaturas si son
ms pequeas que el tamao de la
miniatura. (Me pregunto: si la imagen
original es ms pequea que la miniatura,
para qu vas a hacer miniaturas?). Anda,
pincha en Siguiente.
Nuestras opciones aqu son: All files in

current folder, que proceder con todos los
archivos de la carpeta, o Selected files
only, que proceder exclusivamente con los
archivos seleccionados. Para que esto
funcione, evidentemente tendramos que
haber seleccionado previamente los archivos.
Como nuestro caso es el primero no nos
preocupamos. Si estuviramos en el segundo
caso, cancelaramos el asistente,
seleccionaramos los archivos y volveramos a
lanzar el asistente.
La casilla Copy files to destination folder
copia los archivos a la carpeta de destino.
til exclusivamente si se van a almacenar los
archivos en carpetas distintas a los
originales, cosa que no recomiendo ya que
requiere un conocimiento exacto de qu se
est haciendo. Lower case file names
fuerza a que todos los nombres aparezcan en
minsculas y Netscape compatible file
names hace que los nombres sean
compatibles con el estndar. Esta opcin es
til si se tienen nombres largos, con
espacios, acentos, etc. En general, todas
desmarcadas. Siguiente.
En esta ventana podemos elegir la
informacin que se visualizar en la pgina
web, adems de la miniatura: En el orden en
que aparecen: Nombre del archivo; tamao
en KB.; altura y anchura; fecha de
modificacin; palabras clave; notas. En este
caso elegiremos el nombre y las
dimensiones. Siguiente.
En Heading podemos poner un texto que

aparecer en la parte superior de la pgina,
por ejemplo: Chicas guapas. En
Comment, el texto aparecer entre el texto
anterior y las miniaturas. Por supuesto
podemos dejarlos en blanco. Hay que
resaltar que dependendiendo del estilo que
se use, la colocacin de los textos en la
pgina puede variar. En Home Page URL
podemos incluir la URL de nuestra pgina
principal, en general lo dejaremos en blanco.
Ahora viene una bifurcacin. Podemos elegir
Same URL/Folder..., lo que har que todo
vaya a parar a la misma carpeta (fotos
originales, miniaturas y documento(s) html),
o Custom URLs/Folder... con lo que
podremos elegir las carpetas de destino de
cada uno de los componentes. Esta segunda
opcin solamente se recomienda para
usuarios expertos que sepan exactamente
qu sucede con los hiperenlaces generados,
y cmo manejar las carpetas resultantes.
Como puedes ver en las capturas
adyacentes, en el primer caso solamente
daremos la ruta de una carpeta, mientras
que en el segundo caso tendremos que
suministrar rutas para cada una de las
carpetas. Nosotros elegiremos el primer
caso. Pinchando en el botoncito que hay al
lado de la ruta de la carpeta se nos abrir
una ventana donde podremos elegir su
ubicacin. Nosotros lo guardaremos todo en
D:\Fotos. Por cierto, hay que hacer doble clic
para abrir la carpeta o nos quedaremos en la
carpeta de nivel superior. Siguiente.
Una carpeta
Varias
carpetas
Seleccionar
carpeta
Carpeta
seleccionada
Si marcamos la casilla que aparece en esta

ventana, nuestro navegador predeterminado
se abrir mostrando el resultado en cuanto
ThumbsPlus procese las imgenes.
Finalizar.
Aparece el progreso de la tarea, ya visto
anteriormente, y por ltimo se nos abre el
navegador, mostrando el resultado.
Como vemos, ahora nos han aparecido unas
copias de las imgenes, las cuales llevan
todas el prefijo tn_, que indica que son
miniaturas generadas por ThumbsPlus.
Tambin han aparecido las imgenes
relacionadas con el estilo que se ha elegido,
en este caso Wood.
Aunque en ThumbPlus no aparece, en el
directorio D:\Fotos, tenemos un documento
html llamado Page.html.
El resultado final. Como podes ver tenemos
una pgina totalmente funcional con unos
pocos clics y sin preocuparnos de escribir
una sola lnea de cdigo html.
Una caracterstica muy cmoda es que ThumbPlus 'recuerda' cules han sido los datos que
se han facilitado para generar la pgina, con lo que la prxima vez que lancemos el asistente,
ya tendremos muchos datos colocados automticamente, y solamente tendremos que hacer
pequeas modificaciones. Sin embargo, cualquiera que tenga algo de experiencia haciendo
documentos html, descubrir pronto que este sistema se le queda pequeo. Pues bien, hay
otra ventaja: Puedes utilizar ThumbsPlus simplemente para generar las miniaturas (lo que ya
es una ventaja), y hacer t mismo el cdigo html. De todas formas descubrirs que el cdigo
generado por ThumbsPlus es muy claro, legible y estructurado, sobre todo si no incluyes
ninguna informacin adicional en las ventanas previas, por lo que puedes utilizar copiar (o
cortar) y pegar e incluir solamente la tabla con las miniaturas en tu documento.
Autor

Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Leccin 2
Arrancando
por primera
vez
Leccin 7
Procesos
por lotes
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 8
Creando
una pgina
web
>>Leccin
9
Ms acerca
de las
bases de
datos
Leccin 10
Personalizacin
Ms acerca de las bases de datos (claves y bsquedas)

Ya se ha visto cmo crear una base de datos, ahora veremos algunas cuestiones
adicionales acerca de las bases de datos. Supongamos la base de datos que creamos para
nuestro CD-ROM de fotos, y supongamos que dicho CD-ROM tiene 3000 fotografas, las cuales
estn organizadas en varias carpetas, cada una de las cuales contiene las fotos efectuadas en
un mes determinado (esta organizacin es tpica de sistemas como XP, y tambin de los
programas de las cmaras digitales). En el mes de Enero hemos hecho fotos de paisajes,
modelos y coches. En el mes de Febrero slo hemos hecho fotos de paisajes, y en el mes de
Marzo las hemos hecho de modelos y coches.
Enero
Febrero
Paisajes
Paisajes
Marzo
Modelos
Modelos
Coches
Coches
Sera interesante poder ver todas las fotos de paisajes que hemos hecho, independientemente
de la carpeta en la que estn, o dicho de otro modo, independientemente del mes en que las
hicimos. Pero hemos visto que ThumbsPlus est orientado a carpetas, de forma que si
estamos en la carpeta de Enero, no podemos estar viendo al mismo tiempo la carpeta de
Febrero (salvo que tengamos dos instancias del programa abiertas al mismo tiempo, claro,
pero esta no es la idea). Esta cuestin puede resolverse con las palabras clave o keywords.
Una palabra clave es un identificador que ThumbsPlus asocia a uno o ms archivos, de
forma que cuando se efecta una bsqueda con dicha palabra clave, ThumbsPlus muestra
todos los archivos asociados a dicha palabra clave, independientemente de la carpeta o
volumen en que se encuentre. Observa algo sumamente importante: una palabra clave puede
estar asociada a archivos ubicados en diferentes carpetas, volmenes, discos duros, disquettes
o CD-ROMs. Aunque el CD-ROM no est en la unidad de CD-ROM, ThumbsPlus mostrar las
miniaturas asociadas, aunque como hemos visto, no se puede trabajar con el archivo
original. La potencia de este concepto es tremenda. Imagina simplemente que el nmero de
fotos es muy grande, o que ocupan mucho espacio, y que las tienes en 3 o 4 CD-ROMs.
Utilizando las palabras clave, puedes trabajar con TODAS las miniaturas, SIN tener que
introducir los CD-ROMs. Una facilidad aadida es que utilizando las palabras clave, podremos
trabajar exclusivamente con las miniaturas seleccionadas por las palabras clave, dejando al
lado todas las dems.
Por ejemplo, la situacin ms normal es la siguiente: quieres localizar un paisaje determinado,
pero no sabes en qu CD-ROM lo tienes. Puedes ir introduciendo un CD-ROM tras otro hasta
que lo localices (siempre estar en el ltimo, claro...). O puedes abrir tu base de datos de
ThumbsPlus, introducir la palabra clave "paisajes" y ThumbsPlus te mostrar todas las
miniaturas referentes a paisajes. Localizas la foto entre las miniaturas y ThumbsPlus te dir
directamente en qu CD-ROM la tienes.
Sin embargo hay que tener siempre presente una cuestin: Las palabras clave se asocian a
archivos, pero siempre dentro del contexto de la base de datos. Esto quiere decir que
cada base de datos trabaja con sus propias palabras clave. En otras palabras, si tenemos dos
CD-ROMs, y cada uno de ellos tiene su propia base de datos, dichas bases de datos son
incompatibles entre s.
Y una ltima puntualizacin: un archivo puede tener asociadas una o ms palabras clave. Si
tenemos fotos de coches, podemos asociar como palabras clave la marca del coche, por
ejemplo, Ferrari, Mini y los colores, rojo, verde. Si hacemos una bsqueda con Ferrari nos
aparecern todos los Ferrari que hay , sean rojos o verdes. Si hacemos una bsqueda con rojo
nos aparecern todos los coches rojos, sean Ferraris o Minis. Por ltimo, si hacemos una
bsqueda utilizando Ferrari y rojo, solamente nos aparecern los Ferraris de color rojo. Como
puedes ver, una utilizacin inteligente de las palabras clave nos puede ahorrar un montn de
trabajo.
Como ejemplo, vamos a asociar palabras clave a las

fotos que hemos utilizado para hacer la pgina web.
Abrimos nuestra carpeta D:\Fotos, y en primer lugar
seleccionamos los archivos a los que les vamos a
asociar las palabras clave.
Si hacemos clic derecho, podemos seleccionar
Keyword... del men contextual, o bien ir al men,
Picture->Assign Keywords..., o pulsar Control
+K.
Se abre una ventanita que nos permite introducir la
palabra clave. Observa que ThumbsPlus nos indica
a cuntos archivos se les va a asignar la palabra
clave, en nuestro caso a 6. Pulsa OK para hacer la
asignacin.
Lo haremos otra vez. Observa que ahora solo
aparecen dos archivos seleccionados, y que si
pinchamos en la flechita que hay al lado del cuadro
de texto, ThumbsPlus nos muestra las palabras
clave ya existentes.
En total asignaremos la palabra clave Brasileas a 6
archivos, Espaolas a 2 archivos y Americanas a 2
archivos. Adems las dividiremos en Rubias (3
archivos) y Morenas (7 archivos). Otra forma de
asignar palabras clave es mediante el icono de
propiedades (marcado con el crculo rojo), o bien en
el men, Picture->Properties, o bien F6.
En la pestaa Keywords nos aparecen las palabras
clave asociadas a dicho archivo. El botn New nos
permite aadir palabras clave con el proceso descrito
anteriormente y el botn Delete nos permite borrar
una palabra clave si nos hemos equivocado como en
el ejemplo. Si hemos seleccionado varios archivos
podemos pasar de uno a otro pulsando el
espaciador.
Ahora seleccionaremos las imgenes segn las

palabras clave. En principio tenemos todos las
miniaturas. Nos vamos al men y elegimos Picture>Find o bien Control+F.
Visualizaremos las Rubias para empezar, as que
pinchamos en la flechita para que nos aparezcan
todas las palabras clave, seleccionamos Rubias y
pinchamos en Find.
ThumbsPlus nos muestra en la parte inferior de la
ventanita cuntas coincidencias ha encontrado, en
este caso 3 (3 matches, sobre los botones Close y
Help). Vemos que ahora se activa el botn Show. Si
lo pinchamos, vemos que solamente aparecen los
tres archivos correspondientes a las rubias. Hagamos
lo mismo con las morenas. Como puedes ver, el
sistema de trabajo sigue siendo el mismo, pero
ahora solamente nos aparecen los archivos que nos
interesan, lo que es mucho ms cmodo.
Demos un paso ms; ahora localizaremos las que
son morenas y brasileas. Observa que he
seleccionado la opcin All (y lgico), con lo que
solamente aparecen las miniaturas que cumplen
ambas condiciones. Si seleccionamos la opcin Any
(o lgico), vemos que aparecen las que cumplen una
de las dos condiciones.
Observa tambin que hemos trabajando en el
directorio D:\Fotos. Si cambiamos al directorio raz, y
hacemos lo mismo vemos que tambin funciona. Es
decir, cuando trabajamos con palabras clave, es
indiferente el directorio en el que estemos situados.
til, no?.
Para volver al modo normal de ThumbsPlus,
simplemente pincha en Close.
Un detalla es que las palabras clave solamente hacen referencia a la base de datos de
ThumbsPlus, los archivos originales no se ven afectados de ninguna manera por aadir o
quitar palabras clave.
Por ltimo veremos como podemos operar sobre el conjunto de palabras clave. Si nos vamos
al men,
Options, Database, Edit Keywords... podemos trabajar con las
palabras clave. Al seleccionar palabras clave ThumbsPlus nos indica cuntas palabras clave
se han selccionado y a cuntos archivos afectan. Podemos editar, borrar, aadir palabras
clave, en resumen hacer una gestin completa de las palabras clave.

Leccin 1
Instalacin
Leccin 6
Manipulando
archivos
Autor
Leccin 2
Arrancando
por primera
vez
Leccin 3
Bases de
datos en
ThumbsPlus
Leccin 4
Manejando
directorios
Leccin 5
Manejando
archivos
Leccin 7
Procesos
por lotes
Leccin 8
Creando
una pgina
web
Leccin 9
Ms acerca
de las
bases de
datos
>>Leccin 10
Personalizacin
Personalizacin
Ahora que ya sabes manejar ThumbsPlus (porque ya sabes no?). Si no sabes ms te vale
volver al principio), vamos a ver cmo configurar y personalizar el programa. En el men,
Options,
vemos que hay dos grupos de opciones, divididas por una barra.
Empezaremos con las inferiores, que configuran el modo en que ThumbsPlus mostrar las
miniaturas y sus atributos:
1. Thumbnail size, permite ajustar el tamao con que se ver la miniatura en %.
2. Sort by ordena los archivos por nombre (Name), tipo (Type), tamao (Size), fecha
(Date). Descencing los muestra en orden inverso.
3. Show for files muestra diferentes atributos de los archivos, como la miniatura
(Thumbnail), el nombre (Name), la fecha (Date)...
4. Which files indica qu archivos se mostrarn. All files muestra todos los archivos,
inlcuyendo los que no son grficos. Si se selecciona, la opcin cambia en el men a
Selected Files. Hidden muestra los arhchivos ocultos, y Child Folders muestra
tambin las miniaturas de las subcarpetas que cuelgan de la actual.
En las opciones superiores ya hemos visto Database. Save Startup Settings guarda las
configuraciones de inicio del programa.
Las otras cuatro opciones abren cada una su propia ventana de configuracin. Empezaremos
por las ms fciles:
Font
muestra las diferentes opciones de fuentes disponibles, debes estar muy
familiarizado con este tipo de ventana.
File Loading...
nos ofrece diferentes opciones para la carga de los archivos
grficos, como por ejemplo, mostrar las animaciones de los archivos gif, o la profundidad de
color a aplicar a las imgenes jpg. En general, recomiendo que no se toque ninguna de estas
opciones (ni de las anteriores) salvo que sepas bien lo que ests haciendo, o que tengas
necesidades muy especficas, en cuyo caso ya sabrs a qu atenerte. Las dos opciones
siguientes, sin embargo, son mucho ms interesantes.
Customize Toolbar
nos permite configurar la barra de herramientas a nuestro
gusto. Si pinchas en el botn aparece una descripcin de su funcin en la seccin Button

action. El significado de dichos botones lo puedes ver aqu:
Para agregar un botn a la barra de herramientas, pincha en el botn y sin soltar,

arrstralo a la barra de herramientas. Puedes colocarlo donde quieras.
Para quitar un botn pincha en dicho en la barra de herramientas, y sin soltar,
arrstralo a la ventanita de configuracin. El botn desaparecer de la barra de
herramientas.
Ahora la barra de herramientas tiene unos botones diferentes

. Como hemos
seleccionado la casilla Text on buttons observa que ahora aparece una descripcin de los
botones debajo de los iconos, desgraciadamente en ingls. La casilla Large buttons marcada
muestra los botones grandes, desmarcada muestra los botones ms pequeos.
Si pinchas en el botn External Program se abre una ventana
que te permite
escoger un programa
y su icono, y configurarlo para su apertura (nuevamente slo
para usuarios avanzados). Una vez que aceptamos aparece en la barra de herramientas el
icono de lanzamiento del programa.
No olvides pulsar OK para salir de la ventana y validar los cambios. Si pulsas Cancel todo se
quedar como estaba.
Ahora investigaremos en la ventana Preferences (Preferencias).

Se enumeran
todas las pestaas y dentro de cada una de ellas se describen las funciones ms importantes y
tilies en el orden en que aparecen en la ventana.
General: Automatically Crop Images recorta las imgenes automticamente,

cuando se copian al portapapeles, cuando se hacen las miniaturas y cuando se ven.
Default action determina la accin que se har con las imgenes, verlas, copiarlas al
portapapeles o editarlas. Save files in guarda los archivos por defecto en el directorio
actual, o en la ltima localizacin. La casilla Show orphaned thumbnails muestra
incluso las miniaturas que ya no estn asociadas con archivos (porque stos se hayan
borrado) y las miniaturas de volmenes que estn fuera de lnea, lo que hace que el
programa vaya ms lento. Automatically remove orphaned thumbnails elimina
automticamente las miniaturas sin asociar, lo que contribuye a mantener limpia la base
de datos. Use Windows95 recycle bin... enva los archivos borrados a la papelera de
reciclaje, en vez de borrarlos directamente.
Startup: Initial Folder determina la carpeta en la que se abrir ThumbPlus, por
defecto en la ltima abierta. Si se elige Specific folder puede especificarse en qu
carpeta se desea que se abra. Lo mismo sucede con Initial Database, slo que esta
vez se hace referencia a la base de datos que se abrir por defecto. Remember
window size and position recuerda el tamao y la posicin de la ventana y
Remember folder tree size and options recuerda la carpeta y sus opciones.
File Types: Los tipos de archivo que ThumbsPlus abrir aparecen seleccionados.
Como puedes ver la lista es bastante completa. El botn New te permite crear tipos de
archivo que no vengan predeterminados (ya tienen que ser raros) y Configure te
permite eso, configurar la forma en que se abrirn los archivos. Te pondr un ejemplo:
En Windows hay unos archivos llamados logo.sys, logos.sys, etc. Dichos archivos no son
ms que mapas de bits que se utilizan para mostrar las pantallas de inicio y final de
Windows. Dado que estos archivos son mapas de bits son equivalentes al formato bmp.
As que pinchas en bmp y seleccionas New, en el cuadro Extension escribes sys, y en
A partir de
el cuadro Equivalent to type eliges .bmp Windows Bitmap).
ahora puedes ver y tratar dichos archivos sys exactamente igual que un mapa de bits
de Windows.
File List: Order by indica por qu concepto vas a ordenar los archivos en la ventana
de ThumbPlus, y Descending lo har en sentido inverso. Show for each file
mostrar en la ventana principal los datos que elijas. Thumbnail Display Size ajusta
el tamao de la miniatura al tanto por ciento que elijas. Include hiddden files incluye
los archivos ocultos.
Colors: En esta seccin puedes establecer el cdigo de colores de los directorios en
lnea (On line folder colors) y fuera de lnea (Offline folder colors). Puedes
ponerlos a tu gusto. Si te equivocas o no te gusta la combinacin que has hecho pincha
en Use Default Colors y volvers a los colores originales.
Confirmations: Cundo y para qu debe ThumbPlus pedir confirmacin. Deleting
files, para borrar archivos; Copying files para copiarlos; Moving files para moverlos;
Overwrite existing files para sobreescribir archivos; Deleting directories that
aren't empty para borrar directorios que no estn vacos; Deleting system or
hidden files, para borrar archivos de sistema u ocultos.
Viewing: Puedes elegir el tipo de cursor. En Initial size eliges el tamao inicial de la
ventana (automtico, pantalla completa, maximizada y minimizada). Initial Stretching
te permite seleccionar el modo de visin de las imgenes (sin ajustar, ajustar a la
ventana, reducir a la ventana, y ajustar en anchura). Maintain aspect ratio mantiene
la proporcin de las imgenes sin distorsionarlas, y Maximum number of open view
windows te permite fijar el nmero mximo de ventanas de imgenes que puedes
tener abiertas al mismo tiempo.
Slide Show: O presentacin. Muestra a pantalla completa las fotos seleccionadas con
un retardo fijado. Dicho retardo lo puedes seleccionar en Delay between slides (en
segundos). Si pinchas en Control manually tendrs que pinchar con el ratn, o pulsar
el espaciador o Enter para ir pasando las imgenes. Background color fija el color de
fondo. Stretch bitmaps to screen ajusta la imagen a la pantalla (agrndadola si es
necesario, la imagen, no la pantalla), y Reduce bitmaps to screen hace lo mismo,
pero reducindola si es necesario. Maintain aspect ratio muestra la imagen sin
distorsin y Hide cursor oculta el cursor.
Monitor: Aqu puedes ajustar el valor de la luminosidad del monitor. Desplaza el botn
deslizante que aparece en la parte superior hasta que el cuadro gris central se confunda
con el rea adyacente.
Keywords: Te permite generar palabras clave automticamente, por el nombre
completo, por palabras en el nombre del archivo, desde comentarios, por el tipo de
archivos, por los atributos. La casilla From IPTC keywords debe permanecer marcada.
Advanced: Configuracin del tamao mximo de los diferentes cachs y algunas otras
cosillas. No toques nada si no ests seguro de lo que haces.
http://perso.wanadoo.es/catwalk/tp/Capturas/personal1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/personal1.jpg11/12/2003 01:34:19 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/botones1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/botones1.jpg11/12/2003 01:35:28 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/botones2.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/botones2.jpg11/12/2003 01:35:41 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/personal6a.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/personal6a.jpg11/12/2003 01:36:47 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/personal6b.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/personal6b.jpg11/12/2003 01:37:10 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/personal6c.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/personal6c.jpg11/12/2003 01:37:34 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/personal7a.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/personal7a.jpg11/12/2003 01:38:04 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/personal7b.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/personal7b.jpg11/12/2003 01:38:30 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/keywords1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/keywords1.jpg11/12/2003 01:38:58 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/keywords6b.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/keywords6b.jpg11/12/2003 01:41:40 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/keywords6a.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/keywords6a.jpg11/12/2003 01:42:03 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/web1.jpg11/12/2003 01:46:16 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web8a.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/web8a.jpg11/12/2003 01:50:23 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web8b.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/web8b.jpg11/12/2003 01:50:51 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web10a.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/web10a.jpg11/12/2003 01:51:39 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web10b.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/web10b.jpg11/12/2003 01:52:03 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web16.jpg (1 of 2)11/12/2003 01:55:40 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/web16.jpg (2 of 2)11/12/2003 01:55:40 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/batch.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/batch.jpg11/12/2003 01:56:17 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/directorio_fotos.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/directorio_fotos.jpg11/12/2003 01:56:42 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/fotos_selected.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/fotos_selected.jpg11/12/2003 01:57:08 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/fotos_selected_2.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/fotos_selected_2.jpg11/12/2003 01:57:32 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/batch1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/batch1.jpg11/12/2003 01:57:57 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/proceso.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/proceso.jpg11/12/2003 01:59:06 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/resultado.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/resultado.jpg11/12/2003 01:59:36 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/menu_archivo.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/menu_archivo.jpg11/12/2003 01:59:57 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/page_setup.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/page_setup.jpg11/12/2003 02:00:15 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/autocrop.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/autocrop.jpg11/12/2003 02:00:31 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/adjust.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/adjust.jpg11/12/2003 02:00:41 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/depth.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/depth.jpg11/12/2003 02:00:50 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/rotate.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/rotate.jpg11/12/2003 02:01:00 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/archivo_seleccionado.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/archivo_seleccionado.jpg11/12/2003 02:01:14 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/select_mask.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/select_mask.jpg11/12/2003 02:01:32 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/una_miniatura.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/una_miniatura.jpg11/12/2003 02:01:37 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/punto_rojo.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/punto_rojo.jpg11/12/2003 02:01:54 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/archivo_derecho.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/archivo_derecho.jpg11/12/2003 02:02:11 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/properties.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/properties.jpg11/12/2003 02:02:24 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/menu_context.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/menu_context.jpg11/12/2003 02:02:43 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/tree.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/tree.jpg11/12/2003 02:02:47 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/dos_iconos.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/dos_iconos.jpg11/12/2003 02:02:56 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/Thumbnail.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/Thumbnail.jpg11/12/2003 02:03:06 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/map_network.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/map_network.jpg11/12/2003 02:03:20 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/asociar.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/asociar.jpg11/12/2003 02:03:29 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/titulo_base_datos.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/titulo_base_datos.jpg11/12/2003 02:03:48 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/nueva_base1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/nueva_base1.jpg11/12/2003 02:04:01 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/off-line.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/off-line.jpg11/12/2003 02:04:37 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/ventana_principal.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/ventana_principal.jpg11/12/2003 02:05:02 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/hacerthumbs1.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/hacerthumbs1.jpg11/12/2003 02:05:16 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/hacerthumbs2.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/hacerthumbs2.jpg11/12/2003 02:05:30 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/instalacion0.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/instalacion0.jpg11/12/2003 02:05:47 p.m.
http://perso.wanadoo.es/catwalk/tp/Capturas/menu_inicio.jpg
http://perso.wanadoo.es/catwalk/tp/Capturas/menu_inicio.jpg11/12/2003 02:06:42 p.m.
Leccin 17
FAQ: Mis enlaces de imgenes tienen unos pequeos guiones al lado. Tambin hay
espacios entre ellos y me gustara que desaparecieran para que las imgenes estuvieran
contiguas. Y no lo entiendo porque todo funciona bien en el navegador A pero no el B.
R: Algunos navegadores (casi todos?) interpretan un retorno de carro entre las imgenes
como un espacio. Unos pocos navegadores no lo hacen as. Es muy simple. La pequea
lnea azul es simplemente el subrayado del enlace en un espacio en blanco. La cura es
eliminar el retorno de carro que pueda haber justo antes o justo despus de la imagen.
Este es el cdigo para las imgenes superiores:
<CENTER>
<A HREF="myhome.html">
<IMG SRC="pics/myhome.gif"
WIDTH="66" HEIGHT="23"
BORDER="0" ALT="Inicio">
</A>
<A HREF="mailto:me@my.house">
<IMG SRC="pics/myemail.gif"
BORDER="0" ALT="Email">
</A>
<A HREF="mylinks.html">
<IMG SRC="pics/mylinks.gif"
BORDER="0" ALT="Enlaces">
</A>
</CENTER>
Ahora haremos desaparecer las lneas azules:
<CENTER>
<A HREF="myhome.html"><IMG
SRC="pics/myhome.gif"
BORDER="0" ALT="Inicio"></A>
<A HREF="mailto:me@my.house"><IMG
SRC="pics/myemail.gif"
BORDER="0" ALT="Email"></A>
<A HREF="mylinks.html"><IMG
SRC="pics/mylinks.gif"
BORDER="0" ALT="Enlaces"></A>
</CENTER>
Y con otro pequeo ajuste tambin desaparecen los espacios:
<CENTER>
<A HREF="myhome.html"><IMG
SRC="pics/myhome.gif"
BORDER="0" ALT="Inicio"></A><A
HREF="mailto:me@my.house"><IMG
SRC="pics/myemail.gif"
BORDER="0" ALT="Email"></A><A
HREF="mylinks.html"><IMG
SRC="pics/mylinks.gif"
BORDER="0" ALT="Enlaces"></A>
</CENTER>
Es una molestia? Slo si no entiendes lo que pasa ni cmo arreglarlo. El navegador A es

un desastre? No necesariamente, slo es diferente del navegador B. Los navegadores a
veces hacen cosas diferentes con el mismo cdigo.
Otra forma de hacer enlaces es enlazar no con una pgina, sino con una parte especfica de la misma
pgina. Para ser mgicamente transportado a donde hablamos por primera vez de las URLs, haz clic aqu
(recuerda que ests en la leccin 17). Como esto puede ser muy complicado de hacer como ejemplo, te
explicar directamente cmo se ha hecho.
Primero empezaremos con el punto dnde la gente va a ir a parar. Elige una palabra y envulvela en
sentencias <A>.
<A>Aade</A> la URL y ya est!
Ahora dale al punto elegido un NAME (NOMBRE).

<A NAME="llegada">Aade</A> la URL y ya est!
Lo que acabas de hacer es marcar el punto en cuestin. Ahora ese punto puede ser enlazado.
Empieza a construir el enlace.

Haz clic <A>aqu</A> para ser mgicamente transportado...
Aade el documento de referencia...

Haz clic <A HREF="leccin06.html">aqu</A> para ser mgicamente
transportado...
Y por ltimo, aade la sentencia NAME que has elegido...

Haz clic <A HREF="lesson06.html#llegada">aqu</A> para ser mgicamente
transportado...
Y esto es todo! No es exactamente ciruga neurocerebral verdad?
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 18
Ya hemos hecho un montn de trabajo. Manipulacin de textos y fuentes, imgenes, enlaces. Para las
cuestiones bsicas, esto es casi todo lo que hay que aprender.
Ahora vamos a hablar de las resoluciones de pantalla. Mi pantalla puede tener 640 pxeles por 480 pxeles
como mnimo. Muchos otros usan 800x600 y unos pocos (aunque cada vez ms) usan 1024x768. Y estoy
seguro de que hay por ah unas pocas resoluciones ms. Para qu sirve esto?. Tiene mucho que ver con el
aspecto futuro de tus pginas, cuando se muestren en otras pantallas, que es para lo que las ests haciendo.
Aqu hay unas tomas de una pgina a diferentes resoluciones.
640480
800600
1024768
Es una buena idea comprobar tu pgina en diferentes resoluciones. Tu pgina tan cuidadosamente diseada
puede aparecer fatal a diferentes resoluciones. Especialmente si diseas tu pgina en alta resolucin y luego
la ves a baja resolucin. Te sorprenders. Para los usuarios de Windows95 hay un juguetito de MS
Powertoy llamado Quickres que te permite cambiar de resolucin de pantalla fcilmente.
Ahora veamos un par de herramientas de formateo disponibles. La primera es <BLOCKQUOTE>

(BLOQUE DE FORMATO). En la mayora de los navegadores comprime los bordes laterales, manteniendo
el texto tal cual est. (No s si sta es la terminologa correcta, pero si entiendes lo que digo es bastante
aproximado). Como ves el texto inferior se pierde por la parte derecha de la pantalla, lo que te obliga a
utilizar la barra inferior de desplazamiento.
Espaa se constituye en un Estado social y democrtico de Derecho, que
propugna como valores superiores de su ordenamiento jurdico la
libertad, la justicia, la igualdad y el pluralismo poltico.
Pero si aadimos las sentencias <BLOCKQUOTE>,
<BODY>
<BLOCKQUOTE>
Espaa se constituye en un Estado social y democrtico de Derecho, que
propugna como valores superiores de su ordenamiento jurdico la
libertad, la justicia, la igualdad y el pluralismo poltico.
</BLOCKQUOTE>
</BODY>
conseguimos el siguiente efecto:
Espaa se constituye en un Estado social y democrtico de Derecho, que propugna

como valores superiores de su ordenamiento jurdico la libertad, la justicia, la
igualdad y el pluralismo poltico.
Estoy seguro de que cuando la sentencia <BLOCKQUOTE> fu

desarrollada tena un propsito muy diferente, como poder
reproducir tal cual profundos escritos en prosa de autores de los
que nunca he odo hablar. Pero aqu, en las trincheras, tiene una
utilizacin mucho ms mundana.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Informacin de Quickres
Slo para Windows95 (No para Windows 98/NT*)

En estos momentos, parece que Quickres slo est disponible en el sitio de Microsoft como
parte del paquete MS Powertoys para Win95. Como gran parte del paquete es muy til, tal
vez te interese bajrtelo todo (209Kb) desde este sitio...
MS Powertoys en www.microsoft.com
Para el componente Quickres exclusivamente (39Kb), esta bsqueda FTP te dar un montn
de sitios para poder bajrtela...
Quickres (quik_res.exe)
Instalarlo puede resultar un poco complicado. Primero haz doble clic en quik_res.exe. Esto
desempaquetar dos archivos: Quickres.exe y Quickres.inf. Puedes utilizar Quickres.exe
inmediatamente (esto es, sin instalarlo con Quickres.inf). Prueba, no le vas hacer dao a
nadie. Cuando arranque el programa aparecer un pequeo monitor en la barra de tareas
inferior. Si pinchas una vez aparecer un men.
Si no funcionara, haz clic con el botn derecho del ratn en Quickres.inf y elige instalar.
Ahora viene cuando la matan. El programilla de instalacin puede que no encuentre el
programa, as que tendrs que ayudarle. Slo tienes que dirigirlo hacia la carpeta en la que
hayas descomprido los archivos y marcarlo. Eso es todo.
La instalacin crear un acceso directo en el men de Inicio, as que si no quieres que se
arranque cada vez que enciendes el ordenador, muvelo a algn otro sitio. Tampoco hay un
comando "Exit" (o Salir). El programa no se puede apagar. Para pararlo tienes que pulsar
CTRL+ALT+DEL, elegir Quickres en el men y pinchar en Finalizar tarea.
* Con Windows98 puedes cambiar la resolucin del monitor fcilmente. Haz clic con el
botn derecho en el escritorio y elige Propiedades. Elige Configuracin y abajo a la
derecha puedes cambiar el modo de pantalla. En Configuracin, Avanzada marca Mostrar
icono en la barra de tareas y conseguirs que aparezca la pantallita en la derecha de tu
barra de tareas. Si haces clic con el botn derecho puedes cambiar la resolucin de la
pantalla.
http://perso.wanadoo.es/catwalk/WebTutor/makapage/quickres.html (1 of 2)11/12/2003 02:08:36 p.m.
Diseo Web Profesional - Informacin de Quickres
As que quieres hacer una pgina Web! - Informacin de Quickres

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/quickres.html (2 of 2)11/12/2003 02:08:36 p.m.
Gua
bsica de
HTML
Leccin 19
Otra herramienta muy til es LIST(LISTA). Hay listas ORDERED(NUMERADAS) y listas UNORDERED
(SIN NUMERAR).
Esta es una lista numerada
1.
2.
3.
4.
algo grande
algo pequeo
algo corto
algo largo
Esta es una lista sin numerar
algo rojo
algo azul
algo viejo
algo nuevo
Primero construiremos una lista UNORDERED(SIN NUMERAR). Es realmente facilongo, de verdad.

Empieza con esto...
<BODY>
Lo que quiero para Reyes
</BODY>
Nota: tcnicamente no hemos empezado a construir la lista an. Esto es slo el encabezamiento.
Aade un par de sentencias de lista sin numerar.

<BODY>
<UL>
</UL>
</BODY>
Aade una entrada a la lista.

<BODY>
<UL>
<LI>un gran camin rojo
</UL>
</BODY>
un gran camin rojo
Aade unas pocas ms...

<BODY>
<UL>
<LI>una lancha rpida
<LI>una batera
<LI>una ametralladora
<LI>una Adriana Skleranikova
</UL>
</BODY>
un gran camin rojo

una lancha rpida
una batera
una ametralladora
una Adriana Skleranikova
Bingo! Ya has hecho una lista!
Cmo hacer una lista numerada Fcil! Cambia la sentencia <UL> por <OL>.
<BODY>
<OL>
<LI>una lancha rpida
<LI>una batera
<LI>una ametralladora
<LI>una Adriana Skleranikova
</OL>
</BODY>

1.
2.
3.
4.
5.
un gran camin rojo

una lancha rpida
una batera
una ametralladora
una Adriana Skleranikova
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 20
Otro tipo de lista es la lista definida.

aardvark
Esto es un mamfero africano que parece un oso hormiguero. Y, como todo el mundo sabe, la
primera palabra en cualquier diccionario respetable (es broma).
Empieza con esto...

<BODY>
<DL>
</DL>
</BODY>
Ahora aade un ttulo definitorio...
<BODY>
<DL>
<DT>Artculo 3:
</DL>
</BODY>
Artculo 3:
Aade una entrada.

<BODY>
<DL>
<DT>Artculo 3:
<DD>1. El castellano es de lengua espaola oficial del Estado. Todos
los espaoles
tienen el deber de conocerla y el derecho a usarla.
</DL>
</BODY>
Artculo 3:
1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles tienen el
deber de conocerla y el derecho a usarla.
Como toque final me gustara poner el ttulo en negrita. No es obligatorio, claro, pero creo que queda
mucho mejor.
<BODY>
<DL>
<DT><B>Artculo 3:</B>
<DD>1. El castellano es de lengua espaola oficial del Estado. Todos
los espaoles
tienen el deber de conocerla y el derecho a usarla.
</DL>
</BODY>
Artculo 3:
1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles tienen el
deber de conocerla y el derecho a usarla.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 21
Hay otra sentencia que encontrars muy til, y que se utiliza muy a menudo. Es la Lnea Horizontal.
<BODY>
<HR>
</BODY>
Tenemos unas pocas opciones disponibles...

<BODY>
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
Los grficos hablan por s mismos.

<BODY>
<HR WIDTH=60% ALIGN="left">
<HR WIDTH=60% ALIGN="right">
<HR WIDTH=60% ALIGN="center">
</BODY>
Tambin podemos controlar el grosor de la lnea...

<BODY>
<HR WIDTH=60%
<HR WIDTH=60%
<HR WIDTH=60%
<HR WIDTH=60%
</BODY>
SIZE=1>
SIZE=3>
SIZE=8>
SIZE=15>
Y podemos hacer una lnea slida.

<BODY>
<HR WIDTH=60%
<HR WIDTH=60%
<HR WIDTH=60%
<HR WIDTH=60%
</BODY>
SIZE=1 NOSHADE>
SIZE=3 NOSHADE>
SIZE=8 NOSHADE>
SIZE=15 NOSHADE>
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 22
Recuerdas que dije que el navegador no entenda el formato?. S, dije que slo mostraba el texto en una
lnea contnua, algo as como esto
<BODY>
///\\___
(@ @)
+----oOO----(_)-----------+
|
JOSE ANGEL
|
|
|
|
Presidente
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</BODY>
///\\___ (@ @) +----oOO----(_)-----------+ | JOSE ANGEL | | | | Presidente | +----------------oOO-----+ |__|__| || || ooO Ooo
Bien, con la sentencia <PRE> (PREFORMATO) podemos evitarlo y hacer que el navegador muestre las
cosas tal y como las hemos tecleado en el Bloc de Notas.
<BODY>
<PRE>
///\\___
(@ @)
+----oOO----(_)-----------+
|
JOSE ANGEL
|
|
|
|
Presidente
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
</BODY>
///\\___
(@ @)
+----oOO----(_)-----------+
|
JOSE ANGEL
|
|
|
|
Presidente
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
Perctate de que se ha usado una fuente de espaciado uniforme.
La ltima sentencia que vamos a discutir es el comentario.

<BODY>

Esto no lo es
<P>Un comentario puede ser colocado en cualquier lugar del documento y
el
navegador ignorar todo lo que hay entre las marcas de inicio y final.
Puedes insertar mensajes ocultos,  notas para t mismo,
 o escribir un mensaje de ayuda para alguien que
est
leyendo el cdigo de tu pgina.
</BODY>
Esto no lo es
Un comentario puede ser colocado en cualquier lugar del documento y el navegador ignorar todo
lo que hay entre las marcas de inicio y final. Puedes insertar mensajes ocultos, notas para t mismo,
o escribir un mensaje de ayuda para alguien que est leyendo el cdigo de tu pgina.
Para dejarlo absolutamente claro, el comentario debe empezar con 
Puedes (y se hace a menudo), colocar sentencias dentro del comentario, aunque sern ignoradas. El
navegador simplemente ignorar todo lo que haya hasta que vea un -->
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Leccin 23
Bien, con esto hemos terminado. Ya conoces todas las sentencias bsicas que necesitas para crear una
pgina web. Que no son muchas? Seguro. Si hay ms? Desde luego. Muchsimas ms. Pero te aseguro
que tienes el armamento bsico que necesitas. Una vez que hayas asimilado, comprendido y
PRACTICADO con todas estas sentencias, puedes empezar con los tutoriales ms avanzados: Tutor de
Tablas, Tutor de Formularios y Tutor de Marcos (Frames). Estos tutoriales te darn unos pocos trucos
ms para que los aadas a tu caja de herramientas de publicacin. Adems de todo eso hay unas cuantas
sentencias que son redundantes; sentencias que tienen un uso especializado pero que, en la prctica,
duplican muchas de las presentadas aqu; hay unas cuantas pasadas de moda y otras pocas con un uso
limitadsmo. Y por supuesto estn aquellas pocas de uso especfico de un navegador (es decir, que slo
funcionan en uno).
En otra parte del tutorial hay una separata con el lenguaje estructural (prrafos, listas, tablas, etc.) y con el
lenguaje de presentacin (colores, fuentes, etc.). El resultado, en parte, ha sido una introduccin a las style
sheets (hojas de estilo). Aunque comprender el funcionamiento de las style sheets no es necesario en
absoluto para hacer pginas web, constituye un rea donde quizs te interese expandir tus estudios.
Una de las cosas ms interesantes que se pueden hacer en una pgina es conseguir que hagan cosas. Puedes
investigar el fascinante mundo de JavaScript y aprender a escribir mini programas para insertarlos en tus
pginas. Es un poco ms complejo que el HTML, pero en breve espero terminar un Tutor de JavaScript,
con el que podrs adquirir una base slida. Adems hay docenas de sitios que ofrecen cdigo JavaScript de
"copiar y pegar", absolutamente gratis.
Mencion al principio del tutorial lo que pensaba acerca de los editores de HTML. En mi opinin, los
mejores editores no son del tipo SuperAutomtico, ya sabes, esos que dicen que puedes hacer una pgina
sin escribir ni una lnea de cdigo. El problema es que, y lo he visto en un montn de pginas, realmente
parecen como si el autor no tuviera la ms mnima idea de HTML. Y eso no es lo peor. Si un problema
aparece (y aparecern), alguien con un conocimiento bsico de HTML puede resolverlo en dos patadas,
mientras que alguien que se ha acostumbrado a utilizar esos editores no tendr ni idea de cmo hacerlo.
Adems esos editores no pueden hacerlo todo. Ciertos diseos (o layouts) slo se consiguen escribiendo el
cdigo a mano.
Los autores ms experimentados utilizan siempre un editor basado en texto. Lo que hacen este tipo de
editores es presentar una serie de sentencias, que puedes elegir con un simple clic. As que no tienes que
teclear los cdigos, LEFT, RIGHT, CENTER o lo que sea, evitando en gran medida los errores
TIPOGRFICOS. Y tienes un absoluto control sobre el diseo de la pgina. Algunos (todos gratuitos) estn
en la Lista de Editores Gratuitos de HTML. Todo lo que tienen en comn es que debes saber algo de
HTML. Ellos te facilitarn el trabajo de hacer el cdigo. No intentarn hacer la pgina por t.
Una vez que has terminado tus pginas, debes subirlas al servidor. El servidor es un ordenador que ejecuta
un programa que muestra documentos a todo quel que los solicita. Para ver una gua de ayuda a la hora de
subir tus pginas, chale un ojo a Subiendo tus pginas.
Y para terminar, puedes aprender algo acerca del estilo y del contenido de las pginas web en Las 10
mejores maneras de saber si tienes una paginucha.
Buena suerte, y feliz HTML!

<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Lista de Editores de HTML
Lista de Editores Gratutos de HTML

Antes de gastarte una pasta en uno de esos que te prometen el oro y el moro,
prueba alguna de stos. Todos son muy buenos y absolutamente gratis*.
Qu demonios!, prueba dos o tres. Los juguetes son para jugar.
Notetab Lite
Arachnophilia
(Altamente recomendado)
First Page 2000
Homesite v1.2
Este enlace apunta a una copia
de una vieja versin freeware. La nueva
versin muy mejorada es shareware y
est aqu.
CodeEdit
Web-O-Rama
HTML Pad
Este enlace apunta a una copia
de una vieja versin freeware. La
nueva versin shareware est aqu.
xSite
(Nota - se requiere IE4
para
conseguir que algunas
sentencias
funcionen)
* Al menos lo eran cuando los puse en esta lista.
As que quieres hacer una pgina Web! - Lista de Editores de HTML

Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/list/index.html11/12/2003 02:11:44 p.m.
Gua
bsica de
HTML
Leccin 24 - ltima!
Aquhay una lista de material que tal vez te interese.
Tutor de Tablas, Tutor de Formulariosy Tutor de Marcos (Frames)
Cuando hayas aprendido bien todo lo bsico y quieras aadir unos pocos componentes de alto
octanaje a tus pginas, estos tres tutoriales te ensearn paso a paso todas las sentencias necesarias.
Psimo; Malo, malo; Mejorando y Consejos extra contiene algunos consejos y trucos para mejorar tus
pginas.
Botones mgicos y otros efectos especiales
Cmo cambiar imgenes cuando pase el ratn por encima, y otros trucos interesantes.
Otros sitios donde puedes encontrar ms ayuda en la creacin de documentos HTML:
Joe Barta, el autor, en ingls, claro
CyberCursos
Directorio y Buscador de Recursos gratutos
HTML Goodies (en ingls, pero magnfico)
Programacin en Castellano
The World Wide Web Consortium (La Casa Madre del HTML)
Tienes alguna pregunta?
"Cmo puedo hiperenlazar los archivos de sonido con una Base de Datos y empaquetarlos para
una descarga automtica?" Bueno, casi todo, a excepcin de la idiotez anterior, ha sido preguntado
y...por supuesto ha recibido su respuesta. Mira aqu para ver las FAQs (Frequently Asked
Questions - Las preguntas ms frecuentes) de este tutorial y enlazar con otras listas excelentes de
FAQs.
Quieres hacer una sugerencia? Oigmosla.
<-- Atrs
As que quieres hacer una pgina Web! - Leccin 24 - ltima!
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Professional & Tutoriales de HTML - Preguntas ms comunes
Sitios FAQ excelentes en la Red (en ingls)

FAQ = Frequently Asked Questions - Preguntas ms frecuentes
Web Design Group - Web Authoring FAQ

irt.org HTML FAQ
Scott Brady's "Unofficial" Official alt.html FAQ
John Gann's Just the FAQs please
Aprende tambin a utilizar Power Search at DejaNews. DejaNews (or Deja.com como se
llaman a s mismos ahora) es un almacn de debates de USENET (grupos de noticias).
Cualquier pregunta que tengas acerca de la creacin de pginas web seguramente se ha
debatido ya en alt.html y en puado de otros grupos similares. Haz una pequea bsqueda y
encontrars lo que andas buscando.
FAQs hechas/respuestas en este tutorial

Qu demonios es el Bloc de Notas y dnde puede encontrarlo?

He visto pginas en las que la imagen de fondo est fija, y el resto se desliza sobre esta
imagen. Cmo puedo hacer eso?
Cmo puedo saber la ALTURA y la ANCHURA de una imagen?
En cuanto subo mis pginas a la Red, todos mis enlaces a las imgenes se estropean.
Uso URLs relativas y estoy completamente seguro de que las he subido y actualizado,
porque puedo verlas en mi programa FTP. Qu sucede?
Cmo puedo aadir un Asunto a mi mensaje de correo?
Cmo puedo librarme de ese odioso subrayado en mis enlaces?
Cmo te libras de ese borde azul tan feo que rodea a la imagen?
Cmo hago un enlace a un archivo cualquiera de forma que la gente pueda bajrselo?
http://perso.wanadoo.es/catwalk/WebTutor/other/faqs.html (1 of 3)11/12/2003 02:12:42 p.m.
Cmo puedo hacer un enlace que abra una nueva ventana del navegador?
Mis enlaces de imgenes tienen unos pequeos guiones al lado. Tambin hay espacios
entre ellos y me gustara que desaparecieran para que las imgenes estuvieran
contiguas. Y no lo entiendo porque todo funciona bien en el navegador A pero no el B.
Puedes recomendarme algn buen editor gratuito de HTML?
Puedo hacer de alguna manera que las fuentes se instalen en el ordenador de mis
visitantes, de forma que puedan usar automticamente las fuentes que yo uso?
Vale, ya he hecho mi pgina. Ahora Cmo la coloco en Internet?
Tutor de Tablas
He hecho una tabla y he includo las dimensiones, pero la tabla no se muestra

correctamente. Lo que se ve bien en el navegador A no va bien en el navegador B.
He hecho mi pgina usando SperCoderWeb y va fenomenal en el navegador A pero es
completamente invisible en el navegador B. Qu pasa?
Por qu hay espacios en mis tablas (o entre mis imgenes) Cmo puedo hacer que la
imagen A est perfectamente unida a la imagen B?
Cuando pulso el botn Enviar, lo nico que consigo es que aparezca un nuevo mensaje
de correo para enviar. Qu estoy haciendo mal?
Puedo utilizar una imagen para un botn Enviar?
Puedo hacer un botn que enve al visitante a otra pgina?
Cmo puedo enviar a mi visitante a otra pgina, justo despus de que me haya
enviado mi formulario?
Procuro hacer mis frames sin bordes, pero en el Navegador A aparece una delgada
lnea entre los frames. Cmo puedo eliminarla?
Puedo cargar 2 marcos con un slo clic?

Tabla General
de Contenidos
de JavaScript
Gua
bsica de
HTML
Diseo Web Profesional - Sube tus pginas
As que quieres hacer una pgina

Web!
Sube tus pginas
Ante todo, procura entender que el procedimiento de subir tus pginas a Internet puede variar enormemente.
Tus circunstancias pueden ser ligeramente (o muy) diferentes a las explicadas aqu. Y ten en cuenta que
todo esto puede ser muy confuso para los principiantes. De hecho puede ser enormemente frustante al
principio. Pero lo conseguirs, no te desanimes y lo conseguirs.Como hay bastante confusin en lo
referente a este tema, veremos una serie de cuestiones previas y aclararemos algunos conceptos:
Lo primero es lo primero: para qu tengo que "subir" mis pginas?. Bien, "subir" una pgina significa que
los archivos, imgenes y dems cosas que tanto trabajo te ha costado hacer deben ser visibles para el resto
de la gente, al fin y al cabo para eso se hace una pgina. Esto se consigue "subiendo" (es decir, copiando)
esos archivos a un ordenador permanentemente conectado a Internet, vulgo servidor.
Hoy hay bastante gente que dispone de conexiones ADSL, lo que les permite estar conectados las 24 horas,
pero esta conexin por s sola no es suficiente. Adems necesitas un servidor de pginas web, un software
especial que enva los archivos solicitados a los navegadores. Sevidores de este tipo son Apache (muy
usado en entornos UNIX, aunque tambin hay una versin para Windows), IIS (especfico de Windows, y
disponible en las versiones 2000), y PWS (tambin especfico de Windows y disponible para W98), y
algunos ms que no citar. No es objeto de este tutorial explicar el funcionamiento de este software
(bastante complejo por otro lado), as que confiaremos en los servidores que hay disponibles. As que ya
sabemos que necesitamos un servidor, bien, y dnde consigo uno?. Para empezar puedes ir a tu ISP (el
proveedor que te facilita el acceso a Internet, ya sea mediante ADSL o mediante mdem). Generalmente los
ISP conceden algo de espacio a sus clientes (desde 5 hasta 50 MB., depende) de forma gratuta, as que no
te compliques la vida. Consulta las pginas de ayuda de tu ISP, donde encontrars toda la informacin
necesaria. Si necesitas ms espacio o quieres alojar pginas en otros sitios, hay por ah bastantes servidores
que te ofrecen espacio gratis (a cambio de poner algo de publicidad en tu pgina, claro). Si te decides por el
espacio de tu ISP, tu nombre y contrasea de acceso a Internet sern suficientes para acceder al servidor, si
te decides por otro servidor, tendrs que darte de alta en el servidor en cuestin, eligiendo un nombre de
usuario y una contrasea. Todos estos servidores tienen una pgina para efectuar este proceso y te pedirn
ms o menos datos.
Por qu utilizar un servidor de pago cuando hay por ah montones de sitios que te ofrecen espacio gratis?. Bueno,
http://perso.wanadoo.es/catwalk/WebTutor/makapage/upload.html (1 of 5)11/12/2003 02:13:50 p.m.
hay varias razones: Tal vez necesites un servidor que te proporcione soporte para pginas ASP, o para conectar con
bases de datos, lo cual no hace ninguno gratuto. Es posible que quieras ejecutar programas (CGI's, comnmente), lo
que tampoco est al alcance de los servidores gratutos, o tal vez necesites mucho espacio. En general, los sitios
comerciales necesitan cierto tipo de procesos CGI's (pasarelas de pago, envo de correos, pginas de agradecimiento,
procesamiento de listas de correo, e infinidad de cosas ms) que no estn disponibles en los servidores gratutos.
El siguiente paso es decidir qu tipo de sistema vas a utilizar para subir tus archivos. En general hay dos
sistemas:
1. Mediante navegador web; el mtodo es bastante intuitivo y en el servidor te proporcionarn toda la
informacin necesaria. Por tanto no es necesario que sigas leyendo, aunque el resto del documento te
puede aclarar algunas ideas.
2. Mediante un programa FTP; un mtodo mucho ms verstil y potente, que ser el que se explique en
este tutorial.
Por ltimo queda la cuestin de los dominios. Todo el mundo quiere que se pueda acceder a su pgina
tecleando http://www.midomino.com, pero en realidad lo que tienes es una direccin tipo http://perso.
wanadoo.es/catwalk/WebTutor/Index.html (o ms larga y extraa an). Para disponer de una direccin
como la primera, llamada dominio, es necesario registrar dicho dominio. No es necesario disponer de un
dominio para acceder a las pginas, ni mucho menos, as que si la dirccin larga te vale, sltate el resto del
prrafo, pero si quieres tener una direccin cortita y fcilmente recordable, lo interesante es hacerse con un
dominio. En Internet no pueden existir dos nombres de dominio iguales, as que lo primero es averigurar si
el dominio que quieres est disponible. En segundo lugar hay que registrar el dominio en un registrador
oficial. Esto puede hacerse por un ao o por ms (cinco por ejemplo) y los precios oscilan, por ejemplo, un
dominio .com es ms barato (por ahora) que uno .es. Para registrar el dominio necesitas adems dos DNS y
algunos requisitos ms que no se explicarn aqu. Si ests interesado en un dominio, en el sitio web del
registrador encontrars la informacin necesaria. Por ltimo, no te fes de las ofertas a la hora de contratar
un dominio. Confa en un registrador autorizado que har las cosas en tiempo y forma, aunque tengas que
pagar algo ms.
Bueno, hechas estas apreciaciones, continuemos. Ya que tus documentos (o directorios) tienen una
estructura especfica en tu disco duro, recuerda que la mejor manera de no perderte es copiar esa estructura
en el servidor. Al fin y al cabo el servidor es igual a tu pequeo cacharro (en trminos generales). Ahora
necesitars alguna informacin.
Algo ms antes de empezar. Tu ISP (Internet Services Provider - Proveedor de Servicios de Internet, es
decir el servidor al que probablemente vas a subir las pginas, y que te da acceso a la Red) es muy posible
que tenga pginas de ayuda para estas cuestiones. Mira en su sitio web primero y prueba a encontrarlas. No
es necesario decir, que si las encuentras, debes seguir sus instrucciones y no las mas, aunque este tutorial te
puede ayudar a aclarar las ideas.
Dicho esto, lo primero que necesitas es lo que se llama un programa FTP. FTP es File Transfer Protocol o
Protocolo de Transferencia de Archivos, y es el mtodo que se usa para trasladar archivos de un lugar a
otro en Internet. Un programa FTP (o cliente FTP) es simplemente es una interfaz grfica agradable que se
superpone a las viejas lneas de comando, algo parecido a lo que supuso el entorno Windows sobre MSDOS. El que usaremos aqu es un programa gratuito llamado FTP Explorer. (Para Win95/98). Puedes
descargarlo ah:
http://www.ftpx.com/
Descrgalo e instlalo antes de seguir. Si al acceder a su pgina no sabes dnde hacer la descarga, busca
Downloads, habitualmente arriba a la izquierda y pincha ah. Aparecer una pantalla nueva con el nombre
de FTP y algunos ms, pincha en FTP y ya est (hay un parche adicional en esa misma pgina que traduce
el programa al espaol).
Otra cosa que necesitas saber es la direccin FTP de tu servidor, tu nombre de usuario y tu contrasea. Tu
nombre de usuario y tu contrasea debes saberlas, ya que son las que utilizas para conectar a Internet. Tu
nombre de usuario (o login) es habitualmente el que tienes en tu direccin de correo. La ma es
catwalk@wanadoo.es, por lo que mi nombre de usuario es catwalk (en general el nombre de usuario es
todo lo que va antes de la arroba). La direccin FTP del servidor puedes conseguirla en el mismo servidor y
si no la localizas llama al tlefono de atencin al cliente, donde probablemente te la facilitarn. De todas
formas si tu proveedor es www.excelente.net, entonces la direccin FTP del servidor ser
probablemente ftp.excelente.net. A veces la direccin FTP es la misma que la del servidor, es
decir, si la direccin del servidor es www.fabuloso.net la direccin FTP puede ser idntica. Puedes
probar a poner la direccin en el cuadro de texto del programa marcado como Host Adress, y conectar, si no
te devuelve un error es que has dado con la direccin correcta. Tambin es posible que tu servidor requiera
que coloques todos tus documentos en un directorio de nombre especfico, tal como pblico_html,
www, pblico o algo parecido. Y tambin es posible que el documento principal deba tener un nombre
especfico, habitualmente index.html. Puedes conseguir toda esta informacin del modo descrito
anteriormente en tu proveedor, habitualmente en las pginas de ayuda, o en el servicio tcnico. En muchos
sevidores, al inciar la sesin, aparece un mensaje de bienvenida donde te especifican qu directorio debes
usar como principal (o raz).
Ahora, si ya tienes todo lo anterior, empecemos:
Tan pronto como arranques FTP Explorer aparecer la pantalla de Conexin:
Introduce la siguiente informacin...
Profile Name (Perfil): Es slo una etiqueta para el sitio web. Puede ser cualquiera que quieras.
Host Address (Direccin del servidor): sta es la direccin FTP mencionada arriba.
Login (Usuario): Tu nombre de usuario.
Password (Contrasea): Tu contrasea.
No te preocupes del resto por ahora. Una vez que has introducido esa informacin pulsa Add (Aadir). Tu
nuevo perfil se aadir a la izquierda. Pincha en l y pincha luego en el botn Connect (Conectar).
Si todo funciona bien ahora debes estar conectado con tu servidor. Tan pronto como conectes vers algo
parecido a sto. Evidentemente el contenido de los directorios ser diferente a los mostrados aqu. Y
tambin es posible que los tuyos estn completamente vacos.
Asegrate de que la vista en "Details (Detalles)" est activada (el crculo rojo superior).
Adelante -->
As que quieres hacer una pgina Web! - Sube tus pginas
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML

Web!
Sube tus pginas - parte 2
Nuestra primera preocupacin es hacer nuestros directorios web, para copiar la estructura de nuestro disco a
la del servidor. En este ejercicio lo llamaremos www. As que vamos a hacerlo:
Haz clic con el botn derecho en la ventana derecha y elige New/Folder (Nuevo/Carpeta):
http://perso.wanadoo.es/catwalk/WebTutor/makapage/upload2.html (1 of 4)11/12/2003 02:14:36 p.m.
Renomnala a www (o el nombre que hayas elegido) .
Ahora haz doble clic en esa carpeta para abrirla:
<-- Atrs
Adelante -->
As que quieres hacer una pgina Web! - Sube tus pginas - parte 2
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML

Web!
Sube tus pginas - parte 3
Para subir un archivo al servidor, pulsa el botn que tiene la flecha azul apuntando hacia arriba. Esto
abrir el cuadro de dilogo de subida de archivos:
Ahora busca en tu ordenador los archivos que quieres subir:
Selecciona el o los archivos y pulsa el botn Open (Abir). El o los archivos sern automgicamente
subidos al servidor:
Ahora, vamos a imaginarnos cul es la direccin URL de nuestra pgina web. En pocas palabras, y
siguiendo el ejemplo superior, ser...
http://www.excelente.net/u/jb/jbarta/www/page1.html
Algunos servidores usan un nombre ligeramente diferente como...
http://members.excellent.net/u/jb/jbarta/www/page1.html
Una vez ms, esta informacin la puedes conseguir en tu ISP. Habitualmente debes llamar al nmero del
servicio tcnico, donde te facilitarn la informacin.
Tambin puedes probar a arrancar el navegador y a introducir la direccin completa. Si tienes suerte, tu
pgina ser leda por el navegador. Si te aparece un mensaje de error, revisa la direccin y si no llama al
servicio tcnico.
Y esto es todo. Aprender y dominar sto puede ser un poco complicado al principio, ya que es todo
nuevo. Pero con un poco de prctica te aseguro que terminars hacindolo con los ojos cerrados. Yo
tard menos de 5 minutos en familiarizarme con el programa y su funcionamiento. El nico problema
serio es que consigas subir las pginas y luego no las encuentres con el navegador. Copia o imprime una
copia de la pantalla del programa FTP para que tengas una idea clara de cmo estan estructurados tus
archivos en el servidor, y llama al servicio tcnico. Ellos encontrarn las pginas por t y te facilitarn la
direccin. Sube unas cuantas y practica un poco. En menos de media hora, lo hars mirando al tendido.
Una par de cosas ms: Quiero recalcar que la estructura que tengas en el servidor debe ser la misma de
tu disco duro o nada funcionar correctamente. Hago la salvedad de que si tu carpeta raz del sitio web
es C:\Mis Documentos (es decir, donde tienes situado index.html), esta ser la equivalente a la carpeta
marcada como / del servidor, donde tendrs que subir index.html; no intentes recrear Mis Documentos
en el servidor.
Y ten en cuenta que muchos servidores estn usando un sistema operativo UNIX. En estos sistemas,
index.html no es lo mismo que INDEX.HTML, y adems no soportan nombres como una pagina.html,
sino que tendrs que poner una_pagina.html, sin espacios.
Tutor de Tablas
Leccin 5
Bien, volvamos al sencillo Jose.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle">Jose</TD>
</TR>
</TABLE>
Jose
Y en aras de la claridad, eliminemos los atributos de alineado. Sabemos lo que va a pasar porque sabemos
cules son los valores por defecto. De camino, una sentencia o TAG le dice al navegador que haga algo. Un
atributo o ATTRIBUTE va dentro de una sentencia o TAG y le dice al navegador cmo hacerlo.
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
http://perso.wanadoo.es/catwalk/WebTutor/tables/lesson05.html (1 of 4)11/12/2003 02:15:17 p.m.
Jose
Ahora haremos nuestra tabla un poco mayor.

<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Debes pensar que mayor es un trmino tcnico. Efectivamente, y su definicin completa es tan compleja
que slo est al alcance de estudiantes avanzados de html.
Mi amigo, Juan, ha vuelto y esta vez quiere su propia celda.

<TR>
<TD>Jose</TD>
<TD>Juan</TD>
</TR>
</TABLE>
Jose
Juan
Cuando al navegador no se le dan instrucciones especficas, cada celda puede (aunque no siempre) ser de
diferente tamao. A menudo es una buena idea especificar cun grande es cada celda. Asegrate de andar
bien de aritmtica o lo que la gente va a a ver va a ser drsticamente diferente de lo que has pensado!

<TR>
<TD WIDTH=150>Jose</TD>
<TD WIDTH=150>Juan</TD>
</TR>
</TABLE>
Jose
Juan
Estos atributos WIDTH (ANCHURA)tambin se pueden expresar en porcentajes.

<TR>
<TD WIDTH=50%>Jose</TD>
<TD WIDTH=50%>Juan</TD>
</TR>
</TABLE>
Jose
Juan
PREGUNTA: He hecho una tabla y he includo las dimensiones, pero la tabla no se

muestra correctamente. Lo que se ve bien en el navegador A no va bien en el navegador B.
R: Ser especfico con las dimensiones de las celdas es un negocio complicado. A menudo
un navegador no muestra una tabla exactamente como est especificada. La mejor manera
que he encontrado de evitar esto es disear las tablas como si fueran tiras de goma en vez
de hacerlas rgidas como el marco de un cuadro. Una tabla flexible encaja mucho mejor
que una caja rgida en cualquier navegador. Disea tus tablas de forma que las diferencias
menores entre navegadores no destruyan tu trabajo.
<-- Atrs
Adelante -->
Tutor de Tablas - Leccin 5

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 4
Podemos controlar dnde aparecern los datos dentro de las celdas.

<TR>
<TD ALIGN="center">Jose</TD>
</TR>
</TABLE>
Jose

<TR>
<TD ALIGN="right">Jose</TD>
</TR>
</TABLE>
Jose

<TR>
<TD ALIGN="left">Jose</TD>
</TR>
</TABLE>
Jose
Ya ves que el valor por defecto es (habitualmente) ALIGN="left". Como probablemente ya sabrs, este
valor por defecto es el que asume el navegador si no se le dice otra cosa.
Y tambin podemos controlar la situacin vertical de los datos en la celda.

<TR>
<TD ALIGN="left" VALIGN="top">Jose</TD>
</TR>
</TABLE>
Jose

<TR>
<TD ALIGN="left" VALIGN="bottom">Jose</TD>
</TR>
</TABLE>
Jose

<TR>
<TD ALIGN="left" VALIGN="middle">Jose</TD>
</TR>
</TABLE>
Jose
El valor por defecto es usualmente en el medio.
Una pequea disgresin. Las imgenes pueden ser utilizadas y manipuladas en una celda. Imagnate que
este soy yo, cgeme*,
, y grbame en la carpeta en la que ests trabajando (donde grabaste
tabla1.html). Ahora introduce una sentencia <IMG> y elimina mi nombre Jose.

* Para grabar una imagen de una pgina web, haz clic con el botn derecho y elige Guardar imagen como
(o algo similar).
<TR>
<TD ALIGN="left" VALIGN="middle"><IMG SRC="jose.gif" WIDTH=32 HEIGHT=32
ALT="Jose"></TD>
</TR>
</TABLE>
Creo que es un buen momento para enfatizar que es una buena prctica incluir los atributos de anchura y
altura en tus sentencias de imgenes, porque cuando tu navegador sepa por anticipado can grande va a ser
la imagen, la pgina cargar ms rpido.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 3
Librmonos de mis amigotes por ahora.

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Ahora reduzcamos la anchura de la tabla al 50% de la ventana del navegador:

<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Ahora especificaremos 50 en lugar de 50%.

<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Ahora 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Ya ves que hay dos formas de especificar la anchura de la tabla. Cada estilo tiene su utilidad. Cul utilizar
no es importante por ahora.
Tambin podemos enredar un poco con la altura.

<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Ahora recuerdo un dicho de un tal Steven Wright...

"El otro da, estaba paseando a mi perro alrededor de mi edificio... por la cornisa. Hay gente que tiene
miedo de las alturas. Yo no, a mi me preocupan las anchuras."
Nota - Controlar la altura de una tabla es muy simple. Controlar la altura de las celdas individuales de la
tabla, es casi imposible, especialmente si se utilizan diferentes navegadores.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 2
Bien, esto es lo que tenemos...

<TABLE>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
...lo que nos da esta apariencia:
Jose
Primero hagmoslo parecerse ms a una tabla dndole un borde. Cada vez que cambies algo en tu
documento, grbalo y pincha en el botn Actualizar de tu navegador. Si no funciona pulsa MAYSCULAS
y pincha en Actualizar.
<TABLE BORDER=1>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Qu tal si hacemos un borde ms grande?
<TABLE BORDER=5>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Y si hacemos un borde ENORME?

<TABLE BORDER=25>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Y si QUITAMOS el borde?
<TABLE BORDER=0>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Como puedes ver, la opcin por defecto (habitualmente) es sin borde.
Por ahora utilizaremos un borde normal:

<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Cuando no se especifica un tamao, la tabla se hace tan grande como necesita.

<TABLE BORDER=3>
<TR>
<TD>Jose, Juan y Jorge</TD>
</TR>
</TABLE>
Jose, Juan y Jorge
Especificar un tamao para la tabla es bastante simple: (anchura)

<TR>
</TR>
</TABLE>
Jose, Juan y Jorge
Que tal si hacemos esto?

<TR>
</TR>
</TABLE>
Jose, Juan y Jorge
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 1
Esto va a ser fcil, as que abre el Bloc de Notas (s, el Bloc de Notas!) y sgueme. Copia y pega lo que
sigue para que puedas empezar:
<HTML>
<HEAD>
<TITLE>Jose Angel es un tipo fantstico</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Gurdalo como tabla1.html en alguna carpeta, a ser posible nueva, porque vamos a poner algunas
cosas ms ah. Arranca el navegador y abre tabla1.html y pon la ventana del navegador al lado de la
del Bloc de Notas. De esta forma puedes hacer las pginas y ver casi instantneamente el resultado de tu
trabajo. Y creas que ibas a necesitar un "asistente" de 13 megas ;-)
Inserta las sentencias de tabla. Esto simplemente quiere decir "empieza una tabla" y "acaba una tabla".
<HTML>
<HEAD>
<TITLE>Jose Angel es un tipo fntastico</TITLE>
</HEAD>
<BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>
Cada tabla necesita como mnimo una lnea horizontal.

<HTML>
<HEAD>
<TITLE>Jose angel es un tipo fantstico</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Y por supuesto, cada lnea debe tener, al menos, una celda.

<HTML>
<HEAD>
<TITLE>Jose Angel es un tipo fantstico</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ahora, para hacer las cosas ms claras, voy a escribir solamente las sentencias que hay dentro de la tabla.
Dejaremos de lado las sentencias head, body, title, etc. por ahora. Desde luego, mantenlas en tu documento.
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
Ahora necesitas poner algo en esa celda solitaria. Que tal Jose?, s, pon Jose en la celda <TD>.
<TABLE>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Vale, ya eres el orgulloso propietario de una tabla completamente funcional. brela con el navegador y
comprubalo. Si todo est correcto, debe parecerse a esto:
Jose
Ja, ja, estaba bromeando. Ya puedes ver que me divierto con poca cosa. Lo que has creado ha sido esto:
Jose
Tmate un respiro, y sintete orgulloso. A pesar de todo has hecho tu primera tabla.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 6
Vay a adjudicarme una celda mayor, ya que he estado aqu desde el principio.
<TR>
</TR>
</TABLE>
Jose
Juan
Pero ahora Jorge ha vuelto y tambin quiere su propia celda. Tenemos que decidir cunto espacio de la
lnea horizontal le damos. Supongo que un 20% estar bien. Asegrate de ajustar mi anchura.
<TR>
<TD WIDTH=20%>Jorge</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Tres chavales del otro lado de la calle han visto lo que pasa y quieren estar en tu tabla. Creo que los
colocaremos en su propia lnea.
<TR>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Miguel
Mariano Manuel
El atributo WIDTH de la primera lnea prevalece sobre el de la segunda.
Si Manuel se va, todava tenemos una tabla perfecta, pero con un espacio vaco.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75 >
<TR>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
</TR>
</TABLE>
Jose
Juan
Miguel
Mariano
Jorge
Lo que vamos a hacer, para evitar confundir al navegador, es mantener la celda vaca y poner un espacio en
blanco dentro de ella ( ). Normalmente, para una tabla simple esto no es necesario, pero como tus
tablas se irn haciendo ms complicadas, cuanto menos tenga que dar el navegador por supuesto, mejor
para t, y para tus pginas.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75 >
<TR>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD> </TD>
</TR>
</TABLE>
Jose
Juan
Miguel
Mariano
Jorge
Traigamos a Manuel de vuelta y borremos todos los atributos excepto BORDER.
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Miguel Mariano Manuel
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 7
Lo siguiente son un par de atributos llamados CELLPADDING (ANCHURA INTERIOR DE CELDA) y

CELLSPACING (ESPACIO ENTRE CELDAS). Las dos se usan en la sentencia <TABLE>.
CELLPADDING es la cantidad de espacio entre el borde interior de la celda y el contenido de la celda.
<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Miguel
Mariano
Manuel
El valor por defecto de este atributo es normalmente 1. La razn de que sea 1 y no 0 es para evitar que el
texto toque directamente los bordes de la celda (aunque puedes especificar 0 si quieres).
Si ponemos CELLSPACING y eliminamos CELLPADDING tenemos un efecto ligeramente diferente.

<TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Miguel
Mariano
Manuel
El valor por defecto para CELLSPACING es usualmente 2.
Y podemos utilizar estos atributos combinados.

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Miguel
Mariano
Manuel
Y, desde luego, podemos ponerlos a 0.

<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose Juan
Jorge
Antes de seguir, hay un punto que me gustara tratar. He visto que muchos autores omiten las sentencias de
cierre de celda </TD>, de lnea </TR> y de tabla </TABLE>. Incluso la recomendacin W3C de html
sugiere que al menos las sentencias de cierre de celda y de lnea pueden omitirse. La idea es que el
navegador debe saber que cuando una celda empieza, la anterior ha terminado. Desafortunadamente, y a
medida que tus tablas se hagan ms complejas, algunos navegadores no siempre entendern esto y la tabla
empezar a hacer cosas raras. La mejor manera de evitar esto es incluir siempre estas sentencias de cierre.
Esto nos lleva a nuestra prxima pregunta...
PREGUNTA: He hecho mi pgina usando SperCoderWeb y va fenomenal en el

navegador A pero es completamente invisible en el navegador B. Qu pasa?
R: Cuando una pgina completa, o grandes partes de ella "desaparecen", el culpable es
habitualmente una sentencia </TABLE> que no se ha puesto. Asegrate que las sentencias
de cierre estn en su sitio (especialmente /TABLE) y entonces el problema desaparece. ;-)
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Professional - Tutor de Tablas
Tutor de Tablas
Leccin 8
Librmonos de CELLPADDING y CELLSPACING y volvamos a nuestra tablilla.

<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Una gran utilidad de los nuevos navegadores es la habilidad para especificar colores de fondo para cada una
de las celdas, de las lneas o de la tabla entera. Utiliza BGCOLOR exactamente igual que en la sentencia
<BODY>.
<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
<TABLE BORDER=3>
<TR BGCOLOR="#FF9999">
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR BGCOLOR="#99CCCC">
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
<TABLE BORDER=3>
<TR BGCOLOR="#FFCCFF">
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000">Miguel</TD>
<TD>Mariano</TD>
<TD BGCOLOR="#3366FF">Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Aqu hay una tabla con los colores sencillos. Hay dos tablas en formato HTML, una con 216 colores y otra
con 1536 colores. Tambin puedes utilizar Color Picker para juguetear con los colores.
Una cosa ms acerca de estos colores de fondo... un atributo de color en una sentencia <TD> prevalecer
sobre un atributo de color en una sentencia <TR>, e igualmente los atributos de la sentencia <TR>
prevalecern sobre los de la sentencia <TABLE>. No creo que necesite ms explicaciones, pero como tengo
ganas de divertirme con esto, aqu tienes un ejemplo:
<TABLE BORDER=3 BGCOLOR="#FF6633">
<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 9
Djame tomarme un minuto para explicar algo. Un navegador tiene que interpretar las instrucciones que le
das de la mejor manera posible. Si algo no se ha especificado de una forma u otra, la mayora de los
navegadores intentarn darle la solucin ms atractiva posible. La mejor actitud que un autor puede tener es
especificar todo lo que pueda, especialmente esas cosas que son importantes para que la pgina aparezca
bien. Tambin es importante ver la pgina a travs de los navegadores ms utilizados. Como mucha gente
usa Netscape o Internet Explorer, puedes empezar por ellos. Tampoco es mala idea conseguir un par de
navegadores menos populares para asegurarte de que tambin van bien en ellos.
Otra consideracin es la resolucin de pantalla. Yo trabajo en una pantalla de 1024x768. Mucha gente lo
hace y navega en 800x600 y otros tienen pantallas de 1600x1200 e incluso de resoluciones an ms raras.
Esta simple diferencia puede ser un potencial desastre para tu diseo. Una utilidad de Win95 llamada
QuickRes cambia la resolucin de pantalla con un simple clic. En esa pgina tambin se explica cmo
cambiar la resolucin en Win98. En resumen, que no es mala idea ver tu pgina en otras resoluciones.
Ahora jugaremos con COLSPAN (expansin de columnas) y ROWSPAN (se pueden

expandir las filas?). Supongamos que yo me peleo con Juan y lo expulso de la tabla. Entonces
tenemos esto:
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Jorge

Como hay un espacio vaco Jorge se desliza para rellenar el hueco.
Pero si queremos que yo tome posesin de la celda de Juan, agrandando mi rea de influencia, tenemos que
utilizar el atributo COLSPAN de esta forma...
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Jose</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Jorge
Para enfatizar lo que comentamos antes acerca del navegador intentando hacer las cosas elegantemente y
encontrando soluciones atractivas, hagamos que mi celda se expanda, pero vamos a colocar a Juan otra vez
en la tabla. Estamos introduciendo deliberadamente una discrepancia para ver cmo se las arregla el
navegador.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge

Las cuestiones son: 1) El navegador lo hace lo mejor que puede con lo que t le das. 2) Es fundamental
dejarle claro al navegador lo que es importante y asegurarse de que no hay discrepancias, o puedes acabar
sorprendido.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 11
Bien, librmonos de todo esto, hagamos las paces con Juan y Jorge y buceemos en <ROWSPAN>.
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Miguel</TD>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Como habrs adivinado, <ROWSPAN> es como <COLSPAN> excepto en que expande lneas en vez de
columnas (tampoco es neurociruga, no?)
Si quitamos a Miguel dejamos que yo ocupe su celda, este es el resultado.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Jose</TD>
<TD>Juan</TD>
<TD>Jorge</TD>
</TR>
<TR>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Jorge
Mariano Manuel
Y, claro, estos atributos pueden combinarse.

<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Jose</TD>
<TD COLSPAN=2>Juan</TD>
</TR>
<TR>
<TD>Mariano</TD>
<TD>Manuel</TD>
</TR>
</TABLE>
Jose
Juan
Mariano Manuel
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 12
Ahora vamos a juguetear un poco. Aqu tenemos una lista sin numerar:
Ingredientes para una tarta de Manzana
Manzanas
Harina
Azcar
Cinamomo
Esto est muy bonito, pero y si lo ponemos un poco ms all...?

Manzanas
Harina
Azcar
Cinamomo
...porque queremos adjuntar la fotografa de una tarta!
Manzanas
Harina
Azcar
Cinamomo
Y desde luego que usaremos una tabla para hacerlo!
Cuando estemos estudiando o construyendo una tabla, siempre es ms fcil si tenemos el borde activado.
Manzanas
Harina
Azcar
Cinamomo
Construyamos esto paso a paso. Es realmente fcil:

Empecemos con el habitual Jose.
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Reemplzame y coloca la lista.

<TABLE BORDER=3>
<TR>
<TD>
Ingredientes para una tarta de Manzana<UL>
<LI>Manzanas
<LI>Harina
<LI>Azcar
<LI>Cinamomo
</UL>
</TD>
</TR>
</TABLE>
Ingredientes para una tarta de
Manzana
Manzanas
Harina
Azcar
Cinamomo
Recuerda que en ausencia de otras instrucciones, la tabla se har lo suficientemente grande para contener
los datos. As, no es necesario ahora utilizar atributos de tamao para acomodar la lista. La tabla se expande
automticamente al tamao adecuado.
Ahora expandiremos la tabla hasta llenar la anchura de la ventana del navegador.

<TR>
<TD>
<UL>
<LI>Manzanas
<LI>Harina
<LI>Azcar
<LI>Cinamomo
</UL>
</TD>
</TR>
</TABLE>
Manzanas
Harina
Azcar
Cinamomo
No es divertido?
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 13
Ahora necesitamos una segunda celda. Y queremos que la celda izquierda sea un poco ms pequea que la
derecha.
<TR>
<TD WIDTH=40%> </TD>
<TD WIDTH=60%>
Ingredientes para una tarta de Manzana<UL>
<LI>Manzanas
<LI>Harina
<LI>Azcar
<LI>Cinamomo
</UL>
</TD>
</TR>
</TABLE>
Manzanas
Harina
Azcar
Cinamomo
Cmo hbito coloca un espacio en blanco ( ) en la celda vaca.
Ahora vamos a copiar tarta.gif a tu carpeta de trabajo
Encaja la imagen en la primera celda

<TR>
<TD WIDTH=40%><IMG SRC="tarta.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
<UL>
<LI>Manzanas
<LI>Harina
<LI>Azcar
<LI>Cinamomo
</UL>
</TD>
</TR>
</TABLE>
Manzanas
Harina
Azcar
Cinamomo
Lo nico que queda por hacer es alinear la imagen de la tarta con el lado derecho de la celda y apagar el
atributo de borde.
<TR>
<TD WIDTH=40% ALIGN="right"><IMG SRC="tarta.gif" WIDTH=150 HEIGHT=138></
TD>
<TD WIDTH=60%>
<UL>
<LI>Manzanas
<LI>Harina
<LI>Azcar
<LI>Cinamomo
</UL>
</TD>
</TR>
</TABLE>
Manzanas
Harina
Azcar
Cinamomo
Bingo!
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 14
Podemos hacer una tabla dentro de otra tabla?

Vamos a probar. Llmame otra vez.
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Haz la tabla mayor.

<TR>
<TD>Jose</TD>
</TR>
</TABLE>
Jose
Ahora reemplaza a 'Jose' con una 'tabla completa de Jose'

<TR>
<TD>
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
Jose
Hey, que te parece!
Nuestra tabla puede centrarse fcilmente.

<CENTER>
<TR>
<TD>
<TABLE BORDER=3>
<TR>
<TD>Jose</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
Jose
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas
Leccin 15
Ahora vamos a ver una situacin donde una tabla resuelve un problema muy comn. Imagnate que has
tenido esta gran idea para un gif animdo. Pero la imagen a utilizar es enorme. Dado que sabes que un gif
animado es bsicamente una serie de imgenes gif mostradas una detrs de otra, te haces a la idea de que el
archivo final va a ser monstruosamente grande. Y tus visitantes no van a sentirse muy felices si tienen que
esperar a que se descargue una imagen de 700K. No slo eso, sino que adems, es muy posible que el
navegador se cuelgue intentando ejecutar el gif de los demonios. Hay alguna solucin?. Claro, corta la
imagen y muestrla como una tabla.
Aqu hay un ejemplo:
Netscape vs. Microsoft?
Ilustracin de Boris Vallejo
La misma tabla con CELLSPACING fijado a 3.
Netscape vs. Microsoft?
La nica parte de la imagen que est animada son los ojos.

Bien, aqu tienes el cdigo html para la tabla. (La sentencia caption se ha aadido slo por divertimento. No
se requiere ni tiene un gran impacto en el resto de la tabla)
<CAPTION ALIGN="top"><FONT SIZE=6><B><I>Netscape vs. Microsoft?</I></
B></FONT></CAPTION>
<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>
<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>
<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>
</TABLE>
Este es el esquema:
PREGUNTA: Por qu hay espacios en mis tablas (o entre mis imgenes) Cmo puedo
hacer que la imagen A est perfectamente unida a la imagen B?
R: Este es un problema comn. Y lo peor es que a veces se produce slo en ciertos
navegadores. Hay ciertas causas y ciertas soluciones, las cuales estn detalladas aqu.
Bueno, esto es todo en cuanto a tablas. Ni que decir tiene que esto es el final del tutorial, pero como quiero
hacer hincapi en la importancia de las tablas para poder conseguir pginas de calidad, he aadido algunos
ejemplos ms. Intenta reproducirlos t tambin.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Tablas - Hey, hay espacios en mis tablas!
Hey, hay esp ac ios en mis ta blas!

Hay algunas razones por las que puede haber espacios en tus tablas...
1. Tabla 1 - Primero, esto es una tabla sin espacios.
2. Tabla 2 - Una razn es no colocar CELLPADDING y CELLSPACING en 0. Los
valores por defecto son habitualmente 1 y 2 respectivamente.
3. Tabla 3 - La razn ms comn son retornos de carro entre las celdas:
Cambia esto:
<TD>
<IMG>
</TD>
Por esto:
<TD><IMG></TD>
O cambia esto:
<TD>
<IMG>
<IMG>
<IMG>
</TD>
Por esto:
<TD><IMG><IMG><IMG></TD>
Si quieres aadir retornos de carro, hazlo dentro de las sentencias, mejor que fuera de
ellas:
<TD
property1="0"
property2="0"
property3="0"><IMG
attribute1="0"
attribute2="0"
attribute3="0"></TD>
4. Tabla 4 - Si usas las imgenes como enlaces asegrate de que el atributo
BORDER="0" est en la sentencia de la imagen o puede que no slo tengas espacios,
http://perso.wanadoo.es/catwalk/WebTutor/tables/spaces/spaces.html (1 of 2)11/12/2003 02:22:07 p.m.
sino marcos azules alrededor de secciones enteras (azul o el color elegido para los
enlaces). Actualmente es una buena prctica incluir BORDER="0" en todas las
sentencias de imagen porque algunos navegadores pueden tenerlo activado por
defecto.
Recuerda que estos problemas se pueden presentar solos o combinados. Tambin puede
suceder que, una vez descartadas estas causas, el problema sea indirecto.
Tutor de Tablas - Hey, hay espacios en mis tablas!

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/tables/spaces/spaces.html (2 of 2)11/12/2003 02:22:07 p.m.
Referencia
Rpida
Gua
bsica de HTML
Tabla 1

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/tables/spaces/table1.html11/12/2003 02:22:37 p.m.
Referencia
Rpida
Gua
bsica de HTML
Tutor de Tablas - Leccin 16 (ltima!)

Bueno amigos, esto es todo!
Este tutorial se ha acabado. Ya has aprendido las sentencias de TABLAS de
mayor importancia. Hay unas pocas ms, pero con stas eres capaz de hacer
casi todo lo que se te ocurra.
Asegrate de ver el Tutor de Formularios y el Tutor de Marcos (Frames)

pginas.
CyberCursos
FAQs.
<-- Atrs

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Botones Mgicos - Efectos Mouseover
Pasa el cursor sobre las imgenes que forman las palabras "BOTONES MGICOS".
Si utilizas una versin de NN o de IE superior a la 4, tambin puedes pincharlos.
Este mini-tutorial est disponible para descarga en formato zip (para que veas como os cuido)
Parte 1 | Parte 2 | Parte 3 | Parte 4 | Parte 5 | ndice de Ejemplos
Hola! Me llamo Jose Angel y voy a ensearte a hacer Botones Mgicos. Todos hemos visto alguna vez esas imgenes que
cambian cuando el ratn pasa por encima de ellas. Bueno, sinceramente no son tan dficiles de hacer como puede parecer.
Adems he visto algunas herramientas de software que pueden ayudarte a insertar estos efectos, otras que los generan casi
automticamente y algunos editores web que tienen estas facilidades tambin.
Pero, si ya hay herramientas "automticas" para hacer eso por qu voy a perder el tiempo insertando el cdigo a mano?
Por las mismas razones por las que aprendes HTML... flexibilidad, poder y confianza en t mismo. La flexibilidad de poder
hacer lo que quieras sin las restricciones de los editores. El poder de aadir, cambiar y manipular el script de una forma que ni
las ms potentes herramientas podran intentar. Y la confianza de saber que si algo va mal, eres capaz de entenderlo, arreglarlo y
mantenerlo funcionando, mientras otros se quedan colgados con su "editor".
Lo que sigue es un efecto bsico...
Pinchar el botn te lleva a otra pgina. Aqu est el botn en una pgina para l solito. A lo largo de este tutorial te recomiendo
que vayas a la pgina que te indico en cada caso para que veas el cdigo empleado en los efectos sin mezclarlo con el cdigo
normal empleado en esta pgina. As podrs estudiarlo sin interferencias e incluso manipularlo a tu antojo sin cargarte el
tutorial. Deberas sacar una copia antes de manipular los documentos. JavaScript puede ser muy puetero, y hay que ser muy
exacto para que no se produzcan errores.
Ahora, la idea subyacente es muy simple...
Cuando la pgina carga por primera vez, muestra la siguiente imagen:
Cuando el cursor pasa sobre la imagen, una segunda imagen aparece en lugar de la primera:
Cuando el cursor sale del rectngulo definido por la imagen, la primera imagen vuleve a aparecer:
http://perso.wanadoo.es/catwalk/botones/index.html (1 of 6)11/12/2003 02:23:53 p.m.
Vamos a construir este ejemplo desde el principio. En primer lugar hagamos la pgina objetivo. Copia lo siguiente y grbalo
como otra.html.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#0000CC">
<H1 ALIGN=center>Otra pgina</H1>
</BODY>
</HTML>
Ahora copia y graba lo siguiente como ejemplo1.html.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Inserta la imagen que se ver al cargar la pgina, o imagen por defecto...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<IMG SRC="hazclic1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img01">
</BODY>
</HTML>
No es importante que entiendas exactamente lo que estamos haciendo ni para qu sirven cada una de las sentencias o atributos.
Tranqui, cada cosa a su tiempo, veremos todo esto un poco ms adelante. Ahora mismo necesitamos construir algo con lo que
podamos trabajar.
Inserta las sentencias <SCRIPT>...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!-//--></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Inserta las sentencia de carga previa de las imgenes. Esto hace que las imgenes se descarguen del servidor y se coloquen en la
memoria cach del navegador, de forma que la superposicin o cambiazo de las imgenes se produzca inmediatamente. Esto
debe hacerse para todas y cada una de las imgenes que se usen.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!-// precarga de imgenes:
if (document.images) {
hazclic1 = new Image(75,22); hazclic1.src = "hazclic1.gif";
}
//--></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Ahora aadamos la funcin. Este es el "motor" del asunto. Le dices qu imgenes quieres cambiar, y la funcin lo hace...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!-// precarga de imgenes:
}
function cambiar(imgName,imgObjName) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Y por ltimo aade los crditos (opcionales, por supuesto)

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!-/*********************************************************
B O T O N E S M G I C O S v3.0
Utilizacin libre de este script.
**********************************************************/
// precarga de imgenes:
}
}}
//--></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Ahora aade un enlace normal...

<HTML>
<HEAD>
<TITLE></TITLE>
**********************************************************/
}
}}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="otra.html"><IMG SRC="hazclic1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT=""
NAME="img01"></A>
</BODY>
</HTML>
Ahora tenemos que aadir los comandos JavaScript al enlace...
<HTML>
<HEAD>
<TITLE></TITLE>
**********************************************************/
}
}}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="otra.html"
onMouseOver="cambiar('img01','hazclic2')"
onMouseOut="cambiar('img01','hazclic1')"><IMG SRC="hazclic1.gif" WIDTH="75"
HEIGHT="22" BORDER="0" ALT="" NAME="img01"></A>
</BODY>
</HTML>
Y eso es todo!. Nota: Las imgenes hazclic1.gif y hazclic2.gif estn en este mismo directorio.
Vale, vale, ya s que no te has enterado de nada. No te preocupes, en la parte 2 examinaremos todo esto mucho ms lentamente,
y vers que es lo que sucede exactamente.
Parte 2...
Vamos a examinar el cdigo para aprender exactamente qu demonios est sucediendo.

}
En esta parte precargamos las imgenes. Las imgenes se descargan desde el servidor en la memoria cach del
navegador, de forma que estn disponibles inmediatamente cuando el ratn pasa por encima de una de ellas (esto
se llama mouseover, literalmente ratnencima). La nica alternativa es que la imagen se descargue cuando el
mouseover sucede...lo que sera terrible. Necesitamos y queremos que el intercambio de imgenes sea
instntaneo, no tener que esperar a que la imagen se descargue del servidor. Ahora veamos para qu sirve cada
cosa:
Cada una de las lneas superiores es para una imagen, y nosotros necesitamos dos imgenes.
La mejor forma de mantener el cdigo claro y no confundirse es utilizar siempre el propio nombre de la imagen
durante todo el proceso, por eso se llaman hazclic1 y hazclic2.
Los nmeros son los atributos de anchura y altura de la imagen. Perctate de que todas las imgenes que se
intercambian han de tener la misma anchura y altura. En caso contrario necesitars utilizar un editor de imgenes
para hacer que ambas tengan el mismo tamao.
Supongamos que quieres usar dos imgenes llamadas arriba.gif y abajo.gif, y que las imgenes miden 55
pxeles de ancho y 70 de alto. Debes construir las declaraciones de precarga como sigue...
arriba = new Image(55,70); arriba.src = "arriba.gif";
abajo = new Image(55,70); abajo.src = "abajo.gif";
Para aadir ms imgenes, simplemente aade ms declaraciones...
arriba = new Image(55,70); arriba.src = "arriba.gif";
abajo = new Image(55,70); abajo.src = "abajo.gif";
imagen1 = new Image(80,20); imagen1.src = "imagen1.gif";
imagen2 = new Image(80,20); imagen2.src = "imagen2.gif";
http://perso.wanadoo.es/catwalk/botones/index2.html (1 of 3)11/12/2003 02:24:14 p.m.
Ahora estudiemos la funcin...(Nota: Si no sabes absolutamente nada de JavaScript es bastante fcil que te
pierdas. No te preocupes, el entender exactamente cmo trabaja la funcin no es tan importante, luego vers por
qu).
}}
Piensa en la funcin como si estuvieras jugando al tenis. Ella es tu oponente y siempre consigue devolverte las
bolas. Si le lanzas una manzana, te devuelve una manzana. Si le lanzas una bomba, te devuelve una bomba.
Excepto que en este caso la funcin procesa y devuelve las variables que nosotros le enviamos.
Y nosotros le enviamos a la funcin ciertas variables desde el enlace...
<A HREF="otra.html"
onMouseOver="cambiar('img01','hazclic2')"
onMouseOut="cambiar('img01','hazclic1')"><IMG SRC="hazclic1.gif"
WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img01"></A>
Todo lo de arriba no es ms que un simple enlace a otra.html pero con un par de aadidos.
Observa el primer comando JavaScript: onMouseOver="cambiar('img01','hazclic2')". Traducido
quiere decir "Cuando se produce un mouseover (el ratn pasa por encima), enva las variables img01 y
hazclic2 a la funcin cambiar()"
El segundo comando JavaScript es muy similar al primero - onMouseOut="cambiar
('img01','hazclic1')". Traducido dice "Cuando se produce un mouseout (el ratn sale de la imagen),
enva las variables img01 y hazclic1 a la funcin cambiar()"
Observa el atributo NAME de la sentencia IMG - NAME="img01". Esto coloca una etiqueta en esa imagen en
particular. La distingue de cualquier otra imagen en la pgina. Cada lugar de la pgina donde quieras hacer un
efecto de este tipo necesita un nombre o etiqueta diferente. Si tienes tres enlaces - Principal, Enlaces y Correo,
cada uno necesita un nombre diferente (img01, img02, img03 o Principalimg, Enlaceimg, Correoimg, etc)
Por lo tanto la funcin cambiar() funciona en dependencia de las variables que le enviemos. En este caso,
cuando escribimos en el enlaceonMouseOver="cambiar('img01','hazclic2')" estamos enviando
dos variables a la funcin. Le estamos diciendo a la funcin "En Mouseover, toma img01 y hazclic2 procede
de acuerdo a lo que sabes hacer." Cuando la funcin toma las variables dice "Ningn problema" y procede
instntaneamente a colocar hazclic2 en la localizacin de la imagen img01. (Y la nica razn por la que esto
sucede instntaneamente es porque hemos precargado las imgenes.)
Ten en cuenta que, para este efecto simple, no necesitamos tocar la funcin para nada. Podemos aadir ms
imgenes en otro lugar de la pgina, podemos reconfigurar el enlace, podemos cambiar las imgenes, pero no
necesitamos tocar la funcin.
Ahora, la mejor manera de aprender es practicar. Con lo que sabes ya es ms que suficiente. Construye una
nueva pgina e inserta un efecto con estas dos imgenes....
Haz el enlace de forma que una vez que pinches en la imagen vayas a tu pgina principal (y si an no tienes una
pgina principal, no crees que ya va siendo hora de que la hagas?.)
Si todo te ha funcionado, aade un segundo y un tercer efecto en la misma pgina usando estas imgenes...
Despus de completar estos ejercicios puedes considerarte un maestro aadiendo este tipo de efectos. Ahora
despus aadiremos unos cuantos trucos ms a nuestra caja de herramientas.
Y antes de continuar me veo obligado a decir algo. Sospecho que algunos de vosotros vas simplemente leyendo
el documento y os saltis los ejercicios. Si tu objetivo es decir que has ledo algo acerca de estos efectos...muy
bien. Lo has cumplido. Pero si lo que realmente quiers es aprender cmo se hacen y aadirlos a tus pginas, haz
los ejercicios. Mis instrucciones sern el 10% de tu aprendizaje. Hacer y manipular los ejercicios representa el
otro 90%...la parte realmente importante. Recuerda, aprendes practicando.
Parte 3...
Parte 1 | Parte 2 | Parte 3 | Parte 4 | Parte 5 | Ejemplos
Una vez terminado el ejercicio anterior, debes tener algo parecido a sto...
El efecto en una pgina aparte.

Qu ms podemos hacer con nuestras recin aprendidas habilidades?
Pues para empezar podemos enredar un poco con las variables que enviamos a la funcin, de forma que cuando
el ratn pasa por encima de una imagen, la que cambia es otra.
El ejemplo anterior.
Y este es el cdigo del ejemplo superior:
<A HREF="javascript:nada()"
onMouseOver="cambiar('img04','camera_on')"
onMouseOut="cambiar('img04','camera_off')">
<IMG SRC="flash.gif" WIDTH="64" HEIGHT="16" BORDER="0" ALT="Flash"></A>
<IMG SRC="camera_off.gif" WIDTH="42" HEIGHT="44" BORDER="0" ALT="Camera"
NAME="img04">
Y stas son las declaraciones de precarga de imgenes:

camera_off = new Image(42,44); camera_off.src = "camera_off.gif";
camera_on = new Image(42,44); camera_on.src = "camera_on.gif";
Nota que la imagen de la cmara se llama img04. No es un enlace y no hay una declaracin onMouseOver
relacionada con ella. Es simplemente una imagen ordinaria. La que tiene el control realmente es la imagen en la
que se lee Flash. Si miras detenidamente el cdigo vers que es ella la que enva las variables a la funcin.
Cuando el ratn pasa por encima de la imagen Flash (onMouseOver), sta enva img04 & camera_on a la
funcin. La funcin coloca camera_on en la localizacin de imagen img04 (la de la cmara). Cuando el ratn
sale de la imagen (onMouseOut), se envan dos nuevas variables a la funcin, invirtiendo el proceso. Esto
demuestra que puedes controlar cualquier imagen desde cualquier otro punto de la pgina.
Tambin te habrs dado cuenta de que el enlace apunta a una segunda funcin - nada(). Esta es una funcin
vaca, no hace absolutamente nada. Por qu est ah?, te preguntars. Pues porque en algunos navegadores la
nica forma de que funcionen eventos como onMouseOver es que estn dentro de un enlace. As que si quieres
hacer algo como lo anterior, apunta el enlace a una funcin muerta. As tendrs un efecto que trabaja con todos
los navegadores y un enlace en el que no suceder nada si alguien pincha en l.
Esta es la funcin vaca que va en las sentencias <SCRIPT> con la otra funcin...
function nada() {
}
Si adems quieres eliminar la aparicin en la barra de estado de "function nada()", slo tienes que aadir
lo siguiente al enlace...
onMouseOver="cambiar('img04','camera_on');self.status='Clickity-click';
return true"
onMouseOut="cambiar('img04','camera_off');self.status=''; return
true"><IMG
SRC="flash.gif" WIDTH="64" HEIGHT="16" BORDER="0" ALT="Flash"></A>
NAME="img04">
La primera lnea coloca un mensaje en la barra de estado cuando el ratn pasa por encima de la imagen, y la
segunda lnea lo borra cuando el ratn sale de la imagen.
Evidentemente puedes utilizar texto normal en el enlace para cambiar la imagen...
Flash
onMouseOver="cambiar('img04','camera_on')"
onMouseOut="cambiar('img04','camera_off')">Flash</A>
NAME="img04">
Podemos adems combinar estos efectos para hacer un men con texto e
imgenes...
Pgina Principal
Enlaces
Correo
El efecto en su propia pgina.

Y lo que sigue es el cdigo exacto para el men anterior...
<UL>
<FONT FACE="verdana,arial,helvetica">
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0" ALT=""
NAME="img07" HSPACE=2>
<A HREF="home.html"
onMouseOver="cambiar('img07','red_arrow_on');self.status='Pgina
Principal'; return true"
onMouseOut="cambiar('img07','red_arrow_off');self.status=''; return
true">Pgina Principal</A>
<BR>
<A HREF="links.html"
onMouseOver="cambiar('img08','red_arrow_on');self.status='Enlaces';
return true"
true">Enlaces</A>
<BR>
<A HREF="mailto:catwalk@navegalia.com"
onMouseOver="cambiar('img09','red_arrow_on');self.status='Mándame
un correo'; return true"
true">Correo</A>
</FONT>
</UL>
Y stas son las declaraciones de precarga...
red_arrow_off = new Image(12,14); red_arrow_off.src = "red_arrow_off.gif";
red_arrow_on = new Image(12,14); red_arrow_on.src = "red_arrow_on.gif";
Tmate un par de minutos (o de horas) para estudiar lo que est sucediendo aqu. Parece muy complicado, pero
no lo es en realidad. Aqu hay otro ejercicio que te ayudar a afirmar los conocimientos que has adquirido en esta
parte del tutorial. Reproduce el siguiente efecto:
Ganso
Cacata
Pichn
Cigea
Cisne
Tucn
Todas las imgenes que necesitas estn aqu.

Y el ejercicio completo est aqu.
Una vez ms, si haces el ejercicio, conseguirs una experiencian imposible de adquirir de otra forma. Y creme,
la experiencia es mucho ms valiosa que todos los dems consejos includos en este tutorial.
Hemos acabado ya? Oh, no!. Hay mucho ms que aprender y muchos ms efectos con los que jugar. Los
veremos en la Parte 4.
Parte 4...
Parte 1 | Parte 2 | Parte 3 | | Parte 4 | Parte 5 | ndice de Ejemplos
Ahora vamos a aprender dos nuevos eventos - onMouseDown (pinchar) y onMouseUp (soltar). Los ejemplos hablan por s solos:

Nota que onMouseDown y onMouseUp slo son soportados por los nuevos navegadores solamente (NN4+, IE4+). Los antiguos slo mostrarn el efecto onMouseOver. En realidad, los
navegadores viejos, o los que tengan JavaScript desactivado, no harn nada ms que cambiar la imagen original. Pero si JavaScript est desactivado y tus atributos HREF apuntan a una URL, el
usuario ir a esa URL de todas formas. Si apuntan a una funcin JavaScript no suceder absolutamente nada.
Este es el cdigo para el efecto superior...
onMouseOver="cambiar('img01','press___up')"
onMouseOut="cambiar('img01','press_init')"
onMouseDown="cambiar('img01','press_down')"
onMouseUp="cambiar('img01','press___up')"><IMG
SRC="press_init.gif" WIDTH="56" HEIGHT="22" BORDER="0" ALT="" NAME="img01"></A>
Las declaraciones de precarga...
press_init = new Image(56,22); press_init.src = "press_init.gif";
press___up = new Image(56,22); press___up.src = "press___up.gif";
press_down = new Image(56,22); press_down.src = "press_down.gif";
Y las imgenes...
Coloca una URL en el enlace (<A HREF="algunsitio.html") e irs a parar a algn sitio...
Por supuesto, puedes integrar todo esto con otros mtodos y funciones de JavaScript...
Los efectos superiores en sus pginas... efecto 1 - efecto 2

Ahora veremos otro evento: onClick. El siguiente ejemplo ejecuta una de las funciones JavaScript previas:...
<A HREF="javascript:hola()"
onMouseOver="cambiar('img05','clickme2')"
onMouseOut="cambiar('img05','clickme1')"
onClick="hola(); return false"><IMG
SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img05"></A>
Normalmente este manejador de eventos (se es su nombre tcnico) no se utiliza para enlazar a una URL. Sin embargo puede ser til si un servidor altera tus enlaces. El primero que se me viene a
la cabeza es XOOM, aunque hay bastantes ms. Veamos: supn que visitas una pgina de algn miembro de XOOM, y pinchas en un enlace que apunta a pagina.html. XOOM altera este enlace
de forma que queda as: _XOOM/pagina.html (o algo parecido, y de esta forma aparece siempre su banner en lo ms alto de la pgina). Un mecanismo de este tipo puede encontrar pginas sin
problemas, PERO, cuando el enlace no apunta a una pgina sino que apunta a mifuncion(), el navegador se ve obligado a buscar _XOOM/mifuncion(). Como evidentemente esto no existe, la
funcin no se ejecuta. Cmo se soluciona? (Eres usuario de XOOM y me ests preguntando cmo te puedes librar de ese banner omnipresente?). Estara feo que te lo dijera, PERO, si aades un
manejador de eventos como onClick al enlace, puedes evitar el problema, ya que la mayora de los navegadores darn preferencia a las instrucciones de onClick() sobre las que aparezcan en el
atributo HREF, que no se ejecutarn.Y no debo decir ms acerca de esto, aunque a buen entendedor...
Puedo usar gifs animados en un efecto mouseover?
Claro que s, mira...

Para, para, para... esta vez has hecho las cosas diferentes. No has precargado las imgenes, por qu?. Bueno, en palabras de Christopher John Robb...
"La cuestin es sta: Los gifs animados empiezan la animacin en cuando se cargan, no cuando se muestran en la pantalla.
Si los precargas empiezan a ejecutarse. Pero si no ejecutan su bucle, estn en un estado de hibernacin. As que no
puedes precargarlos si antes no evitas que ejecuten su bucle, y an as, no puedo prometer que el usuario no vaya a poner
el ratn sobre, o fuera, del enlace en mitad del bucle. No estoy seguro de que no pueda hacerse de otra forma, pero es la
nica que he encontrado de resolver el problema."
Por lo tanto, lo que est sucediendo es lo siguiente...

<A HREF="home.html"
onMouseOver="cambiar2('img06','anihome_up.gif')"
onMouseOut="cambiar2('img06','anihome_down.gif')"><IMG
SRC="anihome_static.gif" WIDTH=60 HEIGHT=25 NAME="img06" BORDER=0 ALT="Home"></A>
Date cuenta de que en el cdigo superior estamos enviando a la funcin la localizacin de la imagen y la fuente de la imagen (en oposicin a antes que envibamos la localizacin y el nombre de la
imagen.)
Adems estamos utilizando una funcin ligeramente modificada...
function cambiar2(imgName,imgSrc) {
document.images[imgName].src = imgSrc
}}
Es similar, pero opera de forma diferente.
Podemos combinar efectos mouseovers con mapas de imagen?
S... pero.... tiene truco. Hay algunas cosas que debemos tener en cuenta...
1. Debemos ser muy precisos con las coordenadas del mapa.
Porque dejamos en manos de JavaScriptla navegacin.
2. Hay que tener en cuenta a todos aquellos que no tienen JavaScript o lo tienen desactivado.
3. Y por ltimo hemos de tener en cuenta a los navegadores que no soportan los mouseovers.
Esta es la pgina especfica para el efecto superior.

El efecto se compone de cinco imgenes...
Dependiendo de la posicin de el ratn se muestra una u otra imagen. El truco est en conseguir no slo que muestre la imagen correcta, sino que cuando suceda un onMouseOut (el ratn sale de la
imagen) vuelva a la primera imagen... y todo eso sin transiciones ni parpadeos.
La clave est en las coordenadas del mapa. Mira la siguiente imagen. Muestra las diferentes partes del mapa de imagen:
Cuando el cursor est sobre un rea azul, amarilla, morada o verde, la imagen expandida correspondiente aparece. Pero cuando el cursor pasa sobre el rea roja, los eventos MouseOver y
MouseOut muestran la imagen pequea (es decir, la primera imagen de la fila superior). Esto es importante. Fjate que en el cdigo del mapa las cuatro primeras reas definen una parte de la
imagen, mientras que la ltima engloba a toda la imagen. En el caso de conflicto entre las coordenadas, el navegador da prioridad al rea listada en primer lugar. As, al mover el ratn sobre
cualquier rea que no sea la roja, el evento mouseover tiene preferencia y la imagen apropiada es la que se muestra. Cuando el cursor intenta salir de la imagen, no tiene ms remedio que pasar por
la zona roja, y entonces la imagen pequea es la que aparece.
Es importante fijarse en las coordenadas. Si examinas atentamente los nmeros, vers que hay ligero solapamiento entre las diferentes reas. Las coordenadas se definen como sigue...
"x,y,xx,yy" se traduce por:
x,y
+----------------------+
|
|
|
|
+----------------------+
xx,yy
Vers que valor yy de un rea es idntico al valor y del rea inferior (24&24, 38&38, 54&54). Esto hace que un pixel est "superpuesto" entre las reas. Esto es importante porque previene el
parpadeo cuando el cursor pasa de un rea a otra.
Otra cosa a tener en cuenta es tomar en consideracin a los que tienen JavaScript desactivado. Hay mucha gente que est muy preocupada con lo que puede hacerle JavaScript a su sistema (o a sus
archivos). Creo sinceramente que sus miedos son exagerados (y digo de lo mismo de las cookies). Pero, como hay bastante, si quieres permitir que naveguen por tus pginas sin problemas, debes
hacer un poco de trabajo extra.
El cdigo para el efecto...
<SCRIPT LANGUAGE="javascript"><!-document.write("<P><A HREF=\"javascript:nada()\"><IMG SRC=\""+picture_source+"\" width=76 height=76 NAME=\"img09\" border=0
USEMAP=\"#dir1\"></A>");
//--></SCRIPT>
<NOSCRIPT>
<IMG SRC="dir_down_1.gif" WIDTH="76" HEIGHT="76" BORDER="0" USEMAP="#dir2" ALT="Directorio: Principal-Correo-Enlaces">
</NOSCRIPT>
La parte roja es para los que tienen JavaScript activado. Realmente escribe el cdigo usando JavaScript, as que si est desactivado, no se mostrara nada en la pantalla. Entonces se activa la
seccin <NOSCRIPT>. Esta seccin simplemente muestra una imagen esttica completa (la segunda de la fila superior), que a su vez apunta a un segundo grupo de coordenadas. Una vez ms,
puede sonar complicado, pero no lo es. Son slo varias cosas simples combinadas en una sola.
La ltima precaucin es para aquellos que disponen de JavaScript, pero que tienen una versin antigua y no pueden reconocer los efectos mouseover. Aade un trocito de cdigo en las sentencias
head...
if(document.images){
picture_source = "dir_up.gif"
}else{
picture_source = "dir_down_1.gif"
}
..que traducido dice "Si el navegador soporta el objeto image, muestra la imagen pequea. si no, muestra la imagen grande."
Mira cmo hemos escrito el cdigo para mostrar la imagen...
<SCRIPT LANGUAGE="javascript"><!-document.write("<P><A HREF=\"javascript:nada()\"><IMG SRC=\""+picture_source+"\" width=76 height=76 NAME=\"img09\" border=0
USEMAP=\"#dir1\"></A>");
//--></SCRIPT>
<NOSCRIPT>
<IMG SRC="dir_down_1.gif" WIDTH="76" HEIGHT="76" BORDER="0" USEMAP="#dir2" ALT="Directorio: Principal-Correo-Enlaces">
</NOSCRIPT>
...y vers la variable picture_source colocada para este caso.
Una vez ms, todo esto es un poco ms que un simple efecto mouseover y si quieres estudiarlo, debes mirar el efecto en su pgina.
En la quinta parte veremos unas cosillas ms...
Parte 5...
Los efectos mouseover tienen mltiples usos. Aqu los vamos a utilizar para actualizar el contenido de un rea de
texto...
La cocina no se me da muy bien, as que no te vas a perder mucho si no entiendes las recetas
Date cuenta de que aunque pueda parecer algn tipo de efecto de texto, no lo es de ninguna manera. El "texto" es
en realidad una imagen. Este efecto en su pgina.
Lo que sigue es un ejemplo de un "botn-interruptor". En otras palabras, un botn que acta como un interruptor.
Si lo pinchas ejecuta una funcin, hasta que lo vuelves a pinchar y la funcin se detiene.
El efecto superior en su pgina.

Este efecto se consigue utilizando una variable en el script que inicialmente est "apagada". Cuando el botn se
pincha, la variable se comprueba, para saber cal es su estado actual, "apagada" o "encendida". Si est "apagada"
ejecuta una funcin y se coloca como "encendida". Y viceversa, si est "encendida" detiene la ejecucin y se
coloca como "apagada".
Esto es otro ejemplo que se utiliza para actualizar frames. Es un poco ms complejo porque "recuerda" qu se ha
pinchado y qu no. Si pnchas en un botn que ya ha sido pinchado, lo "despincha". Ten en cuenta que todo esto es
una ayuda a la navegacin soportada por JavaScript. Si tus visitantes no tienen navegadores capaces de soportarlo,
o lo tienen apagado, no van a ir muy lejos. As que inserta enlaces normales en una seccin <NOSCRIPT> para
sta gente. Ya s que es un peazo, pero as el trabajo es mucho ms efectivo y eficiente.
Aqu tienes un "botn-interruptor" en su forma ms natural:
El efecto en su pgina.
Lo siguiente es un reloj en JavaScript:
El cdigo del reloj.
Como puedes ver, hay un gran potencial en la utilizacin de efectos mouseover. JavaScript es una herramienta
fantstica que deberas aprender a utilizar para mejorar tus pginas. Con JavaScript puedes controlar la pgina web
completa. Y adems cada versin nueva de los navegadores soporta ms y mejores versiones de JavaScript.
Me han preguntado muchas veces cal es la mejor manera de aprender JavaScript. Y siempre digo lo mismo "La
mejor manera de conseguir una habilidad es...practicar". En este tutorial he sugerido unos cuantos ejercicios.
Construyndolos aprenders ms y mejor. Aprendes practicando. Cuanto ms practicas ms eficiente te vuelves.
Conseguir una nueva habilidad es como aprender karate...requiere muchas horas de prctica y sucesivos niveles de
conocimiento y habilidad. Es tambin como escalar una montaa interminable...jams llegas a la cima, pero cuanto
ms avanzas, ms alto subes, y ms paisaje ves. As que construye los ejercicios, y despus sintete libre para
cambiarlos, mejorarlos, aadirles o quitarles cosas, utilizar otras imgenes...lo que quieras.
Vivimos en una poca de "cortar & copiar", de "seleccionar & pinchar". Todos hemos odo los trminos "fcil",
"rpido" y "no se requiere esfuerzo". Aunque evidentemente todo esto es un progreso, muchos pagan un precio
demasiado alto por todo esto. Para empezar, esperamos una inmediata gratificacin por nuestros esfuerzos. A
menudo esperamos tambin grandes resultados despus de unos minutos de trabajo. Realmente esto es un serio
inconveniente. JavaScript es una herramienta potente, pero tiene sus reglas, y son bastante estrictas, aunque
comparado con otros lenguajes de programacin, es tremendamente laxo. As que puede llegar a ser frustrante la
cantidad de errores que pueden aparecer cuando toqueteas el cdigo. Olvidar una simple llave puede conllevar que
la pgina aparezca completamente en blanco. Pero si perseveras, lo conseguirs. He procurado que el cdigo
quede lo ms claro posible, pero puede que no lo haya conseguido. Ya sabes que las sugerencias son siempre
bienvenidas.
Uno de los mejores recursos que hay acerca de todo esto es la referencia JavaScript de Netscape. Tienen una
versin permanentemente actualizada, y es fcilmente descargable, eso s todo en ingls. Aunque no desesperes,
estoy traducindola, y espero terminar dentro de unos pocos aos, perdn, quera decir meses, o tal vez das, con
suerte...
Referencia JavaScript de Netscape

Tambin hay una gran cantidad de sitios que ofrecen scripts, ayuda y ejemplos. Un sitio especial es www.irt.org.
Lo que empez como una FAQ de Martin Webb para un grupo de noticias ha evolucionado a una completsima
coleccin de informacin acerca de JavaScript, con artculos FAQs, y creacin de pginas, que es realmente
magnfica.Un sitio para visitar.
Bien, por este tutorial, esto es todo. Espero que te lo hayas pasado bien.
A lo largo de este tutorial hemos visto varios ejemplos. La gran mayora tienen una pgina para ellos solitos. Es
mucho ms fcil estudiar el funcionamiento de un script sin tener que bregar con el resto del cdigo HTML, y sin
las interferencias de otros posibles scripts.
Aqu abajo estn todos los enlaces a los ejemplos con una captura de pantalla de cada uno de ellos...
Mouseover bsico
Mouseover con mltiples imgenes
Mouseover en el que una imagen afecta a una segunda imagen
Men de imagen y texto
Mltiples lineas de texto afectan a una sola imagen
http://perso.wanadoo.es/catwalk/botones/examples.html (1 of 4)11/12/2003 02:25:46 p.m.
onMouseDown y onMouseUp
Botn con alerta asociada
Un mousedown activa un script
Mouseover con GIF animados
Mouseover con mapa de imagen
Un mouseover modifica un rea de texto
Botn interruptor
Botn interruptor para actualizar frames
Botn interruptor simple
Reloj JavaScript utilizando cambio de imgenes
http://perso.wanadoo.es/catwalk/botones/demo_simple.html11/12/2003 02:25:51 p.m.
http://perso.wanadoo.es/catwalk/botones/another.html
Otra pgina
http://perso.wanadoo.es/catwalk/botones/another.html11/12/2003 02:25:56 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_excercise1.html11/12/2003 02:26:04 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_camera.html11/12/2003 02:26:09 p.m.
Pgina Principal
Enlaces
Correo
http://perso.wanadoo.es/catwalk/botones/demo_menu.html11/12/2003 02:26:13 p.m.
http://perso.wanadoo.es/catwalk/botones/home.html
Hogar, dulce hogar.
http://perso.wanadoo.es/catwalk/botones/home.html11/12/2003 02:26:20 p.m.
http://perso.wanadoo.es/catwalk/botones/links.html
Enlaces
http://perso.wanadoo.es/catwalk/botones/links.html11/12/2003 02:26:25 p.m.
Ganso
Cacata
Pichn
Cigea
Cisne
Tucn
http://perso.wanadoo.es/catwalk/botones/birds/demo_birds.html11/12/2003 02:26:29 p.m.
http://perso.wanadoo.es/catwalk/botones/birds/cangoose.html
Ganso
http://perso.wanadoo.es/catwalk/botones/birds/cangoose.html11/12/2003 02:26:33 p.m.
http://perso.wanadoo.es/catwalk/botones/birds/cockatoo.html
Cacata
http://perso.wanadoo.es/catwalk/botones/birds/cockatoo.html11/12/2003 02:26:38 p.m.
http://perso.wanadoo.es/catwalk/botones/birds/pigeon.html
Pichn
http://perso.wanadoo.es/catwalk/botones/birds/pigeon.html11/12/2003 02:26:42 p.m.
http://perso.wanadoo.es/catwalk/botones/birds/stork.html
Cigea
http://perso.wanadoo.es/catwalk/botones/birds/stork.html11/12/2003 02:26:47 p.m.
http://perso.wanadoo.es/catwalk/botones/birds/swan.html
Cisne
http://perso.wanadoo.es/catwalk/botones/birds/swan.html11/12/2003 02:26:52 p.m.
http://perso.wanadoo.es/catwalk/botones/birds/toucan.html
Tucn
http://perso.wanadoo.es/catwalk/botones/birds/toucan.html11/12/2003 02:26:56 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_mousedown1.html11/12/2003 02:27:00 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_ani.html11/12/2003 02:27:15 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_imagemap.html11/12/2003 02:27:21 p.m.
Botones Magicos - Efectos Mouseover
http://perso.wanadoo.es/catwalk/botones/recipe/demo_recipe.html11/12/2003 02:27:27 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_girlie.html
http://perso.wanadoo.es/catwalk/botones/demo_girlie.html11/12/2003 02:27:33 p.m.
http://perso.wanadoo.es/catwalk/botones/demo_lightbulb.html
http://perso.wanadoo.es/catwalk/botones/demo_lightbulb.html11/12/2003 02:27:44 p.m.
http://perso.wanadoo.es/catwalk/botones/clock/demo_clock.html
http://perso.wanadoo.es/catwalk/botones/clock/demo_clock.html11/12/2003 02:27:52 p.m.
http://perso.wanadoo.es/catwalk/botones/algunsitio.html
Algn sitio
http://perso.wanadoo.es/catwalk/botones/algunsitio.html11/12/2003 02:27:57 p.m.
>
Imgenes usadas en el ejemplo de los pjaros.
http://perso.wanadoo.es/catwalk/botones/birds/birds.html11/12/2003 02:28:21 p.m.
Diseo Web Profesional & Tutoriales de HTML - Sugerencias
Sugerencias
Acerca de los tutoriales y el sitio web...
Qu est bien?
Qu est mal?
Qu est sobre-explicado?
Qu est sub-explicado?
Qu ms te gustara ver?
Qu otra cosa te gustara hacer?
Dmelo.
Diseo Web Profesional & Tutoriales de HTM - Sugerencias
Tabla General
de Contenidos
de JavaScript
http://perso.wanadoo.es/catwalk/WebTutor/other/suggestions.html11/12/2003 02:28:57 p.m.
Gua
bsica de
HTML
Tutorial de JavaScript - Introduccin - Diseo Web Profesional
Tutorial de
JavaScript Intro
Pincha aqu para bajarte el tutorial completo
en formato zip (200 Kb)
Versin 1.1, ahora compatible con Netscape 4.5 16 de Enero de 2001

Versin 1.0 - 22 de Diciembre de 2000
Hola, mi nombre es Jose Angel y voy a darte unas lecciones para que consigas reproducir, y
posteriormente crear, esos efectos que te gustan tanto de otras pginas, pero que tienen un
cdigo ininteligible para t. Mi propio aprendizaje de JavaScript ha sido completamente
autodidacta, por lo que s perfectamente cules son los principales escollos que un
principiante tiene que sortear cuando aborda la tarea de aprenderlo. No necesitas saber
programacin para aprender JavaScript, aunque dar por supuesto que tienes conocimientos
de HTML. Si ests un poco pegado, o tienes algunas lagunas, ms vale que te des una vuelta
por WebTutor, y vuelvas aqu despus.
Una cuestin importante. Por favor, no me enves un correo dicindome que no has
entendido algo si no lo captas a la primera. Vuelve a leerte la leccin, mira el script con
detenimiento, vete a tomar una cerveza o al cine. Si al final no te funciona o no sabes cmo
arreglarlo, entonces envame un correo, pero, por favor, no lo hagas antes. Mi direccin de
correo est en la ltima leccin, precisamente para que te leas el tutorial entero antes de
llegar a ella. Por otro lado la mayora de los scripts estn escritos de forma que slo sea
necesario copiar y pegar, as ser ms fcil evitar errores.
Antes de continuar quiero hacer hincapi en varias cuestiones.
JavaScript es un lenguaje de programacin, as que si no tienes ninguna experiencia

de programacin anterior, no te va a resultar fcil. No desesperes, ya que es muy
posible que pases por fases confusas y frustrantes. Si no entiendes algo, vuelve a
leerlo. Si sigues sin entenderlo, contina con el tutorial. Tal vez al da siguiente se te
encienda la bombilla y lo captes. Si an as no lo captas, escrbeme y veremos cmo
solucionarlo.
No te saltes los ejercicios, ni mires la solucin. Los ejercicios estn pensados para que
los "escribas", para que desarrolles la forma de pensar que requiere JavaScript. Si no
eres capaz de resolver el ejercicio, o no te funciona, piensa un poco ms y revsalo.
Mirar la solucin es el ltimo remedio. Cuando tengas que hacer tus propios "scripts",
no vas a tener un ejercicio del que copiarlos.
http://perso.wanadoo.es/catwalk/JavaScript/Index.html (1 of 4)11/12/2003 02:29:09 p.m.
No mires el cdigo de esta pgina buscando los scripts originales, porque lo mejor que
te puede pasar es que te confundas. Los ejercicios se abren siempre en una ventana
nueva precisamente para separar su cdigo del resto. As que si quieres mirar cdigo,
hazlo siempre en los ejercicios.
Y por ltimo, este tutorial no te har un experto en JavaScript, pero s te dar el
suficiente conocimiento y experiencia como para que puedas abordar proyectos ms
serios.
Lo primero es lo primero. Qu es JavaScript?. JavaScript es un lenguaje de "scripts" (o trozo

de cdigo escrito en JavaScript), es decir, literalmente un lenguaje que "escribe". Y qu
escribe?. Para empezar, cdigo HTML. Dicho de otro modo, JavaScript hace que tus pginas
sean ms dinmicas, puedan incorporar nuevos elementos, y se puedan adaptar a tus
visitantes, porque cuando incluyes cdigo JavaScript en ellas, el bueno y viejo HTML se
"escribe" en dependencia de las variables que JavaScript maneja. De esta forma un mismo
documento HTML puede tener dos aspectos diferentes, dependiendo del tamao de pantalla
que utilice el visitante de tu pgina, de forma que los grficos se adapten a una resolucin u
otra. Y, por supuesto, puedes hacer esos efectos de botones y fotos que cambian cuando el
ratn pasa por encima, algo imposible de hacer en simple HTML. Ahora veamos nuestro
primer "script" funcionando.
El script
<SCRIPT LANGUAGE="JavaScript">
document.write("<FONT COLOR='BLUE'>Esto es texto azul</FONT>")
</SCRIPT>
El script funcionando
Esto es texto azul
Para hacer eso no necesito aprender JavaScript, ya tengo el HTML.. Cierto, pero tendremos
que empezar con algo facilito. Ahora, y antes de entrar a examinar el script, aprovechar
para discutir algunas cuestiones generales acerca de JavaScript, que es importante conocer.
Ya s que todo lo que sigue es un latazo y que ests ansioso por aprender a hacer todas esas
maravillas. Ten un poco de paciencia, lee lo que sigue, y te ahorrars un montn de
problemas. S lo que estoy diciendo, por propia experiencia.
Para empezar JavaScript no es Java. Java es un lenguaje de programacin desarrollado por
Sun Microsystems. JavaScript fu creado por la gente de Netscape. Sin embargo ambos
tienen la similitud de ser lenguajes de Programacin Orientada a Objetos. Esto quiere decir
que el programador construye pequeos objetos que son los que se encargan de hacer todo
el trabajo. La diferencia principal entre ambos lenguajes es que Java crea aplicaciones
(llamadas "applets" o "Java applets") independientes. Un applet de Java puede ejecutarse en

una pgina Web, pero es un programa pequeo (o grande) totalmente independiente, y
puede funcionar fuera de esa pgina. Adems, Java debe ser "compilado", por lo que se
conoce como la "mquina virtual de Java", antes de ser ejecutado.
JavaScript se parece a Java porque tiene comandos y procedimientos parecidos. Sin embargo
JavaScript es dependiente. Debe ejecutarse dentro de la pgina Web, y la pgina debe
mostrarse en un navegador que entienda JavaScript. Netscape a partir de su versin 2.0 e
Internet Explorer a partir de la 3.0.
Ahora quiero que lo sigue se te quede muy claro. En primer lugar, recuerda que JavaScript
no es HTML, aunque se sigan reglas similares. El cdigo JavaScript va dentro de un
documento HTML, y por lo tanto se graba como un documento HTML normal y corriente, que
puede ser editado por cualquier editor de texto. Pero, repito, no es HTML.
En segundo lugar ten en cuenta que el HTML es tremendamente laxo con la forma en que has
escrito el cdigo HTML en s. Al HTML no le importa que dejes ms o menos espacio entre
las palabras de las sentencias, que incluyas cinco o seis retornos de carro en vez de uno, o
que escribas las sentencias en maysculas, minsculas, o una combinacin de ambas. Le trae
exactamente al fresco. JavaScript por el contrario es muy estricto con la forma del cdigo y
su tolerancia es nula. Si comparas el script siguiente con el anterior vers que he "partido"
una lnea, introduciendo retornos de carro.
document.write("<FONT COLOR='BLUE'>
Esto es texto azul
</FONT>")
</SCRIPT>
Al HTML esto le da lo mismo, y para l los dos trozos de cdigo son iguales. Sin embargo el
primer script funciona, pero el segundo producir un error, porque JavaScript entiende que
despus de cada retorno de carro empieza un comando nuevo. Por lo tanto, edita siempre
tus documentos HTML con JavaScript en un editor que no fije mrgenes. El Bloc de Notas es
ms que suficiente, aunque puede jugarte alguna que otra mala pasada. Debes ser capaz de
escribir en el editor una lnea de kilmetros de longitud, sin que ste incluya un retorno de
carro. Hacerlo de otra forma es tener ganas de crearse problemas. Pero es que ese tipo de
edicin es incomodsima, porque te obliga a ir constantemente de izquierda a derecha y
viceversa. S, lo s. Posteriormente veremos cmo puede evitarse esto, en parte.
Entonces, JavaScript debe ser sensible a las maysculas/minsculas. Lo es, para JavaScript
no es mismo VARIABLE que variable, ni que VaRiAbLe. No lo olvides.
Bueno, pues como introduccin creo que ya es suficiente. Empecemos a examinar nuesto
script. En la primera leccin.
Leccin 1
Tutorial de JavaScript - Leccin 1 - Diseo Web Profesional
Tutorial de
JavaScript 1
Nuestro script es el siguiente:
El script
</SCRIPT>
Esto es texto azul
Vamos a examinarlo. La primera lnea de texto es:
Esto es simple y llanamente cdigo HTML que le indica al navegador que lo que sigue es un
script. Todo cdigo JavaScript empieza con este comando. Y ese LANGUAGE="JavaScript"
indica el tipo de lenguaje de script que se va a utilizar, ya que hay otros tipos de scripts,
como VBS y LiveScript por ejemplo. Utilizando ese comando le decimos al navegador
exactamente lo que vamos a hacer y le evitamos confusiones. Si nos saltamos la lnea central
y pasamos a la ltima...
</SCRIPT>
...nos encontramos con una sentencia de cierre de HTML que acaba cada secuencia de
comandos de JavaScript. Sin excepciones.
Recuerda, pues: Se empieza siempre con
y se acaba con
http://perso.wanadoo.es/catwalk/JavaScript/lesson01.html (1 of 3)11/12/2003 02:29:26 p.m.
</SCRIPT>
Y qu sucede con los navegadores viejos o que tengan JavaScript desactivado?. Mira aqu
para ver cmo se soluciona.
Ahora vamos a la chicha del script:
El script es tan simple para que puedas adivinar qu hace cada cosa. document.write() es
uno de los ms importantes comandos de JavaScript y lo que hace es seguir al pie de la letra
tus instrucciones. document hace referencia a la pgina actual, es decir, y siendo ms claro,
para JavaScript, document es la pgina en la que se encuentra el script, en este caso
lesson01.html. Esta pgina se ve alterada porque le ests diciendo a JavaScript que
"escriba" (write) algo en ella. Lo que vas a escribir est entre los parentsis. Y lo que hay
entre parentsis no es ms que una sentencia FONT que cambia el color del texto a azul.
Fjate que el texto va encerrado entre comillas, y que la parte de la sentencia de HTML que
debe llevar comillas se ha encerrado entre comillas sencillas. Si hubiera utilizado comillas
dobles, como en el siguiente ejemplo:
document.write("<FONT COLOR="BLUE">Esto es texto azul</FONT>")
</SCRIPT>
JavaScript hubiera interpretado que el comando acababa al empezar BLUE, y se hubiera
producido un error. As que dentro de las comillas dobles, usa siempre comillas sencillas.
O sea, que, despus de todo este rollo, lo nico que ha hecho JavaScript es cambiar el color
del texto a azul. No exactamente. El cambio a texto azul lo ha hecho el HTML. Lo que ha
hecho JavaScript ha sido escribir el cdigo HTML de la pgina para cambiar el texto a azul.
Lo captas?. Si no es as, no te preocupes, cogers la idea un poco ms adelante.
Incidiendo an ms en lo anterior, quiero introducir tres trminos que son muy comunes.
document es lo que se conoce como un "objeto". write es un "mtodo" del objeto
document. Y el texto entre parentsis es una "instancia", o lo que se debe hacer cuando el
"mtodo" acta sobre el "objeto". As que el script lo que hace es tomar el "objeto" (algo que
ya existe, la pgina) y utilizando el "mtodo", escribir algo en l. Qu es lo que escribe?. Lo
que hay en la "instancia", es decir, el cdigo HTML. Por lo tanto, lo que ha hecho el script ha
sido "escribir" un trozo de cdigo HTML en la pgina. El navegador "lee" el cdigo HTML y
muestra la pgina en la pantalla.
Supongamos que quieres variar el color de fondo de la pgina, blanco si es da, negro si es de
noche. Haces un script que mire la hora. Cuando alguien consulta la pgina, sta se carga en
la memoria del navegador y empieza a ejecutarse. JavaScript cumple tus rdenes, mira la
hora, y si es de da el script "escribe" en la pgina <BODY BGCOLOR="WHITE">. Si es de
noche, "escribe" <BODY BGCOLOR="BLACK">. Cuando el navegador "lea" la pgina cargada
en su memoria para presentarla en pantalla, se encontrar con una sentencia u otra, y
mostrar la pgina en consonancia. Lo captas ahora?.
Ejercicio
Ahora vamos con el primer ejercicio. Altera el script de forma que cree dos lneas de texto.
Una roja y otra azul. Pero quiero que lo hagas aadiendo comandos JavaScript, no
escribiendo ms HTML en la "instancia". El efecto debe ser el siguiente:
Esto es texto azul
Esto es texto rojo
Solucin (abre una nueva ventana).
Leccin 2
Ocultacin a navegadores antiguos, y forma de avisarlos
Ocultacin a navegadores antiguos y forma de avisarlos

Los navegadores que no soportan JavaScript pueden jugarte una mala pasada a la hora de
mostrar la pgina, por la sencilla razn de que en vez de ejecutar el cdigo JavaScript, lo
muestran en la pantalla como texto simple. Para evitar este efecto utilizamos las marcas
de comentario en HTML, , y la marca de comentario de JavaScript, que es //. Por lo
tanto, el cdigo quedar as:
<SCRIPT LANGUAJE="JavaScript">

</SCRIPT>
El truco es el siguiente: Un navegador que soporte JavaScript ver la sentencia de apertura
del script y por tanto empezar a "pensar" en JavaScript. Inmediatamente ver que se inicia
un comentario en HTML, por lo que ignorar el resto de la lnea, PERO al estar "pensando"
en JavaScript, entiende que la siguiente lnea es un comando, as que lo ejecutar,
procediendo hasta encontrar la doble barra //, que es el indicador de comentario en
JavaScript, por lo que no ejecutar esa lnea. Para terminar ve la sentencia de cierre del
script, empieza a "pensar" otra vez en HTML y todo funciona perfectamente.
Un navegador que no soporte JavaScript ignorar la sentencia <SCRIPT>, ya que no la
conoce. Inmediatamente ve una marca de comentario y por lo tanto no har nada hasta
encontrar la marca de fin de comentario, que est justo al final del script, con lo que
conseguimos que se salte el script completo. Al final encontrar la sentencia de cierre del
script, y la ignorar tambin. Problema resuelto.
Pero, si el navegador antiguo se salta todo el script, la pgina no funcionar correctamente.
Cierto. Esto se puede solucionar, en parte, con las sentencias de HTML <NOSCRIPT> y </
NOSCRIPT>. Los navegadores que soportan JavaScript ignoran todo lo que haya entre esas
sentencias. As, puedes incluirlas al principio de la pgina de la forma siguiente:
<NOSCRIPT>
Tu navegador no soporta JavaScript o no lo tiene activado,
as que esta pgina no funcionar correctamente. Lo siento.
</NOSCRIPT>
http://perso.wanadoo.es/catwalk/JavaScript/oldbrowser.html (1 of 2)11/12/2003 02:29:32 p.m.
Ocultacin a navegadores antiguos, y forma de avisarlos
Como alternativa, tambin puedes utilizar <NOSCRIPT> y </NOSCRIPT> despus de cada

trozo de cdigo de JavaScript, con un cdigo HTML que explique lo que hara el script. De
todas formas no te preocupes mucho de sto, ya que la gran mayora utiliza navegadores que
soportan JavaScript.
Volver
http://perso.wanadoo.es/catwalk/JavaScript/oldbrowser.html (2 of 2)11/12/2003 02:29:32 p.m.
Solucin 1
El script
document.write("<FONT COLOR='RED'>Esto es texto rojo</FONT><BR>")
</SCRIPT>
El script funcionando:
Esto es texto rojo
Esto es texto azul
Aadiendo ms HTML a la "instancia" el script quedara as
document.write("<FONT COLOR='RED'>Esto es texto rojo</FONT><BR><FONT
COLOR='BLUE'>Esto es texto azul</FONT>")
</SCRIPT>
Observa el uso de las comillas sencillas. Observa tambin que todo est escrito en una lnea
continua. El efecto del segundo script es exactamente igual al primero.
http://perso.wanadoo.es/catwalk/JavaScript/solucion1.html11/12/2003 02:29:38 p.m.
Tutorial de
JavaScript 2
Sabes que es lo que ms he visto en JavaScript?. Mensajes de error. Y sabes que fu lo peor
de todo?. Que tard dos meses, dos, en darme cuenta de cmo JavaScript procesaba los
errores. Y adems todo el mundo pareca ignorarlos. Supongo que sern tan perfectos que
nunca se equivocan. Pero yo s, ya que meto una o dos patas por lnea, as que los mensajes
de error se han convertido en viejos conocidos. Un mensaje de error en JavaScript tiene esta
apariencia:
Dependiendo del navegador (y de la versin que utilices), el aviso anterior aparecer

automticamente o no. En Internet Explorer, el aviso aparece primero como un triangulito
amarillo con un signo de exclamacin, en la barra de estado, abajo a la izquierda. Tambin
aparece un texto relativo al error. Pincha en el tringulo y se abrir el aviso. Si quieres que
el aviso se abra automticamente, pincha en Herramientas, Opciones de Internet,
Opciones Avanzadas, Mostrar una notificacin sobre cada error de secuencia de
comandos. Tambin es posible que, una vez que el error haya aparecido, tengas que pinchar
en Mostrar Detalles para ver la descripcin del error. En Netscape, borra todo lo que
aparece en la Barra de direcciones, y escribe javascript:.
Hay bsicamente dos tipos de errores que puedes cometer: Errores de sintaxis y errores en
tiempo de ejecucin o Run-Time. Un error de sintaxis significa que no has escrito un
comando correctamente, o que la estructura de comandos de JavaScript no est
correctamente configurada. Un error Run-Time significa que has utilizado un comando
incorrecto. De cualquier manera, ambos significan lo mismo: en algn sitio has metido la
pata. Hay programas por ah que te pueden ayudar a arreglar los errores, un proceso llamado
"depuracin", pero a menos que vayas a escribir mucho, pero mucho JavaScript, es
preferible hacerlo a mano. Es ms fcil de lo que crees, y adems as aprenders a corregir
los errores ms comunes.
Veamos cmo arreglar los errores. Se dice que la mejor manera de evitar errores es no
cometerlos. Lo malo es que sto es mucho ms fcil de decir que de hacer. Como se dijo en
la leccin anterior, puedes evitar errores escribiendo en un editor de texto sin mrgenes. Si
usas el Bloc de Notas, pincha en Edicin y en Ajuste de lnea. Eso har que la edicin sea
ms cmoda. Deja tambin cada comando de JavaScript en su propia lnea, por larga que
sea. No hay necesidad de partir la lnea en dos, ya que hacerlo puede producir un error.
Lo bueno que tiene la ventana de errores que hemos visto anteriormente es que te dice cul
es el problema y dnde est. En el ejemplo que vimos ms arriba, se ha producido un error
de sintaxis, ya que no he escrito correctamente un comando, y an ms, apunta
directamente a la lnea en la que se ha producido el error, en este caso la 34. No sera
fantstico que el HTML hiciera lo mismo?.
Cuando un mensaje de error te enva a una lnea en particular, quiere decir que esa lnea se
ha contado desde el inicio del documento HTML, no desde el inicio del script. Por ejemplo,
el documento inferior contiene un error en la lnea 8. Es un error de sintaxis porque la
instancia no se cierra en la misma lnea en la que se empez. Te percatas de cmo el
parentsis ha saltado a la lnea siguiente?:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
document.write("Bla, bla, bla, bla..."
)
</SCRIPT>
</BODY>
</HTML>
Date cuenta tambin de que se ha contado la lnea en blanco que hay despus de <BODY>.
Ahora que el error est localizado, hay que decidir que hacemos con l. La mayora de las
veces, ser un error de sintaxis, la lnea se habr truncado, algo no estar bien escrito, o
habrs usado comillas dobles donde deberas haber usado comillas sencillas. Si el error es
Run-Time, habitualmente se produce porque un comando no sigue una secuencia lgica. Por
ejemplo, utilizas un comando para hacer referencia a un botn, cuando en realidad ests
haciendo referencia a un caja de texto.
Sin embargo, peor an es cuando en vez de tener un error, tienes errores mltiples!.
Afortunadamente JavaScript es extremadamente lgico. Supongamos que tienes 10 errores a
lo largo de un script. Entonces aparece una cascada de mensajes de error, y el ltimo que
haya encontrado el ordenador ser el primero que se muestre, por la sencilla razn de que
todos los dems estn en ventanas que han ido quedando por debajo. En Internet Explorer
pincha en el botn Anterior para ir "subiendo" por la cascada de errores. Pues bien, no te
preocupes por este ltimo error, probablemente ni exista. Habitualmente, es el primer error
el que produce la cascada. As que arregla los errores desde el inicio del documento HTML y
uno por uno. Cada vez que arregles un error vuelve a ejecutar el script (simplemente graba
el documento y recarga la pgina). Ms de una vez, arreglar el primer error, resolver todo
el problema. A veces (no es muy frecuente, pero s frustrante) suele suceder en IE que, a
pesar de arreglar el error, sigue apareciendo la ventana declarando que el error existe. En
ese caso, cierra el navegador y abre una sesin nueva.
Otro tipo de error muy comn es que algo no est definido. Es un error Run-Time que indica
que algo en el script no est bien. Si este es el caso asegrate de que las lneas de cdigo no
estn truncadas, ni nada parecido. En caso de duda, borra la lnea, siempre puedes volver a
pegarla. Y revisa la "ortografa". Sucede mucho ms a menudo de lo que crees.
Y en cuanto a los errores, esto es casi todo. Por ahora ya sabes lo suficiente como para
corregir el 99% de ellos. Y de hecho ten en cuenta que tener mensajes de error es una cosa
extraordinaria. Si no los tuvieras, lo nico que conseguiras sera una pgina en blanco, sin
ninguna sugerencia acerca de cul pueda ser el problema.
Ejercicio
Abajo hay un enlace a una pgina con un script. Cuando pinches en el enlace, el script dar
dos errores. Tu tarea es arreglar los errores, de forma que el script funcione. Evidentemente
tendrs que editar el cdigo HTML del documento. Probablemente no reconocers ninguno
de los comandos del script, pero eso no importa ahora. Los mensajes de error te deben dar
suficiente informacin para conseguir que el script funcione. Si el script funciona
correctamente mostrar la hora y la fecha en pantalla. Nuevamente, estos enlaces abrirn
nuevas ventanas.
Consejo: Puede que solamente tengas un aviso de error cuando ejecutes el script. El
segundo error se producir cuando arregles el primero.
Pincha aqu para ir al script incorrecto
Pincha aqu para la solucin
Leccin 3
Solucin 2
El script
hoy = new Date();
document.write("La hora actual es: " + hoy.getHours() + ":" + hoy.
getMinutes() + "<BR>");
document.write("La fecha es: " + hoy.getDate() + "/" + (hoy.getMonth
()+1) + "/" + hoy.getFullYear());
</SCRIPT>
La hora actual es: 14:30
La fecha es: 11/12/2003
Tutorial de
JavaScript 3
Lo mejor que tiene JavaScript es la gran cantidad de cosas que ya existen, de forma que slo
tienes que cogerlas y mostrarlas ms o menos directamente en la pgina. Por ejemplo,
document es algo que ya existe. Tiene que ser as, porque si no podras escribir en l.
En esta leccin veremos siete nuevos mtodos: getDay(), getDate(), getMonth(), getFullYear
(), getHours(), getMinutes(), y getSeconds(). Estos mtodos (observa que todos llevan
parntesis) ya existen, o si lo prefieres, estn predefinidos en JavaScript. Podras cogerlos y
colocarlos en tu pgina directamente. El problema es que son slo mtodos. Por definicin,
necesitan un objeto sobre el que actuar, pero no pueden hacerlo directamente sobre el
objeto document...as que tendremos que crear un objeto nuevo.
Vamos a escribir un script que muestre en pantalla la fecha y la hora en la que has llegado a
esta leccin.
El script
Ahora = new Date (); // Nuestro objeto
document.write("Hoy es " + Ahora.getDate() + "-" + (Ahora.getMonth()
+1) + "-" + Ahora.getFullYear() + "<BR>");
document.write("Has entrado a esta pgina exactamente a las ");
document.write(Ahora.getHours() + ":" + Ahora.getMinutes() + ":" +
Ahora.getSeconds());
</SCRIPT>
Hoy es 11-12-2003
Has entrado a esta pgina exactamente a las 14:30:21
Bien, empecemos a escudriar todo esto. No es tan difcil como parece. En primer lugar,
qu es // Nuestro objeto?. Si te saltaste la pgina de los navegadores antiguos no lo
has visto. Esa doble barra es el indicador de comentario en JavaScript. Todo lo que haya
detrs de las barras, y en la misma lnea se ignorar.
Observa la primera lnea: Ahora = new Date();. Hay otra cosa importante aqu. Un
comando en JavaScript puede acabar de dos formas: Bien con un retorno de carro, como ya
sabemos, bien con un ;. De esta forma podemos colocar dos, o ms, comandos seguidos en
una lnea.
Y ahora vamos a ver cmo funciona el script:
Ahora es un objeto que creamos asignndole el valor del objeto preexistente Date
mediante la palabra clave new. Vale, ya s que no te has enterado de nada. Vers, lo que
hace el objeto Date es "mirar" en el sistema cul es la fecha y hora actuales. Mediante la
instruccin Ahora = new Date(); almacenamos la fecha y hora actuales en nuestro
objeto Ahora. Me sigues?. Eso espero.
Observa ahora la sintaxis de la cuarta lnea del script:
document.write("Has entrado a esta pgina exactamente a las ");
No es ms que la instruccin de que escriba Has entrado a... en la pgina. Observa que todo
est encerrado entre comillas, ya que lo vamos a escribir literalmente, y que terminamos la
instruccin con un ;.
Fjate ahora en al quinta lnea del script (porque es ms fcil de entender y de explicar que
la tercera):
document.write(Ahora.getHours() + ":" + Ahora.getMinutes() + ":" +
Ya hemos visto que write es un mtodo de document, es decir, que el mtodo write hace
algo (en este caso "escribir") en el objeto document. Aqu tenemos varios mtodos. Fjate
que todos son similares: getLoquesea() (observa que despus de get la primera letra siempre
es mayscula). Qu hacen estos mtodos?. "Conseguir" (get), o ms exactamente, "extraer",
el da de la semana (Day), la fecha (Date), el mes (Month), el ao (FullYear), la hora
(Hours), los minutos (Minutes), y los segundos (Seconds) del objeto al que estn asignados,
en nuestro caso Ahora.
Por lo tanto lo que hace esta instruccin es decirle a JavaScript:
document.write: Escribe en el documento lo que haya dentro de los parntesis. Y
JavaScript escribe:
Ahora.getHours(): el valor de la hora almacenada en Ahora
Los signos + le indican a JavaScript que vamos a unir valores con texto
":": como ya hemos visto una cadena de texto, que va entre comillas, porque se mostrar
tal como y est, y que nos sirve de separador entre horas y minutos
Ahora.getMinutes(): el valor de los minutos almacenados en Ahora

Repetimos la secuencia + ":" + para crear otro separador entre minutos y segundos
Ahora.getSeconds(): el valor de los segundos almacenados en Ahora
Te has enterado?. El efecto de esta instruccin es el siguiente:
14:30:21
Si utilizamos otro separador, como por ejemplo un guin, quedar as:
document.write(Ahora.getHours() + "-" + Ahora.getMinutes() + "-" +
Y su efecto ser
14-30-21
Armados con este conocimiento veamos la lnea que falta del script:
document.write("Hoy es " + Ahora.getDate() + "-" + (Ahora.getMonth()
+1) + "-" + Ahora.getFullYear() + "<BR>");
Ahora debe resultar evidente que primero se escribe Hoy es (observa que incluimos un
espacio en blanco para que est separado de los nmeros), luego escribe la fecha, un guin,
el mes, otro guin, el ao, y por ltimo incluimos un retorno de carro. Observa lo que hemos
hecho con el mes:(Ahora.getMonth()+1). Le sumamos 1. Por qu?. Porque para
JavaScript los meses empiezan en 0 (Enero) y terminan en 11 (Diciembre). Adems lo
encerramos todo entre parntesis para que la operacin se realice sin posibles interferencias.
Nota: Puede que te preguntes cmo es posible que Ahora.getMonth()+1 entrege 12 como
resultado y, al mismo tiempo, "Hoy es " + Ahora.getDate() no produzca un error. El sentido
comn te dice que no es posible "sumar" texto con nmeros. Y llevas razn. Lo que sucede es que
JavaScript hace las conversiones de los tipos de datos automticamente. Veremos esto un poco ms
adelante.
Por ltimo quiero hacer notar un par de cosas. Observa que la sentencia de HTML <BR> se ha
encerrado entre comillas. Y observa tambin que si necesitas espacios en el texto debes
incluir los espacios dentro de las comillas, no fuera. Recuerdas que dije que JavaScript no
era HTML?.
No es un poco complicado todo esto, si solo vamos a mostrar la fecha?. Ya te dije que
aprender JavaScript no iba a ser fcil. Tal vez te parezca un poco complicado ahora, pero te
aseguro que dentro de un par de das lo vers la mar de fcil, y lo manejars con los ojos
cerrados.
Ejercicio
Veamos si has cogido el asunto. Quiero que escribas un script que muestre la fecha separada
por barras como sta: / Y quiero que lo hagas en una pgina de bienvenida, con el texto
impreso en verde. No te preocupes por el color de los nmeros, ya veremos cmo se cambia.
Y claro, quiero que lo hagas todo en JavaScript.
Leccin 4
Solucin 3
El script
hoy = new Date();
document.write("<FONT COLOR='GREEN'>Bienvenido a mi pgina.<BR>");
document.write("La fecha es: " + hoy.getDate() + "/" + (hoy.getMonth
()+1) + "/" + hoy.getFullYear());
</SCRIPT>
Bienvenido a mi pgina.
La fecha es: 11/12/2003
Tutorial de
JavaScript 4
Ahora que hemos visto algo acerca de objetos y mtodos, empecemos a juguetear con los
"eventos". He de hacer una salvedad. Los "eventos" y los "manejadores de eventos" (event
handlers en ingls) son JavaScript, pero estn "incorporados" al cdigo HTML, por lo que no
requieren los comandos <SCRIPT> y </SCRIPT>. Por s mismos no son scripts, sino
pequeas interfaces entre la pgina y el lector de la misma.
Piensa en los eventos como cosas que suceden, tal y como dice su nombre. Aaden vida e
inters a tu Sitio Web, sin tener que crear scripts complicadsimos. Hay muchos eventos,
pero empezaremos con el ms popular. S, por fin, ya est aqu!: onMouseOver.
Y qu demonios es eso de onMouseOver?. Literalmente, "ratnEncima". S, vamos a ver qu
sucede cuando el ratn pasa por encima de una parte especfica de la pgina.
El script
<A HREF="http://perso.wanadoo.es/catwalk/Inicio.html"
onMouseOver="window.status='Ir a Diseo Web Profesional';return
true">Pincha aqu</A>
Pincha aqu
Pasa el ratn por encima del enlace y observa la barra de estado del navegador
Como puedes ver no es muy complicado. Dentro de un enlace normal y corriente aadimos
onMouseOver="window.status='Ir a Diseo Web Profesional';return
true" . Ahora veamos qu significa todo esto.
En primer lugar onMouseOver es el manejador de eventos del enlace. Qu quiere decir
esto?. Que cada vez que el ratn pasa por encima del enlace (es decir, cada vez que se
produce el "evento") el manejador de evento onMouseOver se "dispara", y ejecuta el cdigo
que tiene asignado. Este cdigo es ni ms ni menos que el que le sigue: "window.status='Ir a
Diseo Web Profesional';return true" . Y este cdigo dice que en la barra de estado del
navegador (window.status) hay que escribir Ir a Diseo Web Profesional. Otra vez, observa
el uso de las comillas simples y dobles. Si vamos un poco ms lejos, observa la estructura de
window.status. window es un objeto existente parecido a document; pero en este caso el
objeto es la ventana del navegador, y status es una "propiedad" de la ventana. En este caso,
la barra de estado. Por supuesto hay otras "propiedades" de la ventana, que como la barra
de estado, pueden ser manipuladas. Y aunque su sintaxis es parecida (objeto.mtodo y
objeto.propiedad), no confundas las "propiedades" con los "mtodos". En la propiedad
utilizamos el signo = para asignar un valor; mientras que un mtodo siempre va seguido por
parntesis (document.write() recuerdas?.)
Por ltimo veamos eso de return true. Observa que he utilizado un ; para separar ambos
comandos. Las accin de las palabras en cuestin no es tan fcil de explicar. Si las palabras
estn presentes el script "mira" si la barra de estado est presente (puede estar
desactivada). Si la respuesta es verdadera (true) el evento ocurre. Perctate de que el texto
en la barra de estado est bloqueado. No vara por mucho ms que pases el ratn sobre el
enlace. Qu sucede si eliminamos las palabras?. Pensemos en ello. Si no se hace un chequeo
de la barra de estado, el evento que se produce es el evento por defecto, y si recuerdas tu
HTML, el evento por defecto es mostrar la URL a la que apunta el enlace. Entonces, lo que
sucede es que se muestra la URL, y cuando el ratn sale del enlace, el evento tiene lugar,
mostrando el texto. Y como no hay comprobacin posterior, todo esto sucede cada vez que
pasas el ratn por encima del enlace. Ahora observa los dos efectos uno al lado del otro. El
izquierdo tiene return true, el derecho no (tendrs que actualizar la pgina).
Pincha aqu
Pincha aqu
Pasa el ratn por encima de los enlaces y observa la barra de estado del navegador
Volvamos a las propiedades. Si las ventanas tienen propiedades, otros objetos tambin
deben tenerlas. Efectivamente. Como por ejemplo, el color de fondo del documento. En
HTML el comando para cambiarlo es <BGCOLOR> , y en JavaScript es igual, salvo por las
maysculas, es decir bgColor . Estoy pensando que haremos un pequeo ejercicio.
Hagamos un enlace que cambie el color de fondo de la pgina cuando el evento ocurra.
Para empezar, el formato va a ser igual que el de arriba y as nos ahorramos algo de trabajo.
Ahora veamos. Vamos a cambiar la ventana o el documento?. Dnde va el comando
<BGCOLOR> ?: en el documento. Pues cambiemos window por document, que es el objeto
que nos concierne. Si ahora vamos a cambiar una propiedad del objeto, cambiemos status
por bgColor. Elegiremos el rosa. As que eliminamos el texto y aadimos PINK.
El script
onMouseOver="document.bgColor='PINK';return true">Pincha aqu</A>
Pincha aqu
Pero yo quiero ambos efectos y al mismo tiempo. Bien, Cmo crees que lo vamos a hacer?.
Pensemos. El sentido comn te dir que necesitas dos comandos onMouseOver. Bien, pero
los dos comandos no pueden estar separados el uno del otro, queremos que sean
simultneos; as que no podemos separarlos con un punto y coma. Entonces utilizaremos una
coma para separar mltiples eventos en JavaScript. Y qu va a pasar con todas esas
comillas? Me voy a armar un lo. No, porque si los comandos van juntos solamente
necesitamos comillas dobles al principio y al final, y todo lo dems ir entre comillas
sencillas.
El script
onMouseOver="window.status='Ir a Diseo Web Profesional',document.
bgColor='PINK';return true">Pincha aqu</A>
El script funcionando (tendrs que actualizar la pgina para que se vea el efecto)
Pincha aqu
Has visto que fcil?.
Ejercicio
Vamos a ver de lo que eres capaz. Te voy a dar un nuevo mtodo del objeto window, la
alerta, alert(). Nuevamente, observa que al ser un mtodo lleva parntesis. Lo que hace
este mtodo es abrir un cuadro de dilogo con un texto y un botn OK. Debes estar harto de
verlas. Prueba a mostrar el cuadro de dilogo cuando el ratn pase por encima de un enlace.
El formato es el siguiente:
window.alert('Texto que aparece en el cuadro de dilogo')
Piensa, decide lo que tienes que hacer y hazlo. Es bastante simple. Y si no se te ocurre
nada, vuelve a leerte la leccin.
Leccin 5
Solucin 4
El script
onMouseOver="window.alert('Ir a Diseo Web Profesional')">Pincha
aqu</A>
Pincha aqu
Otra posibilidad, ms directa, es sta:
El script
onMouseOver="alert('Ir a Diseo Web Profesional')">Pincha aqu</A>
Pincha aqu
Tutorial de JavaScript 5
En la leccin anterior se ha visto el concepto de un manejador de eventos. Hay bastantes ms. Bsicamente, todos trabajan igual, as que
conociendo su formato y pensando lgicamente, sers capaz de colocarlos donde y como te apetezca.
Visto onMouseOver, es evidente que el prximo tiene que ser onClick. Y si onMouseOver dispara un evento cuando el ratn pasa por encima
de algo, qu har onClick?. Disparar un evento cuando pinches en algo. Dado que ya sabes utilizar el mtodo alert (eso espero), lo
utilizaremos para nuestros fines.
El script
onClick="alert('Ests muerto!')">Pincha aqu</A>
Pincha aqu
Como puedes ver, no hace falta tener una Ingeniera Superior para hacerlo funcionar. Adems debe ser evidente a estas alturas, que si
cambias un enlace por una imagen, los efectos sucedern cuando pases con el ratn por encima de la imagen, o cuando la pinches. Si quieres
aprender ms acerca de estos efectos, en Botones Mgicos hay un completo tutorial acerca de esto. De todas formas te recomiendo que
acabes primero este tutorial y abordes el de Botones Mgicos despus.
Tambin vers que todos los enlaces de esta pgina estn "muertos", no vas a ninguna pgina cuando los pinchas (salvo los enlaces de los
ejercicios y el de Botones Mgicos, claro). Te habrs percatado de que en la barra de estado aparece siempre javascript:nada(). Bien, ese nada
() es una funcin, y eso es precisamente lo que vamos a ver ahora: variables y funciones.
Las variables y las funciones son precisamente lo que le dan "vida" a JavaScript. Puedes fijar los valores que quieras para una variable
(dentro de ciertos lmites razonables), y si algo no existe, puedes crearlo utilizando funciones.
Empezaremos con las variables. Una variable es, por definicin, algo que vara. En JavaScript (y en general en todos los lenguajes de
programacin) se utilizan para almacenar datos. Y estos datos pueden, y deben, varar con el tiempo. Por ejemplo:
Llamaremos variable a nuestra variable, y le asignaremos un valor.
variable = 5. Hemos hecho que variable valga 5. Ahora queremos cambiar su valor a 10. Es muy fcil:
variable = 10. Ahora variable vale 10. Supongamos que queremos que variable contenga una cadena de texto:
variable = "cadena de texto". Observa que ahora utilizamos comillas. En otros lenguajes hay que declarar los tipos de variables
antes de hacer cualquier cosa. En JavaScript esto no es necesario. JavaScript asigna dinmicamente el tipo de variable segn se necesita.
Esto es una ventaja en cierto sentido, pero causa tambin algunos problemas.
Tambin podemos almacenar el resultado de operaciones:
variable = 10 * 5. Ahora variable vale 50. Hay mucho ms que aprender acerca de las variables, pero lo iremos viendo poco a poco.
Ahora veamos qu es una funcin. Bsicamente una funcin es un mtodo (document.write(), te recuerdo) definido por el usuario. Veamos
una funcin simple y algunas de sus particularidades.
El script
function mifuncion()
{
alert('Hola, que tal')
}
</SCRIPT>
Pincha aqu
Vayamos por partes. Como ves construir una funcin es sencillo. Solamente necesitas declarar el nombre de la funcin (en este caso mifuncion
()) con la palabra clave function. Observa que el nombre de la funcin va seguido de parntesis, y que no he utilizado acentos ni espacios. El
"cuerpo" de la funcin (es decir, el conjunto de instrucciones que se ejecutarn) va encerrado entre llaves { }. Y en el cuerpo de la funcin
hemos colocado un mtodo alert con su correspondiente texto.
Bien, ya tenemos una funcin, ahora tenemos que hacer que "funcione". En general las funciones hay que "precargarlas". T quieres que la
funcin se ejecute correctamente (y quin no?), y en el momento necesario. Para conseguir sto hay que cargar la funcin al principio de la
pgina. Y al principio quiere decir que debe ser lo primero en cargar. Si recuerdas tu HTML sabrs que lo primero que carga cualquier
navegador es la parte del documento que est entre las sentencias <HEAD> </HEAD>. Por lo tanto todas las funciones del documento deben
ser "declaradas" dentro del encabezamiento. Con esto conseguimos que estn presentes en la memoria del navegador y su ejecucin sea
instantnea. Adems, si colocamos la funcin en el cuerpo de la pgina (en <BODY>) nadie nos asegura que el visitante no va a hacer algo
que "dispare" la funcin antes de que sta se haya cargado, lo que producir un error. As pues, coloca todas las funciones entre las
sentencias <HEAD> </HEAD>.
Ahora veremos cmo llamar a la funcin. Hay varias formas, desde luego. Utilizaremos un enlace porque es probablemente lo que ms vas a
usar para llamar a las funciones. Esto se hace sencillamente as:
<A HREF="javascript:mifuncion()">Pincha aqu</A>
Como ves lo nico que hemos hecho ha sido substituir la URL del enlace por javascript:mifuncion(). En resumen, en el enlace le decimos al
navegador, que en vez de ir a una pgina, ejecute un comando JavaScript, en este caso nuestra funcin. Observa que el resultado es el
mismo que su utilizramos onClick. El cdigo completo (HTML y JavaScript) es el siguiente:
<HTML>
<HEAD>
{
alert('Hola, que tal')
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:mifuncion()">Pincha aqu</A>
</BODY>
</HTML>
Evidentemente esta es una funcin muy sencilla y no resulta muy til. Pero vamos a ver rpidamente la utilidad de las funciones. Suponte
que quieres mostrar tres lneas de texto seguidas en varias partes de una pgina. Puedes escribir todo el cdigo as:
<HTML>
<HEAD>
</HEAD>
<BODY>
document.write("Bla, bla, bla...<BR>");
document.write("Ble, ble, ble...<BR>");

document.write("Blu, blu, blu...<BR>");
</SCRIPT>
.......
</SCRIPT>
</BODY>
</HTML>
Y si utilizamos una funcin?. Entonces quedara as:
<HTML>
<HEAD>
{
}
</SCRIPT>
</HEAD>
<BODY>
mifuncion()
</SCRIPT>
......
mifuncion()
</SCRIPT>
</BODY>
</HTML>
Pincha aqu para ver el primer ejemplo, y aqu para ver el segundo. Como ves el resultado es idntico, pero el cdigo empleado en el
segundo ejemplo es mucho ms verstil.
Demos un paso ms. Imagnate que queremos cambiar adems las fuentes, el color y el tamao del texto. Acabaramos con unas lneas de
cdigo largusimas y montones de repeticiones, con la posibilidad de cometer errores. Con la funcin slo tenemos que escribir el cdigo una
vez, y despus lo nico que tenemos que hacer es llamar a la funcin en el momento y en el lugar adecuados. Pero vayamos an ms lejos.
Utilizaremos el mtodo alert de nuevo:
El script
function mifuncion2()
{
minombre="Jose Angel";
alert(minombre);
}
</SCRIPT>
Pincha aqu
Observa lo que hemos hecho. En la funcin hemos declarado una variable (minombre) y le hemos asignado el valor Jose Angel. Observa que he
utilizado comillas para indicar que es una cadena de texto. Despus hacemos que el mtodo alert muestre el valor de minombre. Ahora
quiero que pienses un poco. Podamos haber utilizado directamente lo siguiente:
function mifuncion2bis()
{
alert("Jose Angel");
}
</SCRIPT>
Desde luego el resultado es el mismo. Pero ahora empezars a ver (si no lo has vislumbrado ya) el poder y la flexibilidad de JavaScript.
Script A
Script B
{
nombre="Jose Angel";
{
nombre1="Jose Angel";
nombre2="Juan";
nombre3="Alfonso";
alert("Hola, " + nombre);

}
</SCRIPT>
alert(nombre1);
alert(nombre2);
alert(nombre3);
Script C
{
nombre1="Jose Angel";
nombre2="Juan";
nombre3="Alfonso";
alert("Hola, " + nombre1);
alert("Saludos, " + nombre2);
alert("Me alegro de verte, " + nombre3);
}
</SCRIPT>
}
</SCRIPT>
Pincha aqu
Pincha aqu
Pincha aqu
Creo que con estos ejemplos el uso de las variables y de las funciones queda bastante claro. Como supongo que te habrs preguntado para
qu diablos sirven los parntesis detrs de la funcin, veremos un ejemplo ms en el que se ilustra su uso:
El script
<HTML>
<HEAD>
function Hola(nombre)
{
alert ('Me alegro de verte, ' + nombre);
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:Hola('Jose')">Hola, Jose</A>
<A HREF="javascript:Hola('Juan')">Hola, Magda</A>
<A HREF="javascript:Hola('Magda')">Hola, Carmen</A>
</BODY>
</HTML>
Hola Jose
Hola Magda
Hola Carmen
Dentro de los parntesis se incluyen los argumentos de la funcin, es decir, las variables que queremos que maneje la funcin.
Ahora ten en cuenta que solamente hemos visto la superficie. En la prxima leccin vamos a hacer algo de submarinismo, pero antes, cmo
no!, aqu estn los ejercicios. S, me temo que en esta leccin hay ms de uno. Evidentemente quiero que utilices lo que ya sabes de
funciones en ellos.
Ejercicios
1. Pon tres enlaces en una pgina. Cada vez que pinches en uno de ellos el color de fondo del documento debe cambiar.
2. Todos sabemos que el color del fondo por defecto es blanco. Quiero que hagas que el color del fondo por defecto sea amarillo, y que
aadas otro enlace, de forma que podamos volver a ver el fondo amarillo, despus de haber pinchado en los botones anteriores.
3. Y ahora quiero que adems de cambiar el color del fondo, aparezca una alerta cuyo texto sea el del color del fondo.
Pincha aqu para la solucin 1
Habrs visto que en el tercer ejercicio tenemos un pequeo problema con el texto. El nombre del color sale en ingls, y nosotros no
queremos esto verdad?. Ms adelante veremos cmo evitar esto con las estructuras de control.
Leccin 6
Ejemplo 1
Bla, bla, bla...

Ble, ble, ble...
Blu, blu, blu...
Bla, bla, bla...

Ble, ble, ble...
Blu, blu, blu...
http://perso.wanadoo.es/catwalk/JavaScript/ejemplo1.html11/12/2003 02:30:53 p.m.
Ejemplo 2
Bla, bla, bla...

Ble, ble, ble...
Blu, blu, blu...
Bla, bla, bla...

Ble, ble, ble...
Blu, blu, blu...
http://perso.wanadoo.es/catwalk/JavaScript/ejemplo2.html11/12/2003 02:30:58 p.m.
Solucin 5 A
El script
<HTML>
<HEAD>
function cambio_de_color(nombre)
{
document.bgColor=nombre
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE WIDTH=100%>
<TR>
<TD ALIGN=CENTER><A HREF="javascript:cambio_de_color('PINK')"><FONT
COLOR="#000000">Rosa</A></TD>
<TD ALIGN=CENTER><A HREF="javascript:cambio_de_color('GREEN')"><FONT
COLOR="#000000">Verde</A></TD>
<TD ALIGN=CENTER><A HREF="javascript:cambio_de_color('BLUE')"><FONT
COLOR="#000000">Azul</A></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Rosa
Verde
http://perso.wanadoo.es/catwalk/JavaScript/solucion5a.html11/12/2003 02:31:10 p.m.
Azul
Solucin 5 B
El script
<HTML>
<HEAD>
color_por_defecto='YELLOW'
{
}
</SCRIPT>
</HEAD>
<BODY>
document.bgColor=color_por_defecto
</SCRIPT>
<TABLE WIDTH=100%>
<TR>
</TR>
<TR><TD COLSPAN=3 ALIGN=CENTER>
<A HREF="javascript:cambio_de_color(color_por_defecto)"><FONT
COLOR="#000000">Color por defecto</A>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Rosa
Verde
Color por defecto
http://perso.wanadoo.es/catwalk/JavaScript/solucion5b.html11/12/2003 02:31:19 p.m.
Azul
Solucin 5 C
El script
<HTML>
<HEAD>
{
alert("El color de fondo es " + nombre)
}
</SCRIPT>
</HEAD>
<BODY>
document.bgColor=color_por_defecto
</SCRIPT>
<TABLE WIDTH=100%>
<TR>
</TR>
<TR><TD COLSPAN=3 ALIGN=CENTER>
<A HREF="javascript:cambio_de_color(color_por_defecto)"><FONT
COLOR="#000000">Color por defecto</A>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Rosa
Verde
Color por defecto
http://perso.wanadoo.es/catwalk/JavaScript/solucion5c.html11/12/2003 02:31:26 p.m.
Azul
Tutorial de
JavaScript 6
En primer lugar veremos algo ms acerca de las variables. Existen de varios tipos como reales,
de cadena o literales, booleanas, .... Ya sabemos que una variable numrica adquiere su valor
mediante una asignacin. La palabra clave es var, aunque generalmente se prescinde de ella:
var variable = 5.
Tambin podemos hacer lo siguiente:
variable = 10; otra_variable = 20
suma = variable + otra_variable. Ahora suma vale 30.
Cuando se mezclen diferentes tipos de variables hay que tener cuidado, ya que JavaScript no
convierte ciertos valores. No es lo mismo
variable1 = "37", que
variable2 = 37.
variable2 es un valor numrico, mientras que variable1 es un valor literal, aunque a
primera vista parezcan iguales. JavaScript no hace la conversin cuando el signo + anda de por
medio. En general JavaScript interpreta que el signo + sirve para "concatenar" literales, es
decir, unir dos literales para conseguir un literal ms largo, por lo que te puedes encontrar con
esto:
resta = "37" - 7, valdr 30, PERO
suma = "37" + 7, valdr 377, porque JavaScript ha unido "37" con 7, y no los ha sumado.
As que cuando mezcles tipos de variables asegrate de lo que ests haciendo. Por ejemplo,
cambia la sentencia anterior por sta
suma = "37"*1 + 7. As te aseguras de que JavaScript convertir la cadena y el resultado
ser 44.
Por ltimo he de decir que hay dos formas de declarar las variables. stas pueden ser locales o
globales (variables scope). Una variable local se declara dentro de una funcin, y solamente
puede ser accedida por esa funcin. Una variable global o scope se declara fuera de las
funciones y es accesible por todas las funciones. Pondr unos ejemplos para aclararlo:
El script
var variable1 = 5
variable2 = 10
function esta_funcion()
{
var esta_variable = 10
suma1 = variable1 + esta_variable
document.write("Valor de suma1: " + suma1 + "<BR>")
}
Los comentarios
Variables scope o
globales. Disponibles
para todas las
funciones de la
pgina. Es
indiferente usar la
palabra clave var.
Variable local, por lo

que solamente est
disponible dentro de
esta_funcion()
esta_funcion()
function aquella_funcion()
{
aquella_variable = 15
suma2 = variable1 + aquella_variable
document.write("Valor de suma2: " + suma2)
}
aquella_funcion()
Variable global, ya
que aunque
aquella_variable
est dentro de una
funcin, no se ha
declarado con la
palabra clave var
</SCRIPT>
Valor de suma1: 15
Valor de suma2: 20
Ya hemos visto cmo se hacen las asignaciones a las variables literales, pero lo repasaremos:
El script
variable_literal1 = "Mi nombre es ";
variable_literal2 = "Jose Angel";
suma = variable_literal1 + variable_literal2
document.write(suma)
</SCRIPT>
Mi nombre es Jose Angel
Hay otro tipo de variable muy til, que se denomina matriz (array) o tabla. Una matriz no es
ms que una variable que puede almacenar diferentes valores al mismo tiempo. Por ejemplo,
imagina que quieres mostrar en una pgina los nombres de tus amigos.
El almacenamiento en las variables puedes hacerlo
as
O as
nombre1 = "Magnificus";
nombre2 = "Teophrastus";
nombre3 = "Bombasticus";
</SCRIPT>
matriz = new Array ()
matriz[0] = "Magnificus";
matriz[1] = "Teophrastus";
matriz[2] = "Bombasticus";
</SCRIPT>
Como ves, declaramos la matriz como si fuera un objeto (en realidad lo es), con la palabra
clave new. Detrs de matriz aparecen una serie de nmeros encerrados entre corchetes. Esos
son los ndices de la matriz. Observa que el primer ndice es 0, y no 1. Es decir, en una matriz
de 10 elementos, el primer elemento es el 0, y el ltimo el 9. Ten esto presente y te evitars
quebraderos de cabeza. Ahora bien, qu utilidad tiene esto de las matrices?. En cuanto
veamos las estructuras de control lo averiguars. Las estructuras de control nos permitirn
tomar decisiones y hacer una cosa u otra dependiendo de las variables. Esto lo veremos en la
siguiente leccin.
En esta leccin me voy a portar bien, no hay ejercicios!. Sin embargo, te recomiendo que
practiques un poco lo que has visto de variables, poniendo diferentes valores, sumndolas,
restndolas, etc. No te llevar ms de 10 minutos y conseguirs familiarizarte con ellas
rpidamente.
Leccin 7
En esta leccin vamos a ver la primera estructura de control. Bsicamente hay dos: Bucles y condicionales.
Un bucle es sencillamente una estructura que se repite un nmero determinado de veces; mientras que una
condicin permite ejecutar un trozo de cdigo u otro en funcin de algo. Empezaremos con los bucles.
Supongamos que necesitamos escribir los nmeros del 1 al 10. Podemos hacerlo de dos maneras:
A lo burro
document.write("1<BR>");
</SCRIPT>
Mejorando
Resultado
for (contador=1; contador<11; contador++)
{document.write(contador + "<BR>")}
</SCRIPT>
1
2
3
4
5
6
7
8
9
10
Veamos cmo se hace. Lo primero es la palabra clave for, que define el bucle. Las condiciones del bucle van entre
los parntesis. El cdigo a ejecutar va entre las llaves que siguen. Nuestro contador tiene un lmite inferior de 1,
un lmite superior de 11, y se incrementa en una unidad a cada paso. Cmo, cmo, cmo...?. La primera expresin
del parntesis indica el valor inicial del contador, la segunda el valor final del contador, la tercera el incremento.
Veamos, una estructura muy tpica de programacin, pero que le da escalofros a cualquiera que sepa algo de
matemticas, es la siguiente:
contador = 0
contador = contador + 1. Si contador vale 0, en cuanto ejecutemos la segunda instruccin el valor de
contador ser, obviamente, 1. En JavaScript esta estructura puede abreviarse en contador++, es decir, indicamos
que el incremento del contador debe ser 1. Para que se te quede ms claro el uso de los bucles, te pondr varios
ejemplos:
El script
El resultado
Creciente, desde un nmero dado:

for (contador=10; contador < 21; contador++)
{document.write(contador + <BR>")}
</SCRIPT>
Decreciente:
for (contador=11; contador > 0; contador--)
</SCRIPT>
Creciente, con intervalo diferente de 1:

for (contador=1; contador < 20; contador=contador+2)
</SCRIPT>
Incluso con decimales:

for (contador=1; contador < 24; contador=contador+2.5)
</SCRIPT>
10
11
12
13
14
15
16
17
18
19
20
10
9
8
7
6
5
4
3
2
1
1
3
5
7
9
11
13
15
17
19
1
3.5
6
8.5
11
13.5
16
18.5
21
23.5
Ahora daremos otro paso ms al frente. Asignaremos valores automticamente a una matriz. Cmo?. Facilongo:
El script
El
resultado
matriz = new Array ();
{matriz[contador] = contador;
document.write("El valor de matriz[" + contador + "] es: " + matriz[contador] +
"<BR>")}
</SCRIPT>
El valor
de
matriz
[1] es: 1
El valor
de
matriz
[2] es: 2
El valor
de
matriz
[3] es: 3
El valor
de
matriz
[4] es: 4
El valor
de
matriz
[5] es: 5
El valor
de
matriz
[6] es: 6
El valor
de
matriz
[7] es: 7
El valor
de
matriz
[8] es: 8
El valor
de
matriz
[9] es: 9
El valor
de
matriz
[10] es:
10
Observa que matriz tiene un elemento matriz[0], que est vaco, ya que no se le ha asignado ningn valor.
Ahora almacenaremos nuevos valores, pero esta vez el ndice ir de 1 a 10 y los valores de 3 a 30. Observa que lo
nico que hay que hacer es multiplicar contador por 3:
El script
El
resultado
matriz = new Array ();
{matriz[contador] = contador*3;
document.write("El valor de matriz[" + contador + "] es: " + matriz[contador] +
"<BR>")}
</SCRIPT>
El valor
de
matriz
[1] es: 3
El valor
de
matriz
[2] es: 6
El valor
de
matriz
[3] es: 9
El valor
de
matriz
[4] es:
12
El valor
de
matriz
[5] es:
15
El valor
de
matriz
[6] es:
18
El valor
de
matriz
[7] es:
21
El valor
de
matriz
[8] es:
24
El valor
de
matriz
[9] es:
27
El valor
de
matriz
[10] es:
30
Recuerdas las alertas con los nombres?. Vamos a repetir el ejercicio, pero de una forma algo diferente. En las
matrices podemos asignar los valores directamente, como por ejemplo:
El script
function Hola()
{
matriz = new Array ("Magda","Carmen","Gemma","Mary","Mercedes");
{window.alert("Hola, " + matriz[contador])}
}
</SCRIPT>
Pincha aqu
Fjate que esta vez el contador empieza en 0. Si empezara en 1, nos saltaramos a Magda, que est en matriz[0].
Si quieres hacerlo empezando en 1 tendras que variar el script y dejarlo as:
El script
function Hola2()
{
matriz = new Array ("","Magda","Carmen","Gemma","Mary","Mercedes");
{window.alert("Hola, " + matriz[contador])}
}
</SCRIPT>
Pincha aqu
Como ves, en el primer elemento de la matriz hemos includo una cadena vaca, y en final del contador ponemos 6,
en vez de 5.
Ejercicio
Como ejercicio quiero que crees dos matrices. En una almacenars cinco nombres, en la otra cinco nmeros de
telfono. Luego quiero que muestres en la pgina la debida correspondencia.
Leccin 8
Solucin 7
El script
matriz1 = new Array ("","Juan","Pepe","Ernesto","Miguel","Antonio");
matriz2 = new Array ("","123456","654321","111111","555555","999999");
{document.write("El telefono de mi amigo " + matriz1[contador] + " es el " + matriz2
[contador] + "<BR>")}
</SCRIPT>
El
El
El
El
El
telefono
telefono
telefono
telefono
telefono
de
de
de
de
de
mi
mi
mi
mi
mi
amigo
amigo
amigo
amigo
amigo
Juan es el 123456
Pepe es el 654321
Ernesto es el 111111
Miguel es el 555555
Antonio es el 999999
Tambin se puede hacer as:

matriz = new Array
("","Juan","123456","Pepe","654321","Ernesto","111111","Miguel","555555","Antonio","999999");
for (contador=1; contador < 11; contador=contador+2)
{document.write("El telefono de mi amigo " + matriz[contador] + " es el " + matriz[contador
+1] + "<BR>")}
</SCRIPT>
Perctate de cmo varan los valores a lo largo del bucle, y de que puedes manipular el valor de contador incluso dentro
de document.write().
Tutorial de
JavaScript 8
En esta leccin veremos las estructuras condicionales. Un condicional nos permite hacer una
cosa u otra en funcin del valor de una o ms variables. Recuerdas que en la primera
leccin deca que podamos hacer que el color de fondo de la pgina fuera de un color u otro
dependiendo de la hora?. Pues bien, vamos a hacerlo. Construiremos el script paso a paso.
En primer lugar necesitaremos saber la hora que es. Esto ya sabemos hacerlo:
hoy = new Date();
hora = hoy.getHours()
</SCRIPT>
En hora almacenamos el valor de la hora actual, que ser un valor entre 0 y 23 (horario de
24 horas). El siguiente paso es la estructura condicional. Para no complicarnos la vida, si el
valor est entre 0 y 12 tendremos fondo negro y si est entre 12 y 23 tendremos fondo
blanco. Ya s que no se corresponde con la realidad, pero vayamos pasito a pasito:
hoy = new Date();
if (hora <= 12) {document.bgColor='BLACK'}
</SCRIPT>
Pincha aqu para ver el resultado. Evidentemente slo vers el fondo negro si an no son las
12:00 horas. La estructura es sencilla. La palabra clave if indica que lo que hay entre
parntesis es una expresin que se evaluar. En este caso se comprueba si hora es menor o
igual que 12. Si la evaluacin es cierta se ejecuta el cdigo que aparece entre las llaves. Si
no lo es, se lo salta. En este caso tenemos la ventaja de que el color de fondo por defecto es
blanco y no tenemos que especificarlo. Pero supongamos que queremos que el color de
fondo no sea blanco sino amarillo. Cambiemos el script:
hoy = new Date();

else {document.bgColor='YELLOW'}
</SCRIPT>
Pincha aqu para ver el resultado. Hemos introducido una nueva palabra clave else. Es
decir, si la condicin es cierta se ejecuta el cdigo que va detrs de if, si no lo es se
ejecuta un cdigo alternativo que va detrs de else. Afinemos an ms el script segn lo
siguiente:
00:00 a 06:00, fondo negro
06:01 a 20:00, fondo amarillo
20:01 a 23:59, fondo azul
Si escribimos el script as:
hoy = new Date();
if (hora <= 20) {document.bgColor='YELLOW'}
</SCRIPT>
vamos a tener problemas, porque nos encontramos con una contradiccin, ya que en ciertos
momentos, como por ejemplo a las 04:00, las dos condiciones son ciertas!. Para evitarlo
introduciremos un elemento nuevo, los operadores lgicos. Un operador lgico es aqul que
devuelve un resultado verdadero o falso, dependiendo de la evaluacin que se haya hecho.
En nuestro ejemplo debemos pensar as:
Si la hora es menor de las 06:00, fondo negro
Si la hora est entre las 06:00 y las 20:00, fondo amarillo
Si la hora es posterior a las 20:00, fondo azul
Nota: no te preocupes por los minutos, no estamos trabajando en la NASA.
El script, por tanto lo escribiremos as:

hoy = new Date();
if (hora
no varia
if (hora
if (hora
sencillo
<= 6)
{document.bgColor='BLACK'}
//Hasta aqui
>6 && hora<20)

>=20)
tambien.
{document.bgColor='YELLOW'}
{document.bgColor='BLUE'}
//Esto es
</SCRIPT>
La parte central dice simplemente, si la hora es mayor de 6, y adems la hora es menor de
20, ejecuta el cdigo. El ejercicio resuelto lo puedes ver aqu.
Nota: El smbolo & se denomina ampersand y puedes encontrarlo en la tecla 6, pulsando
maysculas. Observa que hay ponerlo dos veces.
Otra nota: Tambin te vendr bien poder modificar la hora, de forma que no dependas de la
hora del sistema para comprobar el script. Esto se consigue con la siguiente sintaxis:
hoy = new Date(2000,11,18,16,30); //(ao,mes,dia,hora,minutos)
Traducido dice que estamos en el ao 2000, mes de Diciembre (11+1, recuerdas?), da 18, y
que son las 16 horas, 30 minutos. Para cambiar la hora, simplemente pon:
hoy = new Date(2000,11,18,6,30); //(ao,mes,dia,hora,minutos)
y estars, a todos los efectos para el script, a las 6 de la maana. Debes grabar el
documento y actualizar la pgina para que el cambio sea efectivo.
Bien, continuando donde estbamos, los operadores lgicos son:
Operador y, que es el que hemos visto. La expresin es verdadera solamente si las dos
partes son verdaderas. Solo se ejecutar el cdigo si son ms de las 6:00 y menos de las
20:00
Operador o que se expresa mediante ||, dos barras verticales, que se consiguen pulsando la
tecla Alt Gr y el 1, y cuyo efecto es evaluar la expresin a verdadera si se cumple una de las
dos partes. Por ejemplo if (hora <6 || hora>20) ejecutar el cdigo si son menos de
las 06:00 o ms de las 20:00, es decir entre las 06:00 y las 20:00 no se ejecutar. La
diferencia es importante.
Operador negacin que se expresa mediante !=. Por ejemplo if (hora!=20) ejecutar el
cdigo a todas horas, menos a las 20:00.
Operador igualdad que se expresa mediante == y ejecutar el cdigo solamente cuando se

cumpla la condicin. Por ejemplo if (hora==20) ejecutar el cdigo exclusivamente a las
20:00 horas.
Ahora retomaremos otro ejercicio que nos planteaba un problemilla. La solucin 5 C nos
entrega los nombres en ingls. Pues bien, armado con lo que ya sabes, modifica el cdigo de
forma que en vez de salir PINK salga ROSA, etc, etc... La solucin, aqu.
Ya has visto que no es muy complicado. Ahora s vamos a complicar el asunto, pero de
camino vers el poder que tiene JavaScript. Imagina que eres fotogrfo y quieres publicar en
tu pgina algunos de tus trabajos. Habitualmente las fotos las conviertes en thumbnails y
stos los agrupas en una tabla.(Aclaracin: Un thumbnail es una miniatura de la foto real, no la
foto real encajada en unas dimensiones ms reducidas). Pero unos meses publicas 50 fotos, y
otros meses solamente publicas 10. Por lo tanto tienes que estar retocando continuamente
el documento HTML, con la posibilidad de cometer errores. Pues eso se ha acabado....deja
que JavaScript lo haga por t. S, lo que vamos a hacer es un script (o un programa si
quieres) que genere tablas de forma automtica. Eso es posible?. Desde luego, antes de
media hora lo tendrs funcionando, y lo que es ms importante, sabrs cmo lo has hecho.
Por una vez, te dar la solucin inmediatamente. Esta aqu. Mantn la ventana abierta, de
forma que puedas ver el script y los comentarios de esta pgina. Evidentemente no vamos a
utilizar fotos, nos conformaremos con poner nmeros, pero el efecto es el mismo. Tal vez
tengas que leerte esto dos o tres veces hasta que lo veas, pero no es tan dficil, persevera y
vers como lo coges.
1. Lo nico que tienes que cambiar en el documento para que el tamao de la tabla vare
es el valor de fin. Este equivale al nmero de fotos que hay disponibles. En este caso
supondremos que tenemos 25 fotos, por lo que asignamos a la variable fin el valor 25.
2. La segunda lnea abre un prrafo nuevo con alineacin centrada y define que vamos a
hacer una tabla con un borde 3.
3. No es necesario hacer columna=0, pero asegurarse de que las variables empiezan con
el valor que uno quiere siempre es una buena costumbre. De todas formas columna
nos va a indicar en qu columna de la tabla estamos, y ahora mismo ni siquiera hemos
empezado, as que ser mejor que valga 0.
4. En esta lnea encontramos la declaracin de un bucle, y nuestra ya familiar variable
contador. Evidentemente el bucle empieza en 1 y se ejecutar mientras que su valor
sea menor o igual (<=) que nuestra variable fin, que indica el mximo nmero
de fotos que tenemos en ese momento. Finalmente declaramos que el incremento de
contador ser de 1, ya que no queremos saltarnos ninguna foto.
5. Dentro del bucle definimos tres nuevas variables, lineainicio, lineafinal y
celda, y les asignamos una cadena vaca. El sentido de esto es el siguiente: En celda
vamos a almacenar el valor correspondiente a la celda (o <TD>) adems del enlace
6.
7.
8.
9.
10.
11.
12.
con la foto real. Pero las tablas tienen lneas que se definen por <TR> al principio y
por </TR> al final. En lineainicio almacenaremos los comienzos de lnea o <TR>, y
en lineafinal almacenaremos los finales o </TR>. Y por qu les asignamos una
cadena vaca?. Porque no queremos que en cada pasada del bucle abramos una lnea
nueva en la tabla. En nuestro caso acumularemos siete fotos en la misma lnea antes
de saltar a la siguente. Si no asignamos una cadena vaca tambin tendremos una
tabla, pero con las 25 fotos una debajo de otra!, ya que en cada pasada del contador
abriramos una lnea nueva con <TR>, la foto en su <TD>, y el cierre con </TR>.
Hacemos que columna valga 1, con columna++
Si columna es igual a 1, quiere decir que empezamos una lnea en la tabla, y para eso
necesitamos un <TR>. Por eso a lineainicio le asignamos el valor <TR>.
Y si columna vale 7, (cosa que suceder cuando hayamos ejecutado siete veces el
bucle) estamos ante el final de la lnea, por lo que a lineafinal le asignaremos el
valor </TR>, para cerrar la lnea de la tabla correctamente. Como en la primera
pasada columna vale 1, el cdigo no se ejecuta y lineafinal es una cadena vaca,
por lo tanto no cerramos la lnea de la tabla. Cuando valga 7, s se ejecutar y
cerraremos la lnea de la tabla correctamente. Observa que adems hacemos que
columna valga 0, para que en la prxima pasada vuelva a valer 1, y se active de
nuevo lineainicio con otro <TR>.
Esta parte no debe presentar problemas. Simplemente abrimos una celda de la tabla
con un <TD>, aadimos el enlace para que se abra en una ventana nueva, hacemos
que aparezca el nmero de la foto, que se corresponde obviamente con el valor de
contador y cerramos el enlace. Observa que las fotos deben estar numeradas del 1 al
25 (o del 1 al 100, si tienes 100 fotos), y que todas deben tener extensin jpg. La lnea
normal debera ser algo as:
linea="<td align=center><a href='http://www.tuservidor.com/
directorio/" + contador + ".jpg' target='_blank'><img
src='http://www.tuservidor.com/directorio/thumbnail" + contador
+ ".jpg' border=0></a></td>"
En total acumulamos los valores de todas las variables anteriores. Esto tampoco es
muy necesario, pero lo he hecho as para dejarlo un poco ms claro. En la primera
pasada tendremos un <TR> en lineainicio, el valor normal de la foto en celda, y
una cadena vaca en lineafinal. En la segunda pasada tendremos una cadena vaca
en lineainicio, el valor normal de la foto en celda, y otra cadena vaca en
lineafinal, y as sucesivamente hasta llegar a la sptima pasada, en la que
tendremos una cadena vaca en lineainicio, el valor normal de la foto en celda, y
un </TR> en lineafinal, etc, etc....
Evidentemente mostramos en pantalla el resultado de nuestros esfuerzos.
Esta parte es para hacer que la tabla cuadre perfectamente. Si tenemos 25 fotos, pero
la tabla tiene 7 fotos por lnea, tenemos un total de 28 celdas. Esto nos deja 3 celdas
sin ocupar al final de la tabla, lo que no queda muy esttico. Lo que hacemos es ver si
columna es diferente de 0. Esto nos indica que la tabla no cierra perfectamente y
que habr que crear algunas celdas vacas para conseguirlo.
13. Creamos un bucle nuevo que ir desde 1 hasta 8-columna. Por qu?. Si columna vale
4, quiere decir que hasta 7 nos faltan 3 celdas. 8-columna valdr 8-4, es decir 4. Al
ejecutar el bucle tendremos 1, 2, y 3. No llegar a 4 ya que le hemos dicho que sea
menor. Es decir hemos conseguido ejecutar el bucle las 3 veces que nos interesaba,
colocando 3 celdas vacas.
14. Por ltimo cerramos la tabla
.
Espero que hayas captado el asunto. Me imagino que tendrs algn problemilla que otro,
pero dale un par de vueltas y vers que no es tan complicado. Cambia el valor de final y
ponle valores como 3, 7, 21, o 54 y observa cmo vara la estructura de la tabla. Tambin
puedes variar el nmero de columnas de la tabla, variando la comparacin en if
(columna==7). No olvides variar el valor de tds (siempre es el valor de columna + 1).
Ejercicio
Como ejercicio puedes afinar la parte final de la tabla. Elimina el bucle y haz que la tabla
cuadre utilizando COLSPAN. La solucin aqu.
Leccin 9
Solucin 8 B
El script
{
//---------------------------------Parte nueva
-------------------------------if (nombre=='PINK')
{nombre='ROSA'}
if (nombre=='GREEN') {nombre='VERDE'}
if (nombre=='BLUE')
{nombre='AZUL'}
if (nombre=='YELLOW') {nombre='AMARILLO'}
//----------------------------------fin
---------------------------------alert("El color de fondo es " + nombre)
}
</SCRIPT>
Rosa
Verde
Color por defecto
Azul
Solucin 8 C
El script
fin=25;
document.write("<P ALIGN ='CENTER'><TABLE BORDER=3>");
columna=0;
for (contador=1; contador <= fin; contador++)
{
lineainicio=""
lineafinal=""
celda=""
columna++
if (columna==1) {lineainicio="<TR>"}
else if (columna==7) {lineafinal="</TR>";columna=0}
celda="<TD ALIGN=CENTER><A HREF='url_de_la_foto" + contador + ".jpg'
TARGET='_blank'>" + contador +"</A></TD>"
total=lineainicio+celda+lineafinal
document.write(total)
}
if (columna!=0)
{
for (tds=1;tds<(8-columna);tds++)
{document.write("<TD ALIGN=CENTER></TD>")}
document.write("</TR>")
}
document.write("</TABLE>")
</SCRIPT>
http://perso.wanadoo.es/catwalk/JavaScript/solucion8c.html (1 of 2)11/12/2003 02:32:44 p.m.
Solucin 8 C
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25
http://perso.wanadoo.es/catwalk/JavaScript/solucion8c.html (2 of 2)11/12/2003 02:32:44 p.m.
Solucin 8 D
El script
<SCRIPT LANGUAJE="JavaScript>
fin=25;
document.write("<P ALIGN ='CENTER'><TABLE BORDER=3>");
columna=0;
for (contador=1; contador <= fin; contador++)
{
lineainicio=""
lineafinal=""
celda=""
columna++
if (columna==1) {lineainicio="<TR>"}
else if (columna==7) {lineafinal="</TR>";columna=0}
celda="<TD ALIGN=CENTER><A HREF='url_de_la_foto" + contador + ".jpg'
TARGET='_blank'>" + contador +"</A></TD>"
total=lineainicio+celda+lineafinal
document.write(total)
}
if (columna!=0)
{
tds=(7-columna);
{document.write("<TD COLSPAN=" + tds + "></TD></TR>")}
}
document.write("</TABLE>")
<SCRIPT>
http://perso.wanadoo.es/catwalk/JavaScript/solucion8d.html (1 of 2)11/12/2003 02:32:51 p.m.
Solucin 8 D
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25
http://perso.wanadoo.es/catwalk/JavaScript/solucion8d.html (2 of 2)11/12/2003 02:32:51 p.m.
Es importante echarle una ojeada a la jerarqua de objetos de JavaScript. Y eso que es?. Algo bastante til y
que te ayudar a entender el modelo de objetos en el que se basa JavaScript. Abajo he includo algunas cosas
como imagnes, un formulario con varios componentes y algunos enlaces.
Nombre
Primer apellido
Enlace 1
Enlace 2
Segundo apellido
Enlace 3
Pincha
Lo que sigue es una captura de pantalla de esta parte de la pgina con algunas notas
Y esta es la estructura de la pgina segn la ve JavaScript
Ya vimos que JavaScript entiende el documento HTML como su objeto principal, document. Vimos tambin que
el objeto document tena propiedades como bgColor que pueden ser manipuladas de la forma siguiente
document.bgColor='BLACK'. Asimismo vimos que document tambin tiene mtodos como write, que hacen
cosas como document.write("Hola, qu tal!"). Por favor, vuelve a observar la diferencia entre propiedad
(asignacin mediante =) y mtodo (utilizacin de parntesis). Pues bien, la jerarqua en JavaScript nos permite
manipular directamente los objetos que hay en la pgina. Puedes pensar en la jerarqua como en una URL dentro
de la pgina. Por ejemplo, para hacer referencia a la primera imagen solamente tienes que seguir la lnea, es
decir la primera imagen se corresponde con images[0] (recuerdas que el primer ndice de una matriz es el 0?),
de forma que su localizacin para JavaScript es la siguiente:
document.images[0]
Si queremos hacer referencia al botn, haremos igual. El camino ser:
document.forms[0].elements[3]
Observa el desfase entre la forma de contar de JavaScript y la nuestra. Al empezar por cero siempre hay un
desfase de una unidad con nuestra forma de pensar. De hecho lo que hace JavaScript es crear una serie de
matrices en cuanto carga la pgina en memoria y les asigna los diferentes objetos que encuentra en la pgina.
Por ejemplo, tenemos una pgina con 7 imgenes, 12 enlaces y 3 formularios, cada uno de ellos con 3 campos y
1 botn. Las jerarqua de la pgina ser:
document
7 imgenes
12 enlaces
3 formularios
12 elementos
elements[0] (campo)
elements[1] (campo)
forms[0]
elements[2] (campo)
images[0]
images[1]
images[2]
images[3]
images[4]
images[5]
images[6]
links[0]
links[1]
links[2]
links[3]
links[4]
links[5]
links[6]
links[7]
links[8]
links[9]
links[10]
links[11]
elements[3] (botn)
elements[0] (campo)
elements[1] (campo)
forms[1]
elements[2] (campo)
elements[3] (botn)
elements[0] (campo)
elements[1] (campo)
forms[2]
elements[2] (campo)
elements[3] (botn)
Es evidente que todos y cada uno de los objetos de la pgina tienen un nombre nico. Por ejemplo el botn del
primer formulario ser document.forms[0].elements[3] mientras que el del tercer formulario ser document.
forms[2].elements[3]. Lo captas?. Hay otra cosa ms. No importa que enlaces, imgenes y formularios estn
mezclados en la pgina. Es decir si primero hay 5 enlaces, luego 3 fotos, 1 formulario, otros dos enlaces, etc.
etc., JavaScript seguir numerando a las imgenes de 0 a 6, y har lo mismo con los enlaces. Por lo que hemos
visto antes es evidente que una imagen no es un enlace. Y si tengo una imagen que es a su vez un enlace?. Que
ganas de complicarse la vida. Bueno, la imagen es la imagen y el enlace es el enlace. Aunque en la pgina
coincidan en el mismo sitio fsico, son dos objetos completamente diferentes, y cada uno tendr su jerarqua
especfica. Y cmo s yo el orden que sigue JavaScript para adjudicar los nmeros?. S lgico. JavaScript lee el
documento HTML y empieza a adjudicar nmeros desde el principio hasta el final. Una imagen, images[0], otra
imagen, images[1], un enlace, links[0], otra imagen, images[2], otro enlace, links[1],....Capisce?.
Evidentemente en pginas con muchas tablas, o con una gran cantidad de objetos, o con un montn de objetos
mezclados, la forma superior de referencia puede ser un poco liosa (para nosotros, no para JavaScript), por lo
que hay otra forma de referirse a los objetos: por su nombre. Si editas el cdigo de esta pgina vers que el
formulario se llama hoja (en HTML <form name="hoja">) y que el elemento del formulario correspondiente con el
campo Nombre se llama entrada1. Por lo tanto puedes referirte a ese elemento de dos formas:
document.forms[0].elements[0] o tambin como
document.hoja.entrada1
Cualquiera de las dos formas es vlida, pero es preferible acostumbrarse a la primera. Si JavaScript lo hace por
t, para qu molestarse?.
Y para qu sirve todo esto?. Bueno, estos objetos tienen a la vez sus mtodos y sus propiedades. Por ejemplo,
puedes cargar las imgenes de la siguiente forma:
document.images[0].src="imagen1.jpg";
</SCRIPT>
Evidentemente puedes hacer esto de forma ms fcil con HTML (y sin hacerte la picha un lo con el desfase de
nmeros entre unos y otros), pero el efecto siguiente no puedes hacerlo con HTML:
Pincha en cualquier imagen
Este es tu ejercicio. Intenta reproducir el efecto. Tienes las pistas suficientes, y sabes lo bastante como para
intentarlo. La solucin aqu.
Lo has conseguido?. Felicidades. No?. Veamos. La idea es la siguiente: Cada vez que pinches en una imagen,
todas ellas cambiarn. Cmo lo hacemos?. Bueno, para empezar colocamos las tres imgenes en el documento
dentro de sus respectivos enlaces. En cada enlace ponemos una funcin de JavaScript que nos haga el trabajo.
Como tenemos tres fotos, y no sabemos en qu imagen va a pinchar nuestro visitante, tenemos que decirle a
nuestra funcin en qu foto han pinchado. Por eso ponemos entre los parntesis de la funcin 1, 2, 3, nuestros
argumentos. Cuando nuestro visitante pincha en una imagen, el navegador ejecuta lo que hay en HREF, es decir
llama a nuestra funcin cambia, suministrndole un argumento (1, 2, o 3). Y nuestra funcin lo que hace es ver
qu argumento le hemos suministrado. El resto es fcil, en la propiedad src de document.images[argumento] le
damos el cambiazo a las fotos, por el sencillo procedimiento de cambiar la fuente (o source, de ah src) de la
foto. Es decir, si en la primera foto tenamos imagen1.jpg como src, ahora ponemos imagen2.jpg, y as
sucesivamente. Lo ves?.
Ejercicio
Ahora vamos a hacer lo mismo, pero utilizando los nombres de las imgenes. Asigna atributos tipo <img
src="miimagen.jpg" name="imagen1"> en las tres imgenes y haz que el ejercicio funcione igual. La
solucin aqu.
Por ltimo vamos a ver otra cuestin muy til. De la misma forma que hemos utilizado la propiedad src con las
imgenes, vamos a ver cmo toquetear los formularios. Escribe tu nombre y pincha en el botn:
Escribe tu nombre
Pincha aqu
El script
function mostrar()
{
cadena=document.forms[1].elements[0].value;
hola="Hola, ";
if (cadena=="") {hola="";cadena="No has escrito nada"}
alert(hola + cadena)}
</SCRIPT>
<FORM NAME="ahoraveras">
Escribe tu nombre<br>
<INPUT TYPE="TEXT" NAME="texto">
<P ALIGN=CENTER>
<INPUT TYPE="BUTTON" NAME="boton" VALUE="Pincha aqu" onClick="javascript:mostrar()">
</FORM>
Vamos a ver cmo funciona. Empezamos haciendo una caja de texto y un botn. Al botn le asignamos la funcin
mostrar en un evento onClick. Es decir, cuando pinchen en el botn se dispara onClick y ejecuta mostrar.
Nuestra funcin es un modelo de sencillez. Recuerda lo que has visto. Este es el segundo formulario que hay en
esta pgina (hay uno al principio, recuerdas?). Luego su jerarqua ser document.forms[1] (el desfase, siempre
el desfase). Dentro del formulario nos interesa el primer elemento: document.forms[1].elements[0], y a su vez
nos interesa el valor de ese elemento: document.forms[1].elements[0].value. Este valor lo almacenamos en
cadena y el resto es bastante facilongo. Bueno, pues esto se llama rimbombantemente validacin de
formularios utilizando JavaScript. Ojo, esto es una nimiedad, la validacin puede ser tremendamente compleja,
pero lo fundamental es esto que has visto. Ahora vamos a los.....
Ejercicios:
En primer lugar, rehaz el script anterior utilizando los nombres, es decir, ahoraveras y texto. La solucin aqu.
En segundo lugar, haz un formulario con 3 campos de texto y un botn. Si alguno de los campos de texto est
vaco, debe salir una alerta indicando que el campo loquesea est vaco. No protestes, sabes cmo hacerlo.
Hazlo. La solucin con jerarqua JavaScript aqu. La solucin con nombres aqu. Una solucin un poco ms
refinada, y utilizando los operadores lgicos est aqu.
Ya ves que la solucin refinada no es muy complicada tampoco. Lo de document.forms[x].elements[x].focus()
es un mtodo (con parntesis), que hace que el cursor se site automticamente en el elemento que le digamos.
Estoy seguro de que ya se te habrn ocurrido un par de formas de mejorar la solucin refinada. Muy bien,
prubalas, a qu ests esperando?. De camino tambin puedes ir mejorando el resto de scripts que has visto en
el tutorial, o mejor an, empieza a hacer los tuyos propios. En realidad ya sabes JavaScript!. Bueno, a decir
verdad, no es que sepas mucho que digamos, pero ya tienes la base fundamental para calentarte la sesera
intentando hacer realidad tus propias ideas.
Leccin 10
Solucin 9 A
El script
function cambia(argumento)
{if (argumento==1){document.images[0].src="imagen2.jpg";
document.images[2].src="imagen1.jpg";}
if (argumento==2){document.images[0].src="imagen3.jpg";
if (argumento==3){document.images[0].src="imagen3.jpg";
}
</SCRIPT>
<P ALIGN=CENTER>Pincha en cualquier imagen
<P ALIGN=CENTER>
<TABLE WIDTH=100%>
<TR>
<TD WIDTH=33% ALIGN=CENTER><a href="javascript:cambia(1)"><img
src="imagen1.jpg" border=0></a></TD>
</TR>
</TABLE>
http://perso.wanadoo.es/catwalk/JavaScript/solucion9a.html11/12/2003 02:33:30 p.m.
Solucin 9 B
El script
function cambia(arg)
{if (arg==1){document.i1.src="imagen2.jpg"
document.i2.src="imagen3.jpg"
document.i3.src="imagen1.jpg"}
if (arg==2){document.i1.src="imagen3.jpg"
if (arg==3){document.i1.src="imagen3.jpg"
}
</SCRIPT>
<P ALIGN=CENTER>Pincha en cualquier imagen
<P ALIGN=CENTER>
<TABLE WIDTH=100%>
<TR>
src="imagen1.jpg" name="i1" border=0></a></TD>
</TR>
</TABLE>
Solucin 9 C
El script
function mostrar()
{
cadena=document.ahoraveras.texto.value;
hola="Hola, ";
if (cadena=="") {hola="";cadena="No has escrito nada"}
alert(hola + cadena)}
</SCRIPT>
<P ALIGN=CENTER>
Escribe tu nombre<br>
<INPUT TYPE="TEXT" NAME="texto">
<P ALIGN=CENTER>
<INPUT TYPE="BUTTON" NAME="boton" VALUE="Pincha aqu"
onClick="javascript:mostrar()">
</FORM>
Escribe tu nombre
Pincha aqu
http://perso.wanadoo.es/catwalk/JavaScript/solucion9c.html11/12/2003 02:33:39 p.m.
Solucin 9 D (nombres)
El script
function mostrar()
{
entrada1=document.forms[0].elements[0].value;
fin="Muy bien";
if (entrada1=="") {alert("Debes rellenar el campo Nombre");fin=""}
if (entrada2=="") {alert("Debes rellenar el campo Apellido 1");
fin=""}
fin=""}
if (fin!="") {alert(fin)}
</SCRIPT>
<P ALIGN=CENTER>
Nombre<br>
<INPUT TYPE="TEXT" NAME="texto1"><br>
Apellido 1<br>
Apellido 2<br>
<P ALIGN=CENTER>
</FORM>
Nombre
Apellido 1
http://perso.wanadoo.es/catwalk/JavaScript/solucion9d1.html (1 of 2)11/12/2003 02:33:45 p.m.
Apellido 2
Pincha aqu
El script
function mostrar()
{
entrada1=document.ahoraveras.texto1.value;
fin="Muy bien";
if (entrada1=="") {alert("Debes rellenar el campo Nombre");fin=""}
fin=""}
fin=""}
</SCRIPT>
<P ALIGN=CENTER>
Nombre<br>
Apellido 1<br>
Apellido 2<br>
<P ALIGN=CENTER>
</FORM>
Nombre
Apellido 1
Apellido 2
Pincha aqu
Solucin 9 D (fin)
El script
function mostrar()
{
fin="Muy bien";
switch1="1";
switch2="1";
switch3="1";
if (entrada1=="") {switch1="0"};
total=switch1+switch2+switch3
if (total=="000") {alert("No has rellenado ningun campo"); fin="";
document.forms[0].elements[0].focus()}
if (total=="001") {alert("Solo has rellenado el campo Apellido 2");
fin=""; document.forms[0].elements[0].focus()}
if (total=="010") {alert("Solo has rellenado el campo Apellido 1");
if (total=="100") {alert("Solo has rellenado el campo Nombre");
if (total=="011") {alert("Falta por rellenar el campo Nombre");
if (total=="101") {alert("Falta por rellenar el campo Apellido 1");
if (total=="110") {alert("Falta por rellenar el campo Apellido 2");
</SCRIPT>
<P ALIGN=CENTER>
Solucin 9 D (fin)
Nombre<br>
Apellido 1<br>
Apellido 2<br>
<P ALIGN=CENTER>
</FORM>
Nombre
Apellido 1
Apellido 2
Pincha aqu
Tutorial de
JavaScript 10
Bueno, queridos alumnos, estamos en el final del tutorial. Hay muchsimo ms que aprender
acerca de JavaScript, pero recuerda que al principio del tutorial te dije que no te iba a
hacer un experto, que la idea era que aprendieras. Bien, ya has aprendido. Ahora voy a
largaros otro pequeo rollo. Cul es la mejor manera de aprender JavaScript?. "La mejor
manera de conseguir una habilidad es...practicar". Para eso se han includo los ejercicios.
Aprendes practicando. Consigues conocimiento practicando. Dentro de un par de aos puede
que revises los scripts de este tutorial y te parezcan infantiles o malos. Pero ten en cuenta
que hace 5 das no sabas nada de JavaScript y ahora eres capaz de escribir en ese cdigo
ininteligible. Ahora puedes y debes utilizarlo. Practica cambiando los ejercicios,
aadindoles cosas, quitando cosas, variando cosas. Haz ejercicios parecidos o simplemente
empieza a construir esa idea que tienes en mente. En resumen, muvete y usa el teclado.
En esta leccin vamos a ver cul es el proceso que se sigue para construir un script
(habitualmente); cuestiones de JavaScript que no se han tocado en este tutorial (y que
puede que se toquen en el futuro); algunas direcciones interesantes y solucin de dudas y
problemas. Vayamos por partes.
Procedimiento habitual para la construccin de scripts:

Nadie, pero nadie (salvo cuatro o cinco genios), tiene una idea y se sienta a escribir en
cdigo directamente. El truco es dividir el problema general en problemitas ms pequeos, y
stos a su vez en otros ms pequeitos, y stos a su vez en otros... Una vez que llegas a un
nivel de simplicidad suficente como para poder resolver el problema, te colocas delante del
teclado y empiezas a escribir el cdigo. Lo pruebas, corriges los errores, y abordas el
siguente problemilla, escribes el cdigo, lo pruebas, corriges... Cuando todo est terminado,
renes los trocitos, lo pruebas, corriges...
Lo mejor que puedes hacer es utilizar nombres de variables y de funciones descriptivos. No
llames a una variable var a, ni a una funcin function f(), porque dentro de dos das no
tendrs ni idea de para qu demonios sirve la funcin, y menos an qu controla la variable.
Utiliza nombres descriptivos como var numero_de_coches para las variables, y function
mostrar_resultados() para las funciones.
Introduce comentarios en los scripts. Eso ayuda a saber qu hace cada cosa, y fija hitos
donde buscar (y encontrar) variables, funciones, entradas o salidas.
Por ltimo utiliza diagramas de flujo para los scripts. Un diagrama de flujo es algo parecido
a esto:
Los rombos representan decisiones, los cuadrados acciones. Usa los diagramas para
estructurar el programa (y tu mente). Cuando te familiarices con ellos (lo que no te llevar
mucho tiempo) te ahorrarn un montn de quebraderos de cabeza.
Cuestiones de JavaScript que no se han visto en este tutorial:

Uf!, un montn. Te enumero algunas:
1.
2.
3.
4.
5.
6.
7.
8.
9.
Precargas de imgenes (y en general de todo)

Uso de marcos (frames) y apertura de varios marcos con un slo click
Barras de navegacin
Abrir (y cerrar) nuevas ventanas del navegador
Validacin de formularios (slo hemos visto la superficie)
El resto de manejadores de eventos, como onBlur, onChange, etc.
Layers o capas
Movimientos en la ventana del navegador
Uso y paso de variables entre diferentes pginas
10. Clculos matemticos (como por ejemplo, generacin de nmeros aleatorios)

11. Timeouts o relojes
12. Quince o veinte ms que se me olvidan....
De todas formas, con lo que has visto, podrs utilizar otros tutoriales ms avanzados, de los
que antes no entendas ni jota, y ahora por lo menos sabrs a lo que se refieren. Suerte.
En un futuro previsiblemente no muy lejano, ampliar este tutorial aadiendo las cuestiones
que no se han visto. Como esto ya es ms complicado, no s lo que voy a tardar en
terminarlo. Si te interesa, envame un correo y te incluir en la lista de actualizaciones.
Direcciones de inters
Aqu me voy a lucir. Lamento decirlo, pero las que yo conozco estn todas en ingls. De
todas formas, algunos de vosotros sabres ingls, y las podres aprovechar. Los dems ya
podes ir aprendiendo.
htmlgoodies.earthweb.com. Fabuloso sitio, inspirador de este tutorial.

developer.netscape.com. La "casa madre" de JavaScript. Todas las referencias que
necesita un programador de JavaScript estn aqu.
www.webreference.com. Muy buen sitio, pero algo tcnico.
www.wsabstract.com. Otro sitio excelente.
developer.irt.org. Una pgina llena de respuestas. La mejor FAQ de JavaScript que
conozco.
idm.internet.com. Otra FAQ, bastante completa.
Botones mgicos. Para aprender todos los truquillos de cambios de imgenes, y en
espaol. Perdn por hacer referencia a m mismo.
Correo y solucin de dudas y problemas:

He revisado exhaustivamente el tutorial. Estoy razonablemente seguro de que todos los
scripts funcionan (porque los he probado) y de que no hay problemas. Sin embargo, y dado
que muchos de ellos estn preparados para copiar y pegar, es posible que se haya deslizado
algn error. Si ese fuera el caso os agradecer que me indiquis qu script est mal, y en
qu pgina se encuentra. Hay un premio de 10 millones de pesetas para el que encuentre un
error, pagadero la semana de los tres jueves.

Ahora bien, el que no haya errores en el tutorial no quiere decir que t no los cometas.
Asegrate de que la ortografa es correcta y de todo eso que se comenta en la leccin 2. Si
ni as te funciona, entonces copia el script (el tuyo, claro) y envamelo por correo con una
descripcin del problema aqu. Har lo posible por resolverlo y contestarte con la mayor
brevedad posible.
Eso es todo. Espero que hayas aprendido algo y que no te lo hayas pasado muy mal leyendo
este tutorial. Ni que decir tiene que todas las crticas y sugerencias siempre son bienvenidas.
Feliz JavaScript.
Diseo Web Profesional - Tutor de Tablas - Referencia rpida
Tutor de Tablas - Indice rpido

Una tabla bsica con 2 filas y 3
columnas:
Las rosas
son rojas
Atributos de tablas opcionales, pero muy tiles.

(Adems de los atributos mostrados aqu, hay unos pocos ms. Aqu se han mostrado los ms
utilizados y soportados, y ampliamente mencionados en este tutorial. Consulta la Gua bsica que se
adjunta con este tutorial para una lista ms completa, y consulta la ltima versin de la Librera de
Referencia de HTML para profundizar ms.)
Las violetas son azules

<TABLE BORDER=2>
<TR>
<TD>Las rosas</TD>
<TD>son</TD>
<TD>rojas</TD>
</TR>
<TR>
<TD>Las violetas</TD>
<TD>son</TD>
<TD>azules</TD>
</TR>
</TABLE>
<TABLE
CELLPADDING=0 o mayor
CELLSPACING=0 o mayor
BORDER=0 o mayor
WIDTH=pixel o porcentaje de valor
HEIGHT=pixel o porcentaje de valor (no enteramente soportado)
BGCOLOR="#123456"
>
<TR
BGCOLOR="#123456"
>
<TD
ALIGN="left|center|right"
VALIGN="top|middle|bottom"
WIDTH=pixel o porcentaje de valor (no enteramente soportado)
BGCOLOR="#123456"
COLSPAN=1 o mayor
ROWSPAN=1 o mayor
>
Recuerda, es una buena prctica incluir SIEMPRE </TD>, </TR> y </TABLE> para cerrar
tus tablas. Si no lo haces corres el riesgo de que grandes partes de tu pgina no se vean en
ciertos navegadores. Considerte avisado ;-)
Hazlo con una Tabla!
Marcos de Imgenes
Hey, hay espacios en mis tablas!

Tablas de Colores:
216 colores(gif)
Lineas Coloreadas
El Dragn
216 colores(html)
1536 colores(html)
Tutor de Tablas - Referencia rpida

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/tables/quik-index.html11/12/2003 02:34:31 p.m.
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Tablas - Hazlo con una tabla!
Hazlo con una tabla!
Tutor de Tablas (S, ESTA TABLA ES UNA TABLA!)
Las sentencias de tablas son, con diferencia, las ms tiles que jams encontrars. Cuando acometes el
diseo de una pgina puedes conseguir cualquier cosa usando estas sentencias. A continuacin se explican
algunas ideas. Algunas las encontrars tiles, otras quizs no. Pero todas muestras la versatilidad de las
sentencias <TABLE>.
(Esta pgina es muy colorista. Si no ves colores deberas tirar tu navegador a la basura. Se me ocurre
un sitio donde puedes conseguir uno mejor.)
Si puedes leer esto tu navegador entiende perfectamente los atributos de color
Si puedes leer esto tu navegador no muestra colores de tablas. Lo siento.
Hay un total de 18 archivos de imagen en esta pgina. Todos ellos estn comprimidos aqu. De esta
forma, puedes practicar con ellos y no tienes que andar buscndolos por toda la pgina (si es que soy
de un bueno!)
Y una vez ms, encontrars una tabla de colores completa aqu mismo.
Para ver la forma en que se han hecho estas tablas, pincha en Ver, Cdigo fuente, y
encontrars unas directrices que te orientarn.
La Constitucin
Aprobada por el Congreso el 25 de Septiembre de 1789.
Ratificada el 15 de Diciembre de 1791.
1 ENMIENDA
http://perso.wanadoo.es/catwalk/WebTutor/tables/neetstuf/neetstuf.html (1 of 6)11/12/2003 02:35:11 p.m.
El Congreso no podr
legislar respecto al
establecimiento de
religiones, o prohibir el
libre ejercicio de las
mismas. Tampoco podr
prohibir la libertad de
expresin o de prensa; o
el derecho de los
ciudadanos a reunirse
pacficamente, y slo a
peticin del Gobierno
tomar medidas en
contra.
2 ENMIENDA
Aunque haya milicia
regular, necesaria para la
seguridad de la libertad
del Estado, el derecho de
los ciudadanos de poseer
y portar armas no podr
ser infringido.
3 ENMIENDA
Ningn soldado podr, en
tiempo de paz, ser
acuartelado en casa
alguna sin el
consentimiento del
propietario de la misma,
ni, en tiempo de guerra,
si no ha sido sancionado
por una ley especfica.
Me siento culpable cortando este documento, as que creo que si preveo un enlace a la
Constitucin de los EE.UU. estar mejor con mi conciencia.
Esto es un simple tablero de ajedrez. No es muy til, pero hacer uno es una gran manera de practicar. En
teora, puedes utilizarlo para jugar con alguien a travs de tu pgina.
Otro ejemplo (menos colorista) utilizando la Constitucin de nuevo.
La Constitucin
Aprobada por el Congreso el 25 de Septiembre de 1789.
Ratificada el 15 de Diciembre de 1791.
ENMIENDA
El Congreso no podr legislar respecto al establecimiento de religiones, o

prohibir el libre ejercicio de las mismas. Tampoco podr prohibir la
libertad de expresin o de prensa; o el derecho de los ciudadanos a
reunirse pacficamente, y slo a peticin del Gobierno tomar medidas en
contra.
Aunque haya milicia regular, necesaria para la seguridad de la libertad

del Estado, el derecho de los ciudadanos de poseer y portar armas no
podr ser infringido.
ENMIENDA
II
Ningn soldado podr, en tiempo de paz, ser acuartelado en casa alguna

sin el consentimiento del propietario de la misma, ni, en tiempo de
guerra, si no ha sido sancionado por una ley especfica.
ENMIENDA
III
Puedes hacer cdigos de barras con tablas y unos cuantos puntos coloreados. No es muy dficil, y una vez
hecho resulta muy fcil de cambiar. Adems puedes hacer cosas que no podras hacer con una simple
imagen. Supongamos que necesitas cambiar el grfico muy a menudo, o que los grficos son la muestra de
unos resultados generados por un programa CGI, Java, o JavaScript.
Pginas Web de Jose Angel Co. Inc.

Produccin de pginas Enero-Junio
PERSONALES
COMERCIALES
GRATUITAS
150
UNIDADES 100
en
tmiles
50
ENE
FEB
MAR
ABR
MAY
JUN
Es un bonito efecto. Un poco peazo al principio, pero las actualizaciones son muy fciles si tu cdigo
HTML es claro y organizado.
Punch Grand Cru

Cigarro
Britania
Diademas
Monarcas
Prince Consort
Robusto
Robusto
Longitud
6.25
7.25
6.75
8.5
5.25
5.25
Honduras
Dimetro
50
54
48
52
50
50
Envoltura
Natural
Natural
Natural
Natural
Maduro
Natural
Caja de
25
25
10
10
20
20
Precio Unidad
96.75
4.55
102.50
4.80
57.00
6.40
48.00
5.65
75.00
4.40
75.00
4.40
Superior
5.5
48
Natural
25
86.50
4.05
El mismo efecto con una tabla mucho ms sencilla...
Punch Grand Cru

Cigarro
Honduras
Longitud Dimetro Envoltura

Unidad
Caja de
Precio
Britania
4.55
6.25
50
Natural
25
96.75
Diademas
4.80
7.25
54
Natural
25
102.50
Monarcas
6.40
6.75
48
Natural
10
57.00
Prince Consort
5.65
8.5
52
Natural
10
48.00
Robusto
4.40
5.25
50
Maduro
20
75.00
Robusto
4.40
5.25
50
Natural
20
75.00
Superior
4.05
5.5
48
Natural
25
86.50
Tambin pueden usarse para hacer lneas coloreadas...
Hay muchas ms aqu...
Y estos son marcos de imgenes utilizando tablas...
Ms ejemplos aqu.
Este ltimo ejemplo es una simple barra de botones...

100
200
300
400
500
600
700
800
Tutor de Tablas - Hazlo con una tabla!

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML

Esta es una tabla relativamente simple. Utiliza un punto marrn ->
y un punto transparente -> (s, est realmente ah).
, un punto negro ->
(S, ESTA MESA ES UNA TABLA!)
La misma tabla de arriba pero con el borde activado y haciendo todos los puntos
transparentes.
(S, ESTA MESA ES UNA TABLA!)
Ahora est con el borde activado y los puntos transparentes cambiados a verdes.
(S, ESTA TABLA ES UNA TABLA!)
http://perso.wanadoo.es/catwalk/WebTutor/tables/neetstuf/yes_tabl.html (1 of 2)11/12/2003 02:35:33 p.m.

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/tables/neetstuf/yes_tabl.html (2 of 2)11/12/2003 02:35:33 p.m.
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Tablas - Lneas Coloreadas
Lneas Coloreadas
Lneas coloreadas? Cmo lo haces?
Fcil - con tablas. Cada lnea es una tabla...
HR (Lnea horizontal) - ampliada
Escoge unos colores apaados y ya lo tienes. O mejor, busca entre las lneas
inferiores y elige alguna que te guste. Fjate en el cdigo de la lnea (por ejemplo
HR-26), abre el cdigo de esta pgina (con Ver cdigo fuente) y copia la tabla
Facilongo!
correspondiente. Tambin necesitars esta imagen en blanco -->
Usa esto para cambiar el color de fondo de la pgina: BBBBBB
HR-01
HR-02
HR-03
HR-04
HR-05
HR-06
HR-07
HR-08
http://perso.wanadoo.es/catwalk/WebTutor/tables/neetstuf/hr.html (1 of 4)11/12/2003 02:36:05 p.m.
Hecho
HR-09
HR-10
HR-11
HR-12
HR-13
HR-14
HR-15
HR-16
HR-17
HR-18
HR-19
HR-20
HR-21
HR-22
HR-23
HR-24
HR-25
HR-26
HR-27
HR-28
HR-29
HR-30
HR-31
HR-32
HR-33
HR-34
HR-35
HR-36
HR-37
HR-38
HR-39
HR-40
HR-41
HR-42
Tutor de Tablas - Lneas Coloreadas

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Tablas - Marcos de Imgenes
Marcos de imgenes usando tablas

Ejemplo 1
<IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0>
Ejemplo 2
<TABLE BORDER=2>
<TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204
BORDER=0></TD></TR>
</TABLE>
Ejemplo 3
<TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204 BORDER=0></TD></TR>
</TABLE>
http://perso.wanadoo.es/catwalk/WebTutor/tables/neetstuf/picture_frames.html (1 of 6)11/12/2003 02:36:33 p.m.
Ejemplo 4
<TR><TD><IMG SRC="image.jpg" WIDTH=170
HEIGHT=204 BORDER=0></TD></TR>
</TABLE>
Ejemplo 5
</TABLE>
Ejemplo 6
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=8
BGCOLOR="#993300">
<TR><TD><IMG SRC="image.jpg" WIDTH=170 HEIGHT=204
BORDER=0></TD></TR>
</TABLE>
Ejemplo 7
<TABLE BORDER=2 CELLSPACING=0 CELLPADDING=8 BGCOLOR="#993300">
</TABLE>
Ejemplo 8
<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=8
BGCOLOR="#993300">
</TABLE>
Ejemplo 9
<TABLE CELLSPACING=0 CELLPADDING=3 BGCOLOR="#663333" BORDER=3><TR><TD>
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=12 BGCOLOR="#993300">
</TABLE>
</TD></TR></TABLE>
Ejemplo 10
<TABLE CELLSPACING=0 CELLPADDING=1
BGCOLOR="#663333" BORDER=4><TR><TD>
BGCOLOR="#993300" BORDER=1><TR><TD>
BORDER=1 BGCOLOR="#FFFFFF">
</TABLE>
</TD></TR></TABLE>
</TD></TR></TABLE>
Que te parece? Guay del Paraguay.
Tutor de Tablas - Marcos de Imgenes

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tabla 2

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tabla 3

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
Tabla 4

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Referencia
Rpida
Gua
bsica de HTML
El blanco
http://perso.wanadoo.es/catwalk/WebTutor/tables/spaces/target.html11/12/2003 02:37:35 p.m.
Diseo Web Profesional - Tutor de Formularios
Leccin 12
PREGUNTA: Cuando pulso el botn Enviar, lo nico que consigo es que aparezca un
nuevo mensaje de correo para enviar. Qu estoy haciendo mal?
R: No ests haciendo nada "equivocado". Tu navegador/programa de correo no maneja los
formularios muy bien. Necesitars usar un script CGI para manejar tus formularios.
P: Le va a pasar esto tambin a la gente que use mis formularios?
R: Invariablemente le pasar a algunos. Aunque, una vez ms, usar un script CGI eliminar
este problema.
Podemos cambiar fcilmente el texto de los botones:

<FORM>
<INPUT TYPE="submit" VALUE="Envalo ahora mismo!">
<INPUT TYPE="reset" VALUE="Vas a limpiar el formulario?">
</FORM>
Envalo ahora mismo!
Vas a limpiar el formulario?
Si es necesario, el botn SUBMIT puede tener un NAME. Lo necesitars si, por cualquier causa, tienes ms
de un botn SUBMIT en la misma pgina.
Puedo usar una imagen para un botn Submit? Pues claro, alma de cntaro.
http://perso.wanadoo.es/catwalk/WebTutor/forms/lesson12.html (1 of 3)11/12/2003 02:38:02 p.m.
<FORM>
<INPUT TYPE="image" SRC="submit.gif">
</FORM>
Aade WIDTH & HEIGHT para que tu navegador pueda cargar la imagen rpida y eficientemente. Aade
un atributo ALT por si alguien est ejecutando el navegador sin imgenes, de forma que pueda an enviar el
formulario. Y aade un BORDER=0 si quieres eliminar el recuadro coloreado.
<FORM>
<INPUT TYPE="image" SRC="images/submit.gif" WIDTH=94 HEIGHT=26 BORDER=0
ALT="Submit">
</FORM>
Nota que INPUT TYPE="image" existe solamente para el botn Enviar.. No puede hacerse con el botn
Reset.
PREGUNTA: Puedo hacer un botn que enve al visitante a otra pgina?

R: Creo que podremos...
<FORM ACTION="../tables/index.html">
<INPUT TYPE="submit" VALUE="Tutor de Tablas">
</FORM>
Tutor de Tablas
<-- Atrs
Adelante -->
Tutor de Formularios - Leccin 12

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 11
Y an hay otro tipo de entrada. Es la entrada HIDDEN (OCULTA).

<INPUT TYPE="hidden" NAME="PROCEDENCIA" VALUE="ESPAA">
Una entrada HIDDEN es una pareja nombre/valor que se te enva pero que no aparece en ningn sitio de la
pgina.
Supongamos que somos una compaa intentando reunir informacin acerca de los gustos de los
consumidores para lanzar un nuevo producto. Tenemos un formulario estndar para conseguir esa
informacin... nombre, empresa en la que trabaja, telfono, productos que le interesan, etc. El problema es
que hay seis versiones del formulario en seis pginas diferentes, y necesitamos saber de qu sitio procede la
informacin que recibimos. Es decir, la versin espaola del formulario es igual a la francesa, salvo que
cada uno est en el idioma correspondiente. Pero cuando recibamos los datos querremos saber si vienen de
Espaa o de Francia. Qu hacemos?
Aadir una entrada HIDDEN a los formularios de la siguiente manera...
<INPUT TYPE="hidden" NAME="FORM" VALUE="Espaa"> ...para la versin espaola
<INPUT TYPE="hidden" NAME="FORM" VALUE="Francia"> ...para la francesa
<INPUT TYPE="hidden" NAME="FORM" VALUE="Italia"> ...para la italiana
etc., etc., etc....
A propsito, no importa qu pareja nombre/valor haya en la entrada (o en cualquier entrada, si es el caso).
Puede ser la que te apetezca. La siguiente es una entrada HIDDEN perfectamente vlida...
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...Tu recibirs E=Mc^2
Las entradas HIDDEN son muy tiles tambin para los CGI. Por ejemplo, muchos ISP (Proveedores de
Servicios de Internet, los servidores vamos) tienen un script CGI al que le puedes enviar tus formularios. El
script CGI los procesa y te devuelve la informacin lavada y planchada, preparada para el consumo humano
en pocas palabras. La entrada oculta le dice al script del CGI quin eres, donde enviar los datos, etc.
Ocasionalmente se utiliza una entrada llamada File Upload (Subida de archivos). Con ella, tus visitantes
pueden enviarte directamente un archivo desde su disco duro.
<FORM>
<INPUT TYPE=FILE NAME="miarchivo">
</FORM>
Browse...
Cuando uses este tipo de entrada, debes utilizar esto ENCTYPE="multipart/form-data" en tu

sentencia FORM. Ten presente que los antiguos navegadores no soportan este tipo de entrada y que cuando
se utiliza en un formulario mailto, los resultados pueden ser impredecibles.
Los ltimos de Filipinas es estos tipos de entradas son los botones SUBMIT (ENVIAR)y RESET
(RESTABLECER).
Son muy sencillos...
<FORM>
<INPUT TYPE="submit">
</FORM>
Submit Query
SUBMIT por supuesto, enva los datos...
...y RESET, limpia el formulario.

<FORM>
<INPUT TYPE="reset">
</FORM>
Reset
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 10
Un tipo muy til de entrada es

<TEXTAREA> (REA DE TEXTO).
<FORM>
<TEXTAREA NAME="COMENTARIOS">
</TEXTAREA>
</FORM>
Se controla el tamao del cuadro as...

<FORM>
<TEXTAREA NAME="COMENTARIOS" ROWS=6 COLS=50> (FILAS=6 COLUMNAS=50)
</TEXTAREA>
</FORM>
ROWS es la altura, COLS es la anchura.
\\|//
(@ @)
+--------------------oOO----(_)----OOo-----------------------+
|
|
| Esto es para que veas que si escribes algo entre las sen- |
| tencias TEXTAREA, aparecera en la ventana como el texto |
| por defecto. La parte buena es que... se muestra EXACTA- |
| MENTE como lo has tecleado.
|
|
|
| * Muchos, pero no todos los navegadores, se comportan asi |
+------------------------------------------------------------+
|__|__|
|| ||
ooO Ooo
El cdigo para sto est aqu.
Un atributo til para incluirlo en <TEXTAREA> es WRAP (ENVOLVER). Algunos navegadores no lo

entienden, pero si se es el caso, simplemente lo ignorarn.
<FORM>
<TEXTAREA NAME="COMENTARIOS" ROWS=3 COLS=30 WRAP="soft">
</TEXTAREA>
</FORM>
WRAP="soft" significa que la caja introduce un retorno de carro cuando el texto introducido llega a la
derecha, pero el texto se enva como una cadena contnua, sin los retornos de carro introducidos por la caja.
<FORM>
<TEXTAREA NAME="COMENTARIOS" ROWS=3 COLS=30 WRAP="hard">
</TEXTAREA>
</FORM>
WRAP="hard" es igual a la anterior, pero el texto se enva de la forma en que aparece en la caja, includos
los retornos de carro.
<FORM>
<TEXTAREA NAME="COMENTARIOS" ROWS=3 COLS=30 WRAP="off">
</TEXTAREA>
</FORM>
Este es normalmente el valor por defecto.

WRAP="off" significa que la caja no introduce retornos de carro, aunque el texto se enva exactamente tal
y como se ha introducido.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Ejemplo de rea de texto
Tutor de Formularios - Ejemplo de rea de texto

<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=16 COLS=67>
\\|//
(@ @)
+--------------------oOO----(_)----OOo-----------------------+
|
|
| Esto es para que veas que si escribes algo entre las sen- |
| tencias TEXTAREA, aparecera en la ventana como el texto
|
| por defecto. La parte buena es que... se muestra EXACTA- |
| MENTE como lo has tecleado.
|
|
|
| * Muchos, pero no todos los navegadores, se comportan asi |
+------------------------------------------------------------+
|__|__|
|| ||
ooO Ooo
</TEXTAREA>
</FORM>
Tutor de Formularios - Ejemplo de rea de texto

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
http://perso.wanadoo.es/catwalk/WebTutor/forms/textarea.html11/12/2003 02:39:15 p.m.
Referencia
Rpida
Gua
bsica de HTML
Leccin 1
Esto va a ser fcil, as que quiero que abras el Bloc de Notas (s, el Bloc de Notas!) y me sigas. Copia y
pega lo siguiente para empezar:
<HTML>
<HEAD>
<TITLE>Jose Angel es el to mas guapo que conozco</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Grbalo como form1.html en alguna carpeta. Arranca otra vez el navegador y abre form1.html,
ahora coloca el Bloc de Notas en una ventana junto al navegador. As puedes ir haciendo las pginas y casi
inmediatamente ver los resultados de tu trabajo. Si pinchar en el botn de Actualizar no carga todo el
contenido, prueba a pinchar en Actualizar con la tecla MAYSCULAS pulsada.
Introduce las sentencias de formulario.
<HTML>
<HEAD>
<TITLE>Jose Angel es el to ms guapo que conozco</TITLE>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
Ahora vamos a decirle al navegador dnde tiene que enviar los datos que hemos recogido y cmo tiene que
enviarlos. Hay dos formas bsicas de hacerlo: 1) Puedes enviar los datos a un CGI para que los procese. Los
datos te son posteriormente enviados va email. Este es el mtodo preferido, o 2) Puedes hacer que los datos
te sean enviados directamente usando la accin mailto. Esto es ms simple, pero, como se ver, menos
rentable.
En aras de la simplicidad, empezaremos con el segundo mtodo.
<HTML>
<HEAD>
<TITLE>Jose Angel es el to ms guapo que conozco</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:abc@123.com" ENCTYPE="text/plain">
</FORM>
</BODY>
</HTML>
Lo nico que tienes que hacer es introducir tu email despus de mailto:
Para enviar los datos a ms de una direccin de correo, sepralas con comas...
pepe@buzon.org,paco@buzon.org,pili@buzon.org
Ahora bien, he dicho que este mtodo es simple, pero no muy rentable. Por ahora, es perfecto para nuestros
fines dentro del tutorial. Segn completes las lecciones puedes practicar envindote informacin a t mismo.
Para la mayora y en casi todas las circusntancias, este mtodo ser ms que suficiente. Sin embargo, a
algunos les suceder que lo nico que resulta del mtodo en cuestin es un mensaje en blanco. Nada esta
funcionando mal, pero tampoco se ha enviado ningn dato.
He escrito una demostracin que generar un formulario de correo para t mismo. Puedes utilizarlo para
ver cmo maneja tu sistema estos formularios.
Si quieres, puedes saltarte el resto de la leccin y profundizar en los formularios. Una vez que hayas
aprendido ms acerca de ellos (o si se te presentan problemas), vuelve aqu y aprenders ms acerca del
procesado de los datos.

Seguir a la leccin 2
Como se ha comentado, algunas veces, y dependiendo de la configuracin del navegador/correo, utilizar el

formulario de correo puede traducirse en que se abra una ventana para enviar un mensaje nuevo, en vez de
enviar la informacin. Algunas veces (raramente) pinchars en el botn y no suceder nada. En este caso,
ya no sers capaz de parchearlo con un formulario de correo diferente. Tendrs que utilizar un procesador
de formularios CGI.
Antes de empezar, hay una ltima cosa acerca del formulario de correo que quiero mencionar: Algunas
veces, dependiendo de la persona que enve el correo, recibirs los datos en un formato muy extrao. En
lugar de algo claro y comprensible como esto...
FORMNAME=Nueva Entrada
NAME=R.U. Brujo
ADDRESS=Calle Gato Negro, 13
CITY=Salem
STATE=UTAH
La informacin entra as...
FORMNAME=Nueva+Entrada&NAME=R.U.+Brujo&ADDRESS=Calle+Gato+Negro,
+13&CITY=Salem&STATE=UTAH
Lo que necesitas es un pequeo programa que convierta estas ristras de datos en un formato legible por los
humanos. Los usuarios de Windows pueden utilizar el Convertidor de Correo. (Se distribuye como parte
de este tutorial)
Proceso de formularios CGI

La forma ms comn y prctica de procesar tus datos es enviarlos a un script de tu servidor para que lo
haga. El sitio ms obvio para encontrar ese script es evidentemente tu propio servidor. Muchos de ellos
tienen un correo donde puedes enviar los datos. Si miras en las pginas de ayuda de tu servidor
(afortunadamente tienen pginas de ayuda), probablemente encontrars las instrucciones para usar su script.
Las instrucciones normalmente implican el atributo ACTION (ACCIN)...
ACTION="/cgi-bin/mail.pl"
(esto es slo un ejemplo)
Tal vez requieran que insertes algn campo HIDDEN (OCULTO) en tu formulario para que sepan dnde
enviar los datos procesados y a dnde enviar a tu visitante una vez que haya rellenado y enviado el
formulario...
<input type=hidden name="hacia" value="holaquetal@enchufa.com">
<input type=hidden name="veall-url" value="http://blablabla.com/
aquiestoyyo.html">
(Una vez ms, slo son ejemplos).
Si por alguna razn tu ISP no puede proporcionarte un script, no est todo perdido.Todava tienes algunas
opciones.
Una es utilizar uno de los muchos servicios de procesamiento gratuitos que hay por ah. Estos son simples
scripts de proceso que residen en algn sitio, pero que se ofrecen para servicio pblico. Los sitios de abajo
te pueden venir bien, aunque estn en ingls. En la leccin 14 encontrars algunos sitios en espaol.
http://www.cgi-resources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/
http://www.sbrady.com/hotsource/cgi/index.html#ffp
Otra opcin (slo si tienes acceso al CGI bin de tu servidor) es ejecutar tu propio script. De nuevo, hay
sitios donde puedes encontrar un script para tu uso particular.
http://www.cgi-resources.com/Programs_and_Scripts/
http://www.artsackett.com/freebies/asform/
Una vez ms, utiliza un script CGI de una forma o de otra, pero salo. El formulario por correo es simple,
pero para una porcin de tus visitantes (el 2%? el 10%? ms?) la cosa fallar.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 2
Para hacer las cosas ms claras, slo escribir las sentencias <FORM>. Dejar de lado head, body, title y
form. Evidentemente mantnlas en tu documento.
El TYPE (TIPO)ms comn de forma <INPUT> (ENTRADA)es TEXT (TEXTO).
<FORM>
<INPUT TYPE="text">
</FORM>
Cada entrada necesita un NAME (NOMBRE).

<FORM>
<INPUT TYPE="text" NAME="DIRECCION">
</FORM>
Cuando el usuario introduce su direccin (por ejemplo Gato Negro, 13), sta se convierte en el valor de la
entrada y se le adjudica a DIRECCION de forma que el resultado final es DIRECCION=Gato Negro,
13.
Podemos especificar un VALUE (VALOR).

<FORM>
<INPUT TYPE="text" NAME="DIRECCION" VALUE="Mi calle, 5">
</FORM>
Mi calle, 5
Esto adjudica automticamente el valor Mi calle, 5 al nombre DIRECCION, a menos que el usuario lo
cambie. Nota: asegrate de utilizar las comillas que se especifican.
Tambin podemos especificar el tamao del rectngulo de entrada.

<FORM>
<INPUT TYPE="text" NAME="DIRECCION" VALUE="Mi calle, 5" SIZE=10>
</FORM>
Mi calle, 5
<FORM>
</FORM>
Mi calle, 5
<FORM>
</FORM>
Mi calle, 5
El valor por defecto es usualmente 20. Ya sabrs, que el valor por defecto es el que asume el navegador si
no se le dice otra cosa.
Nota: Un rectngulo de texto no tiene siempre el mismo tamao en diferentes navegadores. Si haces un
formulario y lo compruebas en dos navegadores diferentes, vers que son ligeramente diferentes tambin.
Esto slo supone un problema si el formulario est dentro de un diseo de gran precisin o muy ajustado a
los lmites de la pgina (actualmente, estos diseos son una fuente inmediata de problemas).
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 3
Quitemos el VALUE="Mi calle, 5".

<FORM>
<INPUT TYPE="text" NAME="DIRECCION" SIZE=30>
</FORM>
Si queremos podemos especificar el nmero de caracteres que un usuario puede introducir.

Vamos all, e intenta introducir ms de 10 caracteres.
<FORM>
<INPUT TYPE="text" NAME="DIRECCION" SIZE=30 MAXLENGTH=10>
</FORM>
Supongo que esto viene bien ahora, pero a menos que creas que alguien va a enviarte la Biblia en pasta, yo
no me preocupara mucho de esto.
Muy similar a TYPE=TEXT es TYPE=PASSWORD. Es exactamente lo mismo, excepto que muestra *** en
vez de lo que se est introduciendo (ya estars harto de verlo). El navegador te enviar la entrada, pero no
la mostrar en la pantalla del que la introduce.
<FORM>
<INPUT TYPE="password">
</FORM>
Recuerda que cada <INPUT> debe tener un NAME.

<FORM>
<INPUT TYPE="password" NAME="CONTRASEA">
</FORM>
Los atributos SIZE, VALUE, y MAXLENGTH tambin funcionan aqu. A propsito, una <TAG>
(SENTENCIA) le dice al navegador que haga algo. Un ATTRIBUTE (ATRIBUTO) va dentro de una
<TAG> y le dice al navegador cmo hacerlo.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 4
Lo siguiente que veremos son los Botones de radio y los Cuadros de confirmacin. Los Botones permiten al
usuario elegir una de varias opciones. Los Cuadros le permiten elegir una, varias o todas las opciones.
Empecemos con los Botones.
<FORM>
<INPUT TYPE="radio" NAME="MI MEJOR AMIGO">
</FORM>
Aadamos 2 ms.
<FORM>
</FORM>
Hmmm... creo que insertaremos un par de retornos de carro.
<FORM>
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO">
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO">
</FORM>
Nota que cada entrada tiene el mismo nombre. La razn de esto ser ver en un momento.
A cada uno de los Botones le debemos asignar un VALUE.

<FORM>
<INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Jose">
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Miguel">
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Mariano">
</FORM>
(Si te ests preguntando por qu he desplazado la entrada superior 4 espacios, la razn es muy simple...
clarificar el cdigo. Cuanto ms claro y mejor organizado tengas el cdigo, ms fcil es trabajar con l. Y
desde luego, cuando tengas que hacer cambios, tener un diseo ordenado es tener ganada la mitad de la
batalla).
Ahora etiquetemos cada Botn.

<FORM>
<INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Jose">Jose Garca
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Miguel">Miguel
Snchez
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Mariano">Mariano
Centeno
</FORM>
Jose Garca
Miguel Snchez
Mariano Centeno
Por supuesto, puedes cambiar las etiquetas a tu gusto.
Esencialmente tus Botones estn hechos. Puedes aadir un ttulo sobre los botones, y tambin puedes elegir
uno de ellos como valor por defecto (opcional).
<FORM>
Quin es mi mejor amigo?
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Jose" CHECKED>Jose
Garca
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Miguel">Miguel
Snchez
<BR><INPUT TYPE="radio" NAME="MI MEJOR AMIGO" VALUE="Mariano">Mariano
Centeno
</FORM>
Quin es mi mejor amigo?
Jose Garca
Miguel Snchez
Mariano Centeno
El usuario, por supuesto, slo puede elegir una opcin. Su eleccin te ser devuelta como una pareja
nombre/valor, es decir MI MEJOR AMIGO=Jose (o el que el usuario elija).
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 5
Construir Cuadros de confirmacin es muy parecido. Empieza as:

<FORM>
<INPUT TYPE="checkbox" NAME="Jose">
</FORM>
Aade3 ms, pero esta vez dale a cada un NAME diferente (Aade tambin los retornos de carro)
<FORM>
<INPUT
<BR><INPUT
<BR><INPUT
<BR><INPUT
</FORM>
TYPE="checkbox"
TYPE="checkbox"
TYPE="checkbox"
TYPE="checkbox"
NAME="Jose">
NAME="Miguel">
NAME="Mariano">
NAME="BM">
Cada Cuadro va a asumir el mismo VALUE.
<FORM>
<INPUT
<BR><INPUT
<BR><INPUT
<BR><INPUT
</FORM>
TYPE="checkbox"
TYPE="checkbox"
TYPE="checkbox"
TYPE="checkbox"
NAME="Jose"
VALUE="SI">
NAME="Miguel" VALUE="SI">
NAME="Mariano" VALUE="SI">
NAME="BM"
VALUE="SI">
Nota - En los Cuadros el NAME cambia y el VALUE es el mismo, mientras que en los Botones, es el VALUE
el que cambia y el NAME el que permenece igual. No te preocupes, hasta yo me confundo a veces con esto.
Es por esto por lo que tengo debilidad por los documentos de referencia rpida de html (Que creas, que
me saba todo esto de memoria? JA!)
Bien, etiquetemos cada Cuadro.

<FORM>
<INPUT TYPE="checkbox"
<BR><INPUT TYPE="checkbox"
Maestreburgo
</FORM>
NAME="Jose"
VALUE="SI">Jose Garca
NAME="Miguel" VALUE="SI">Miguel Snchez
NAME="Mariano" VALUE="SI">Mariano Centeno
NAME="BM"
VALUE="SI">Burgomaestre
Jose Garca
Miguel Snchez
Mariano Centeno
Burgomaestre Maestreburgo
Y por ltimo, querrs aadir un comentario ilustrativo y tal vez elegir un par de opciones por defecto.
<FORM>
Cules de estos tipos son amigos tuyos?
<BR><INPUT TYPE="checkbox" NAME="Jose"
VALUE="SI" CHECKED>Jose Garca
<BR><INPUT TYPE="checkbox" NAME="Miguel" VALUE="SI">Miguel Snchez

<BR><INPUT TYPE="checkbox" NAME="Mariano" VALUE="SI" CHECKED>Mariano
Centeno
<BR><INPUT TYPE="checkbox" NAME="BM"
VALUE="SI">Burgomaestre
Maestreburgo
</FORM>
Cales de estos tipos son amigos tuyos?
Jose Garca
Miguel Snchez
Mariano Centeno
El usuario puede elegir 1, 2, 3, ninguna o todas las opciones. Sus elecciones sern devueltas con las
consabidas parejas nombre/valor...
Jose=SI
Mariano=SI
(o lo que sea que elijan... y si no eligen ninguna, no recibirs nada)
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 6
Ahora te preguntars... Que sucede si queremos hacer tres preguntas diferentes acerca del mismo grupo de
tipos?.Bueno, listillo, vamos a resolverlo.
Bien, agrrate fuerte y vers.
Cules de estos tipos son tus
amigos?
Jose Garca
Miguel Snchez
Mariano Centeno
A cules les dejaras dinero?

Jose Garca
Miguel Snchez
Mariano Centeno
Y a cules les dejaras ir a una

cita con tu hermana?
Jose Garca
Miguel Snchez
Mariano Centeno
En cada formulario nunca puede haber NAMEs duplicados. As que tendremos que utilizar un nombre
diferente para cada uno o para cada pregunta (Cuando digo nunca no me refiero a que tu ordenador se vaya
a colgar... lo ms que puede pasar es que el navegador se confunda o el formulario no funcione. Y de todas
formas el ms confundido sera el pobre imbcil que dise el formulario).
Lo que sigue es el cdigo html para las 3 preguntas anteriores. Las sentencias <TABLE> estn en azul. Esto
es slo para mejorar la apariencia, no afectan al formulario en s. Si necesitas revisar tus conocimientos
acerca de las tablas chale un ojo al Tutor de Tablas.
<FORM>
<TABLE BORDER=1><TR><TD WIDTH=33%>
Cales de estos tipos son tus amigos?

<BR><INPUT TYPE="checkbox" NAME="Amigo..Jose"
VALUE="YES">Jose Garca
<BR><INPUT TYPE="checkbox" NAME="Amigo..Miguel" VALUE="YES">Miguel
Snchez
<BR><INPUT TYPE="checkbox" NAME="Amigo..Mariano" VALUE="YES">Mariano
Centeno
<BR><INPUT TYPE="checkbox" NAME="Amigo..BM"
VALUE="YES">Burgomaestre
Maestreburgo
</TD><TD WIDTH=33%>
A cales les dejaras dinero?
<BR><INPUT TYPE="checkbox" NAME="Dinero..Jose"
<BR><INPUT TYPE="checkbox" NAME="Dinero..Miguel" VALUE="YES">Miguel
Snchez
<BR><INPUT TYPE="checkbox" NAME="Dinero..Mariano" VALUE="YES">Mariano
Centeno
<BR><INPUT TYPE="checkbox" NAME="Dinero..BM"
Maestreburgo
</TD><TD WIDTH=34%>
Y a cales les dejaras ir a una cita con tu hermana?
<BR><INPUT TYPE="checkbox" NAME="Cita..Jose"
<BR><INPUT TYPE="checkbox" NAME="Cita..Miguel" VALUE="YES">Miguel
Snchez
<BR><INPUT TYPE="checkbox" NAME="Cita..Mariano" VALUE="YES">Mariano
Centeno
<BR><INPUT TYPE="checkbox" NAME="Cita..BM"
Maestreburgo
</TD></TR></TABLE>
</FORM>
Supongamos que el usuario hace las siguientes elecciones...

Cales de estos tipos son tus
amigos?
Jose Garca
Miguel Snchez
Mariano Centeno
A cales les dejaras dinero?

Jose Garca
Miguel Snchez
Mariano Centeno
...haciendo que recibieras las siguientes parejas de nombres/valores.
Y a cales les dejaras ir a una

cita con tu hermana?
Jose Garca
Miguel Snchez
Mariano Centeno
Amigo..Jose=YES
Amigo..Miguel=YES
Amigo..Mariano=YES
Dinero...Mariano=YES
Dinero...BM=YES
Cita...Jose=YES
Cita...Mariano=YES
Cita...BM=YES
Cmo se te ha quedado el cuerpo?
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 7
Antes de seguir, hay algo que quiero comentar. Tambin puedes utilizar imgenes en un formulario. De
hecho puedes utilizar cualquier cosa en un formulario, o un formulario en cualquier cosa. Slo tienes que
cuidar la sintaxis de tu html y evitar las sentencias solapadas.
Un Concurso Presidencial
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
El html del formulario superior est aqu si ests interesado en verlo...

...y la solucin est aqu ...por si la necesitas.
Solapar sentencias, para aquellos que se estn preguntado qu puetas es eso, es hacer algo como sto:
<TABLE><FORM></TABLE></FORM>
Sentencias solapadas.... mala poltica
<TABLE><FORM></FORM></TABLE>
Sentencias anidadas.... buena construccin
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Concurso presidencial, cdigo.
Tutor de Formularios - Concurso Presidencial, cdigo.

<FORM>
<CENTER><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4>
<CAPTION ALIGN=top><FONT SIZE=5><I>Un Concurso Presidencial</I></FONT></
CAPTION>

<TR>
<TD ALIGN=center><IMG SRC="images/clinton.gif" WIDTH=86
HEIGHT=101><BR><INPUT NAME="Clinton"
TYPE=radio VALUE="Rep"><FONT
SIZE=2>Rep</FONT><INPUT NAME="Clinton"
TYPE=radio VALUE="Dem"><FONT
SIZE=2>Dem</FONT><BR> <BR></TD>
<TD ALIGN=center><IMG SRC="images/bush.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Bush"
SIZE=2>Rep</FONT><INPUT NAME="Bush"
<TD ALIGN=center><IMG SRC="images/reagan.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Reagan"
SIZE=2>Rep</FONT><INPUT NAME="Reagan"
<TD ALIGN=center><IMG SRC="images/carter.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Carter"
SIZE=2>Rep</FONT><INPUT NAME="Carter"
<TD ALIGN=center><IMG SRC="images/ford.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Ford"
SIZE=2>Rep</FONT><INPUT NAME="Ford"
<TD ALIGN=center><IMG SRC="images/nixon.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Nixon"
SIZE=2>Rep</FONT><INPUT NAME="Nixon"
</TR>

<TR>
<TD ALIGN=center><IMG SRC="images/johnson.gif" WIDTH=86
HEIGHT=101><BR><INPUT NAME="Johnson"
SIZE=2>Rep</FONT><INPUT NAME="Johnson"
SIZE=2>Dem</FONT><BR></TD>
<TD ALIGN=center><IMG SRC="images/kennedy.gif" WIDTH=86
HEIGHT=101><BR><INPUT NAME="Kennedy"
SIZE=2>Rep</FONT><INPUT NAME="Kennedy"
<TD ALIGN=center><IMG SRC="images/eisenhow.gif" WIDTH=86
http://perso.wanadoo.es/catwalk/WebTutor/forms/presquiz1.html (1 of 2)11/12/2003 02:42:28 p.m.
Diseo Web Profesional - Concurso presidencial, cdigo.
HEIGHT=101><BR><INPUT NAME="Eisenhower" TYPE=radio VALUE="Rep"><FONT

SIZE=2>Rep</FONT><INPUT NAME="Eisenhower" TYPE=radio VALUE="Dem"><FONT
<TD ALIGN=center><IMG SRC="images/truman.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Truman"
SIZE=2>Rep</FONT><INPUT NAME="Truman"
<TD ALIGN=center><IMG SRC="images/fdr.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Roosevelt" TYPE=radio VALUE="Rep"><FONT
SIZE=2>Rep</FONT><INPUT NAME="Roosevelt" TYPE=radio VALUE="Dem"><FONT
<TD ALIGN=center><IMG SRC="images/hoover.gif"
WIDTH=86
HEIGHT=101><BR><INPUT NAME="Hoover"
SIZE=2>Rep</FONT><INPUT NAME="Hoover"
</TR>
</TABLE></CENTER>
</FORM>
Tutor de Formularios - Concurso presidencial, cdigo
Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
http://perso.wanadoo.es/catwalk/WebTutor/forms/presquiz1.html (2 of 2)11/12/2003 02:42:28 p.m.
Referencia
Rpida
Gua
bsica de HTML
Leccin 8
Nuestro siguiente tipo de entrada es una Lista despleglable. Con este tipo se utiliza <SELECT>
(SELECCION)en lugar de <INPUT> y esta sentencia s tiene sentencia de cierre. Hagamos una.
<FORM>
<SELECT>
</SELECT>
</FORM>
No olvides ponerle un nombre.

<FORM>
<SELECT NAME="MI MEJOR AMIGO">
</SELECT>
</FORM>
Ahora aade unas pocas opciones.

<FORM>
<OPTION>Jose
<OPTION>Miguel
<OPTION>Mariano
<OPTION>Manuel
</SELECT>
</FORM>
Jose
Y dale a cada <OPTION> un VALUE.

<FORM>
<OPTION VALUE="Jose">Jose
<OPTION VALUE="Miguel">Miguel
<OPTION VALUE="Mariano">Mariano
<OPTION VALUE="Manuel">Manuel
</SELECT>
</FORM>
Jose
La opcin por defecto es la primera de la lista.
Podemos especificar una opcin por defecto diferente de la primera de la lista.

<FORM>
<OPTION VALUE="Mariano" SELECTED>Mariano
</SELECT>
</FORM>
Mariano
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 9
La lista enrrollable es muy similar a la lista despleglable Primero aadamos ms nombres.

<FORM>
<OPTION VALUE="Francisco">Francisco
<OPTION VALUE="Antonio">Antonio
<OPTION VALUE="Andrs">Andrs
</SELECT>
</FORM>
Jose
Todo lo que tenemos que hacer para transformarla en enrrollable es aadir un atributo SIZE (TAMAO)a
la sentencia <SELECT>.
<FORM>
<SELECT NAME="MI MEJOR AMIGO" SIZE=4>
</SELECT>
</FORM>
Jose
Miguel
Mariano
Manuel
Francisco
El SIZE simplemente indica cuntas opciones ensear la ventana. Ms fcil, imposible!
De nuevo vemos que el valor por defecto es la primera <OPTION>, y de nuevo podemos cambiarlo
seleccionando una.
<FORM>
<SELECT NAME="MI MEJOR AMIGO" SIZE=4>
<OPTION VALUE="Mariano" SELECTED>Mariano
</SELECT>
</FORM>
Jose
Miguel
Mariano
Manuel
Francisco
No se me ocurre por qu querras usar esta utilidad en la lista, pero bueno, est ah, y creo que debas
saberlo.
Aunque para desdecirme, se me ocurre un uso perfecto para ella :-)
Jose
Miguel
Mariano
Manuel
(Este efecto se ha hecho usando una combinacin de HTML y JavaScript. Si tienes curiosidad por ver cmo
lo he hecho, el cdigo est aqu.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Formularios - Cdigo para la Opcin variable
Tutor de Formularios - Cdigo para la Opcin variable

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!-var flashindex = 0;
var flashdir = "down";
if (document.images)
{
smiley_Jose
=
smiley_Jose.gif";
smiley_Miguel =
smiley_Miguel.gif";
smiley_Mariano =
smiley_Mariano.gif";
smiley_Manuel =
smiley_Manuel.gif";
new Image(64,64); smiley_Jose.src = "images/

new Image(64,64); smiley_Miguel.src = "images/
new Image(64,64); smiley_Mariano.src = "images/
new Image(64,64); smiley_Manuel.src = "images/
flashpics = new Array(4);

flashpics[0] = "smiley_Jose";
flashpics[1] = "smiley_Miguel";
flashpics[2] = "smiley_Mariano";
flashpics[3] = "smiley_Manuel";
}
function hiLite(imgObjName)
{
if (document.images)
{
document.images['flashpic'].src = eval(flashpics[imgObjName] + ".
src");
}
}
function FlashSelect()
{
window.document.flashform.flashfriend[flashindex].selected = true;
hiLite(flashindex);
setTimeout('FlashSelect2()',500);
http://perso.wanadoo.es/catwalk/WebTutor/forms/flashpics.html (1 of 3)11/12/2003 02:43:19 p.m.
}
function FlashSelect2()
{
if (flashdir == "down")
{
flashindex++;
if (flashindex == 4)
{
flashindex = 2;
flashdir = "up";
}
FlashSelect();
}
else
{
flashindex--;
if (flashindex == -1)
{
flashindex = 1;
flashdir = "down";
}
FlashSelect();
}
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="FlashSelect()">
<FORM NAME="flashform">
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=150><TR><TD>
<SELECT NAME="flashfriend" SIZE=4>
<OPTION VALUE="JOSE">Jose
<OPTION VALUE="MIGUEL">Miguel
<OPTION VALUE="MARIANO">Mariano
<OPTION VALUE="MANUEL">Manuel
</SELECT>
</TD><TD ALIGN="right">
<IMG SRC="images/smiley_Jose.gif" WIDTH="64" HEIGHT="64" BORDER="0"
NAME="flashpic" ALT="">
</TD></TR></TABLE>
</FORM>
</BODY>
</HTML>
Tutor de Formularios - Cdigo para la Opcin variable

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Leccin 13
PREGUNTA: Cmo puedo enviar a mi visitante a otra pgina, justo despus de que me haya
enviado mi formulario?
R: Eso depende. Si ests utilizando un script CGI para procesar los formularios (que es el
mtodo recomendado) entonces esa utilidad simplemente estar ah. Para hacerlo solamente
tienes que enves al CGI la direccin URL a la que quieres que vaya tu visitante en una entrada
oculta, o puede especificarse en el mismo script del CGI. De todas formas, debes consultar la
documentacin de ese script.
Si ests utilizando formularios de correo, todava podemos hacer algo. Aunque ten presente que,
dependiendo del navegador del visitante, pueden suceder cosas impredecibles. Algunos
visitantes pueden tener problemas enviando los datos. (Cuntos? El 5%, el 20%? Ms? No
tengo ni idea).
Adems, el correo requiere Javascript, y si la gente no lo tiene activado, entonces no se
redireccionarn. Y ahora que he puesto pegas, y he avisado, aqu tienes como hacer el
redireccionamiento. Slo tienes que aadir estos trozos de javascript al formulario de correo:
Primero aade esto en la seccin HEAD de tu documento...
<SCRIPT language="JavaScript"><!-function FormRedirect(){
setTimeout('this.document.location.href = "pgina.html"',5000);}
//--></SCRIPT>
Donde pgina.html es la URL del documento al que quieres enviar al visitante.

Ahora aade esto a tu sentencia FORM...
onSubmit="FormRedirect()"
Abajo hay un ejemplo.
<FORM NAME="miformulario" METHOD=POST ACTION="mailto:abc@123.org"
ENCTYPE="text/plain" onSubmit="FormRedirect()">
<INPUT TYPE="text" NAME="micajadetexto" VALUE="">
<INPUT TYPE="submit">
</FORM>
Nota que hay un 5000 en la funcin, justo despus de la URL. Es un retraso de 5000
milisegundos (5 segundos) y es necesario para permitir al navegador que enve los datos antes de
que el redireccionamiento se haga. Si el navegador tarda ms de 5 segundos, se redirecciona
directamente y los datos se van a tomar viento. Si la accin de enviar el correo falla, sucede lo
mismo que antes. (De todos modos es posible que los datos an estn ah si el usuario pincha en
el botn volver. Pero, a menos que se esfuerce para mandarte los datos, t no llegars a verlos).
Desafortunadamente, una configuracin de este tipo no es la ms sabia del mundo. En la
mayora de los casos, funcionar como est previsto, pero es como un castillo de naipes. Puede
parecer resistente, pero no es nada difcil derribarlo. As que tu formulario puede funcionar
perfectamente, pero puede que no le lleve mucho tiempo el irse a freir esprragos.
Una cosilla ms y lo dejamos. Cuando coloques un formulario en tus pginas y alguien te enve
informacin, notars que la recibes con un Asunto por defecto. Si tu visitante usa Netscape tendrs como
asunto "Form posted from Mozilla". Otros navegadores pueden enviar "Respuesta al formulario", etc.
Puedes cambiar esto editanto la sentencia <FORM> como sigue...
<FORM METHOD=POST ACTION="mailto:robin@batman.org?subject=Soy un
fenmeno!" ENCTYPE="text/plain">
De acuerdo?
Advierte de todas formas que hay por ah unos cuantos clientes de correo (me estoy refiriendo a los
programas, no a los usuarios) que no pueden manejar un Asunto de esta manera. En esta situacin, los
datos parece que se han enviado, cuando en realidad, han desparecido en el olvido. Si ocasionalmente
pierdes respuestas que sabes con certeza te han envado, no especifiques el Asunto.
Si te saltaste la parte del principio donde hablaba del proceso de los formularios por los CGI, quiero que
vuelvas ahora y te familiarices con el proceso. Como ya ha quedado claro los formularios de correo pueden
presentar una serie de problemas y ser impredecibles para un porcentaje de tus visitantes. Si ests
preocupado por este tipo de cosas, utiliza scripts en los formularios. Vamos a ver cmo.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Tutor de Formularios - Leccin 14 (ltima!)

Este tutorial se ha terminado. Ya has aprendido casi todas las sentencias de
FORMULARIOS. Hay todava ms, pero lo que necesitas podrs hacerlo con
stas.
Asegrate de echarle un ojo al Tutor de Tablas y al Tutor de Marcos
(Frames)

pginas.
CyberCursos
Un par de sitios con recursos CGI en castellano:
Buscador de recursos CGI en castellano
Parecido al anterior
FAQs.
<-- Atrs
Tutor de Formularios - Leccin 14 - ltima!

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Formularios - Referencia rpida
Tutor de Formularios - Referencia rpida

Texto
Introduce el item 2 aqu
<INPUT TYPE="text" NAME="ITEM-UNO" SIZE=20><BR>

<INPUT TYPE="text" NAME="ITEM-DOS" SIZE=30 VALUE="Introduce el item 2
aqui">
Contrasea
<INPUT TYPE="password" SIZE=20>
Botones de Radio
Bueno
Mejor
Superior
La repera
<INPUT
<INPUT
<INPUT
<INPUT
TYPE="radio"
TYPE="radio"
TYPE="radio"
TYPE="radio"
NAME="INPUTNAME"
NAME="INPUTNAME"
NAME="INPUTNAME"
NAME="INPUTNAME"
VALUE="GOOD"> Bueno<BR>
VALUE="BETTER" CHECKED> Mejor<BR>
VALUE="BEST"> Superior<BR>
VALUE="SUPER DOOPER"> La repera<BR>
Cuadros de confirmacin
Lo que el viento se llev

Dr Zhivago
Ben Hur
http://perso.wanadoo.es/catwalk/WebTutor/forms/quik-index.html (1 of 4)11/12/2003 02:44:15 p.m.
Aliens 35
<INPUT
viento
<INPUT
<INPUT
<INPUT
35<BR>
TYPE="checkbox"
se llevo<BR>
TYPE="checkbox"
TYPE="checkbox"
TYPE="checkbox"
NAME="Viento"
VALUE="YES" CHECKED> Lo que el
NAME="Dr"
NAME="Ben"
NAME="Ripley"
VALUE="YES"> Dr Zhivago<BR>
VALUE="YES"> Ben Hur<BR>
VALUE="YES" CHECKED> Aliens
rea de Texto
___
____
____( \
.-' `-.
/
(____ \___
/ (O O) \
(____
`----(
) )----'
(____ __________\ .____.
(______/
`-.____.-'
___
)____
___/ ____)
____)
/__________
\______)
____)
<TEXTAREA NAME="COMMENTS" ROWS=7 COLS=56>

___
____
___
____(
\
.-'
`-.
/
)____
(____
\___
/ (O O) \
___/
____)
(____
`----(
)
)----'
____)
(____
__________\ .____. /__________
____)
(______/
`-.____.-'
\______)
</TEXTAREA>
Lista desplegable
Leones
<SELECT
<OPTION
<OPTION
<OPTION
<OPTION
<OPTION
<OPTION
NAME="INPUT01">
VALUE="item1">Leones
VALUE="item2">y
VALUE="item3">tigres
VALUE="item4">y
VALUE="item5">osos.
VALUE="item6">Menuda banda
</SELECT>
Lista enrrollable
Pito
pito
gorgorito
dnde
<SELECT NAME="STUFF" SIZE=3>

<OPTION VALUE="stuff-a">Pito
<OPTION VALUE="stuff-b">pito
<OPTION VALUE="stuff-c">gorgorito
<OPTION VALUE="stuff-d">dnde
<OPTION VALUE="stuff-e">vas
<OPTION VALUE="stuff-f">t
<OPTION VALUE="stuff-g">tan
<OPTION VALUE="stuff-h">bonito
<OPTION VALUE="stuff-i">uno,
<OPTION VALUE="stuff-j">dos.
</SELECT>
Oculto
<INPUT NAME="QUIEN" TYPE="hidden" VALUE="Schmeckalecka">
Subida de archivos
Browse...
<INPUT TYPE="file" NAME="ARCHIVO">
Enviar y Restablecer
Enviar
Limpiar
<INPUT TYPE="submit" VALUE="Enviar">

<INPUT TYPE="reset" VALUE="Limpiar">
Enviar usando una imagen
<INPUT TYPE="image" SRC="submit.gif" WIDTH=94 HEIGHT=26 BORDER=0

ALT="Enviar">
Prueba de formulario de correo
Acerca del procesamiento CGI
No pinches aqu
Tutor de Formularios - Referencia rpida

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
Referencia
Rpida
Gua
bsica de HTML
Diseo Web Profesional - Concurso Presidencial, solucin.
Tutor de Formularios - Concurso Presidencial, solucin

Un Concurso Presidencial
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Rep
Dem
Tutor de Formularios - Concurso Presidencial, solucin

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
9 - 10 - 11 - 12 - 13 - 14
http://perso.wanadoo.es/catwalk/WebTutor/forms/presquiz2.html11/12/2003 02:44:37 p.m.
Referencia
Rpida
Gua
bsica de HTML

Leccin 8
Ahora trataremos un par de efectos menores. No todos funcionan en todos los navegadores, de todas
formas. An as no hay mucho problema, porque si el navegador no entiende el atributo, sencillamente lo
ignora.
En primer lugar cambiaremos el espesor de los bordes.
<FRAMESET COLS="154,*" BORDER=20>
<FRAMESET ROWS="170,*">
<FRAME SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="magda.html">
</FRAMESET>
<FRAME SRC="carmen.html">
</FRAMESET>
MRALO
Ahora cambiaremos el color de los bordes.

<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO">
</FRAMESET>
</FRAMESET>
http://perso.wanadoo.es/catwalk/WebTutor/frames/lesson08.html (1 of 3)11/12/2003 02:45:08 p.m.
MRALO
Podemos eliminar el borde de un <FRAMESET> individual con FRAMEBORDER.

<FRAMESET ROWS="170,*" FRAMEBORDER=NO>
</FRAMESET>
</FRAMESET>
MRALO
PREGUNTA: Procuro hacer mis frames sin bordes, pero en el Navegador A aparece una
delgada lnea entre los frames. Cmo puedo eliminarla?
A: En casi todas las circunstancias esas lneas pueden ser eliminadas. Mira aqu para una
solucin sencilla.
Podemos tambin prevenir que se redimensione, pero a menos que no estemos en una circunstancia muy
inusual, no hay razn para utilizar este atributo.
<FRAMESET ROWS="170,*" FRAMEBORDER=NO >
</FRAMESET>
<FRAME SRC="carmen.html" NORESIZE>
</FRAMESET>
MRALO
<-- Atrs
Adelante -->
Tutor de Marcos (Frames) - Leccin 8

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Marcos (Frames) - Sin lneas
Tutor de Marcos (Frames) - Sin lneas

El problema: intentas colocar el borde del frame a 0, pero aparece una delgada lnea entre los frames en
algunos navegadores.
La solucin: pnlo todo a cero. Algunas veces, diferentes navegadores entienden cosas diferentes. Para
cubrir cualquier contingencia que cualquier navegador pueda entender pnlo todo a cero, y problema
resuelto. Esto no funcionar si tienes muchos y complejos framsets. En este caso hay siempre una lnea que
no podrs quitar por mucho que lo intentes.
Considera este ejemplo.
Este es el cdigo de la pgina...
<FRAME SRC="doc1.html" NAME="arriba">
<FRAMESET COLS="160,*">
<FRAME SRC="doc2.html" NAME="izquierda">
<FRAME SRC="doc3.html" NAME="principal">
</FRAMESET>
</FRAMESET>
Pongamos todo lo que podamos a cero...
A las sentencias <FRAMESET> le aadiremos
BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0
Y a las sentencias <FRAME> le aadiremos
BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0
MARGINHEIGHT=0
<FRAMESET ROWS="60,*" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 >
<FRAME SRC="doc1.html" NAME="arriba" BORDER=0 SPACING=0 FRAMEBORDER=0
FRAMESPACING=0 MARGINWIDTH=0 MARGINHEIGHT=0 >
<FRAMESET COLS="160,*" BORDER=0 SPACING=0 FRAMEBORDER=0
FRAMESPACING=0 >
<FRAME SRC="doc2.html" NAME="izquierda" BORDER=0 SPACING=0
FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0 MARGINHEIGHT=0 >
<FRAME SRC="doc3.html" NAME="principal" BORDER=0 SPACING=0
FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0 MARGINHEIGHT=0 >
</FRAMESET>
</FRAMESET>
http://perso.wanadoo.es/catwalk/WebTutor/frames/nolines/index.html (1 of 2)11/12/2003 02:45:45 p.m.
Diseo Web Profesional - Tutor de Marcos (Frames) - Sin lneas
Ahora mira cmo queda. Debe quedar ajustado, aunque en algunos navegadores quizs aparezca todava
una delgada lnea entre los frames.
Tutor de Marcos (Frames) - Sin lneas

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/frames/nolines/index.html (2 of 2)11/12/2003 02:45:45 p.m.
Plantillas
Gua
bsica de HTML

Leccin 1
Lo primero es lo primero. Para este tutorial necesitaremos varios documentos html. Arranca el Bloc de
Notas y copia lo siguiente para empezar.
<HTML>
<HEAD>
<TITLE>Mi pgina Frame</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Le daremos a cada documento un nombre. En el Tutor de Tablas y en el Tutor de Formularios hemos usado
nombres de chicos. Creo que es hora de las chicas entren en accin.
<HTML>
<HEAD>
</HEAD>
<BODY>
Magda
</BODY>
</HTML>
Crea una nueva carpeta ( o usa una vaca a ser posible para que no te les mucho con los arhcivos) y graba
esto como magda.html.
Ahora hagamos otro documento html.
<HTML>
<HEAD>
</HEAD>
<BODY>
Carmen
</BODY>
</HTML>
Gurdalo en la misma carpeta como carmen.html.
Ahora haz lo mismo con Mar, Gemma, Angustias, y Mara. Guarda todos los documentos en la misma
carpeta. Ahora debes tener 6 documentos completos e independientes de html.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 2
Ok, ahora, vamos a lo divertido... vamos a hacer la pgina maestra. Empieza con esto.
<HTML>
<HEAD>
<TITLE>Mi pgina Frame - Pgina maestra</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Quita las sentencias <BODY>. La pgina maestra no las utiliza...

<HTML>
<HEAD>
</HEAD>
</HTML>
...en su lugar utiliza sentencias <FRAMESET>.

<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Para clarificar las cosas, quitar <HTML>, <HEAD> y <TITLE>. Mantenlas en tu documento, por supuesto.
<FRAMESET>
</FRAMESET>
Ahora es un buen momento para grabar. Grbalo en la misma carpeta donde tienes a las chicas como
index.html. Si intentas abrirla con el navegador vers que est todo en blanco. Est bien porque esta es
"La Pgina Maestra".
Ahora empezaremos a definir cmo van a ir apareciendo las pginas. Dile al navegador que divida la
ventana principal en dos columnas, cada una de ellas ocupando el 50% de la ventana.
<FRAMESET COLS="50%,50%">
</FRAMESET>
Todo est an en blanco, tranquilo, an necesitamos algo ms para que todo esto funcione.
Le tenemos que decir al navegador qu vamos a poner en cada frame.

</FRAMESET>
MIRLO. Acabas de hacer tu primera pgina Frame. Y te creas que era imposible!
Una cosa antes de terminar. Nota que <FRAMESET> es una sentencia contenedora, y que <FRAME> no lo
es. Para los que no lo sepan una sentencia contenedora tiene una sentencia o <TAG> de apertura y una
sentencia o </TAG> de cierre, por lo que la sentencia </FRAMESET> no se te debe olvidar.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 3
La sentencia <FRAMESET> es la que hace el trabajo de divisin. Y en realidad, eso es todo lo que hace...
divide las ventanas. Especifica algo ms dicindo cmo dividirlas, pero recuerda, cuando quieras dividir
algo, utiliza <FRAMESET>.
Podemos dividirla en ms de 2 piezas? S, pero asegrate de especificar una pgina para cada seccin de
forma que el navegador no se confunda.
<FRAMESET COLS="20%,20%,20%,20%,20%">
<FRAME SRC="mar.html">
<FRAME SRC="gemma.html">
<FRAME SRC="angustias.html">
</FRAMESET>
MRALO
De camino, si pinchar en el botn Actualiza no carga la pgina, prueba a pinchar en Actualizar con
MAYSCULAS pulsado.
Es obvio que podemos hacer los frames con diferentes tamaos. Asegrate de que la aritmtica es correcta
o el navegador har su propia interpretacin y entonces tarar que v!.
<FRAMESET COLS="10%,20%,30%,15%,25%">
</FRAMESET>
MRALO
Si especificamos que se divida en ROWS (FILAS) en lugar de COLS (COLUMNAS) tenemos algo
enteramente nuevo.
<FRAMESET ROWS="10%,20%,30%,15%,25%">
</FRAMESET>
MRALO
Volvamos a nuestros 2 frames, divididos en dos columnas iguales.

</FRAMESET>
MRALO
Podemos especifiar 50 pxeles en lugar del 50%.Y adems, podemos usar * en lugar de un nmero. El *
indica todo lo que queda..
</FRAMESET>
MRALO
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 4
Ahora veremos un punto importante: Supongamos que haces un frame de 100 pxeles de ancho a la
izquierda de la ventana y otro de 100 pxeles de ancho a la derecha de la ventana. Como ests utilizando una
resolucin de 800x600 tienes un hueco en el centro de 600 pxeles de ancho. Todo va perfectamente... para
t. Si mi pantalla es de 640x480, esos frames de 100 pxeles que has puesto en tu pgina ahora miden 80
pxeles cada uno en la ma (640x100/800). Si haces uso de dimensiones absolutas en las sentencias
<FRAMESET> utiliza SIEMPRE al menos un * como frame elstico. As todo aparecer correctamente en
todas las pantallas y volver a haber paz en la tierra y....
Esta es la causa de un problema tan comn con los frames que quiero dedicarle un poco de atencin. Un
diseo muy popular de frame es una estrecha ventana en la izquierda, que contiene el ndice de la pgina o
los enlaces, y una gran ventana en la derecha, que contiene las pginas en s. Es algo as. Aqu est el
problema... Si divides las ventanas utilizando porcentajes (como en <FRAMESET COLS="15%,85%">) a
t te parecer perfecto. Pero para alguien que utilice una resolucin de pantalla diferente a la tuya (y estoy
seguro de que hay a millares, o a millones) el asunto se parecer a esto.
La razn por la que esto ocurre es porque has especificado que la ventana izquierda debe ser el 15%. El
15% de qu? El 15% de la resolucin horizontal de la pantalla del que visite tu pgina. Por lo tanto esa
ventana izquierda le parecer diferente a cada visitante que use una resolucin distinta. Cmo arreglarlo?.
Me alegro de que lo preguntes. Utiliza una dimensin absoluta para la ventana izquierda y haz la ventana
derecha elstica (como en <FRAMESET COLS="120,*">). Bingo. Problema resuelto.
Es buena idea hacer la dimensin absoluta ms grande de lo que necesita ser. Dale un poco de espacio
adicional por si acaso. Por ejemplo, si 100 pxeles son suficientes para que entre lo que quieres, entonces
haz la ventana de 120 o 125 pxeles, no te arrepentirs.
Una buena forma para los usuarios de Win95 de comprobar esto es utilizar un juguetito de MS PowerToy
llamado Quickres.
Bueno, al trabajo. Podemos hacer ms de un frame y especificar la razn que mantendrn entre ellos.
<FRAMESET COLS="50,*,2*">
</FRAMESET>
MRALO
Traducido esto dice: Haz 3 frames. Haz el primero de 50 pxeles de anchura. El resto dvidelo entre los
frames 2 y 3 pero haz el frame 3 dos veces ms grande que el 2. Coloca a Magda en el primer frame, a
Carmen en el segundo y a Mar en el tercero.
Es importante hacer notar que todo se hace por orden. El primer <FRAME> se muestra de acuerdo con el
primer atributo de la sentencia <FRAMESET> (50/magda), el segundo con el segundo atributo (*/
carmen), y el tercero con el tercer atributo (2*/mar), y precisamente en este orden. S que esto puede
parecer una chorrada, pero es muy importante y quera recalcarlo.
Qu hacemos si queremos dividir a Mar por la mitad horizontalmente? Recuerda que dije que si queras
dividir algo debas usar la sentencia <FRAMESET>. Primero reemplaza a Mar con un par de sentencias
<FRAMESET>.
<FRAMESET>
</FRAMESET>
</FRAMESET>
Ahora le hemos dicho al navegador: Haz 3 frames. Haz el primero de 50 pxeles de ancho. El resto dvidelo
entre los frames 2 y 3 pero haz el frame 3 dos veces ms grande que el 2. Coloca a Magda en el primer, y a
Carmen en el segundo, y el tercer frame vamos a dividirlo ms adelante. Ahora tenemos que especificar
cmo vamos a dividir el tercer frame.
Vamos a dividirlo horizontalmente y por la mitad.

<FRAMESET ROWS="50%,50%">
</FRAMESET>
</FRAMESET>
Creo que podemos colocar a Mar arriba y a Gemma abajo. Y eso es todo.
</FRAMESET>
</FRAMESET>
MRALO
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 5
Esto ha estado tan divertido que creo que lo vamos a repetir! Dividamos a Magda horizontalmente en 3
secciones. La de arriba necesitar tener 50 pxeles de alto. Las otras dos las dividiremos por igual. Y
pondremos a Magda en cada una de ellas. Aqu est todo.
<FRAMESET ROWS="50,*,*">
</FRAMESET>
</FRAMESET>
</FRAMESET>
MRALO
Ya s que no es muy impresionante. Adems la pgina est demasiado dividida y no queda muy bien. Una
buena regla es no hacer ms de 3 frames por pgina. Y si puedes evitar que estn juntos, mejor que mejor.
Tambin es un buen momento para pensar en los pobres chicos que tienen navegadores que no pueden
cargar los frames. Aunque no sean muchos, hay navegadores que no pueden ver los frames as que puedes
aadir despus de las sentencias <FRAMESET> esto...
<FRAMESET ROWS="50,*,*">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Coloca tus pginas sin frames aqu. Si alguien est usando un viejo
navegador,
se saltar todo lo superior y vendr directamente aqu abajo. Los
navegadores
capaces de leer los frames ignorarn todo lo que hay entre las
sentencias
<NOFRAMES>.
Ahora te puedes estar haciendo un par de preguntas.
* Tengo que escribir una pgina enteramente en blanco?
Probablemente.
* Canta gente se va a perder mi pgina si no hago esto? Pocos.
* Crees que debo preocuparme por esto? No.
* T te preocupas por esto? Tampoco.
* Entonces por qu lo pones en el tutorial? Porque es una
utilidad y quiero
que por lo menos sepas que existe.
* Eres siempre tan quisquilloso, pero al mismo tiempo tan
encantador? Por supuesto.
</BODY>
</NOFRAMES>
</FRAMESET>
Nota - Aparte de mi opinin personal, hay poderosos argumentos para utilizar las
sentencias <NOFRAMES>. Muchas empresas utilizan todava viejos navegadores, que no
son capaces de leer frames. Fuera de los U.S.A. tambin sucede muy a menudo. Si tu
prioridad es alcanzar absolutamente a cualquiera que lea tu pgina con los mnimos
problemas, te tomars un poco de tiempo para usar las sentencias <NOFRAMES>. ----Mis agradecimientos a Matthew Miller, del Gremio de escritores de HTML por apuntar
esta idea.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 6
Volvamos a algo mucho ms simple.

</FRAMESET>
MRALO
Podemos colocar imgenes en los frames si queremos. Graba la imagen de la

derecha en tu carpeta de trabajo como mundo.gif. (clic con el botn derecho y
Guardar imagen como)
<FRAME SRC="mundo.gif" WIDTH=146 HEIGHT=162>
</FRAMESET>
MRALO
Recuerda que siempre es buena prctica incluir los atributos HEIGHT & WIDTH (ALTURA Y
ANCHURA) en la sentencia de imagen.
Vamos a procurar ajustar el frame a la imagen. Primero reduzcamos la ventana a 146 pxeles de ancho.
Como estamos utilizando una dimensin absoluta, hagamos la otra elstica.
</FRAMESET>
MRALO
Ahora dividamos el frame horizontalmente en 2 secciones. La seccion de arriba debe tener 162 de alto y la
inferior el resto. Pondremos mundo.gif y Magda respectivamente.
</FRAMESET>
</FRAMESET>
MRALO
Te percatars de que tenemos un pequeo problema.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 7
Las barras de desplazamiento que han aparecido pueden especificarse como YES (S), NO (NO) o
AUTO (AUTOMTICO). YES significa que la ventana tendr barras de desplazmiento, las necesite o no.
NO significa todo lo contrario. La ventana no tendr barras de desplazamiento, y aunque el contenido del
frame sea tan grande como Andaluca, el navegador mostrar lo que quepa, nada ms. AUTO es la opcin
por defecto. Si las barras de desplazamiento son necesarias, aparecern. Si no lo son, quedarn
convenientemente eliminadas. As que librmonos de las barras dichosas.
<FRAME SRC="mundo.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
</FRAMESET>
</FRAMESET>
MRALO
Ten en cuenta que debes ser muy cuidadoso quitando las barras de desplazamiento. En muchas pginas en
las que se han eliminado, el autor no se ha percatado de que a otras resoluciones o con otro tipo de fuente
(lase una fuente de mayor tamao), los bordes inferiores y derechos del frame se pierden irremisiblemente.
Elminalas slo si es absolutamente necesario y sabes qu es lo que va a suceder a otras resoluciones.
Muy bien. Volvamos a nuestro pequeo problema. La imagen an no est correctamente enmarcada. Los
dos prximos atributos con los que nos veremos las caras son los mrgenes. El navegador adjudica
automticamente a cada frame un espacio en blanco alrededor de su contenido. Esto se hace normalmente
por obvias razones estticas. Pero podemos controlar el tamao de estos mrgenes usando MARGINWIDTH
(ANCHURA DE MARGEN)y MARGINHEIGHT (ALTURA DE MARGEN). Estos atributos controlan los
mrgenes derecho & izquerdo y superior & inferior respectivamente. Los fijaremos en 1, que es el mnimo.
</FRAMESET>
</FRAMESET>
MRALO
Desafortunadamente esto no esto todo. Las dimensiones del frame son (muy a menudo) medidas desde
centro del borde hasta el centro del borde, segn se ve en la figura inferior:
Y est tambin el borde mnimo de 1 que hay que tener en cuenta. As que contando con que el borde
normal es de 6 pxeles, tenemos que aadir 8 pxeles a la dimensin horizontal de la imagen y otros 8 a la
dimensin vertical (la mitad de 6, ms 1, por 2). Si te parece un poco confuso, sencillamente aade a 8
pxeles a cada dimensin de la imagen para conseguir el tamao mnimo necesario de la ventana, y as no te
calientas la cabeza.
</FRAMESET>
</FRAMESET>
MRALO
Aunque no exactamente ajustada, este sistema mostrar tus imgenes perfectamente centradas en las
ventanas, o al menos lo mejor posible. No has visto nunca una imagen (mira en el frame superior) que
estaba cortada por uno o ms lados?. Si no usas dimensiones absolutas y si aades 8 a cada dimensin de la
imagen, tus frames les parecern perfectos a todo el mundo. (Aunque lo que estamos haciendo no es la
perfeccin absoluta, ten en cuanta que cuanto ms preciso seas, mayores sern las posibilidades de que el
aspecto final no sea el mismo para todo el mundo).
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 9
Bueno, ahora que hemos aprendido algo de cmo se hacen los frames
empecemos a hacer enlaces entre los frames.
volvamos a algo simple y
<FRAME SRC="maria.html">
</FRAMESET>
MRALO
Lo que vamos a hacer es que desde maria.html podamos enlazar con angustias.html. As que abre
maria.html con el Bloc de Notas y aade lo siguiente:
<HTML>
<HEAD>
</HEAD>
<BODY>
Mara
<P>Tienes que visitar a mi amiga Angustias.
</BODY>
</HTML>
Ahora aade el enlace y graba el documento.

<HTML>
<HEAD>

</HEAD>
<BODY>
Mara
<P>Tienes que visitar a mi amiga <A HREF="angustias.html">Angustias</A>.
</BODY>
</HTML>
Vamos a probarlo.
</FRAMESET>
MRALO
Si haces clic en el enlace, la pgina de Angustias se carga en la ventana de Mara. Ya s, ya s... no ests
impresionado. Lo que quieres es que cuando pinches en un enlace de la ventana de Mara cargues la pgina
solicitada en la ventana de Carmen. Eso slo supone un poco ms de trabajo.
Lo que tienes que hacer es darle un NAME (NOMBRE) al <FRAME> en tu pgina maestra. As que
adjudiqumosle un nombre al segundo frame
<FRAME SRC="carmen.html" NAME="VENTANA-1">
</FRAMESET>
Nota - Los nombres de los <FRAME> deben empezar con un carcter alfanumrico (abc123 etc.). Cualquier
otro nombre ser ignorado. (Una excepcin la constituyen los nombres que empiezan con el carcter de
subrayado: _ su uso se explicar ms tarde).
Ahora tenemos que hacer un pequeo aadido en el enlace de la pgina de Mara, as que abre maria.
html de nuevo y aade un TARGET (OBJETIVO).
<HTML>
<HEAD>
</HEAD>
<BODY>
Mara
<P>Tienes que visitar a mi amiga <A HREF="angustias.html"
TARGET="VENTANA-1">Angustias</A>
</BODY>
</HTML>
Esto har que la pgina enlazada carge en el frame llamado VENTANA-1.
MRALO
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 10
Esta clase de enlace va muy bien cuando quieres cargar una pgina sin salir de tu sitio web. Pero, qu
sucede con las pginas que no son de tu sitio web? Aadamos otro enlace a la pgina de Mara.
<HTML>
<HEAD>
</HEAD>
<BODY>
Mara
<P>Tienes que visitar a mi amiga <A HREF="angustias.html"
TARGET="WINDOW-1">Angustias</A>
<P>Y por supuesto tienes que visitar a Jose Angel en
<A HREF="http://perso.wanadoo.es/catwalk/Inicio.html" TARGET="VENTANA1">Diseo Web Profesional</A>
</BODY>
</HTML>
MRALO
Como ves, esto hace que una pgina exterior se cargue en tu ventana.
Cmo podemos hacer que un enlace exterior cargue en la ventana completa? Fcil, cambia TARGET a
_top. (Nota: siempre en minsculas... es muy importante.)
<HTML>
<HEAD>
</HEAD>
<BODY>
Mara
<P>Tienes que visitar a mi amiga<A HREF="angustias.html"
TARGET="VENTANA-1">Angustias</A>
<P>Y por supuesto tienes que visitar a Jose Angel en
<A HREF="http://perso.wanadoo.es/catwalk/Inicio.html/"
TARGET="_top">Diseo Web Profesional</A>
</BODY>
</HTML>
MRALO
Procura utilizar este mtodo siempre que enlaces con una pgina exterior. Creme, tu visitantes lo
apreciarn.
_top es uno de los 4 atributos llamados 'objetivos mgicos'. Estn _top, _blank, _self y _parent.
Son los nicos que pueden tener un carcter que no sea alfanumrico al principo. Cualquier objetivo que
empiece con _ y no sea uno de stos cuatro puede tener un comportamiento impredecible.
Qu hacen exactamente cada uno de ellos?
_top abre un enlace a ventana completa.
_blank abre un enlace en una nueva ventana del navegador.
_self abre un enlace en la misma ventana o frame (igual que si no existiera)
_parent abre un enlace en el frame inmediato anterior.
Se cree que _new abrir tambin un enlace en una nueva ventana. Muchos navegadores lo hacen. Otros no.
Es igual que si les dijeras _segismundo, _allavoy o _tequiero. Tambin puedes probar con
bonnie & clyde. Cualquier TARGET que no se haya definido como los previos resultar en una nueva
ventana (habitualmente). En fin, si quieres correr riesgos...
Una vez ms, recuerda, cuando uses uno de los objetivos mgicos, _top, _blank, _self o _parent,
asegrate de utilizar minsculas. Las maysculas no sern entendidas y el resultado ser que probablemente
el enlace se abrir en una nueva ventana.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 11
Creo que lo que vamos a hacer ahora es una pgina con frames desde el principio. Algo como esto.
Antes de empezar, djame enfatizar... s simple! Un sitio con un montn de enlaces apuntando aqu y all
es dficil de construir, y ms difcil an de navegar. Dicho esto, a por ellos que son pocos y cobardes!
En lo primero que tenemos que pensar es en cmo queremos que resulte. Un diseo sencillo, con una banda
superior, un directorio en la ventana izquierda, y una ventana principal en la derecha sern suficientes.
Hagamos en primer lugar la pgina maestra.
<HTML>
<HEAD>
<TITLE>Pgina de Prctica</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Procura hacer una nueva carpeta y graba esto como index.html. La imagen que usaremos ser para la
banda superior o banner ser "MY FRAMZ PAGE". Grbala como framz1.gif en la carpeta de trabajo.
Divide la pantalla horizontalmente.

<HTML>
<HEAD>
<TITLE>Pgina de prctica</TITLE>
</HEAD>
</FRAMESET>
</HTML>
Nota que conseguimos 83 aadiendo 8 a la altura de la imagen (75+8=83). Nota tambin que como
utilizamos una dimensin absoluta, el otro frame lo hacemos elstico.
Ahora especifiquemos banner.html como documento superior (haremos este documento en un par de
minutos). Incluye tambin un par de sentencias <FRAMESET> porque vamos a dividir la parte inferior
posteriormente.
<HTML>
<HEAD>
</HEAD>
<FRAME SRC="banner.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
MRALO
Puedes probarlo, pero conseguirs que no vaya muy bien porque an est incompleto.
Ahora dividiremos la parte inferior en dos secciones. Especificaremos que la ventana izquierda contendr
directorio.html y la derecha casa.html. Como an no hemos hecho estos documentos tendremos
mensajes de error.
<HTML>
<HEAD>
</HEAD>
<FRAME SRC="directorio.html">
<FRAME SRC="casa.html">
</FRAMESET>
</FRAMESET>
</HTML>
MRALO
Dado que nuestro directorio estar en la pgina izquierda, y las pginas cargarn en la ventana derecha, le
tendremos que dar a esta ltima un nombre.
<HTML>
<HEAD>
</HEAD>
<FRAME SRC="casa.html" NAME="VENTANA-PRINCIPAL">
</FRAMESET>
</FRAMESET>
</HTML>
MRALO
Vale. Ya hemos terminado con esto... por ahora.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML

Leccin 12
Ahora hagamos los documentos. Empezaremos con banner.html. Copia lo siguiente y grbalo:
<HTML>
<HEAD>
<TITLE>Pgina de prctica - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>
Vers que hemos especificado como color de fondo el azul.
VER banner.html
VER Pgina Maestra
Introduce la imagen y cntrala.

<HTML>
<HEAD>
<TITLE>Pgina de prctica - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>
VER banner.html
VER Pgina Maestra
Y ahora que lo pienso, tengo que decirte que si ests mirando el cdigo fuente de mis documentos como
gua en la creacin de los tuyos puedes encontrarte con cosas contradictorias o sin sentido. Esto se produce
porque yo tengo que hacer que mis pginas den unos cuantos saltos para que las lecciones funcionen
correctamente. Entendido?. Si no lo entiendes, no mires el cdigo de las lecciones a menos que te quieras
confundir an ms.
Bueno... como puedes ver, se nos ha presentado otro problema. Tenemos una barra de desplazamiento y la
imagen no est todo lo bien que debera estar en la ventana. Abre tu pgina maestra, elimina la barra de
desplazamiento y librte de los mrgenes
<HTML>
<HEAD>
</HEAD>
<FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="casa.html" NAME="VENTANA-PRINCIPAL">
</FRAMESET>
</FRAMESET>
</HTML>
MRALO
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
Pgina de prctica - Banner
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice2/banner01.html11/12/2003 02:52:10 p.m.
Pgina de prctica - Banner
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice2/banner02.html11/12/2003 02:52:17 p.m.

Leccin 13
Ahora hagamos nuestra pgina de Directorio. Empieza con esto y grbalo como directorio.html.
<HTML>
<HEAD>
<TITLE>Pgina de prctica - Directorio</TITLE>
</HEAD>
</BODY>
</HTML>
VER directorio.html
VER Pgina maestra
Ponle un encabezamiento y escribe el texto de los enlaces. Aadiremos stos en un minuto.

<HTML>
<HEAD>
</HEAD>
<H3>Directorio</H3>
Inicial
<P>Ir aqu
<BR>o all
<P>o visitar
<BR>Yahoo
<BR>Netscape
</BODY>
</HTML>
VER directorio.html
VER Pgina maestra
Aadamos la informacin del enlace.

<HTML>
<HEAD>
</HEAD>
<H3>Directorio</H3>
<A HREF="casa.html">Inicial</A>
<P><A HREF="aqui.html">Ir aqu</A>
<BR>o <A HREF="alli.html">o all</A>
<P>o visitar
<BR><A HREF="http://www.yahoo.com/">Yahoo</A>
<BR><A HREF="http://home.netscape.com/">Netscape</A>
</BODY>
</HTML>
VER directorio.html
VER Pgina maestra
No ha sido divertido? No, supongo que no lo ha sido. Vale, cuenta hasta 5, o hasta 500. Tmate un respiro,
hazte un caf, rscate un poco el grano se que te est fastidiando. Vete a tomar una cerveza. O dos. Pero no
muchas ms que luego no funciona nada, y...
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
Pgina de prctica - Directorio
Directorio
Inicial
Ir aqu
o all
o visitar
Yahoo
Netscape
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice2/directory02.html11/12/2003 02:52:58 p.m.
Pgina de prctica - Directorio
Directorio
Inicial
Ir aqu
o all
o visitar
Yahoo
Netscape
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice2/directory03.html11/12/2003 02:53:07 p.m.

Leccin 14
Bueno, ahora tendremos que hacer casa.html, aqui.html y alli.html. Ya s que has estado
trabajando duro (yo tambin estoy harto de teclear), pero ya nos queda poco. As que copia lo siguiente y
grbalo como casa.html
<HTML>
<HEAD>
<TITLE>Pgina de Prctica - Principal</TITLE>
</HEAD>
<H1 ALIGN=center>Ests en casa.</H1>
Bienvenido a mi pgina principal. Esta pgina debera ser atractiva
y de fcil navegacin porque mi profesor, Jose Angel, me ha enseado
ha hacer los frames muy bien.
<P><CENTER>Divirtete.</CENTER>
</BODY>
</HTML>
VER casa.html
Ahora graba esto como aqui.html

<HTML>
<HEAD>
<TITLE>Pgina de prctica - Aqu</TITLE>
</HEAD>
<H1 ALIGN=center>Aqu</H1>
Bienvenido. Aqu es donde todo sucede.</BODY>
</HTML>
VER aqui.html
Y por supuesto tenemos que grabar alli.html.

<HTML>
<HEAD>
<TITLE>Pgina de prctica - All</TITLE>
</HEAD>
<H1 ALIGN=center>Esto es all</H1>
Me gustara hacer una proposicin. Todos hemos visto esa flecha o signo
que dice "Ests
aqu". No sera mejor que hubiera otra flecha que dijera "Deberas
estar all?". Hara las
cosas mucho ms fciles.
</BODY>
</HTML>
VER alli.html
Ahora mira la Pgina Maestra.
Oops, hemos olvidado algo. Tenemos que aadir nuestros objetivos, as que abre directorio.html y
aade las sentencias TARGET necesarias.
<HTML>
<HEAD>
</HEAD>
<H3>Directorio</H3>
<A HREF="casa.html" TARGET="VENTANA-PRINCIPAL">Inicial</A>

<P><A HREF="aqui.html" TARGET="VENTANA-PRINCIPAL">Ir all</A>
<BR><A HREF="alli.html" TARGET="VENTANA-PRINCIPAL">o all</A>
<P>o visitar
<BR><A HREF="http://www.yahoo.com/" TARGET="_top">Yahoo</A>
<BR><A HREF="http://home.netscape.com/" TARGET="_top">Netscape</A>
</BODY>
</HTML>
Ahora s est terminada nuestra Pgina Maestra.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
Pgina de prctica - Principal
Ests en casa.
Bienvenido a mi pgina principal. Esta pgina debera ser atractiva y de fcil navegacin porque mi
profesor, Jose Angel, me ha enseado ha hacer los frames muy bien.
Divirtete.
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice2/casa01.html11/12/2003 02:53:55 p.m.
Pgina de prctica - Aqu
Aqu
Bienvenido a aqu. Aqu es dnde todo sucede.
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice/aqui.html11/12/2003 02:54:02 p.m.
Pgina de Prctica - All
Esto es all
Me gustara hacer una proposicin. Todos hemos visto esa flecha o signo que dice "Ests aqu". No
sera mejor que hubiera otra flecha que dijera "Deberas estar all?". Hara las cosas mucho ms fciles.
http://perso.wanadoo.es/catwalk/WebTutor/frames/practice/alli.html11/12/2003 02:54:07 p.m.

Leccin 15
Funciona bien no? Ahora aadamos un enlace con mi pgina principal. Abre casa.html, y aade una
sentencia TARGET, pero hagmoslo bien, porque aunque me caes fenomenal, no quiero cargar mi pgina en
tu ventana.
<HTML>
<HEAD>
<TITLE>Pgina de prctica - Inicial</TITLE>
</HEAD>
<H1 ALIGN=center>Ests en casa.</H1>
Bienvenido a mi pgina principal. Esta pgina debera ser atractiva y
de fcil
navegacin porque mi profesor, Jose Angel, me ha enseado ha hacer los
frames muy bien.
<P><CENTER>Divirtete.</CENTER>
<P>Visita a Jose Angel en
TARGET="_top">Diseo Web Profesional</A>.
</BODY>
</HTML>
Ver el producto final.
Hay mucha gente que se pregunta cmo cargar dos (o ms) frames con un slo clic. Esto es
razonablemente fcil de hacer. Como esto es algo especial, y habitualmente no se usa en el desarrollo
de frames, voy a mantenerlo separado del tutorial. A menos que quieras aadir esta utilidad a tus
pginas, puedes saltrtela si quieres.
Cargar dos (o ms) frames con un slo clic.
<-- Atrs
Adelante -->

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Marcos (Frames) - Cargar 2 (o ms) marcos con un clic
Cargar 2 (o ms) marcos con un clic - Mtodo HTML

Hay dos formas de hacer sto... el mtodo HTML y el mtodo JavaScript. Cada uno tiene sus ventajas y sus
inconvenientes.
El mtodo HTML no requiere que javascript est activado, y tampoco requiere que aprendas nada nuevo (si
sabes hacer marcos, es todo lo que necesitas).
El mtodo javascript es mejor si vas a intentar una manipulacin ms profunda de los marcos. A menudo es
menos trabajoso, tambin es ms o menos "rehusable", es ms flexible y es ms fcil de cambiar o de
aadirle cosas. El nico inconveniente real es que si alguien tiene su JavaScript desactivado, no va a llegar
muy lejos.
Si te es posible, utiliza siempre el mtodo HTML
As que veremos ste en primer lugar.
Cargar 2 (o ms) marcos - Mtodo HTML

La idea es simple... los dos marcos que sern cambiados han sido definidos con un documento FRAMESET.
Para cambiarlos, slo tienes que cargar el nuevo documento FRAMESET.
Haz clic en el enlace inferior. Sgueme paso a paso. Te explicar lo que est sucediendo.
Esto es un ejemplo.
El enlace en el que has pinchado carga primeramente una pgina con un directorio en el marco izquierdo y
una pgina frameset (es decir, ya dividida) en el marco derecho. La pgina frameset carga inmediatamente 2
documentos en el marco derecho: El amigo de Joe, Bill; y el otro amigo de Joe, Ed.
Ahora, haz clic en el enlace de las amigas de Jackie.
Esto carga un nuevo documento frameset (split2_jackie.html) en el marco derecho, que a su vez
carga inmediatamente a las amigas de Jackie, Amy y Joan.
Te dars cuenta de que lo nico que haces es cargar un nuevo documento con las sentencias frameset
adecuadas cuando pinchas en el enlace. Las sentencias frameset pueden ser tan complejas como desees.
Prueba movindote adelante y atrs entre los amigos de Joe y las amigas de Jackie, para cogerle el truquillo.
Ahora pincha en Ms amigos.
Vaya! Qu demonios ha sucedido?
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/start.html (1 of 4)11/12/2003 02:55:06 p.m.
Bien... ms de lo mismo. Pinchar en ese enlace carga una nueva pgina maestra con TARGET cargando
como "_top". Es decir, carga una nueva pgina de directorio en el marco izquierdo y una nueva pgina
frameset en el derecho, que a su vez se divide en 4 documentos, cada uno de los cuales ir en su respectivo
marco a la derecha.
Haz clic en los amigos de John. Esto carga un nuevo documento frameset (split4_john.html) en el
marco derecho, que a su vez carga a los amigos de John. Saltar adelante y atrs entre Joe, Jackie, John y
Jenny simplemente carga diferentes framesets en el marco derecho. Si pinchas en el enlace Menos amigos
recargas la primera pgina maestra.
Facilongo, no?
Los documentos utilizados han sido:
Ver directorios
Pginas maestras
master_html_2.html
master_html_4.html
Pginas de Directorios
dir_html_2.html
dir_html_4.html
Pginas Frameset
split2_joe.html
split2_jackie.html
split4_joe.html
split4_jackie.html
split4_john.html
split4_jenny.html
Pginas de Amigos
zjoe_bill.html
zjoe_ed.html
zjoe_frank.html
zjoe_tom.html
zjackie_amy.html
zjackie_joan.html
zjackie_lisa.html
zjackie_toni.html
zjohn_al.html
zjohn_dean.html
zjohn_george.html
zjohn_ralph.html
zjenny_denise.html
zjenny_marci.html
zjenny_pam.html
zjenny_shannon.html
Y esto es todo en cuanto al mtodo HTML. Recuerda, independientemente del mtodo que utilices, hay un
montn de posibilidades de meter la pata. Procura ser muy meticuloso, y comprueba la fiabilidad completa
del sistema (incluyendo todos y cada uno de los enlaces) antes de subirlo a tu servidor.
Quieres examinarte? Prueba con lo siguiente...
Intenta hacer lo que sigue empezando desde cero. El diseo bsico es ste:
Mamferos
Animales de granja
Vaca | Cerdo | Caballo
Animales salvajes
Oso | Lobo
Malditos roedores
Ratn | Ardilla
Plantas
rboles
Roble | Tilo | Sauce | Olmo
Flores
Clavel | Tulipn | Rosa

Frutas
Manzana | Naranja | Uvas | Peras | Ciruelas | Limones
Vegetales
Calabaza | Habas
Peces
Marinos
Salmn | Pez espada | Tiburn | Pez gato
De acuario
Goldfish | Guppies
La solucin est aqu por si la necesitas.
Y ahora vamos a por el mtodo JavaScript ...

Adelante -->
Tutor de Marcos (Frames) - Cargar 2 (o ms) marcos con un clic - Mtodo HTML
Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/dir_html_2.html
Amigos de Joe
Amigas de Jackie
Ms amigos
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/dir_html_2.html11/12/2003 02:55:27 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/dir_html_4.html
Amigos de Joe
Amigas de Jackie
Amigos de John
Amigas de Jenny
Menos amigos
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/dir_html_4.html11/12/2003 02:55:42 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_bill.html
Amigo de Joe
Bill
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_bill.html11/12/2003 02:56:07 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_ed.html
Amigo de Joe
Ed
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_ed.html11/12/2003 02:56:12 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_frank.html
Amigo de Joe
Frank
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_frank.html11/12/2003 02:56:18 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_tom.html
Amigo de Joe
Tom
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjoe_tom.html11/12/2003 02:56:24 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_amy.html
Amiga de Jackie
Amy
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_amy.html11/12/2003 02:56:31 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_joan.html
Amiga de Jackie
Joan
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_joan.html11/12/2003 02:56:37 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_lisa.html
Amiga de Jackie
Lisa
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_lisa.html11/12/2003 02:56:43 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_toni.html
Amiga de Jackie
Toni
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjackie_toni.html11/12/2003 02:56:48 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_al.html
Amigo de John
Al
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_al.html11/12/2003 02:56:54 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_dean.html
Amigo de John
Dean
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_dean.html11/12/2003 02:56:59 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_george.html
Amigo de John
George
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_george.html11/12/2003 02:57:04 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_ralph.html
Amigo de John
Ralph
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjohn_ralph.html11/12/2003 02:57:08 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_denise.html
Amiga de Jenny
Denise
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_denise.html11/12/2003 02:57:13 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_marci.html
Amiga de Jenny
Marci
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_marci.html11/12/2003 02:57:17 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_pam.html
Amiga de Jenny
Pam
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_pam.html11/12/2003 02:57:22 p.m.
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_shannon.html
Amiga de Jenny
Shannon
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/zjenny_shannon.html11/12/2003 02:57:27 p.m.
Cargar 2 (o ms) marcos con un clic - Mtodo Javascript

Aqu hay un ejemplo.
Lo primero que necesitamos son unos cuantos documentos con los que trabajar. Coge los siguientes y
grbalos en tu carpeta de trabajo.
zjoe_bill.html
zjoe_ed.html
zjoe_frank.html
zjoe_tom.html
zjackie_amy.html
zjackie_joan.html
zjackie_lisa.html
zjackie_toni.html
zjohn_al.html
zjohn_dean.html
zjohn_george.html
zjohn_ralph.html
zjenny_denise.html
zjenny_marci.html
zjenny_pam.html
zjenny_shannon.html
Aclaro que todos empiezan por z para que se agrupen en el directorio y sea ms fcil reunirlos y grabarlos.
En primer lugar construiremos el ejemplo ms pequeo. Necesitaremos una pgina maestra que especifique
dnde va cada cosa. Graba lo siguiente como master.html...
<HTML>
<HEAD>
<TITLE>Amigos de Joe y Jackie</TITLE>
</HEAD>
<FRAME SRC="dir.html">
<FRAME SRC="zjoe_bill.html" NAME="right_top">
<FRAME SRC="zjoe_ed.html" NAME="right_bottom">
</FRAMESET>
</FRAMESET>
</HTML>
Esto no es ms que un simple marco HTML. Perctate de los nombres de los archivos (An no hemos
hecho dir.html).
http://perso.wanadoo.es/catwalk/WebTutor/frames/load_two/js_method.html (1 of 5)11/12/2003 02:58:03 p.m.
Graba lo siguiente como dir.html....

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</BODY>
</HTML>
Aadiendo el script a HEAD...
<HTML>
<HEAD>
<TITLE></TITLE>

</SCRIPT>
</HEAD>
</BODY>
</HTML>
No necesitas preocuparte de lo que significa por ahora.
Aade el texto de los enlaces y las sentencias de cierre. Pero no rellenes la parte HREF todava.
<HTML>
<HEAD>
<TITLE></TITLE>

</SCRIPT>
</HEAD>
<P><A HREF="">Amigos de Joe</A>
<P><A HREF="">Amigas de Jackie</A>
</BODY>
</HTML>
Ahora aadamos la parte HREF.
<HTML>
<HEAD>
<TITLE></TITLE>

</SCRIPT>
</HEAD>
<P><A HREF="javascript:multiLoad2('zjoe_bill.html', 'zjoe_ed.
html')">Amigos de Joe</A>
<P><A HREF="javascript:multiLoad2('zjackie_amy.html', 'zjackie_joan.
html')">Amigas de Jackie</A>
</BODY>
</HTML>
Ahora carga en el navegador master.html y tu ejemplo ser completamente funcional.
Perfecto. Ahora, qu hemos hecho?. Y lo ms importante cmo funciona?
En pocas palabras, tenemos una funcin - multiLoad2(). Le pasamos argumentos a la funcin zjoe_bill.html y zjoe_ed.html. La funcin procesa estos argumentos.
Aqu le pasamos dos argumentos a la funcin. Tan pronto como la funcin recibe los argumentos, stos se
convierten en las variables doc1 y doc2 que pueden ser manipuladas.
Coloca lo que sea que haya en la variable doc1 en el marco superior derecho.
Y aqu se coloca lo que sea que haya en la variable doc2 en el marco inferior derecho.
Puedes expandir faclmente todo esto para cambiar ms marcos. Aade lo que sigue a master.html y
gurdalo como master2.html...
<HTML>
<HEAD>
<TITLE>Amigos de Joe y Jackie</TITLE>
</HEAD>
<FRAME SRC="dir2.html">
<FRAMESET ROWS="25%,25%,25%,25%">
<FRAME SRC="zjoe_bill.html" NAME="right1">
<FRAME SRC="zjoe_ed.html" NAME="right2">
<FRAME SRC="zjoe_frank.html" NAME="right3">
<FRAME SRC="zjoe_tom.html" NAME="right4">
</FRAMESET>
</FRAMESET>
</HTML>
(No olvides cambiar de dir.html a dir2.html. Vamos a usar una pgina de directorio diferente.)
Ahora aade esto a tu dir.html original y gurdalo como dir2.html...
<HTML>
<HEAD>
<TITLE></TITLE>

</SCRIPT>
</HEAD>
<P><A HREF="javascript:multiLoad4('zjoe_bill.html',
'zjoe_ed.
html',
'zjoe_frank.html',
'zjoe_tom.html'
)">Joe's friends</
A>
<P><A HREF="javascript:multiLoad4('zjackie_amy.html',
'zjackie_joan.
html', 'zjackie_lisa.html', 'zjackie_toni.html' )">Jackie's friends</A>
<P><A HREF="javascript:multiLoad4('zjohn_al.html',
'zjohn_dean.
html',
'zjohn_george.html', 'zjohn_ralph.html'
)">John's friends</A>
<P><A HREF="javascript:multiLoad4('zjenny_denise.html', 'zjenny_marci.
html', 'zjenny_pam.html',
'zjenny_shannon.html')">Jenny's friends</A>
</BODY>
</HTML>
Carga master2.html para probar tu creacin.
Practica y experimenta un poco con lo anterior y vers que puedes crear diseos muy potentes. Tambin he
aadido la carga aleatoria de marcos para que te des cuenta del potencial que tiene la manipulacin de
marcos basada en JavaScript.
Y esto es todo en cuanto al segundo mtodo de cargar varios marcos con un clic. De todas formas, como ya
dije antes, usa el mtodo HTML siempre que puedas.
<-- Atrs
Tutor de Marcos (Frames) - Cargar 2 (o ms) marcos con un clic - Mtodo Javascript
Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
Plantillas
Gua
bsica de HTML
Tutor de Marcos (Frames) - Leccin 16 (ltima!)

Este tutorial se ha terminado. Ya has aprendido casi todas las sentencias de
FRAMES. Hay todava ms, pero lo que necesitas podrs hacerlo con stas.
Asegrate de echarle un ojo al Tutor de Tablas y al Tutor de Formularios

pginas.
CyberCursos
FAQs.
<-- Atrs
Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16

Plantillas
Gua
bsica de HTML
Diseo Web Profesional - Tutor de Marcos (Frames) - Plantillas
Tutor de Marcos (Frames) - Plantillas

Haz clic en una plantilla para ver el cdigo fuente* y saber cmo se ha hecho.
El contenido del directorio est aqu.
Plantilla 1
Plantilla 2
Plantilla 3
Plantilla 4
Plantilla 5
Plantilla 6
Altera las dimensiones de los frames segn sea necesario.

*Ver el cdigo: Muchos, si no todos los navegadores, permiten ver el cdigo de cualquier documento
HTML. Prueba en la barra de mens, debe ser algo como Ver/Fuente. Pinchando, el cdigo de cualquier
documento est abierto a la inspeccin. Ahora que lo sabes nunca ms podrs decir... "He visto (inserta un
buen efecto aqu) en una pgina y an me estoy preguntando cmo lo han hecho."
Tutor de Marcos (Frames) - Plantillas

Tabla General
de Contenidos
Lecciones:
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9
10 - 11 - 12 - 13 - 14 - 15 - 16
http://perso.wanadoo.es/catwalk/WebTutor/frames/templates/main.html11/12/2003 02:59:12 p.m.
Plantillas
Gua
bsica de HTML
NDICE
y Referencia rpida
Estructura Bsica de Documentos

Formateado Bsico de Texto
Formateado Estructural
Imgenes
Enlaces
Miscelnea
Estructura Bsica de Documentos

<HTML>
<HEAD>
<TITLE>Mi primera paginilla</TITLE>
</HEAD>
<BODY>
Hola Jose Angel!
</BODY>
</HTML>
Formateado Bsico de Texto

Texto en negrita: <B>Ejemplo</B>
Texto en itlica: <I>Ejemplo</I>
Texto subrayado: <U>Ejemplo</U>
Texto de espaciado uniforme: <TT>Ejemplo</TT>
http://perso.wanadoo.es/catwalk/WebTutor/makapage/quik-index.html (1 of 6)11/12/2003 03:02:32 p.m.
Cambiar el tamao
FONT>
de la fuente (tamaos:1-7) <FONT
SIZE=5>Ejemplo</
Cambiar el nombre de la fuente (face) <FONT FACE="fontname1,fontname2,

etc">Ejemplo</FONT>
Cambiar el color <FONT COLOR="#0000FF">Ejemplo</FONT>
Prrafos (1-6): <H1>Ejemplo</H1>
Alineamientos de prrafos: <H1 ALIGN="center">Ejemplo</H1>
Cambiar el color de textos, enlaces, etc. de la pgina completa
<BODY BGCOLOR="#123456" TEXT="#23456A" LINK="#3456AB"
VLINK="#456ABC" ALINK="#56ABCD">
Visor de Fuentes Handy Dandy (pgina de introduccin), Abrir el visor directamente
e ybaja
El sub
Formateado Estructural
Retornos de carro <BR>
Retornos de carro mltiples:
<BR>
<BR>
<BR>
Nuevo prrafo <P>

Nuevo prrafo + ALINEAMIENTO <P ALIGN="left|center|right">
Centrado al estilo antiguo: <CENTER>Ejemplo</CENTER>
Lnea horizontal (por defecto): <HR>

Con unos pocos parmetros: <HR ALIGN="left" WIDTH=90% SIZE=1
NOSHADE>
Ajusta tus mrgenes con Blockquote: <BLOCKQUOTE>Ejemplo</BLOCKQUOTE>
Listas numeradas (<OL>) y sin numerar (<UL>):
<OL>
<LI>Definiciones
</OL>
Lista definida (negritas opcionales):

<DL>
<DT><B>Ttulo Definitorio</B>
<DD>Definicin
</DL>
Preformato:
<PRE>
Ejemplo
Ejemplo
Ejemplo
</PRE>
Imgenes
Insertar una imagen (gif o jpg):
<IMG SRC="imagen.gif" WIDTH=123 HEIGHT=456 ALT="Imagen">
Escificar una imagen de fondo (gif o jpg): <BODY
BACKGROUND="mi_imagen_de_fondo.gif">
Fijar imgenes de fondo (especfico de IE):

<BODY BACKGROUND="mi_imagen_de_fondo.gif"
BGPROPERTIES=FIXED>
Grabar una imagen de una pgina.
La localizacin de las imgenes.(SRC) explicada detalladamente.
Tamao de imgenes.
Usando thumbnails (o imgenes en miniatura).
Construir lneas a partir de un punto de 1x1.
El increble
Optimizador GIF
Consigue Paint Shop Pro e IrfanView!
Enlaces
Aadir un enlace relativo: <A HREF="pagina.html">Mi pgina</A>
Aadir un enlace absoluto: <A HREF="http://www.yahoo.com/">Ir a
Yahoo</A>
Enlazar con un seccin especfica de una pgina:
<A HREF="pagina.html#losquesos">Acerca del queso</A>
Adir un enlace a una direccin de correo:
<A HREF="mailto:scottie@enterprise.com">Email Jose Angel</A>
Hacer que una imagen sea un enlace:
<A HREF="pagina.html"><IMG SRC="imagen.gif" WIDTH=123
HEIGHT=456></A>
Librarse del borde azul en los enlaces de imgenes.
<IMG SRC="imagen.gif" WIDTH=123 HEIGHT=456 ALT="Imagen"
BORDER=0>
URLs absolutas versus URLs relativas
Miscelnea
Sube tus pginas a la Web.
Especificar color de fondo: <BODY BGCOLOR="#123456">
Especificar imagen de fondo (gif o jpg): <BODY BACKGROUND="fondo.gif">
Fijar la imagen de fondo (especfico de IE):
<BODY BACKGROUND="fondo.gif" BGPROPERTIES=FIXED>
Sentencias combinadas - Solapamiento versus Anidamiento

Algo ms acerca del Solapamiento y el Anidamiento
Acerca de los 216 colores de Netscape
Tabla de 216 colores de Netscape (imagen)
Tabla de 216 colores de Netscape (pgina)
Tabla de 1536 colores (pgina)
Cdigo de espacio en blanco (carcter especial para el espacio)
Seis caracteres especiales ms

<
>
&
"

espacio en blanco
< signo menor que
> signo mayor que
& smbolo y
" comillas
guin
Un montn ms de caracteres especiales
Resoluciones de pantallas
Comentarios 
Grabar el documento como un archivo HTML
Ver el cdigo
de cualquier documento HTML y averigurar cmo lo han hecho
Archivos y sus extensiones

Quickres
Lista corta de Editores HTML GRATUTOS
As que quieres hacer una pgina Web! - Indice & Referencia rpida
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
Gua
bsica de
HTML
Diseo Web Profesional - Unas palabras acerca de los archivos
unas palabras acerca de los ARCHIVOS
En tu ordenador, todo est guardado como un archivo.

Cada archivo tiene una extensin que pregona qu tipo de archivo es.
nombre del archivo --->
diario.txt <--- extensin del archivo
Un archivo es simplemente un paquete de informacin tal como una imagen o un documento.

Si quieres organizar tus archivos, entonces los colocas en pequeos grupos llamadas carpetas
(o directorios). Las carpetas no tienen extensin porque no son archivos.
Si las extensiones de tus archivos no aparecen, puedes hacer lo siguiente para verlas...
1.
2.
3.
4.
5.
En cualquier ventana (como la superior) haz clic en Ver.

Clic en Opciones de carpeta...
Clic en la pestaa Ver
Clic en Mostrar todos los archivos
Asegrate de que Ocultar extensiones para los tipos de archivo conocidos no est
http://perso.wanadoo.es/catwalk/WebTutor/makapage/boutfils.html (1 of 2)11/12/2003 03:02:52 p.m.
Diseo Web Profesional - Unas palabras acerca de los archivos
marcada.
6. Clic en Aceptar
As Diario.txt es un sencillo archivo de texto; Bonita_imagen.gif, Otra_imagen.jpg y
Foto.bmp son archivos de imgenes; Alien.mpg y Titanic.avi son archivos de pelculas;
Mi_vida.doc y Tu_vida.wri son documentos con formato especfico de texto; Programa.
exe es una aplicacin o un programa; y Paginilla.html o Mi_docuemento.htm son los
comnmente conocidos archivos HTML. stos son el esqueleto de las pginas Web. Estars
haciendo estos archivos muy pronto, y te sorprenders de lo fcil que es!
Ahora volvamos al tutorial
As que quieres hacer una pgina Web! - Una palabras acerca de los archivos
Tabla General
de Contenidos
Lecciones:
ndice y
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13
Referencia rpida
14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24
http://perso.wanadoo.es/catwalk/WebTutor/makapage/boutfils.html (2 of 2)11/12/2003 03:02:52 p.m.
Gua
bsica de
HTML
WebTutor v3.9: Leme
=====================================================================
WebTutor v3.9
Tutoriales de HTML
Joe Barta
=====================================================================
La ltima versin siempre est disponible en
http://junior.apk.net/~jbarta/
La informacin para los sitios que ofrecen shareware est ms abajo.
=====================================================================
Nota del traductor: Se han omitido las diferentes versiones y sus
caractersticas. Estos tutoriales se mantendrn actualizados en lo
posible, y traducidos al espaol en
http://www.navegalia.com/hosting/000e1/WebTutor/Index.html
EMAIL: jagel11@jazzfree.com
catwalk@navegalia.com
=====================================================================
DESCRIPCIN: Tutoriales en formato web, fciles de utilizar y que
cubren lo bsico en el diseo avanzado de pginas web. Los tutoriales
estn en formato HTML, as que son visibles a travs del navegador.
Si nunca has creado una pgina antes, el tutorial bsico te llevar
paso a paso a travs de las sentencias bsicas del HTML. Y, si ya
sabes lo bsico, los tutoriales avanzados te mostrarn cmo aadir
nuevas prestaciones a tus pginas.
ESTOS TUTORIALES SON DONATIONWARE. (Mira en donationware.html para ms
detalles). Puedes utilizarlos y/o distribuirlos segn te parezca, pero
siempre siguiendo las directrices inferiores:
- Si quieres traducirlos, puedes hacerlo.
- Si eres un profesor y quieres utilizarlos como material didctico,
puedes hacerlo. Si quieres imprimir copias para tus alumnos,
puedes hacerlo.
- Si quieres incluirlos en un CD con otros ttulos shareware/freeware,
puedes hacerlo (simplemente te pido que no lo vendas).
- Si eres un empresario o distribuidor y quieres ofrecer copias de
WebTutor como regalo con tus productos, puedes hacerlo.
- Si, porque te parece, lo copias tal cual, y dices que lo has hecho t,
yo no puedo hacer nada para impedrtelo, pero chico, se lo dir a mi
mam, y te vas a ver envuelto en un serio problema.
ALOJAMIENTO EN INTERNET
Si quieres alojar los tutoriales inalterados en tu servidor, pblico
o privado, sers bienvenido al club. De todas formas, he aadido una
utilidad por la que los tutoriales pueden soportar anuncios. Si alojas
los tutoriales en un servidor pblico, te pido que actives esta
utilidad. Es muy sencillo... en el directorio raz de WebTutor hay
un sub-directorio llamado "other". En este directiorio hay un archivo
llamado "navtop.js". brelo con un editor de texto (NO USES FRONT PAGE
O ALGO PARECIDO) y cambia "runads = 0" por "runads = 1". Esto har que
http://perso.wanadoo.es/catwalk/WebTutor/readme.html (1 of 3)11/12/2003 03:05:09 p.m.
WebTutor v3.9: Leme
los anuncios se activen (gracias).

La versin alojable tambin tiene activos los enlaces a los chistes. Si
has ledo alguno, habrs visto que algunos son un poco fuertes.
Si tu servidor es un sitio que no admite estas bromas, puedes eliminarlas
fcilmente. Mientas navtop.js est abierto cambia "jokes_allowed = 1"
por "jokes_allowed = 0".
REQUIERIMIENTOS:
1) Windows95/98. He abandonado la convencin de nombres 8.3. Los usuarios
de Win3x pueden experimentar algn problema. De todas formas pueden
acceder a los tutoriales si estn en lnea. No estoy muy familiarizado
con otros sistemas operativos, pero estoy casi totalmente seguro de que
los tutoriales corrern sin ningn problema.
2) Un navegador grfico con javascript activado (siempre est activado a
menos que t lo hayas desactivado ;-). Preferiblemente Netscape Navigator
4.0 o posterior. MS Internet Explorer 4.0 o posterior tambin servir. Si
utilizas algn otro tambin funcionar. Los navegadores antiguos tendrn
serios problemas.
3) Un editor de texto. Notepad servir perfectamente.
4) Una silla confortable y un miembro atractivo del sexo opuesto para que
lo puedas impresionar cuando aciertes, y que te estrangule cuando metas
la pata.
INSTRUCCIONES: Descomprmelo y empieza en index.html. Divirtete. No se copia,
ni se borra, ni se modifica ningn archivo existente en tu ordenador. Para
"desinstalar" los tutoriales, simplemente borra los contenidos del directorio,
o los directorios en s.
EMAIL: Recibo un montn de correo solicitando que resuelva ste problema o quel
otro, y me temo que no tengo tiempo suficiente para responder a todos, y aunque
los leo todos, slo respondo a alguno ocasionalmente.
Divirtete y buena suerte!
Joe Barta
jbarta@apk.net
==================================================================================
INFORMACIN DE SITIOS QUE OFRECEN SHAREWARE:
NOMBRE:
TIPO:
VERSION:
TAMAO:
WebTutor
Freeware
3.9
1.5 MB
FECHA: 10 de Febrero de 2000

PGINA PRINCIPAL:
http://junior.apk.net/~jbarta/tutor/makapage/
WebTutor v3.9: Leme
DESCARGA:
http://junior.apk.net/~jbarta/webtutor.zip
ftp://ftp.simtel.net/pub/simtelnet/win95/html/webtut39.zip
DESCRIPCIN: (corta)
WebTutor: tutoriales de fcil uso para aprender HTML
DESCRIPCIN: (larga)
Tutoriales en formato web, fciles de utilizar y que
cubren lo bsico en el diseo avanzado de pginas web. Los tutoriales
estn en formato HTML, as que son visibles a travs del navegador.
Si nunca has creado una pgina antes, el tutorial bsico te llevar
paso a paso a travs de las sentencias bsicas del HTML. Y, si ya
sabes lo bsico, los tutoriales avanzados te mostrarn cmo aadir
nuevas prestaciones a tus pginas
CAPTURA DE PANTALLA: http://junior.apk.net/~jbarta/webtutor_cap.gif
ICONO (32x32): http://junior.apk.net/~jbarta/webtutor_icon.gif
CAMBIOS:
Cambios menores, correcciones y mejoras.
AUTOR:
PGINA PRINCIPAL:
EMAIL:
Diseo Web Profesional - Joe Barta

jbarta@apk.net
REQUERIMIENTOS ESPECIALES: Ninguno

DISTRIBUCIN: Este archivo es de libre distribucin.
=======================================================================
WebTutor v3.9 Leme

Tabla General
de Contenidos
de JavaScript
Gua
bsica de
HTML
MegaContador
Tus pginas no reciben todas las visitas que te

gustara?
Quieres impresionar a tus amigos (o amigas)
con unas cifras de visitas mareantes?
Te gustara "regular" el nmero de visitas de tus
pginas?
Quieres vengarte de alguien "regalndole" un
contador que vaya "hacia atrs"?
7315 Visitantes desde el 15/08/2000

Correo
La respuesta a todas estas preguntas es
MegaContador
MegaContador es un contador "configurable". Qu quiere decir esto?. Muy sencillo, es un
contador que puedes manipular a tu antojo. Quieres recibir 10.000 visitas diarias?. No hay
problema. MegaContador lo hace. Quieres que el contador vaya "hacia atrs", de forma que
maana tengas menos visitantes que hoy?. MegaContador lo hace. Quieres acertar una quiniela
de 15?. Bueno, eso no lo hace MegaContador, no poda ser perfecto.
Debajo del contador roto que aparece arriba y a la derecha de sta pgina, hay un
MegaContador. Si actualizas la pgina un par de veces observars que el contador sube con
facilidad.
Ahora bien, cmo se las arregla esta maravilla?. Con un poco de JavaScript y un par de "cookies". No
te asustes. Las cookies son inofensivas (por si no lo sabes ya), y el cdigo JavaScript es de "cortar y
pegar", as que si no eres un manazas integral podrs dejar tu MegaContador listo en menos
tiempo que el que tardas en tomarte una caita. Dar por supuesto que sabes el suficiente HTML
como para poder trastear en las pginas. Si no fuera as, date una vuelta por WebTutor.
Bien, vamos al asunto. MegaContador se compone de 4 partes, aunque t slo tendrs que hacer
ligeros cambios en una de ellas. Las partes son las siguientes:
http://perso.wanadoo.es/catwalk/megacounter/megacontador.html (1 of 4)11/12/2003 03:05:22 p.m.
MegaContador
1.
2.
3.
4.
El cdigo HEAD
El cdigo BODY
La "cookie" galleta.js
Y la "cookie" megacontador.js
Dado que JavaScript puede ser un poco puetero (o un mucho) te recomiendo que empieces con un
documento en blanco, para que hagas pruebas y no te cargues nada. Si solamente tienes el cdigo
del MegaContador te ser ms fcil localizar cualquier error. Una vez que todo funcione y est a
tu gusto, slo tienes que cortar y pegar. Bien, para empezar, copia lo siguiente y pgalo en tu
pgina entre las sentencias <HEAD>:


<SCRIPT language="JavaScript">
<!-/***********************************************************\
MegaContador
Un contador "configurable" para el nene y la nena...
\***********************************************************/
texto = "Visitantes desde el 15/08/2000";
contador = 0;
// El contador se inicia con este valor;
revision = 0;
// Cada vez que alteres el valor inicial del
contador (el de arriba) debes cambiar este nmero;
pagina = 0;
// Necesitars un nmero de cdigo diferente
para cada pgina;
visitas_dia = 4000;
// Cunto va a crecer el contador por da;
color_f = "#000000"
// Color de fondo del contador (nmeros);
color_n = "#FFFFFF"
// Color de los nmeros;
color_v = "#000000"
// Color del fondo del contador (letras);
color_txt = "#FFFFFF" // Color del texto;
//-->
</SCRIPT>
<SCRIPT language="JavaScript" SRC="galleta.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="megacontador.js"></SCRIPT>

sta es la parte que vas a "configurar". Como ves hay varias cosas que puedes cambiar a tu gusto.
En texto puedes poner el texto que se te antoje. Es importante que respetes las comillas.
contador es valor inicial del contador. Si quieres empezar con 50.000 visitas, simplemente fija
contador = 50000.
MegaContador
revision es menos importante y slo se utiliza si alteras el valor incial del contador, si lo
"reseteas" en suma. Si tienes un 0 pon un 1 y viceversa.
pagina se usa para diferenciar a cada contador de los dems, en el caso de que te decidas a
poner varios. Cada uno debe tener un nmero diferente.
visitas_dia es el incremento que deseas en el contador. Cuanto ms alto, ms rpidamente
subir el contador. Aqu hay un punto importante. El MegaContador no es un contador
real. Lo que hace es "almacenar" en la cookie un valor creado entre contador y visitas_dia, de
forma que cada vez que se actualiza la pgina, o se vuelve a entrar en ella, el contador sufre
un incremento. Si un amigo tuyo visita tu pgina 10 veces tendr un contador ms alto que el
que solamente la haya visitado 2 veces. Si lo que quieres es que MegaContador vaya al
revs, solamente tienes que poner contador = -5000 o el decremento que te parezca.
color_f es el color del fondo del contador en el rea de los nmeros. Si quieres ver algunos
colores (y sus cdigos) pincha aqu.
color_n es el color de los nmeros.
color_v es el color del fondo en el rea del texto.
color_txt se utiliza para cambiar el color del texto.
Ya sabes "configurar" MegaContador. Lo nico que te hace falta para que sea totalmente
operativo es que copies lo siguiente y lo pegues en el lugar donde quieres que aparezca el
MegaContador:


<SCRIPT language="JavaScript">
<!-document.write("<TABLE CELLSPACING=\"0\" CELLPADDING=\"0\" BORDER=\"0
\" BGCOLOR=\"" + color_v + "\"><TR>");
document.write("<TD BGCOLOR=\"" + color_f + "\"><FONT FACE=\"andale
mono,arial\"");
document.write("COLOR=\"" + color_n + "\"><B> " + contador + "</B></
FONT></TD>");
document.write("<TD><FONT SIZE=\"1\" COLOR=\"" + color_txt + "\" FACE=
\"arial,helvetica\"> " + texto + "</FONT></TD>");
document.write("</TR></TABLE>");
//-->
</SCRIPT>

Pues ya tienes preparado tu MegaContador. El nico detalle que falta son las cookies. Para que
MegaContador funcione necesita que las dos cookies que he mencionado antes estn el mismo
directorio de la pgina que va a contener el MegaContador. Para evitar errores, he hecho un
archivo zip con ambas cookies. Slo tienes que bajartlo, descomprimirlo, y YA EST!. (En puridad,
parte de lo anterior no es necesario, ni exacto, pero creo que as las cosas sern ms fciles).
MegaContador
Ahora pnle a MegaContador los valores que te apetezcan y a funcionar.

Por ltimo, si sabes un poquito de JavaScript, o si simplemente intentas comprender el cdigo, vers
que adems puedes cambiar la fuente y el tamao del texto, incluso el diseo en s del
MegaContador sin gran esfuerzo, para que se adapte a lo que necesitas. No es fantstico?.
Abajo tienes algunas muestras de lo que puede hacerse con MegaContador.
7315
Visitantes desde el
15/08/2000
7315
7315
Visitantes desde el 15/08/2000
WebCounter Creation Page
Creating A Counter / Creando un contador

Esta pgina te ayuda a crear un contador gratuto. Para contadores comerciales con rendimiento
garantizado y accesibles las 24 horas mira en su pgina comercial.
Paso a paso
Para crear un contador, haz lo siguiente:
1. En primer lugar ten en cuenta que esta pgina que ests leyendo NO es la pgina oficial de
WebCounter. Esta pgina es una gua para aquellos que no sabes ingls (o que os lais con el
procedimiento). El procedimiento para dar de alta el contador es el mismo que se describe aqu,
pero hay que hacerlo en la pgina oficial. Puedes imprimir esta pgina o mantenerla abierta al
mismo tiempo que la oficial.
2. Primero tienes que rellenar los campos del formulario, describiendo la pgina y pinchando en el
botn Create Counter (Crear contador) que aparece al final. Te traducir los campos y te dar
una pequea explicacin de para qu sirven.
3. Cuando el contador se crea satisfactoriamente, te devolver un cdigo. Este cdigo debes
insertarlo en la pgina que quieres controlar. El cdigo puede personalizarse, pero hay que
hacerlo con cuidado. En la pgina Usage Page (Uso del contador) te dicen cmo hacerlo, aunque
te lo explicar someramente ms adelante. Evidentemente el cdigo del contador lo puedes poner
en cualquier sitio de la pgina (incluso puedes hacerlo invisible).
4. Una vez has terminado, sube tu pgina con tu flamante contador a tu servidor.
5. Si utilizas un contador gratuto deberas poner alguno de los logos de WebCounter. Si ests aqu
ya debes saber cmo bajarte un logo de WebCounter y ponerlo en tu pgina con el enlace
correspondiente.
Pues eso es todo, vamos a crear el contador.
Creation Form (Formulario de creacin)
http://perso.wanadoo.es/catwalk/megacounter/WebCounterCreationPage.htm (1 of 5)11/12/2003 03:05:36 p.m.
TOMA NOTA: Los contadores que generan ms de 1000 visitas diarias son considerados comerciales.
En ese caso vete a Servicios comerciales.
Lo primero es identificar tu contador. El sistema identifica los contadores mediante nombres, as que
tienes que elegir uno. Contador sera una buena idea pero probablemente ya lo estar usando alguien.
No te preocupes por esto, ya que si el nombre est en uso, se te devolver un mensaje de error. Una
buena idea es utilizar tu direccin de correo electrnico como nombre del contador, ya que esta es nica.
Si vas a usar varios contadores, aade nmeros a tu direccin de correo.
Nota: Los espacios y algunos caracteres no estn permitidos. En ese caso web-counter substituir dichos
caracteres por una barra baja: _. Tambin es importante sealar que se diferencia entre maysculas y
minsculas. Por tanto JOSE no es lo mismo que jose.
Counter Name (Nombre del contador):
Lo siguiente es introducir una contrasea para el contador. No debes usar tu contrasea de conexin o de
correo electrnico, pero si quieres... Esta contrasea se te pedir cada vez que quieras hacer algn
cambio en el contador, como por ejemplo, cambiarlo de URL, cambiarle el ttulo, etc... Ojo: si pierdes la
contrasea y necesitas hacer cambios, no podrs. Tendrs que crear otro contador.
AVISO: No uses ms que caracteres alfanmericos, la barra baja (_) y el signo menos en la contrasea.
Todos los dems caracteres no estn permitidos.
Account Password (contrasea):
Introduce de nuevo tu contrasea para confirmarla
Confirm Password (confirmar contrasea):
Starting Count (comienzo) es el nmero en el que quieres inicializar tu contador. Ponlo a 0, pero si
quieres presumir puedes ponerlo en 65535.
Starting Count (comienzo del contador): 0
Ahora necesitas identificarte con tu direccin de e-mail. La direccin no ser usada para fines..., bla,
bla...
Your Email Address (tu e-mail):
Quieres que la informacin de tu contador aparezca en las listas de xitos? (te juro que tienen una)
Yes (S)
No (No)
WARNING (AVISO): Aqu aparecer lo que has elegido antes.
Debe el contador contabilizar mltiples entradas desde la misma mquina como si fueran diferentes?
Te recomiendo que lo pongas en No, ya que si alguien recarga la pgina tres veces te contar tres visitas,
cuando en realidad es la misma.
Yes
No
Contiene la pgina material adulto? Por favor se sincero. Si vas a utilizar el contador en una pgina
subida de tono, mira la poltica de pginas (sin traducir, lo siento).
Any adult material? Material adulto?
Yes
No
Ahora debes introducir la URL de tu pgina. Observa que debe empezar por http://
URL of page (url de la pgina):
http://
El ttulo es lo que se ver si se publica en el Top-ten. Te sirve a t para controlar los contadores si tienes
varios.
Title of page (ttulo de la pgina):
Ahora debes tener algo de paciencia mientras se crea el contador. Una vez que pinches en Create
counter el servidor debe realizar ciertas operaciones, que pueden llevar hasta un minuto. Por favor, lete
lo que hay debajo de los botones antes de hacer nada, ya que te explica lo que tienes que hacer
DESPUS de haber solicitado la creacin del contador.
Create Counter
Clear Form
Bueno, si todo ha salido bien, recibirs una confirmacin diciendote que tu contador ha sido creado
satisfactoriamente, y te mostrarn los datos del mismo. Ahora tienes que INSTALAR el contador en tu
pgina.
Lo ms imporante es el cdigo del contador. En la nueva pgina aparecer algo como sto:
<IMG SRC="http://counter.digits.com/wc/nombre_del_contador">
Ostras, Pedrn!, qu es esto?. Vamos a ver:

El contador es una serie de imgenes compuestas por dgitos, de ah lo IMG SRC etc. Lo que importa es
lo siguiente:
Este cdigo debes pegarlo en la parte de tu pgina donde quieras que aparezca el contador.
Como ves, aparece el nombre que le pusiste al contador. Ahora te explico cmo configurarlo:
Si aades /d/-4 le ests diciendo al contador que aparezca con cuatro dgitos. Si pones /d/-10, aparecer
con diez dgitos. Ejemplo:
<IMG SRC="http://counter.digits.com/wc/d/-4/nombre_del_contador">
Si aades /c/-12 le ests diciendo al contador que utilice la versin numrica 12 para su apariencia.
Puedes ver dichas apariencias aqu. Ejemplo:
<IMG SRC="http://counter.digits.com/wc/c/-14/nombre_del_contador">
Ejemplo con los dos anteriores, es decir, contador con cuatro dgitos y apariencia tipo 14:
<IMG SRC="http://counter.digits.com/wc/-d/-4/c/-14/nombre_del_contador">
Le coges el truco?. No es difcil. Hay opciones como el color de fondo, el de los nmeros, en fin,
bastantes. Slo te comento dos ms
-h Oculta el contador, de forma que sigue contando pero no aparece visible.
-z Coloca ceros en la parte izquierda del contador. Si has seleccionado un contador con cuatro dgitos
(0000), pero solo tienes 3 visitas, en vez de aparecer (3) aparece (0003).
Ejemplo con todo lo anterior:
<IMG SRC="http://counter.digits.com/wc/-d/-4/c/-14/-h/-z/nombre_del_contador">
Por ltimo, si especificas la opcin -d/nmero, sabrs el tamao de la imagen que se devuelve, con lo
que puedes especificar los atributos WIDTH y HEIGHT de la sentencia IMG. HEIGHT es siempre 20
pxeles. WIDTH (anchura) se calcula multiplicando el nmero de dgitos especificado por 15. Es decir,
si has puesto 4 dgitos, 4*15=60, y la imagen quedar:
<IMG SRC="http://counter.digits.com/wc/-d/-4/c/-14/-h/-z/nombre_del_contador"
HEIGHT="20" WIDTH="60">
NOTA: Si quieres que el contador tenga un tamao diferente, puedes cambiar WIDTH y HEIGHT. Si
en el ejemplo anterior, pones HEIGHT="40" WIDTH="120", el contador aparecer con el doble de
tamao. Ten en cuenta que algunas apariencias admiten mejor la escalabilidad que otras.
Pues esto es todo. A practicar.

--------------------------------------------------------------------------------
Banners
Correo
Banners
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?:
Los banners son marquesinas (vase), o imgenes, generalmente
de propaganda de otros sitios o de patrocinadores, que salpican
algunas pginas.
Por qu estn mal?:
Uno o dos banners en una pgina son soportables.
Desgraciadamente, el mantenimiento de los sitios cuesta dinero;
los autores tienen que comer, comprar paales y potitos para sus
hijos, y, algunos como yo, intentamos comprarnos un Ferrari. As
que los banners son un mal necesario.
Qu puedes hacer?:
Mantener tu pgina tan limpia de ellos como puedas.
Hay un cafre (esto es real, la pgina existe y yo la he visto) que
tiene 15 banners en su pgina de bienvenida. Por si eso fuera
poco, tiene un enlace de entrada al sitio, que no slo es difcil de
localizar, sino que adems, cuando lo pinchas, se entretiene en
mostrar un mensaje de JavaScript tomndote el pelo. El contador
de su pgina de bienvenida muestra que tiene bastantes visitas.
Pero si ha tenido el seso suficiente (cosa que dudo) como para
colocar otro contador en la pgina siguiente, tal vez se sorprenda
de la poca gente que debe entrar en su sitio.
Adems, como se comenta en otra parte, esto es una invitacin a
que la gente se vaya a visitar esa pgina que tiene un banner tan
apetecible y no vea nada ms de la tuya.
Banners
archivos.
Enlaces abusivos.
Siguiente
Tambin puedes
visitar
WebTutor
Siguente Psimo
Pginas de difcil navegacin
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Pginas de difcil
navegacin
Qu son?:
Pginas que estn tan llenas de banners, de enlaces y de mapas de
imagen que da miedo pinchar en algn sitio.
Por qu estn mal?:
Navegar a veces se convierte en algo complicado. Buscar una
determinada informacin puede llevarte de una pgina a otra con
mucha facilidad, y a veces se pierden las referencias de otras
pginas interesantes a las que gustara volver. Si tu pgina es un
maremgnum de enlaces (muchos de los cuales quizs no
funcionen o estn equivocados), y tus visitantes se hacen un lo
con ellos, no esperes que vuelvan.
Qu puedes hacer?:
Procura mantener tu sitio ordenado (vase). Si tienes pocos
enlaces mantenlos claros, y si tienes muchos, agrpalos al final de
la pgina, incluso puedes dividirlos en categoras. Pero no olvides
que un nmero excesivo de enlaces en tu pgina no sirven para
nada. Para eso hay buscadores.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Siguiente
Siguente Psimo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Contadores
Correo
Contadores
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?:
Un contador es ni ms ni menos que eso, un trozo de cdigo que
cuenta canta gente visita tu pgina.
Si te ests preguntando cmo se hace, olvdalo, no se puede hacer
un contador ni con HTML ni con JavaScript, ya que se hacen con
scripts CGI. Lo que t pegas en tu pgina como contador es un
enlace a un servidor que facilita una imagen con el nmero de
entradas que ha recibido.
Por qu estn mal?:
Como en el caso de los banners, son un mal necesario. Hasta stas
pginas tienen contadores. Pero el contador es una cuestin que
en realidad slo le interesa al webmaster de la pgina, al
patrocinador de la misma, o al dueo del sitio, que son los que
tienen inters en saber canta gente visita sus pginas.
Para el resto, es una idiotez saber que la pgina la han visitado 15
personas o 15 millones, porque entre otras cosas los contadores
son manipulables, o directamente falsos.
Qu puedes hacer?:
Si vas a utilizar contadores, procura hacerlos ocultos. En
CounterWeb es fcil hacer un contador (todo en ingls) y adems
pueden ocultarse con facilidad.
Y, para qu demonios me sirve un contador que no se ve?.
Sencillo, crea una pgina exclusiva para los contadores. Es decir,
colocas el contador oculto en la pgina que te interesa controlar,
y otro enlace al mismo contador en una pgina completamente
diferente. Cuando quieras saber el nmero de visitantes que has
recibido slo tienes que visitar est ltima pgina.
Contadores
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Tambin te preguntars cmo se hace un contador falso. Puedes

mirar en Megacontador. ste es un trozo de JavaScript que
incluyes en la pgina en la quieres colocar el contador y que te
permite fijar el nmero de visitantes que quieres tener al da. Es
decir, si decides que 2.000 visitas al da es un buen nmero, no
tienes ms que colocar esa cantidad en el contador, y cualquiera
que te visite creer que tienes un xito inmenso. Esto queda ms
divertido si el contador funciona al revs, es decir, si maana tu
pgina tiene menos visitantes que hoy.
Siguiente
Primer Malo, malo
Intermitencias
Correo
Intermitencias
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Qu son?
A menos que hayas estado debajo de una piedra en los ltimos
cinco aos, una intermitencia es sto:
Por si no te has dado cuenta, este texto est en intermitencia, y
es un poco molesto, no?.
Nota: Las nuevas versiones del Internet Explorer ignoran esta
sentencia. Menos mal!.
Por qu estn mal?
Bueno, si a t no te molestan...
Qu puedes hacer?
Si quieres enfatizar el texto, utiliza una fuente de mayor tamao,
cmbiale el color, utiliza negrita, o una combinacin de todo
junto.
Siguiente
Siguente Malo, malo
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
http://perso.wanadoo.es/catwalk/paginilla/m\1.html (1 of 2)11/12/2003 03:06:53 p.m.
Intermitencias
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Msica de fondo
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Msica y sonidos de
fondo
Qu es?
Se explica por s mismo...Cuando cargas una pgina, alguna
musiquilla (o soniquete) empieza a sonar automticamente.
Algunas veces viene en formato MIDI, otras como archivo WAV, o
de QuickTime, o vaya usted a saber.
Por qu est mal?
Porque un gran porcentaje de usuarios son profesionales que
tratan de navegar silenciosamente desde su trabajo. Algunas
veces lo hacen al aire libre, o en lugares pblicos. Y muchas veces,
porque simplemente intentan hacerlo tan silenciosamente como
puedan. Esto me incluye a m, y adems, si quiero oir algo
mientras navego, ya pondr la radio, o mi msica preferida, no la
tuya.
Tambin puedes apostar que en el mismo momento en que
cualquier sonido salga de los altavoces, mucha gente cerrar la
ventana inmediatamente, y luego mirar alrededor para
asegurarse de que nadie ms lo haya odo.
Un ejemplo real:
Un tipo quera comprar un telfono mvil, y busc en
la red alguna empresa que los vendiera. Encontr una
llamada "Comunicaciones guila". Tan pronto como
carg su pgina, lo primero que sucedi fue que un
chirrido espantoso surgi de los altavoces. El chirrido
se supone que era el grito del guila. Bueno, cerr la
ventana rpidamente...pero fu demasiado tarde,
porque todo el mundo que estaba por ah se
amonton alrededor del monitor para averiguar en
Msica de fondo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
qu pgina tan espeluznante se haba metido.

Evidentemente no volvi a "Comunicaciones guila" y
ellos perdieron un cliente.
Y por que no apagas los altavoces?, dirs. No estamos aqu para
apagarlos o bajar el volumen para acomodarnos a t!. Se supone
que haces pginas web para que se acomoden a tus visitantes, no
al revs. En ese caso, puede que tengas muchas visitas, pero ten
por seguro que muchos no volvern jams.
Adems, en los Mac (que llevan altavoces incorporados), Netscape
hace que la msica suene a TODO VOLUMEN, independientemente
de lo que diga el control de sonido. Puede que sea un fallo de los
Mac, o de Netscape, pero mientras no se arregle, es un
problema!.
Qu puedes hacer?
La msica y los sonidos de fondo, pueden hacer de la navegacin
una experiencia multimedia muy agradable e interesante, pero
debes darle a tu visitante la posibilidad de elegir. No lo coloques
en automtico...deja a tus visitantes la eleccin de si quieren oir
la msica o no.
Tambin debes hacer que los controles de sonido sean visibles,
para que el visitante pueda apagarlos o bajar el volumen.
Siguiente
Siguente Malo, malo
Imgenes de fondo molestas
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Imgenes de fondo
molestas
Qu son?
Estoy seguro de que has visto alguna. Son esos fondos tan chillones
y tan recargados que los ojos se te salen de las rbitas tratando de
leer el texto de la pgina.
Muchas veces me pregunto si los autores han intentado leer alguna
vez sus propias pginas.
Por qu estn mal?
Es obvio. Si tienes dificultades en leer una pgina, no vas a estar
ah mucho tiempo (y no digamos si eso se convierte en algo casi
imposible).
Muchas veces los fondos demuestran el buen o mal gusto del
autor.
Qu puedes hacer?
Veamos un ejemplo de fondo chilln:
Mala imagen de fondo
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Nota la dificultad para leer el texto.

Si te decides a utilizar una imagen como sa, usa un editor de
fotografas para iluminarla. Vers que hay un mundo de diferencia.
Aumenta el brillo, y reduce el contraste, es fcil!.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Buena imagen de fondo

Tambin puedes utilizar fondos con poco contraste. El contraste es
la variacin entre los diferentes colores de la imagen. Cuanta
menos variacin haya en la imagen, ms fcil ser leer el texto.
Muchos sitios utilizan un logotipo como fondo, pero esto slo
funciona si se mantiene bajo el contraste. Por otro lado, los
fondos no tienen que ser muy detallados; cuanto mayor sea el
nivel de detalle, ms difcil es leer el texto, y ms tarda en cargar
la pgina, o no has estado nunca en una que tarda tres minutos
en cargar porque utiliza una imagen de 100K de fondo?. Y procura
que tengan un tamao pequeo. Si usas JPG, utiliza la calidad
mnima. Si usas GIF, utiliza una paleta de 4 bits.
Si tu pgina contiene mucho texto, utiliza un color slido en lugar
de una imagen, y asegrate de que es complementario con el color
del texto. Por ejemplo, el texto rojo se lee mucho mejor que el
azul claro sobre el fondo blanco.
Por ltimo recuerda: No hay nada malo en el texto negro sobre
fondo blanco.
Siguiente
Siguente Malo, malo
Uso gratuto de los marcos o frames
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Uso gratuto de los

marcos o frames
Qu es?
Un marco o frame (como lo llamar a partir de ahora) es una
ventana. Cuando la ventana de tu navegador se divide en dos o
ms reas separadas unas de otras, ests viendo frames. Algunas
veces son explcitos, y otras son invisibles, aunque siguen ah.
El uso gratuto de los frames se produce cuando se utilizan sin un
propsito especfico.
Por qu est mal?
Lo creas o no, hay mucha gente que dice: Poned los frames en la
lista, los odio.
Utilizar los frames porque estn ah es una idiotez. Entre otras
cosas porque las pginas tardan ms en cargar, y adems tienen
tendencia a confundir a los navegadores si no estn bien
programados (los frames quiero decir, no los navegadores). Y por
supuesto, tambin confunden a los humanos que navegan.
Lo anterior viene a cuento porque hay gente que no sabe cmo
deshacerse de un frame, o cmo moverse hacia adelante y hacia
atrs entre ellos.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Otro problema con los frames es la forma en que aparecen. No son

iguales ni en cada navegador, ni en cada ordenador, ni en cada
resolucin de pantalla. Esto se debe a la estricta tolerancia de los
navegadores en cuestiones como las barras de desplazamiento y la
posicin de ciertos elementos dentro del frame. Creme, he
perdido ms tiempo intentando ajustar una pgina con frames
para que sea vea aceptablemente en slo dos! navegadores, que
en disear el sitio web completo.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Qu puedes hacer?
Bueno, puedes tomarte tu tiempo para aprender exactamente
cmo manipular los frames con HTML, o simplemente no
utilizarlos. Adems, el hecho de que t sepas utilizarlos no quiere
decir que tus visitantes s sepan.
Quiere esto decir que no se deben usar nunca?. Por supuesto que
no. Hay muchas y buenas razones para utilizar los frames, como
por ejemplo, utilizar un frame para thumbnails y otro frame para
una vista completa de la fotografa.
Si te decides a usar frames, quizs te valgan estos consejos:
No uses tamaos relativos (por ejemplo, 40%) para los

frames superior e izquierdo. Usa siempre absolutos (p.e. 250
pxeles).
Utiliza siempre un tamao relativo con la utilizacin del
asterisco *. Si no sabes a qu me refiero, mira aqu.
Asegrate de dejar espacio suficiente para las barras de
desplazamiento, aunque creas que no van a ser necesarias.
Especifica siempre el atributo TARGET="_top", para los
enlaces que no sean de tu sitio. De esta forma tus visitantes
no se quedarn atrancados en un frame.
No utilices un frame para un men con cuatro o cinco
enlaces, que pueden ser fcilmente incluidos en una tabla o
algo parecido.
Siguiente
Siguente Malo, malo
Mapas de imagen
Correo
Mapas de imagen
grandes
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Los mapas de imgenes son imgenes grandes y relativamente
sencillas con "puntos calientes" en los que se puede pinchar.
Sabes que ests ante uno de ellos cuando ves una gran imagen
(me refiero al tamao, no a la calidad) cargando, y tienes que
esperar a que toda la imagen se cargue, antes de poder hacer
cualquier otra cosa.
Por qu estn mal?
Uno o dos mapas, si no son muy grandes, no representan ningn
problema, pero si creas un sitio entero basado en mapas, acabars
con un sitio lleno de imgenes y con muy poco texto. Esto quiere
decir largos tiempos de espera para que a tu visitante luego no le
interese lo que le ofreces. As que no tendrs un sitio muy
navegable.
Qu puedes hacer?
Considera el descomponer tus mapas en imgenes ms pequeas.
Le dan a tu visitante ms pistas acerca de lo que se puede pinchar
y lo que no. Adems las imgenes pequeas tardan menos en
cargar, y puede resultar hasta interesante ver cmo se va
componiendo el mapa. Y no los crees si no tienes muchos enlaces.
Un buen ejemplo sera un mapa de Espaa, en el que al pinchar en
una provincia, enlazas con la pgina de esa provincia.
Si vas a usar Mapas, aqu tienes unos consejos:
Hazlos pequeos. No crees una imagen gigantesca, porque el

navegador probablemente se colgar.
Mapas de imagen
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Mientras puedas, utiliza enlaces alternativos bajo la imagen

del mapa.
Haz los puntos calientes obvios. Pero no olvides que lo obvio
para t puede no serlo para un visitante.
Siguiente
Siguente Malo, malo
Imgenes de construccin
Correo
Imgenes de
construccin
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Estoy seguro de que las has visto... hay ms que en las carreteras,
que ya es decir. Pueden ser la tpica del to con el casco y la pala,
o el comentario "Esta pgina est en construccin".
Por qu estn mal?
Porque es obvio que las pginas siempre estn en construccin.
Aunque claro est, si haces un sitio que quede muy bien una vez
terminado, no vas a andar toquetendolo; pero si nunca lo
actualizas ni le haces cambios, si siempre es igual, no esperes que
la gente vuelva!.
Adems es bueno incluir la direccin de correo, ya que algn alma
caritativa puede mandarte uno diciendo que has puesto
contubernio en vez de construccin. En qu estaras pensando?.
Qu puedes hacer?
Si tu pgina est realmente en construccin, pon un aviso en el
que se diga claramente, y no dejes a nadie acceder a la pgina.
Incluye tambin una fecha aproximada de la terminacin de las
obras (que no te duren lo mismo que las del Escorial), y cuando
hayas terminado, quita el aviso y pon la pgina.
Por ltimo, ten en cuenta que es mucho ms cmodo y barato
probar exhaustivamente tus pginas en tu disco duro antes de
publicarlas. Una vez que las hayas subido, prueba los enlaces a
pginas exteriores, y quita esos malditos carteles!.
archivos.
Enlaces abusivos.
Siguiente
Tambin puedes
visitar
WebTutor
Siguente Malo, malo
Marquesinas
Correo
Marquesinas
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Hay varios tipos. Unas funcionan en Netscape, otras en Internet
Explorer, las peores funcionan en ambos. Para que ests seguro
aqu tienes dos ejemplos.
Esto es una horterada

Nota: Es muy posible que slo veas una de ellas, o ninguna!.
Tambin puedes tener un "Error de JavaScript" al cargar esta
pgina.
Por qu estn mal?
Hacer leer a tus visitantes trozos de informacin en una
marquesina puede parecer muy bonito, pero no sirve para nada. Lo
nico que consigues es forzar a tus visitantes a leer a una
velocidad que puede hacer las cosas ininteligibles, o a hacer un
esfuerzo adicional, y dados los tiempos que corren, quien quiere
hacer esfuerzos adicionales?.
O por ejemplo, imagnate hablndole a alguien as: Una...
palabra... tras... otra... puede... hacer... que... la...
comprensin... de... la... frase... sea... difcil...
Piensa en ello.
Qu puedes hacer?
En lugar de utilizar las marquesinas, o poner informacin especial
en un banner, simplemente ponla en la pgina. As la gente puede
leerla a la velocidad que le de la gana, en vez de tener que seguir
el texto por toda la pgina.
Marquesinas
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Siguiente
Siguente Malo, malo
Alertas de JavaScript
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Las alertas o avisos son ventanas de dilogo que aparecen cuando
entras a un sitio. Algunas veces te preguntan tu nombre o alguna
otra cosa, o a veces tienen un aviso acerca del contenido del sitio.
Por qu estn mal?
Bsicamente porque son slo otra de esas "maravillas tcnicas" que
la gente pone en su sitio para decir: "Eh, mira lo que s hacer!",
pero al final se convierten en una prdida de tiempo para el
visitante.
Dirigirte a tu visitante por su nombre, despus de que l lo haya
tecleado, no sorprende a nadie, ni es til. Y otras veces, ni
siquiera sucede nada. El navegador pasa completamente del
asunto.
El peor uso que se le puede dar es el tpico "Adis, gracias por tu
visita", o algo parecido.
Qu puedes hacer?
Simplemente no las uses. Aunque no existen alternativas,
solamente los sitios verdaderamente interactivos pueden
encontrarle utilidad, y para eso hace falta programar algo ms que
un simple mensaje.
Siguiente
Siguente Malo, malo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Mensajes en la barra de estado
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Mensajes en la barra de
estado
Qu son?
Para empezar no funcionan en todos los navegadores, pero si
funcionan en el tuyo, los vers en la parte inferior de tu
navegador. Los has visto ya?. Y te parece bonito?. Desde luego,
hay gente para todo.
Nota: Afortunadamente no todos los navegadores soportan los
mensajes. Si no los ves, puede que tu JavaScript est desactivado,
o puede que tu navegador sea lo suficientemente inteligente para
no mostrarlos.
Por qu estn mal?
Esto se lleva un 10 en cuanto a cosas mal hechas, por una sencilla
razn...ocultan lo que se debe mostrar en la barra de estado!.
Esta es una de esas cosas que estn bien los primeros dos minutos.
Despus empiezan a ser desquiciantes.
Como prueba, pon el cursor sobre cualquier enlace de esta pgina
y mira en la barra de estado. Sabes a dnde vas a ir?. No, no lo
sabes, porque cubren la direccin.
Nota: Internet Explorer 3.0 y Netscape 4.0 (o superiores), s
muestran la direccin, aunque tan rpidamente que casi no se ve.
Y para qu demonios quieres ver la direccin?. Bueno, a m me
gusta ver la direccin a la que voy a ir a parar, porque me indica si
voy a salir del sitio, si ya he estado en ese sitio o no, o si es una
direccin indeseable.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Qu puedes hacer?
No lo utilices. Te lo suplico, este JavaScript debe haber venido
directamente del infierno.
Siguiente
Primera pgina de Mejorando
Anchuras flexibles
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Anchuras flexibles
Qu son?
Crear pginas que funcionen en cualquier monitor,
independientemente de la anchura de la ventana, no slo es
recomendable, es imperativo!.
Aunque mucha gente ya tiene 1024x768 pxeles como estndard,
hay todava muchos que navegan a 800x600, e incluso a
resoluciones an ms raras. Adems, el tamao de las fuentes
puede variar con lo que la apariencia final de la pgina variar en
consecuencia.
Yo mismo tengo cinco posibilidades de configuracin de pantalla
(desde 640x480 hasta 1024x768). Si a eso le sumas que puedes
utilizar fuentes normales o grandes, tienes 10 tipos diferentes de
configuracin, slo en mi ordenador. Si el tamao de la fuente no
es estndard, entonces las posibilidades son infinitas.
Y tambin hay que tener en cuenta que otra gente no maximiza
sus ventanas de navegacin, o simplemente utilizan un tamao de
texto diferente al normal en el navegador (claro que puede
hacerse, simplemente mira en Ver, Tamao del texto).
Adems es rdiculo perdirle a tus visitantes que "configuren su
pantalla a 800x600" cuando muchos para hacerlo, tienen que
reiniciar el ordenador!.
Un sitio que en tu pantalla se ve as:
http://perso.wanadoo.es/catwalk/paginilla/b\1.html (1 of 3)11/12/2003 03:08:30 p.m.
Anchuras flexibles
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Pantalla grande
en la de otro, se ver as:
Pantalla pequea
Por qu est bien?

Acomodar la informacin de forma que tus visitantes no tengan
que andar de un lado para otro, hace tu sitio mucho ms
navegable.
Y la gran mayora de visitantes espera desplazarse hacia abajo, tal
y como leemos. Pero a nadie le gusta estar constantemente yendo
de izquierda a derecha y viceversa para leer todas y cada una de
las lneas de texto. Es extremadamente cansado y molesto.
Qu puedes hacer?
Anchuras flexibles
Cuando disees tus pginas, hazlo para la anchura mnima

(800x600 estar bien),...y no para la anchura de tu pantalla. As
cualquiera podr verlas sin problemas. Tampoco est de ms mirar
cmo quedan con la ventana no maximizada.
S, ya s que es un trabajo desagradecido, porque todo el mundo
asume que los dems tienen su misma configuracin de pantalla,
pero la calidad se nota en estos pequeos detalles...
Si tus imgenes estn alineadas a la DERECHA o a la IZQUIERDA,
no las hagas mucho ms anchas de unos 500 pxeles. Si son
demasiado grandes y hay texto al lado, ste puede ser comprimido
por el navegador y no ser claramente legible
Siguiente
Siguente Mejorando
Grficos en thumbnails (miniaturas)
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Grficos en thumbnails
(miniaturas)
Qu son?
Una miniatura o thumbnail es una imagen, con menor tamao, con
menor resolucin, y en general con menor calidad que cualquier
imagen normal.
Ejemplo de thumbnail:
Imagen en
miniatura
Nota tcnica: Variar los atributos de altura o anchura
(WEIGHT & WIDTH), no crea un thumb de tu imagen.
Al contrario, obliga al navegador a hacer un trabajo
extra al tener que reducir la imagen a las dimensiones
especificadas. Es decir, el navegador no slo tiene que
cargar la imagen completa, sino que tambin se ve
obligado a reducirla y encajarla en el tamao
especificado. Algo as como tener un elefante de
mascota en un apartamento.
Por qu est bien?
La finalidad de los thumbs es permitir a los visitantes de tu sitio
elegir las imgenes que estn dispuestos a esperar para ver,
saltndose aquellas que no les interesen. Nunca, nunca, pero
nunca, crees una pgina con imgenes en formato original.
Como ejemplo te dir que hay pginas que utilizan el mtodo de
reduccin mencionado ms arriba, y son terriblemente lentas y
tediosas. La nica ventaja de este proceso es que una vez cargada
archivos.
Enlaces abusivos.
Tambin
puedes visitar
WebTutor
la pgina la tienes disponible en el disco duro y puedes consultarla

cuando quieras, pero soy yo el que decido si me interesa el
contenido de la pgina, y desde luego no voy a esperar diez
minutos a que cargue (y eso si tu navegador no borra el cach una vez
que termines la sesin, en cuyo caso no te habr servido para nada).
Qu puedes hacer?
Los thumbs son fciles de hacer si ests familiarizado con un
programa de tratamiento de grficos. En general debes reducir la
anchura y la altura del archivo original (y si puedes coloca la
calidad al mnimo o la compresin al mximo), y gurdalo con un
nombre diferente. Si despus comparas el tamao de ambos vers
la diferencia.
Si ahora creas un enlace como ste:
<A
<IMG
HREF="Imagen_Normal. SRC="Imagen_chica. </A>
jpg">
gif">
ste es el enlace
ste es el thumb (lo que ste el final del

se ve)
enlace
Si pinchas en la foto Enlace
vers la imagen original
lo que has conseguido es colocar el thumb (5K) en tu pgina, y

cuando pinches en l entonces te irs al archivo original (46K).
S que todo esto puede parecer una chorrada, pero hay mucha,
mucha gente, que no lo sabe, as que los que lo sabis,
perdonadme. Yo tambin tuve que aprenderlo, y lo peor es que
nadie me ense.
Una cosa ms acerca de los thumbs: Hay un programa fantstico
llamado ThumbsPlus, que tiene distribucin shareware. He
utilizado programas ms potentes, mucho ms sofisticados y,
evidentemente, muchsimo ms caros; pero ste es de distribuicin
gratuta y bastante fcil de utilizar (no tiene un tocho de 400
pginas para aprender a manejarlo). Adems crea todos los thumbs
necesarios para una pgina con una facilidad pasmosa. Y no estoy

haciendo propaganda, sinceramente me parece un programa
excelente y por eso lo recomiendo. Eso s, todo en ingls.
Siguiente
Siguente Mejorando
Sentencias de altura y anchura
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Sentencias de altura y
anchura
Qu son?
Las sentencias de HTML HEIGHT & WIDTH (altura y anchura), son
atributos de la sentencia IMG SRC. Estos atributos mejoran
drsticamente la carga de tus pginas. En la mayora de los casos
harn que la informacin de texto est disponible con mucha
mayor rapidez.
Por qu est bien?
Si utilizas estos atributos, Netscape Navigator & Internet Explorer
(no tengo ni idea de lo que harn otros)saben exactamente can
grande es el "agujero" que tienen que dejar para los grficos, de
forma que pueden cargar el texto y dejar los grficos para ms
tarde, por lo que tu pgina carga ms rpido, y lo que es ms
importante, la informacin de texto se muestra mucho antes.
Utiliza estos atributos especialmente cuando uses tablas, por estas
razones:
Netscape (que yo sepa) no muestra ninguna informacin de

una tabla hasta que TODOS los grficos se han cargado.
Utilizar los atributos le permite a tus visitantes leer el texto
mientras esperan a que carguen los grficos.
Internet Explorer carga toda la pgina uses o no los
atributos mencionados, pero est constantemente
reajustando el texto para acomodar los grficos. La verdad
es que es muy molesto.
Qu puedes hacer?
Aade a tus sentencias IMG SRC los atributos as:
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
<IMG HEIGHT=XXX WIDTH=XXX SRC="imagen.gif">

(XXX son pxeles)
Siguiente
Siguente Mejorando
Sentencias ALT
Correo
Sentencias ALT
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Al igual que las anteriores, ALT es un atributo de la sentencia IMG
SRC, que da una descripcin alternativa de las imgenes para los
visitantes que no tienen las imgenes habilitadas, o para los
navegadores basados en texto (como Lynx).
Por qu est bien?
Porque la gente que no tiene las imgenes habilitadas puede
disfrutar de tu pgina normalmente, al tener una descripcin
aproximada de lo que se supone que se debe ver.
Por qu la gente deshabilita las imgenes?. Por muchas razones.
La ms habitual es que si estn deshabilitadas las pginas cargan
con muchsima ms rapidez, lo que puede suponer un importante
ahorro en la factura de telfono, y utilizar los atributos ALT hace
que la pgina sea mucho ms fcil de entender para ellos.
En Internet Explorer el atributo ALT carga antes que la imagen, lo
que le da a tu visitante una idea de lo que puede haber antes de
que la carga finalize.
De hecho una pgina que puede tardar en cargar unos 20 o 30
segundos, carga en menos de 2 segundos si las imgenes estn
deshabilitadas.
Y desde luego, hay una cosa evidente: Si tu pgina slo tiene
fotos, o est dedicada al diseo grfico, es una idiotez utilizar el
atributo ALT.
Por ltimo, ALT hace tus grficos visibles para los navegantes
ciegos que utilizan navegadores especiales. Estos navegadores
interpretan el texto de la pgina, y lo canalizan a travs de los
altavoces. Cuando llegan a una imagen, lo que pronuncian es lo
Sentencias ALT
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
que haya en el atributo ALT.

Qu puedes hacer?
Aadir un atributo ALT es muy fcil, slo tienes que escribir tu
sentencia IMG as:
<IMG SRC="MiCoche.gif" ALT="Foto de mi fabuloso
coche">
Siguiente
Siguente Mejorando
Informacin de contacto
Correo
Informacin de
contacto
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Qu es?
Incluye alguna manera de que tus visitantes puedan ponerse en
contacto contigo.
Por qu est bien?
Decir lo anterior puede parecer una chorrada, pero muchas veces
los webmasters olvidan incluir su direccin de correo, o la
esconden tan bien, que no hay forma de averigurar dnde est.
Qu puedes hacer?
Incluye un trozo de cdigo como el siguiente:
Mi correo es <A HREF="mailto:correo@micasa.com">este</
A>
Si tienes mucho correo, incluye un formulario que te filtre y te

ordene parte de la informacin. Si no sabes cmo hacerlo mira
aqu.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Siguiente
Siguente Mejorando
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
S nico!
Correo
S nico!
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Qu es?
En fin, si no sabes lo que significa...mejor te compras un
diccionario.
Por qu est bien?
Con todo lo que hay ah fuera, en Internet, la nica forma de
conseguir visitantes para tus pginas es crear algo nico e
interesante para ellos.
Puedo garantizarte algo: Si el objeto de tus pginas es aburrido y
no le interesa a nadie ms que a t, no importa el aspecto que
puedan tener...nadie parar.
Qu puedes hacer?
En qu eres bueno?. Haz una pgina de eso!.
Cal es tu hobby? Es interesante?. Haz una pgina de eso!.
Te has ido de viaje?. Has tomado buenas fotos?. Haz una pgina
de eso!.
El truco est en infundir a tu pgina lo que te hace ser t: T
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Siguiente
Siguente Mejorando
S nico!
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Plug-ins opcionales
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Plug-ins opcionales
Qu es?
Los Plug-Ins pueden mejorar la experiencia de tus visitantes en tu
pgina. Entre otras cosas, aaden sonido y animaciones, adems
de mejorar la comunicacin e incluso el vdeo.
Ejemplos de Plug-Ins son QuickTime, Shockwave, & Live Audio
Por qu estn bien?
La palabra clave aqu es "opcional". Los Plug-Ins le dan a tu
visitante la posibilidad de mejorar la exploracin de tu pgina,
slo si lo desean (eso si no los tienen instalados ya).
De esta forma devuelves el control a la gente que te visita. No lo
tienes t mismo.
Hago hincapi, los Plug-Ins separan a los webmasters en dos
categoras, aquellos que son autocomplacientes, y aquellos que
entienden las diversas necesidades de los que navegan en Internet.
Qu puedes hacer?
Para empezar, no coloques un aviso diciendo "Esta pgina requiere
ActiveX" ni nada parecido. Y de ninguna manera hagas que los PlugIns intenten descargarse automticamente. Si fuera as haz una
pgina de introduccin en la que lo expliques, y desde ah da
acceso a tu pgina principal.
Tampoco coloques toda la parafernalia de los Plug-Ins en tu
pgina. Crea una pgina adicional con todo lo necesario, y deja a
los visitantes que entren en ella o no, segn decidan.
En general, procura tener una alternativa, por si no quieren
descargarlos.
Plug-ins opcionales
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Siguiente
Primer Consejo extra
Velocidad contra diseo
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.

Hay un delicado balance entre un diseo de calidad y la rapidez de carga
de las pginas. Este balance es lo que puede separar tu pgina del resto.
Desgraciadamente la tolerancia de cada uno respecto a la calidad/rapidez
es diferente en cada caso. A alguna gente no le importa esperar,
mientras que otros slo quieren la "chicha" de la pgina, y les importa un
pimiento el resto.
Cmo se determina este balance?. Es algo complicado, pero aqu tienes
unos consejos que te ayudarn a conseguirlo.
Conoce a tu audiencia
Si la mayora de la gente que accede a tus pginas busca informacin
textual, no las llenes de JavaScript, animaciones o grficos. Si vas a crear
una pgina llamada "Especificaciones tcnicas del Producto X", puedes
estar seguro que la mayor parte de la gente que acceda a ella, sern
cabezas tecnolgicas buscando la informacin especfica. Esa gente
quiere ver especificaciones y no grficos (salvo que sean imprescindibles).
Querrn la informacin a palo seco, sin alharacas.
Y viceversa, si la pgina se llama "Cmo resolver el Cubo de Rubik",
tendrs que llenar la pgina de grficos, si quieres que sea de utilidad.
As que piensa en la clase de gente que acceder a tu pgina y procede
en consecuencia.
Divide las pginas
A menudo, la gente tiende a acumular texto y grficos en una sla
pgina, y acaban con una que tarda 10 minutos en cargar.
Si la pgina tiene muchos grficos o se est haciendo demasiado grande,
divdela en dos o tres. Cargarn mucho ms rpido y no harn que el
navegador se cuelgue (pasa ms a menudo de lo que te crees).
Utiliza los atributos HEIGHT, WIDTH y ALT en las sentencias de
IMAGEN
No has estado nunca en una pgina que parece no hacer nada durante
varios segundos y, de repente, ZS!, aparece todo de golpe?. Esto
sucede por no utilizar los atributos WIDTH y HEIGHT.
http://perso.wanadoo.es/catwalk/paginilla/e\1.html (1 of 2)11/12/2003 03:09:20 p.m.
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Al aadir estos atributos, Netscape Navigator & Internet Explorer saben

cunto espacio deben dejar para los grficos y muestran directamente el
texto en la pantalla. Si no lo saben, tienen que detenerse para determinar
por s mismos el tamao de la imagen, y luego continuar. (Nota: Internet
Explorer sigue mostrando el texto, pero lo REFLOTA constantemente, as
que no s lo que es peor).
Los atributos anteriores no hacen que las pginas carguen ms rpido,
pero le dan a los visitantes la posibilidad de leer el texto mientras carga el
resto.
Adems estos atributos son especialmente importantes si hay tablas de
por medio. Netscape no muestra ninguna informacin de una tabla
hasta que ha cargado la totalidad de los grficos. Si los tuyos tienen
muchos Kilobytes, tus visitantes pueden pensar que tu pgina est en
blanco, o que tiene un error y se irn.
Aunque tambin se ha hablado de esto anteriormente, utilizar el atributo
ALT, hace inteligible las pginas para los visitantes cuyos navegadores no
cargan los grficos.
Mucha gente que tiene conexiones lentas, o que busca informacin
tcnica, deshabilita los grficos para poder navegar a la mayor velocidad
posible, as que incluir el atributo ALT les da mayor margen de tolerancia
para entender tu sitio.
Crea una versin ligera de tu sitio
Si tu sitio tiene muchos grficos, pero la informacin de texto tambin es
importante, es buena idea crear una pgina adicional basada en texto
solamente, y con alguna explicacin adicional que supla a las imgenes.
Si pones un enlace a ella en la cabecera, aparecer nada ms cargar la
pgina y esa gente sabr inmediatamente dnde ir. Te lo agradecern.
Siguiente
Siguente Consejo extra
JPG contra GIF
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
JPG contra GIF

Hay dos formatos grficos que se utilizan masivamente en las pginas
web:
JPEG (o JPG) & GIF

Ambos son formatos basados en mapas de bits y ambos incorporan
compresin. Esta compresin los hace ideales para internet.
La resolucin debe ser de 72 puntos por pulgada y las imgenes
deben ser del tipo RGB. La resolucin se fij arbitrariamente (alguna
haba que poner), aunque Netscape Navigator & Internet Explorer
ignoran la resolucin y muestran la imagen lo mejor que pueden.
El formato JPEG (Joint Photographic Experts Group) utiliza un mtodo de
compresin que modifica ligeramente la imagen para conseguir la
mxima compresin. Cuanta ms compresin, mayor degradacin de la
imagen original.
Cuando vas a grabar en formato JPEG se te pregunta qu calidad vas a
utilizar. Sabiendo que la velocidad de carga es importantsima, elegir
Lowest Quality/Highest Compresssion (Mnima calidad/Mxima
Compresin) no es mala idea. Sin embargo, aunque la reduccin de
tamao de una imagen puede ser espectacular, el cambio de calidad
tambin lo es. Depende de las necesidades de cada uno, pero utilizar una
relacin del 75-90% da muy buenos resultados en ambos sentidos.
El formato JPEG da mejor resultado con las

fotografas
Nota: Si necesitas un fondo transparente para la imagen, necesitas
grabarlo como GIF. Esto se ver a continuacin.
El formato GIF (Graphics Interchange Format) utiliza un mtodo de

compresin LZW (el mismo que Stuffit y que PKZip), que no cambia la
JPG contra GIF
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
calidad de la imagen. En su lugar utiliza un ndice de paleta de colores

que puede degradar la calidad del color de la imagen, consiguiendo
reducir el tamao de una imagen RGB en dos tercios. Consecuentemente
tambin reduce el nmero de colores de la imagen.
El formato GIF tambin permite asignarle a un color de la paleta
transparencia. (Esta opcin es relativamente nueva, y no todo el
software la soporta). Esto hace que el fondo de la pgina se vea en vez
de ese color, por lo que la imagen aparece fundida con la pgina.
El formato GIF da mejor resultado con los dibujos,

la mayora de los logotipos y con los volcados de
pantalla.
Nota: Algunos usuarios astutos se habrn dado cuenta que en algunos
programas, el filtro GIF89a permite elegir ms de un color transparente.
Pero no te confundas. Una vez que grabas, lo que hacen es convertir los
colores elegidos a un GRIS simple, y entonces hacen ese gris
transparente. En realidad siguen haciendo transparente slo un color. As
que si utilizas ese filtro, asegrate de hacer una copia del archivo original
o perders ms de un color.
Siguiente
Pop-up windows
Correo
Pop-up windows
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?:
Esas ventanas que aparecen inopinadamente, muchas veces
cuando entras a una pgina, y otras muchas veces cuando sales!.
Las peores con diferencia son stas ltimas. Porque habitualmente
cuando cierras esa nueva ventana se abre otra, u otras dos, y
cuando cierras una de esas se abre otra y....bueno, as "ad
infinitum". Los que hayas experimentado esto sabres que puede
ser muy frustante. Y s, parece que slo pasa en "cierto tipo" de
pginas (pilln, pilln, o pillina, pillina), pero no, est ms
extendido de lo que parece.
Por qu estn mal?:
Porque complican sobremanera la navegacin inundando el
escritorio y la barra de tareas de ventanas abiertas del navegador
que no tienen ninguna utilidad, y obligan al visitante a hacer un
trabajo extra cerrndolas. Adems el hecho de tener abiertas
muchas ventanas del navegador, puede hacer que el ordenador se
cuelgue (en ciertos equipos), con lo que hay que reiniciar, volver a
conectar, etc., etc., etc...
Qu puedes hacer?:
Ciertos servidores obligan a sus "servidos" a incorporar una ventana
de este tipo en sus pginas, y contra eso no puede hacerse nada,
aparte de darse de baja en el servidor. En cuanto a las otras,
desafortunadamente tampoco puede hacerse mucho, salvo no
volver a visitar la pgina en cuestin jams. Para que aprendan,
cosa que dudo.
Por ltimo no confundas este tipo de ventanas con las que se
abren cuando ejecutas un enlace. Si tienes una pgina con frames
los enlaces a pginas que no sean de tu sitio deben hacerse con el
http://perso.wanadoo.es/catwalk/paginilla/p/1.html (1 of 2)11/12/2003 03:09:38 p.m.
Pop-up windows
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
atributo TARGET="_top" que abre una nueva ventana del

navegador para la nueva pgina. La razn de hacer sto as es que
la nueva pgina tendr su diseo propio y por tanto no debe cargar
dentro de uno de tus frames que puede constreirla gravemente.
Siguente Psimo
Banners
Correo
Banners
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Qu son?:
algunas pginas.
Por qu estn mal?:
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Banners
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Pginas de difcil
navegacin
Qu son?:
Por qu estn mal?:
Qu puedes hacer?:
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Siguente Psimo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Contadores
Correo
Contadores
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?:
Un contador es ni ms ni menos que eso, un trozo de cdigo que
cuenta canta gente visita tu pgina.
Si te ests preguntando cmo se hace, olvdalo, no se puede hacer
un contador ni con HTML ni con JavaScript, ya que se hacen con
scripts CGI. Lo que t pegas en tu pgina como contador es un
enlace a un servidor que facilita una imagen con el nmero de
entradas que ha recibido.
Por qu estn mal?:
Como en el caso de los banners, son un mal necesario. Hasta stas
pginas tienen contadores. Pero el contador es una cuestin que
en realidad slo le interesa al webmaster de la pgina, al
patrocinador de la misma, o al dueo del sitio, que son los que
tienen inters en saber canta gente visita sus pginas.
Para el resto, es una idiotez saber que la pgina la han visitado 15
personas o 15 millones, porque entre otras cosas los contadores
son manipulables, o directamente falsos.
Qu puedes hacer?:
Si vas a utilizar contadores, procura hacerlos ocultos. En
CounterWeb es fcil hacer un contador (todo en ingls) y adems
pueden ocultarse con facilidad.
Y, para qu demonios me sirve un contador que no se ve?.
Sencillo, crea una pgina exclusiva para los contadores. Es decir,
colocas el contador oculto en la pgina que te interesa controlar,
y otro enlace al mismo contador en una pgina completamente
diferente. Cuando quieras saber el nmero de visitantes que has
recibido slo tienes que visitar est ltima pgina.
Contadores
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Tambin te preguntars cmo se hace un contador falso. Puedes

mirar en Megacontador. ste es un trozo de JavaScript que
incluyes en la pgina en la quieres colocar el contador y que te
permite fijar el nmero de visitantes que quieres tener al da. Es
decir, si decides que 2.000 visitas al da es un buen nmero, no
tienes ms que colocar esa cantidad en el contador, y cualquiera
que te visite creer que tienes un xito inmenso. Esto queda ms
divertido si el contador funciona al revs, es decir, si maana tu
pgina tiene menos visitantes que hoy.
Primer Malo, malo
Intermitencias
Correo
Intermitencias
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Qu son?
A menos que hayas estado debajo de una piedra en los ltimos
cinco aos, una intermitencia es sto:
Por si no te has dado cuenta, este texto est en intermitencia, y
es un poco molesto, no?.
Nota: Las nuevas versiones del Internet Explorer ignoran esta
sentencia. Menos mal!.
Por qu estn mal?
Bueno, si a t no te molestan...
Qu puedes hacer?
Si quieres enfatizar el texto, utiliza una fuente de mayor tamao,
cmbiale el color, utiliza negrita, o una combinacin de todo
junto.
Siguente Malo, malo
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
http://perso.wanadoo.es/catwalk/paginilla/p/..\m\1.html (1 of 2)11/12/2003 03:09:59 p.m.
Intermitencias
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Banners
Correo
Banners
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?:
algunas pginas.
Por qu estn mal?:
Desgraciadamente, el mantenimiento de los sitios cuesta dinero;
los autores tienen que comer, comprar paales y potitos para sus
hijos, y, algunos como yo, intentamos comprarnos un Ferrari. As
que los banners son un mal necesario.
Qu puedes hacer?:
Mantener tu pgina tan limpia de ellos como puedas.
Hay un cafre (esto es real, la pgina existe y yo la he visto) que
tiene 15 banners en su pgina de bienvenida. Por si eso fuera
poco, tiene un enlace de entrada al sitio, que no slo es difcil de
localizar, sino que adems, cuando lo pinchas, se entretiene en
mostrar un mensaje de JavaScript tomndote el pelo. El contador
de su pgina de bienvenida muestra que tiene bastantes visitas.
Pero si ha tenido el seso suficiente (cosa que dudo) como para
colocar otro contador en la pgina siguiente, tal vez se sorprenda
de la poca gente que debe entrar en su sitio.
Adems, como se comenta en otra parte, esto es una invitacin a
que la gente se vaya a visitar esa pgina que tiene un banner tan
apetecible y no vea nada ms de la tuya.
http://perso.wanadoo.es/catwalk/paginilla/p/..\p\2.html (1 of 2)11/12/2003 03:10:09 p.m.
Banners
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Siguente Psimo
Msica de fondo
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Msica y sonidos de
fondo
Qu es?
Se explica por s mismo...Cuando cargas una pgina, alguna
musiquilla (o soniquete) empieza a sonar automticamente.
Algunas veces viene en formato MIDI, otras como archivo WAV, o
de QuickTime, o vaya usted a saber.
Por qu est mal?
Porque un gran porcentaje de usuarios son profesionales que
tratan de navegar silenciosamente desde su trabajo. Algunas
veces lo hacen al aire libre, o en lugares pblicos. Y muchas veces,
porque simplemente intentan hacerlo tan silenciosamente como
puedan. Esto me incluye a m, y adems, si quiero oir algo
mientras navego, ya pondr la radio, o mi msica preferida, no la
tuya.
Tambin puedes apostar que en el mismo momento en que
cualquier sonido salga de los altavoces, mucha gente cerrar la
ventana inmediatamente, y luego mirar alrededor para
asegurarse de que nadie ms lo haya odo.
Un ejemplo real:
Un tipo quera comprar un telfono mvil, y busc en
la red alguna empresa que los vendiera. Encontr una
llamada "Comunicaciones guila". Tan pronto como
carg su pgina, lo primero que sucedi fue que un
chirrido espantoso surgi de los altavoces. El chirrido
se supone que era el grito del guila. Bueno, cerr la
ventana rpidamente...pero fu demasiado tarde,
porque todo el mundo que estaba por ah se
amonton alrededor del monitor para averiguar en
Msica de fondo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
qu pgina tan espeluznante se haba metido.

Evidentemente no volvi a "Comunicaciones guila" y
ellos perdieron un cliente.
Y por que no apagas los altavoces?, dirs. No estamos aqu para
apagarlos o bajar el volumen para acomodarnos a t!. Se supone
que haces pginas web para que se acomoden a tus visitantes, no
al revs. En ese caso, puede que tengas muchas visitas, pero ten
por seguro que muchos no volvern jams.
Adems, en los Mac (que llevan altavoces incorporados), Netscape
hace que la msica suene a TODO VOLUMEN, independientemente
de lo que diga el control de sonido. Puede que sea un fallo de los
Mac, o de Netscape, pero mientras no se arregle, es un
problema!.
Qu puedes hacer?
La msica y los sonidos de fondo, pueden hacer de la navegacin
una experiencia multimedia muy agradable e interesante, pero
debes darle a tu visitante la posibilidad de elegir. No lo coloques
en automtico...deja a tus visitantes la eleccin de si quieren oir
la msica o no.
Tambin debes hacer que los controles de sonido sean visibles,
para que el visitante pueda apagarlos o bajar el volumen.
Siguente Malo, malo
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Pginas de difcil
navegacin
Qu son?:
Por qu estn mal?:
Qu puedes hacer?:
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Siguente Psimo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Imgenes de fondo
molestas
Qu son?
Estoy seguro de que has visto alguna. Son esos fondos tan chillones
y tan recargados que los ojos se te salen de las rbitas tratando de
leer el texto de la pgina.
Muchas veces me pregunto si los autores han intentado leer alguna
vez sus propias pginas.
Por qu estn mal?
Es obvio. Si tienes dificultades en leer una pgina, no vas a estar
ah mucho tiempo (y no digamos si eso se convierte en algo casi
imposible).
Muchas veces los fondos demuestran el buen o mal gusto del
autor.
Qu puedes hacer?
Veamos un ejemplo de fondo chilln:
Mala imagen de fondo
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Nota la dificultad para leer el texto.

Si te decides a utilizar una imagen como sa, usa un editor de
fotografas para iluminarla. Vers que hay un mundo de diferencia.
Aumenta el brillo, y reduce el contraste, es fcil!.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Buena imagen de fondo

Tambin puedes utilizar fondos con poco contraste. El contraste es
la variacin entre los diferentes colores de la imagen. Cuanta
menos variacin haya en la imagen, ms fcil ser leer el texto.
Muchos sitios utilizan un logotipo como fondo, pero esto slo
funciona si se mantiene bajo el contraste. Por otro lado, los
fondos no tienen que ser muy detallados; cuanto mayor sea el
nivel de detalle, ms difcil es leer el texto, y ms tarda en cargar
la pgina, o no has estado nunca en una que tarda tres minutos
en cargar porque utiliza una imagen de 100K de fondo?. Y procura
que tengan un tamao pequeo. Si usas JPG, utiliza la calidad
mnima. Si usas GIF, utiliza una paleta de 4 bits.
Si tu pgina contiene mucho texto, utiliza un color slido en lugar
de una imagen, y asegrate de que es complementario con el color
del texto. Por ejemplo, el texto rojo se lee mucho mejor que el
azul claro sobre el fondo blanco.
Por ltimo recuerda: No hay nada malo en el texto negro sobre
fondo blanco.
Siguente Malo, malo
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Uso gratuto de los

marcos o frames
Qu es?
Un marco o frame (como lo llamar a partir de ahora) es una
ventana. Cuando la ventana de tu navegador se divide en dos o
ms reas separadas unas de otras, ests viendo frames. Algunas
veces son explcitos, y otras son invisibles, aunque siguen ah.
El uso gratuto de los frames se produce cuando se utilizan sin un
propsito especfico.
Por qu est mal?
Lo creas o no, hay mucha gente que dice: Poned los frames en la
lista, los odio.
Utilizar los frames porque estn ah es una idiotez. Entre otras
cosas porque las pginas tardan ms en cargar, y adems tienen
tendencia a confundir a los navegadores si no estn bien
programados (los frames quiero decir, no los navegadores). Y por
supuesto, tambin confunden a los humanos que navegan.
Lo anterior viene a cuento porque hay gente que no sabe cmo
deshacerse de un frame, o cmo moverse hacia adelante y hacia
atrs entre ellos.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Otro problema con los frames es la forma en que aparecen. No son

iguales ni en cada navegador, ni en cada ordenador, ni en cada
resolucin de pantalla. Esto se debe a la estricta tolerancia de los
navegadores en cuestiones como las barras de desplazamiento y la
posicin de ciertos elementos dentro del frame. Creme, he
perdido ms tiempo intentando ajustar una pgina con frames
para que sea vea aceptablemente en slo dos! navegadores, que
en disear el sitio web completo.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Qu puedes hacer?
Bueno, puedes tomarte tu tiempo para aprender exactamente
cmo manipular los frames con HTML, o simplemente no
utilizarlos. Adems, el hecho de que t sepas utilizarlos no quiere
decir que tus visitantes s sepan.
Quiere esto decir que no se deben usar nunca?. Por supuesto que
no. Hay muchas y buenas razones para utilizar los frames, como
por ejemplo, utilizar un frame para thumbnails y otro frame para
una vista completa de la fotografa.
Si te decides a usar frames, quizs te valgan estos consejos:
No uses tamaos relativos (por ejemplo, 40%) para los

frames superior e izquierdo. Usa siempre absolutos (p.e. 250
pxeles).
Utiliza siempre un tamao relativo con la utilizacin del
asterisco *. Si no sabes a qu me refiero, mira aqu.
Asegrate de dejar espacio suficiente para las barras de
desplazamiento, aunque creas que no van a ser necesarias.
Especifica siempre el atributo TARGET="_top", para los
enlaces que no sean de tu sitio. De esta forma tus visitantes
no se quedarn atrancados en un frame.
No utilices un frame para un men con cuatro o cinco
enlaces, que pueden ser fcilmente incluidos en una tabla o
algo parecido.
Siguente Malo, malo
Anchuras flexibles
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Anchuras flexibles
Qu son?
Crear pginas que funcionen en cualquier monitor,
independientemente de la anchura de la ventana, no slo es
recomendable, es imperativo!.
Aunque mucha gente ya tiene 1024x768 pxeles como estndard,
hay todava muchos que navegan a 800x600, e incluso a
resoluciones an ms raras. Adems, el tamao de las fuentes
puede variar con lo que la apariencia final de la pgina variar en
consecuencia.
Yo mismo tengo cinco posibilidades de configuracin de pantalla
(desde 640x480 hasta 1024x768). Si a eso le sumas que puedes
utilizar fuentes normales o grandes, tienes 10 tipos diferentes de
configuracin, slo en mi ordenador. Si el tamao de la fuente no
es estndard, entonces las posibilidades son infinitas.
Y tambin hay que tener en cuenta que otra gente no maximiza
sus ventanas de navegacin, o simplemente utilizan un tamao de
texto diferente al normal en el navegador (claro que puede
hacerse, simplemente mira en Ver, Tamao del texto).
Adems es rdiculo perdirle a tus visitantes que "configuren su
pantalla a 800x600" cuando muchos para hacerlo, tienen que
reiniciar el ordenador!.
Un sitio que en tu pantalla se ve as:
http://perso.wanadoo.es/catwalk/paginilla/p/..\b\1.html (1 of 3)11/12/2003 03:11:14 p.m.
Anchuras flexibles
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Pantalla grande
en la de otro, se ver as:
Pantalla pequea
Por qu est bien?

Acomodar la informacin de forma que tus visitantes no tengan
que andar de un lado para otro, hace tu sitio mucho ms
navegable.
Y la gran mayora de visitantes espera desplazarse hacia abajo, tal
y como leemos. Pero a nadie le gusta estar constantemente yendo
de izquierda a derecha y viceversa para leer todas y cada una de
las lneas de texto. Es extremadamente cansado y molesto.
Qu puedes hacer?
Anchuras flexibles
Cuando disees tus pginas, hazlo para la anchura mnima

(800x600 estar bien),...y no para la anchura de tu pantalla. As
cualquiera podr verlas sin problemas. Tampoco est de ms mirar
cmo quedan con la ventana no maximizada.
S, ya s que es un trabajo desagradecido, porque todo el mundo
asume que los dems tienen su misma configuracin de pantalla,
pero la calidad se nota en estos pequeos detalles...
Si tus imgenes estn alineadas a la DERECHA o a la IZQUIERDA,
no las hagas mucho ms anchas de unos 500 pxeles. Si son
demasiado grandes y hay texto al lado, ste puede ser comprimido
por el navegador y no ser claramente legible
Siguente Mejorando
Mapas de imagen
Correo
Mapas de imagen
grandes
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Los mapas de imgenes son imgenes grandes y relativamente
sencillas con "puntos calientes" en los que se puede pinchar.
Sabes que ests ante uno de ellos cuando ves una gran imagen
(me refiero al tamao, no a la calidad) cargando, y tienes que
esperar a que toda la imagen se cargue, antes de poder hacer
cualquier otra cosa.
Por qu estn mal?
Uno o dos mapas, si no son muy grandes, no representan ningn
problema, pero si creas un sitio entero basado en mapas, acabars
con un sitio lleno de imgenes y con muy poco texto. Esto quiere
decir largos tiempos de espera para que a tu visitante luego no le
interese lo que le ofreces. As que no tendrs un sitio muy
navegable.
Qu puedes hacer?
Considera el descomponer tus mapas en imgenes ms pequeas.
Le dan a tu visitante ms pistas acerca de lo que se puede pinchar
y lo que no. Adems las imgenes pequeas tardan menos en
cargar, y puede resultar hasta interesante ver cmo se va
componiendo el mapa. Y no los crees si no tienes muchos enlaces.
Un buen ejemplo sera un mapa de Espaa, en el que al pinchar en
una provincia, enlazas con la pgina de esa provincia.
Si vas a usar Mapas, aqu tienes unos consejos:
Hazlos pequeos. No crees una imagen gigantesca, porque el

navegador probablemente se colgar.
Mapas de imagen
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Mientras puedas, utiliza enlaces alternativos bajo la imagen

del mapa.
Haz los puntos calientes obvios. Pero no olvides que lo obvio
para t puede no serlo para un visitante.
Siguente Malo, malo
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Sentencias de altura y
anchura
Qu son?
Las sentencias de HTML HEIGHT & WIDTH (altura y anchura), son
atributos de la sentencia IMG SRC. Estos atributos mejoran
drsticamente la carga de tus pginas. En la mayora de los casos
harn que la informacin de texto est disponible con mucha
mayor rapidez.
Por qu est bien?
Si utilizas estos atributos, Netscape Navigator & Internet Explorer
(no tengo ni idea de lo que harn otros)saben exactamente can
grande es el "agujero" que tienen que dejar para los grficos, de
forma que pueden cargar el texto y dejar los grficos para ms
tarde, por lo que tu pgina carga ms rpido, y lo que es ms
importante, la informacin de texto se muestra mucho antes.
Utiliza estos atributos especialmente cuando uses tablas, por estas
razones:
Netscape (que yo sepa) no muestra ninguna informacin de

una tabla hasta que TODOS los grficos se han cargado.
Utilizar los atributos le permite a tus visitantes leer el texto
mientras esperan a que carguen los grficos.
Internet Explorer carga toda la pgina uses o no los
atributos mencionados, pero est constantemente
reajustando el texto para acomodar los grficos. La verdad
es que es muy molesto.
Qu puedes hacer?
Aade a tus sentencias IMG SRC los atributos as:
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
<IMG HEIGHT=XXX WIDTH=XXX SRC="imagen.gif">

(XXX son pxeles)
Siguente Mejorando
Correo
Imgenes de
construccin
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Estoy seguro de que las has visto... hay ms que en las carreteras,
que ya es decir. Pueden ser la tpica del to con el casco y la pala,
o el comentario "Esta pgina est en construccin".
Por qu estn mal?
Porque es obvio que las pginas siempre estn en construccin.
Aunque claro est, si haces un sitio que quede muy bien una vez
terminado, no vas a andar toquetendolo; pero si nunca lo
actualizas ni le haces cambios, si siempre es igual, no esperes que
la gente vuelva!.
Adems es bueno incluir la direccin de correo, ya que algn alma
caritativa puede mandarte uno diciendo que has puesto
contubernio en vez de construccin. En qu estaras pensando?.
Qu puedes hacer?
Si tu pgina est realmente en construccin, pon un aviso en el
que se diga claramente, y no dejes a nadie acceder a la pgina.
Incluye tambin una fecha aproximada de la terminacin de las
obras (que no te duren lo mismo que las del Escorial), y cuando
hayas terminado, quita el aviso y pon la pgina.
Por ltimo, ten en cuenta que es mucho ms cmodo y barato
probar exhaustivamente tus pginas en tu disco duro antes de
publicarlas. Una vez que las hayas subido, prueba los enlaces a
pginas exteriores, y quita esos malditos carteles!.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Siguente Malo, malo
Sentencias ALT
Correo
Sentencias ALT
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Al igual que las anteriores, ALT es un atributo de la sentencia IMG
SRC, que da una descripcin alternativa de las imgenes para los
visitantes que no tienen las imgenes habilitadas, o para los
navegadores basados en texto (como Lynx).
Por qu est bien?
Porque la gente que no tiene las imgenes habilitadas puede
disfrutar de tu pgina normalmente, al tener una descripcin
aproximada de lo que se supone que se debe ver.
Por qu la gente deshabilita las imgenes?. Por muchas razones.
La ms habitual es que si estn deshabilitadas las pginas cargan
con muchsima ms rapidez, lo que puede suponer un importante
ahorro en la factura de telfono, y utilizar los atributos ALT hace
que la pgina sea mucho ms fcil de entender para ellos.
En Internet Explorer el atributo ALT carga antes que la imagen, lo
que le da a tu visitante una idea de lo que puede haber antes de
que la carga finalize.
De hecho una pgina que puede tardar en cargar unos 20 o 30
segundos, carga en menos de 2 segundos si las imgenes estn
deshabilitadas.
Y desde luego, hay una cosa evidente: Si tu pgina slo tiene
fotos, o est dedicada al diseo grfico, es una idiotez utilizar el
atributo ALT.
Por ltimo, ALT hace tus grficos visibles para los navegantes
ciegos que utilizan navegadores especiales. Estos navegadores
interpretan el texto de la pgina, y lo canalizan a travs de los
altavoces. Cuando llegan a una imagen, lo que pronuncian es lo
Sentencias ALT
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
que haya en el atributo ALT.

Qu puedes hacer?
Aadir un atributo ALT es muy fcil, slo tienes que escribir tu
sentencia IMG as:
<IMG SRC="MiCoche.gif" ALT="Foto de mi fabuloso
coche">
Siguente Mejorando
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Qu son?
Las alertas o avisos son ventanas de dilogo que aparecen cuando
entras a un sitio. Algunas veces te preguntan tu nombre o alguna
otra cosa, o a veces tienen un aviso acerca del contenido del sitio.
Por qu estn mal?
Bsicamente porque son slo otra de esas "maravillas tcnicas" que
la gente pone en su sitio para decir: "Eh, mira lo que s hacer!",
pero al final se convierten en una prdida de tiempo para el
visitante.
Dirigirte a tu visitante por su nombre, despus de que l lo haya
tecleado, no sorprende a nadie, ni es til. Y otras veces, ni
siquiera sucede nada. El navegador pasa completamente del
asunto.
El peor uso que se le puede dar es el tpico "Adis, gracias por tu
visita", o algo parecido.
Qu puedes hacer?
Simplemente no las uses. Aunque no existen alternativas,
solamente los sitios verdaderamente interactivos pueden
encontrarle utilidad, y para eso hace falta programar algo ms que
un simple mensaje.
Siguente Malo, malo
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Correo
Informacin de
contacto
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Qu es?
Incluye alguna manera de que tus visitantes puedan ponerse en
contacto contigo.
Por qu est bien?
Decir lo anterior puede parecer una chorrada, pero muchas veces
los webmasters olvidan incluir su direccin de correo, o la
esconden tan bien, que no hay forma de averigurar dnde est.
Qu puedes hacer?
Incluye un trozo de cdigo como el siguiente:
Mi correo es <A HREF="mailto:correo@micasa.com">este</
A>
Si tienes mucho correo, incluye un formulario que te filtre y te

ordene parte de la informacin. Si no sabes cmo hacerlo mira
aqu.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Siguente Mejorando
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Mensajes en la barra de
estado
Qu son?
Para empezar no funcionan en todos los navegadores, pero si
funcionan en el tuyo, los vers en la parte inferior de tu
navegador. Los has visto ya?. Y te parece bonito?. Desde luego,
hay gente para todo.
Nota: Afortunadamente no todos los navegadores soportan los
mensajes. Si no los ves, puede que tu JavaScript est desactivado,
o puede que tu navegador sea lo suficientemente inteligente para
no mostrarlos.
Por qu estn mal?
Esto se lleva un 10 en cuanto a cosas mal hechas, por una sencilla
razn...ocultan lo que se debe mostrar en la barra de estado!.
Esta es una de esas cosas que estn bien los primeros dos minutos.
Despus empiezan a ser desquiciantes.
Como prueba, pon el cursor sobre cualquier enlace de esta pgina
y mira en la barra de estado. Sabes a dnde vas a ir?. No, no lo
sabes, porque cubren la direccin.
Nota: Internet Explorer 3.0 y Netscape 4.0 (o superiores), s
muestran la direccin, aunque tan rpidamente que casi no se ve.
Y para qu demonios quieres ver la direccin?. Bueno, a m me
gusta ver la direccin a la que voy a ir a parar, porque me indica si
voy a salir del sitio, si ya he estado en ese sitio o no, o si es una
direccin indeseable.
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Qu puedes hacer?
No lo utilices. Te lo suplico, este JavaScript debe haber venido
directamente del infierno.
Primera pgina de Mejorando
Plug-ins opcionales
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
Plug-ins opcionales
Qu es?
Los Plug-Ins pueden mejorar la experiencia de tus visitantes en tu
pgina. Entre otras cosas, aaden sonido y animaciones, adems
de mejorar la comunicacin e incluso el vdeo.
Ejemplos de Plug-Ins son QuickTime, Shockwave, & Live Audio
Por qu estn bien?
La palabra clave aqu es "opcional". Los Plug-Ins le dan a tu
visitante la posibilidad de mejorar la exploracin de tu pgina,
slo si lo desean (eso si no los tienen instalados ya).
De esta forma devuelves el control a la gente que te visita. No lo
tienes t mismo.
Hago hincapi, los Plug-Ins separan a los webmasters en dos
categoras, aquellos que son autocomplacientes, y aquellos que
entienden las diversas necesidades de los que navegan en Internet.
Qu puedes hacer?
Para empezar, no coloques un aviso diciendo "Esta pgina requiere
ActiveX" ni nada parecido. Y de ninguna manera hagas que los PlugIns intenten descargarse automticamente. Si fuera as haz una
pgina de introduccin en la que lo expliques, y desde ah da
acceso a tu pgina principal.
Tampoco coloques toda la parafernalia de los Plug-Ins en tu
pgina. Crea una pgina adicional con todo lo necesario, y deja a
los visitantes que entren en ella o no, segn decidan.
En general, procura tener una alternativa, por si no quieren
descargarlos.
Plug-ins opcionales
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Primer Consejo extra
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..

Hay un delicado balance entre un diseo de calidad y la rapidez de carga
de las pginas. Este balance es lo que puede separar tu pgina del resto.
Desgraciadamente la tolerancia de cada uno respecto a la calidad/rapidez
es diferente en cada caso. A alguna gente no le importa esperar,
mientras que otros slo quieren la "chicha" de la pgina, y les importa un
pimiento el resto.
Cmo se determina este balance?. Es algo complicado, pero aqu tienes
unos consejos que te ayudarn a conseguirlo.
Conoce a tu audiencia
Si la mayora de la gente que accede a tus pginas busca informacin
textual, no las llenes de JavaScript, animaciones o grficos. Si vas a crear
una pgina llamada "Especificaciones tcnicas del Producto X", puedes
estar seguro que la mayor parte de la gente que acceda a ella, sern
cabezas tecnolgicas buscando la informacin especfica. Esa gente
quiere ver especificaciones y no grficos (salvo que sean imprescindibles).
Querrn la informacin a palo seco, sin alharacas.
Y viceversa, si la pgina se llama
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
http://perso.wanadoo.es/catwalk/paginilla/p/..\e\1.html (1 of 2)11/12/2003 03:20:54 p.m.
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
JPG contra GIF
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
JPG contra GIF

Hay dos formatos grficos que se utilizan masivamente en las pginas
web:
JPEG (o JPG) & GIF

Ambos son formatos basados en mapas de bits y ambos incorporan
compresin. Esta compresin los hace ideales para internet.
La resolucin debe ser de 72 puntos por pulgada y las imgenes
deben ser del tipo RGB. La resolucin se fij arbitrariamente (alguna
haba que poner), aunque Netscape Navigator & Internet Explorer
ignoran la resolucin y muestran la imagen lo mejor que pueden.
El formato JPEG (Joint Photographic Experts Group) utiliza un mtodo de
compresin que modifica ligeramente la imagen para conseguir la
mxima compresin. Cuanta ms compresin, mayor degradacin de la
imagen original.
Cuando vas a grabar en formato JPEG se te pregunta qu calidad vas a
utilizar. Sabiendo que la velocidad de carga es importantsima, elegir
Lowest Quality/Highest Compresssion (Mnima calidad/Mxima
Compresin) no es mala idea. Sin embargo, aunque la reduccin de
tamao de una imagen puede ser espectacular, el cambio de calidad
tambin lo es. Depende de las necesidades de cada uno, pero utilizar una
relacin del 75-90% da muy buenos resultados en ambos sentidos.
El formato JPEG da mejor resultado con las

fotografas
Nota: Si necesitas un fondo transparente para la imagen, necesitas
grabarlo como GIF. Esto se ver a continuacin.
El formato GIF (Graphics Interchange Format) utiliza un mtodo de

compresin LZW (el mismo que Stuffit y que PKZip), que no cambia la
JPG contra GIF
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
calidad de la imagen. En su lugar utiliza un ndice de paleta de colores

que puede degradar la calidad del color de la imagen, consiguiendo
reducir el tamao de una imagen RGB en dos tercios. Consecuentemente
tambin reduce el nmero de colores de la imagen.
El formato GIF tambin permite asignarle a un color de la paleta
transparencia. (Esta opcin es relativamente nueva, y no todo el
software la soporta). Esto hace que el fondo de la pgina se vea en vez
de ese color, por lo que la imagen aparece fundida con la pgina.
El formato GIF da mejor resultado con los dibujos,

la mayora de los logotipos y con los volcados de
pantalla.
Nota: Algunos usuarios astutos se habrn dado cuenta que en algunos
programas, el filtro GIF89a permite elegir ms de un color transparente.
Pero no te confundas. Una vez que grabas, lo que hacen es convertir los
colores elegidos a un GRIS simple, y entonces hacen ese gris
transparente. En realidad siguen haciendo transparente slo un color. As
que si utilizas ese filtro, asegrate de hacer una copia del archivo original
o perders ms de un color.
Animaciones GIF
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Animaciones GIF
Tienes que haberlas visto, Internet est llena de ellas. Bsicamente una
animacin GIF es una serie de imgenes empaquetadas en un archivo
nico. Cuando un navegador carga un archivo de este tipo, lee todas las
imgenes y luego las muestra una detrs de otra, con un retardo
determinado. S, es muy parecido a los dibujos animados.
Gif 1
Gif 2
El problema de utilizar este tipo de grficos es que tienden a dominar la

pgina, y desenfocan la atencin. An cuando ests leyendo sto con
atencin, apuesto a que los ojos se te van hacia las animaciones
superiores y te apartan de lo que ests leyendo.
Antes de incluir animaciones de este tipo, considera si realmente son
necesarias y mejoran el contenido, o si simplemente van a ser "ruido de
fondo" para tus visitantes.
Muchas animaciones son superfluas, pero otras veces son muy necesarias
para subrayar un punto importante. Por ejemplo, si quiero explicar lo que
hace el programa HyperVideo, ser mucho ms efectivo incluir una
animaci como la inferior derecha, que una simple imagen como la
inferior izquierda:
Gif 3
Gif 4
Si no tienes ni idea de lo que el programa HyperVideo hace, la imagen de

la izquierda no te aclarar mucho ms. Pero la imagen de la derecha s
Animaciones GIF
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
hace comprender a las claras que utiliza algn tipo de tecnologa en 3D.
Perctate de que la animacin se detiene unos momentos. Esto difumina
un poco la reproduccin continua, que puede llegar a ser muy molesta. El
trmino tcnico para esto es "Interframe delay" que, dicho en cristiano,
es simplemente "retardo" o "retraso". Aqu tienes dos ejemplos:
Gif 5
Gif 6
Estos iconos no seran los mismos sin el retardo. Utilizar retardos

diferentes entre cada una de las imgenes que componen el archivo Gif,
hace que parezca que se mueven aleatoriamente, cuando en realidad no
es as.
Asegrate tambin de que las animaciones encajan con el espritu de la
pgina. Estas animaciones pueden valer para esta pgina, pero no para la
de una firma de abogados, o para un sitio de soporte tcnico.
Para cerrar, algunos consejos:
No recargues la pgina con demasiadas animaciones. En mi

opinin esta pgina tiene demasiadas, pero como deban servir de
ejemplo, he hecho una excepcin.
Mantn tus animaciones bajas en Kilobytes. Deben seguir el
mismo principio que los dems grficos. Considera su necesidad,
calidad y tamao. Si es un grfico trivial no debe medir ms de
10K; si es uno fundamental debe ser mayor.
Si vas a usar una animacin que hayas visto en alguna pgina,
pide permiso para utilizarla. Muchas pginas tienen copyright y es
responsabilidad tuya respetarlo. Hay montones de pginas con
animaciones de dominio pblico que puedes utilizar sin problemas,
pero no asumas que todo lo que ves es de dominio pblico.
Galletas o cookies
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Galletas o cookies
Se ha hablado mucho de ellas, demasiado. Pero para empezar, mejor
explico qu demonios es una "cookie" o "galleta".
La mejor forma de describir una cookie es como un archivo de
configuracin de un sitio web. Hay montones de estos archivos en tu
disco duro. Estos archivos guardan informacin acerca de la forma en que
usas los programas, en resumen, de tus preferencias. Una cookie hace lo
mismo con un sitio web.
Por ejemplo, supongamos que te suscribes a un peridico on-line. Una
vez que rellenas la informacin correspondiente, y tienes tu nombre y tu
contrasea, puedes hacer que tu sistema "recuerde" ambas para la que la
prxima vez que entres no tengas que teclearlas. Esto se hace
almacenando una cookie en tu disco duro, en un directorio especial. Otro
ejemplo: se utilizan cookies para rastrear qu partes de un sitio web has
visitado y cules no.
No todos los sitios web tienen cookies. De hecho la mayora no utilizan
cookies.
Entonces, cal es el problema?
El problema es que mucha gente teme que esas cookies se utilicen para
almacenar informacin personal, nmeros de tarjetas de crdito, sus
nmeros de software...y que esa informacin pueda ser leda por otros
sitios web. Incluso hay gente que cree que pueden transmitir virus.
Todo esto es incorrecto. Las cookies slo pueden ser ledas por los sitios
que las han creado. Lo que quiere decir que slo contienen informacin
que ese sitio ya tiene, o que tu navegador ya le ha facilitado.
A diferencia de los archivos de incializacin, como tambin se llaman, que
pueden permanecer en tu disco duro, aunque desinstales el programa
que los cre; las cookies tienen fechas de caducidad (tal vez por eso se
llaman cookies, aunque otra teora sostiene que se llaman as porque en
EE.UU. una cookie es la ficha que te entregan en el guardarropa), y se
borran automticamente pasado un cierto perodo de tiempo. Adems si
tu navegador tiene cierta configuracin puede borrarlas automticamente
Galletas o cookies
Organizacin de
archivos.
Enlaces abusivos.
cuando terminas la sesin, e incluso puede que tu sistema no pueda

almacenar ms de un nmero determinado de cookies (300 es lo
habitual),
Tambin puedes
visitar
WebTutor
Adems una cookie no puede ser mayor de 4K.

As que olvida toda esa desinformacin acerca de las cookies. Son
completamente inofensivas.
Si quieres saber ms acerca de las cookies instaladas en tu ordenador,
estos programas gratutos las analizan o las borran (estn en ingls):
Para Macintosh: Cookie Cutter
Para Windows: Cookie o Cookie Cutter
Si an ests preocupado con ellas, las timas versiones de Netscape
Navigator y de Internet Explorer te permiten aceptarlas o rechazarlas.
Mitos o errores
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mitos y errores
Un buen diseo de un sitio es una cosa, escribir buen cdigo, otra
completamente diferente. Aqu veremos algunos errores comunes y mitos
que diferencian a un amateur de un profesional.
Error: Imagen de fondo con formato GIF y una sla lnea
Hay un diseo obvio a la hora de crear pginas: Una
columna a la izquierda y un rea ms grande a la derecha
(diseo muy recomendable ya que es muy flexible). Algo as:
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Muy a menudo el autor crea el fondo como una lnea de un

pixel de alto para mantener el tamao ajustado al mnimo.
Esto parece lo lgico...despus de todo una imagen de
fondo pequeita cargar muy rpido. As que crean una
imagen como la siguiente:
Imagen de fondo
Tamao del archivo: 80 Bytes
Esto es un gran error. El ordenador tendr que repetir
esta imagen un montn de veces (incluso miles de veces)
en una simple pgina. Puedes apostar a que hay una
imagen de este tipo de fondo cuando ves redibujar la
pgina una y otra vez a medida que te vas desplazando
hacia abajo.
Mitos o errores
Organizacin de
archivos.
Enlaces abusivos.
Tambin
puedes visitar
WebTutor
La solucin es crear un fondo de 30 o 40 pxeles de alto.

Debido a la compresin inherente del formato GIF,
(explicada en JPG contra GIF), este tipo de imgenes se
comprime a un tamao muy, muy pequeo de todas
formas. Tal vez te sorprenda saber que, a pesar de la altura
extra,el tamao del archivo es solamente unos cuantos
bytes mayor. Y el ordenador repite esta imagen con mucha
ms facilidad que la anterior.
La misma imagen, con 30 pxeles de alto:
Otra imagen de fondo

Observa que el tamao no es 30 veces mayor que el otro,
como podra esperarse. Es muy compacto, y dibujar el
fondo mucho ms deprisa que el anterior.
Error: No cerrar las sentencias adecuadamente
Para ahorrar tiempo, los autores omiten las sentencias de
cierre. Muy habitualmente lo hacen en las LISTAS y en las
TABLAS, sobre todo en las sentencias TD y TR. Esto se hace
porque en los navegadores ms populares no causa
problemas.
Pero s los causa en otros navegadores y en programas de
validacin. Adems, omitir una sentencia de cierre puede
hacer que la pgina aparezca totalmente en blanco, o,
cuando usas tablas complicadas, puede que el navegador se
confunda, en cuyo caso, el resultado final estar muy lejos
de lo previsto.
Como en "casa del herrero, cuchillo de palo", hasta en stas
pginas ha sucedido so. Si estuviste viendo las pginas con
Netscape hacia mediados de Mayo te percataras de que
haba bastantes errores. Con mi versin anterior iban
perfectamente (y tambi con IE), pero cuando las prob con
la versin 4.5 de Netscape, vaya un desastre!. Tuve que
revisar las pginas una por una para depurarlas, y la gran
mayora de los errores se solucionaron simplemente
aadiendo unas cuantas sentencias </FONT>.
Mitos o errores
As que tmate un poco de tiempo y cierra las sentencias

apropiadamente.
Mito: Cuanto ms repitas una palabra en una pgina, ms
aparecers en los buscadores
Estoy seguro de que alguna vez habrs visto esas ristras,
casi siempre al final de la pgina. Habitualmente son
palabras que se repiten una y otra vez. Muchas veces dicen
"Olvida estas palabras, son slo para los buscadores", y
otras utilizan palabras que no tienen nada que ver con la
pgina (pero s que alguien podra introducir en el criterio de
bsqueda), como "sexo", "dinero" o "gratis".
Esta gente cree errneamente que estas ristras los hacen
aparecer preferentemente en los buscadores, o que por
incluirlas aparecern ms veces, o simplemente que
aparecern.
En primer lugar, no aparecers en un buscador, si no te
has dado de alta en el mismo. En segundo lugar, las
palabras se indexan en el buscador una sla vez por pgina.
Y en tercer lugar, algunos buscadores ignoran ciertas
palabras comunes o vulgares.
Lo hars mucho mejor si aades unas sentencias META, tal
y como se explica en la pgina siguiente. Esta es la forma
correcta y la mejor, porque muchos buscadores buscan
primero en las sentencias META, y despus en el contenido
de la pgina.
Sentencias META
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Sentencias META
Has buscado alguna vez tus propias pginas en un buscador?. Tal vez no
lo hayas hecho, o tal vez s y te hayas encontrado con que son difciles de
encontrar, o que tienen una descripcin muy pobre. No quieres tener
ms control acerca de cmo las ordena el buscador?
Por ejemplo, una pgina puede aparecer en un buscador de esta forma:
Diez maneras de mejorar tu
navegacin
Esto es especfico para Netscape
(pero estoy seguro de que los
consejos funcionarn tambin en
otros navegadores). Cuando ests
listo, simplemente...
Aunque el ttulo es muy descriptivo, el resto son las primeras lneas de la
pgina;. Peor an, es posible que tengas que introducir (teclendola)
en tu buscador la direccin de la pgina, lo que no es ni cmodo ni
prctico.
Pues bien, lo creas o no, tienes un perfecto control sobre todo sto. Este
control se obtiene con las sentencias META. Estas sentencias se colocan
dentro de las sentencias HEAD (que van al principio del documento
HTML), y le dicen a los motores de bsqueda cmo indexar tu pgina,
qu palabras clave utilizar y la descripcin que quieres que aparezca.
Las dos ms signigicativas son description (descripcin) y keywords
(palabras clave), y aparecen as en el cdigo HTML:
<META name="description" content="la
descripcin viene aqu">
<MET
Sentencias META
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
Planeando tu sitio
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Planeando tu sitio
Supongo que habrs notado que algunos sitios parecen una chatarrera,
con enlaces extrasimos, otros que no funcionan, e informacin dispersa
por todos lados. Por ejemplo, tienen un enlace a "Star Trek" que no
funciona, otro a "Jardinera" que conecta con una pgina de mascotas, y
otro a "Animaciones GIF", que menos mal que s funciona. Adems tienen
cinco enlaces a buscadores diferentes y para terminar de arreglarlo el
nombre de la pgina es "Diseo Web Forrest Gump".
Algunos otros sitios tienen una pgina de inicio tan larga, que cuando vas
por la mitad has gastado tu tiempo de conexin, o has olvidado lo que
deca al principio.
En ambos casos estamos ante una pobre planificacin. En el primero, la
organizacin es muy pobre, y en el segundo, no se ha previsto un
crecimiento desmesurado.
Lo siguiente es una lista que puedes utilizar para crear tu sitio web:
1.- Crea un boceto de tu sitio.

Crear un boceto te da una buena base para empezar a
crear tus pginas.
Empieza con un crculo central (esa ser tu pgina
principal), etiqutala con el ttulo del sitio, y dibuja lneas
que conecten con otros crculos exteriores. Esas sern tus
pginas secundarias, o enlaces a otros sitios.
2.- Mantn el sitio centralizado.

Asegrate de que el sitio tiene una estructura clara y no
est muy embrollado. Procura que tus visitantes tengan
siempre una idea de dnde estn, y crea enlaces para
volver a la pgina principal en todas las pginas
secundarias.
Focalizacin es la palabra clave. Si tienes varias reas de
Planeando tu sitio
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
inters, crea diferentes pginas con aspectos muy

distintos para cada una de las reas, y crea enlaces
generales para englobarlo todo. Es decir, puedes utilizar el
mismo tipo de letras o encabezamientos (esto se hace
fcilmente con las Hojas de estilo o Style Sheets) para
todas las pginas, pero si una hace referencia a la
jardinera le puedes poner un fondo verde, mientras que la
que haga referencia a la astronoma puede tener un fondo
oscuro. Incluye un enlace a la pgina principal en cada una
de ellas, pero no las enlaces entre s. Por ltimo, si los
temas son muy variados, puedes crear una pgina principal
de bienvenida, con un saludo, una introduccin general a lo
que ofreces, y enlaces a cada una de las pginas.
3.- Mira en otros sitios buscando ideas.

Otras sitios web pueden darte ideas e inspiracin. Y
tambin puden darte orientaciones acerca de lo que NO
quieres hacer en tu sitio.
Esto es especialmente importante si no eres t el que
diseas tu sitio. Tener las ideas claras har que te expliques
mejor, y el que te vaya a escribir el cdigo sabr a qu
atenerse.
4.- Edcate a t mismo en las limitaciones del HTML.

Para la gran mayora de diseadores, el HTML presenta
muchas limitaciones, que lo hace a veces muy
desagradable. Aprender acerca de estas limitaciones puede
resolver parte de la frustracin que representa el hecho de
que las cosas no queden como habas pensado.
Habitualmente el problema nace por utilizar herramientas
de diseo. Programas como PageMaker o FrontPage
Express facilitan la creacin o la manipulacin de
documentos HMTL, pero estn limitados en cuanto a lo que
se puede hacer, sobre todo en el posicionamiento de ciertos
elementos. Yo utilizo muchas veces HotMetal Pro, porque
me facilita enormemente el trabajo, pero ciertas partes del
cdigo tengo que escribirlo a mano, porque es la nica
forma de que la pgina aparezca como yo quiero. Para esto
hay que saber HTML. Tal vez te interese darte una vuelta
por WebTutor.
Planeando tu sitio
5.- Conoce a tu pblico potencial.

Ajustar el contenido del sitio a la posible audiencia puede
parecer una perogrullada, pero es esencial si quieres
mantener a tus visitantes interesados en el sitio.
Por ejemplo, hace no mucho tiempo, visit un sitio
buscando informacin tcnica acerca de un ordenador que
tena previsto comprar. Me qued encantado cuando
encontr rpidamente un enlace a una pgina titulado
"Especificaciones tcnicas". Pero cuando llegu a la pgina
en cuestin, s, la informacin estaba ah, pero mezclada
con tantos grficos animados y tanto Java innecesario que
la pgina era un completo despropsito.
Por qu anonadar a tus visitantes con todo eso?. Si tu
visitante quiere informacin tcnica, dale eso, pero no lo
obligues a ver (y a cargar) una serie de cosas
improcedentes. Sobre todo si la pgina carga 10 veces ms
rpido sin toda esa parafernalia.
En otras palabras, si tus visitantes quieren solamente los
hechos, dales eso, "solamente los hechos" y djate de
adornos. Si tus visitantes quieren fotografas, dales
fotografas y olvdate de otras cosas.
Y eso es todo lo que tena que decir.
Organizacin de archivos
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
archivos
La organizacin de los archivos es muy importante a la hora de crear un
sitio web. Si no planificas cuidadosamente la localizacin de tus archivos
en tu sitio web, puedes acabar con un completo desmadre.
Esto funciona tanto como si hay gente diferente trabajando en un sitio
web, como si alguien intenta actualizarlo. Necesitas saber qu archivos
son tiles, cales no sirven ya, y para qu sirve cada uno.
Empecemos por arriba:
La mayora tiene sus sitios web en un nico directorio. Este directorio se
llama habitualmente "www", "public_html", o como es este caso "perso.
wanadoo.es/catwalk/WebTutor/paginilla". Ahora bien, esta serie de
pginas se compone de unos 30 documentos HTML y de otros 30
grficos. Si los pones todos juntos, acabars con un lista impresionante
donde buscar algo es realmente difcil.
En su lugar, divdelos en directorios diferentes. En este caso hay un
directorio para "Malo, Malo", que contiene sus documentos HTML y sus
grficos, otro directorio para "Mejorando", que contiene los suyos, y otro
directorio para "Consejos extra".
Si utilizas una misma imagen como fondo para todos los documentos, o
las flechas de enlaces son las mismas en todo el sitio, crea un directorio
llamado "comun", y acumula ah todos esos archivos.
Es decir, si el diseo de tu sitio tiene reas diferentes, crea directorios
diferentes para cada una de esas reas. Todo te ser ms fcil.
En segundo lugar, utiliza nombres de archivo descriptivos, cortos, sin
caracteres especiales, sin acentos, y a ser posible, siempre en minsculas.
Si usas un nombre de archivo como "Anim1.gif" (este nombre es el de un
archivo de stas pginas), puede que dentro de 6 meses no tengas ni
idea de qu archivo es. Dirs que yo s lo utilizo. Te replicar que yo s s
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
a qu se refiere, porque est en un directorio especfico y hay pocos

archivos grficos de ese tipo en ese directorio.
Los caracteres especiales y los acentos no se llevan bien con la mayora
de los sistemas, as que procura no incluirlos en los nombres de los
archivos. Y es importante que tengas presente que las maysculas y las
minsculas son an ms importantes. Para un sistema como Windows
"ARCHIVO.EXT" es exactamente igual que "archivo.ext" o que "ArChIvO.
eXt". Pero para un sistema UNIX (y la mayora de los servidores, si no
todos, estn basados en este sistema), son 3 archivos completamente
diferentes. Es por esto que a alguna gente todo le funciona
perfectamente en su disco duro, pero no le funciona nada una vez que ha
subido los archivos al servidor. Si tu imagen de fondo es "fondo.gif" y en
el cdigo HTML has puesto
<IMG SRC="FONDO.GIF"">
Windows no notar ninguna diferencia y cargar el archivo como si tal
cosa; pero el UNIX de tu servidor buscar "FONDO.GIF", y como no lo
encuentra sencillamente no cargar el fondo.
Enlaces abusivos
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Enlaces abusivos
Sufre tu sitio de enlacelunizacin?. Que no sabes lo que es?. Yo casi
tampoco, me acabo de inventar el palabro, pero mira este ejemplo:
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Muchos enlaces
No te parece familiar?. Hay enlaces por todas partes. Las palabras

parecen esparcidas aleatoriamente entre los enlaces. Podrs decir "bien,
pero los enlaces son los que hacen que la Red sea la Red". Y tienes
razn...hasta cierto punto.
Poner muchos enlaces en un prrafo hace que sea ms difcil de leer,
porque rompe tu concentracin, y en ciertos casos, el visitante no
terminar de leer, porque ha encontrado un enlace que le parece ms
interesante y se ha ido a visitarlo.
Hay otra enlacelunizacin an peor. Es la siguiente:
Bienvenido a nuestro sitio

web!
Basado en WebTutor
Piensa un poco acerca de este ejemplo. Intentas muy, muy duramente
que la gente llegue y conozca tu sitio. Pero en cuanto aterrizan por l lo
Enlaces abusivos
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
primero que encuentran es un enlace invitndolos a marcharse!. No

te parece una estupidez?.
Y luego estn esas pginas que no contienen nada ms que enlaces, que
enlazan con otras pginas que tienen ms enlaces que a su vez enlazan
con otras pginas que...odioso.
Entonces, qu debo hacer con los enlaces?
Organzalos al final de la pgina. Esto le dar a tus visitantes la
posibilidad de explorar tu sitio, y de experimentar con tus enlaces, una
vez hayan llegado al final de tu pgina, y no antes de que hayan
tenido siquiera la oportunidad de echarle un vistazo.
Volver a la introduccin
Por si no te has enterado de algo
Introduccin
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Introduccin
Actualizado el 15 de Mayo de 2000
Cada pgina tiene tres partes:

Qu es?, explica el elemento o el estilo objeto del
comentario.
Porqu est mal o bien?, explica eso, por qu est
mal o bien (no te quejars de falta de claridad).
Qu puedes hacer?, muestra la forma de pasar de
Guatepeor a Guatemala.
P. S.: Estas pginas no pretenden ser un manual de estilo,
ni mucho menos fijar unas normas de diseo. Slo
pretenden reflejar las experiencias (mas y de otras
personas) que se han aventurado por los procelosos
ocanos de la red. Estn hechas con la mejor voluntad y
con el mejor humor que he podido encontrar en el nterin.
Todas las crticas y sugerencias son bienvenidas. As que
anime;os.
Para empezar pincha en la flecha inferior, o haz una eleccin en el

men lateral.
Siguiente
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Ir a la primera pgina de Psimo
http://perso.wanadoo.es/catwalk/paginilla/p/..\intro.html (1 of 2)11/12/2003 03:43:42 p.m.
Introduccin
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
http://perso.wanadoo.es/catwalk/paginilla/p/..\intro.html (2 of 2)11/12/2003 03:43:42 p.m.
Animaciones GIF
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Animaciones GIF
Tienes que haberlas visto, Internet est llena de ellas. Bsicamente una
animacin GIF es una serie de imgenes empaquetadas en un archivo
nico. Cuando un navegador carga un archivo de este tipo, lee todas las
imgenes y luego las muestra una detrs de otra, con un retardo
determinado. S, es muy parecido a los dibujos animados.
Gif 1
Gif 2
El problema de utilizar este tipo de grficos es que tienden a dominar la

pgina, y desenfocan la atencin. An cuando ests leyendo sto con
atencin, apuesto a que los ojos se te van hacia las animaciones
superiores y te apartan de lo que ests leyendo.
Antes de incluir animaciones de este tipo, considera si realmente son
necesarias y mejoran el contenido, o si simplemente van a ser "ruido de
fondo" para tus visitantes.
Muchas animaciones son superfluas, pero otras veces son muy necesarias
para subrayar un punto importante. Por ejemplo, si quiero explicar lo que
hace el programa HyperVideo, ser mucho ms efectivo incluir una
animaci como la inferior derecha, que una simple imagen como la
inferior izquierda:
Gif 3
Gif 4
Si no tienes ni idea de lo que el programa HyperVideo hace, la imagen de

la izquierda no te aclarar mucho ms. Pero la imagen de la derecha s
Animaciones GIF
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
hace comprender a las claras que utiliza algn tipo de tecnologa en 3D.
Perctate de que la animacin se detiene unos momentos. Esto difumina
un poco la reproduccin continua, que puede llegar a ser muy molesta. El
trmino tcnico para esto es "Interframe delay" que, dicho en cristiano,
es simplemente "retardo" o "retraso". Aqu tienes dos ejemplos:
Gif 5
Gif 6
Estos iconos no seran los mismos sin el retardo. Utilizar retardos

diferentes entre cada una de las imgenes que componen el archivo Gif,
hace que parezca que se mueven aleatoriamente, cuando en realidad no
es as.
Asegrate tambin de que las animaciones encajan con el espritu de la
pgina. Estas animaciones pueden valer para esta pgina, pero no para la
de una firma de abogados, o para un sitio de soporte tcnico.
Para cerrar, algunos consejos:
No recargues la pgina con demasiadas animaciones. En mi

opinin esta pgina tiene demasiadas, pero como deban servir de
ejemplo, he hecho una excepcin.
Mantn tus animaciones bajas en Kilobytes. Deben seguir el
mismo principio que los dems grficos. Considera su necesidad,
calidad y tamao. Si es un grfico trivial no debe medir ms de
10K; si es uno fundamental debe ser mayor.
Si vas a usar una animacin que hayas visto en alguna pgina,
pide permiso para utilizarla. Muchas pginas tienen copyright y es
responsabilidad tuya respetarlo. Hay montones de pginas con
animaciones de dominio pblico que puedes utilizar sin problemas,
pero no asumas que todo lo que ves es de dominio pblico.
Siguiente
Galletas o cookies
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Galletas o cookies
Se ha hablado mucho de ellas, demasiado. Pero para empezar, mejor
explico qu demonios es una "cookie" o "galleta".
La mejor forma de describir una cookie es como un archivo de
configuracin de un sitio web. Hay montones de estos archivos en tu
disco duro. Estos archivos guardan informacin acerca de la forma en que
usas los programas, en resumen, de tus preferencias. Una cookie hace lo
mismo con un sitio web.
Por ejemplo, supongamos que te suscribes a un peridico on-line. Una
vez que rellenas la informacin correspondiente, y tienes tu nombre y tu
contrasea, puedes hacer que tu sistema "recuerde" ambas para la que la
prxima vez que entres no tengas que teclearlas. Esto se hace
almacenando una cookie en tu disco duro, en un directorio especial. Otro
ejemplo: se utilizan cookies para rastrear qu partes de un sitio web has
visitado y cules no.
No todos los sitios web tienen cookies. De hecho la mayora no utilizan
cookies.
Entonces, cal es el problema?
El problema es que mucha gente teme que esas cookies se utilicen para
almacenar informacin personal, nmeros de tarjetas de crdito, sus
nmeros de software...y que esa informacin pueda ser leda por otros
sitios web. Incluso hay gente que cree que pueden transmitir virus.
Todo esto es incorrecto. Las cookies slo pueden ser ledas por los sitios
que las han creado. Lo que quiere decir que slo contienen informacin
que ese sitio ya tiene, o que tu navegador ya le ha facilitado.
A diferencia de los archivos de incializacin, como tambin se llaman, que
pueden permanecer en tu disco duro, aunque desinstales el programa
que los cre; las cookies tienen fechas de caducidad (tal vez por eso se
llaman cookies, aunque otra teora sostiene que se llaman as porque en
EE.UU. una cookie es la ficha que te entregan en el guardarropa), y se
borran automticamente pasado un cierto perodo de tiempo. Adems si
tu navegador tiene cierta configuracin puede borrarlas automticamente
Galletas o cookies
Organizacin de
archivos.
Enlaces abusivos.
cuando terminas la sesin, e incluso puede que tu sistema no pueda

almacenar ms de un nmero determinado de cookies (300 es lo
habitual),
Tambin puedes
visitar
WebTutor
Adems una cookie no puede ser mayor de 4K.

As que olvida toda esa desinformacin acerca de las cookies. Son
completamente inofensivas.
Si quieres saber ms acerca de las cookies instaladas en tu ordenador,
estos programas gratutos las analizan o las borran (estn en ingls):
Para Macintosh: Cookie Cutter
Para Windows: Cookie o Cookie Cutter
Si an ests preocupado con ellas, las timas versiones de Netscape
Navigator y de Internet Explorer te permiten aceptarlas o rechazarlas.
Siguiente
Mitos o errores
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mitos y errores
Un buen diseo de un sitio es una cosa, escribir buen cdigo, otra
completamente diferente. Aqu veremos algunos errores comunes y mitos
que diferencian a un amateur de un profesional.
Error: Imagen de fondo con formato GIF y una sla lnea
Hay un diseo obvio a la hora de crear pginas: Una
columna a la izquierda y un rea ms grande a la derecha
(diseo muy recomendable ya que es muy flexible). Algo as:
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Muy a menudo el autor crea el fondo como una lnea de un

pixel de alto para mantener el tamao ajustado al mnimo.
Esto parece lo lgico...despus de todo una imagen de
fondo pequeita cargar muy rpido. As que crean una
imagen como la siguiente:
Imagen de fondo
Esto es un gran error. El ordenador tendr que repetir
esta imagen un montn de veces (incluso miles de veces)
en una simple pgina. P
Mitos o errores
Organizacin de
archivos.
Enlaces abusivos.
Tambin
puedes visitar
WebTutor
Sentencias META
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Sentencias META
Has buscado alguna vez tus propias pginas en un buscador?. Tal vez no
lo hayas hecho, o tal vez s y te hayas encontrado con que son difciles de
encontrar, o que tienen una descripcin muy pobre. No quieres tener
ms control acerca de cmo las ordena el buscador?
Por ejemplo, una pgina puede aparecer en un buscador de esta forma:
navegacin
Esto es especfico para Netscape
(pero estoy seguro de que los
consejos funcionarn tambin en
otros navegadores). Cuando ests
listo, simplemente...
Aunque el ttulo es muy descriptivo, el resto son las primeras lneas de la
pgina;. Peor an, es posible que tengas que introducir (teclendola)
en tu buscador la direccin de la pgina, lo que no es ni cmodo ni
prctico.
Pues bien, lo creas o no, tienes un perfecto control sobre todo sto. Este
control se obtiene con las sentencias META. Estas sentencias se colocan
dentro de las sentencias HEAD (que van al principio del documento
HTML), y le dicen a los motores de bsqueda cmo indexar tu pgina,
qu palabras clave utilizar y la descripcin que quieres que aparezca.
Las dos ms signigicativas son description (descripcin) y keywords
(palabras clave), y aparecen as en el cdigo HTML:
<META name="description" content="la
descripcin viene aqu">
<META name="keywords" content="palabra,
palabra,palabra..etc.">
Con las siguientes sentencias META,
Sentencias META
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
<META name="description" content="Odias

las itlicas? Las pginas cargan muy
lentas? Esta lista contiene trucos y
consejos para facilitarte la navegacin">
<META name="keywords" content="ayuda, WWW,
navegar, Netscape,">
la pgina de arriba aparecer as
navegacin
Odias las itlicas? Las pginas
cargan muy lentas? Esta lista
contiene trucos y consejos para
facilitarte la navegacin
Ms an, si alguien teclea "ayuda Netscape navegar" la pgina aparecer
en lo ms alto de la lista del buscador.
Escoge bien tus palabras clave y alcanzars a tu potencial audiencia
muchsimo ms rpido.
Y ten en cuenta que cada buscador ordena las pginas de forma
diferente. Si vas a darte de alta en varios, no est de ms que visites sus
pginas de ayuda y veas qu solicitan en cada pgina. Eso te dar pistas
acerca de lo que debes incluir en tus sentencias META.
Siguiente
Planeando tu sitio
Correo
Psimo
http://perso.wanadoo.es/catwalk/paginilla/e\7.html11/12/2003 03:55:13 p.m.
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Organizacin de
archivos
La organizacin de los archivos es muy importante a la hora de crear un
sitio web. Si no planificas cuidadosamente la localizacin de tus archivos
en tu sitio web, puedes acabar con un completo desmadre.
Esto funciona tanto como si hay gente diferente trabajando en un sitio
web, como si alguien intenta actualizarlo. Necesitas saber qu archivos
son tiles, cales no sirven ya, y para qu sirve cada uno.
Empecemos por arriba:
La mayora tiene sus sitios web en un nico directorio. Este directorio se
llama habitualmente "www", "public_html", o como es este caso "perso.
wanadoo.es/catwalk/WebTutor/paginilla". Ahora bien, esta serie de
pginas se compone de unos 30 documentos HTML y de otros 30
grficos. Si los pones todos juntos, acabars con un lista impresionante
donde buscar algo es realmente difcil.
En su lugar, divdelos en directorios diferentes. En este caso hay un
directorio para "Malo, Malo", que contiene sus documentos HTML y sus
grficos, otro directorio para "Mejorando", que contiene los suyos, y otro
directorio para "Consejos extra".
Si utilizas una misma imagen como fondo para todos los documentos, o
las flechas de enlaces son las mismas en todo el sitio, crea un directorio
llamado "comun", y acumula ah todos esos archivos.
Es decir, si el diseo de tu sitio tiene reas diferentes, crea directorios
diferentes para cada una de esas reas. Todo te ser ms fcil.
En segundo lugar, utiliza nombres de archivo descriptivos, cortos, sin
caracteres especiales, sin acentos, y a ser posible, siempre en minsculas.
Si usas un nombre de archivo como "Anim1.gif" (este nombre es el de un
archivo de stas pginas), puede que dentro de 6 meses no tengas ni
idea de qu archivo es. Dirs que yo s lo utilizo. Te replicar que yo s s
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
a qu se refiere, porque est en un directorio especfico y hay pocos

archivos grficos de ese tipo en ese directorio.
Los caracteres especiales y los acentos no se llevan bien con la mayora
de los sistemas, as que procura no incluirlos en los nombres de los
archivos. Y es importante que tengas presente que las maysculas y las
minsculas son an ms importantes. Para un sistema como Windows
"ARCHIVO.EXT" es exactamente igual que "archivo.ext" o que "ArChIvO.
eXt". Pero para un sistema UNIX (y la mayora de los servidores, si no
todos, estn basados en este sistema), son 3 archivos completamente
diferentes. Es por esto que a alguna gente todo le funciona
perfectamente en su disco duro, pero no le funciona nada una vez que ha
subido los archivos al servidor. Si tu imagen de fondo es "fondo.gif" y en
el cdigo HTML has puesto
<IMG SRC="FONDO.GIF"">
Windows no notar ninguna diferencia y cargar el archivo como si tal
cosa; pero el UNIX de tu servidor buscar "FONDO.GIF", y como no lo
encuentra sencillamente no cargar el fondo.
Siguiente
Enlaces abusivos
Correo
Psimo
Pop-up windows.
Banners.
Pginas de difcil
navegacin.
Contadores.
Enlaces abusivos
Sufre tu sitio de enlacelunizacin?. Que no sabes lo que es?. Yo casi
tampoco, me acabo de inventar el palabro, pero mira este ejemplo:
Malo, malo
Intermitencias.
Msica de fondo.
Imgenes de fondo
molestas.
Marcos o frames.
Mapas de imagen.
Imgenes de
construccin.
Marquesinas.
Alertas de
Javascript.
Mensajes en la
barra de estado.
Mejorando
Anchuras flexibles.
Grficos en
Thumbnails.
Sentencias de
altura y anchura.
Sentencias ALT.
Informacin de
contacto.
S nico!.
Plug-ins
opcionales..
Consejos extra
Velocidad contra
diseo.
JPG contra GIF.
Animaciones GIF.
Galletas o cookies.
Mitos y errores.
Sentencias META.
Planeando tu sitio.
Muchos enlaces
No te parece familiar?. Hay enlaces por todas partes. Las palabras

parecen esparcidas aleatoriamente entre los enlaces. Podrs decir "bien,
pero los enlaces son los que hacen que la Red sea la Red". Y tienes
razn...hasta cierto punto.
Poner muchos enlaces en un prrafo hace que sea ms difcil de leer,
porque rompe tu concentracin, y en ciertos casos, el visitante no
terminar de leer, porque ha encontrado un enlace que le parece ms
interesante y se ha ido a visitarlo.
Hay otra enlacelunizacin an peor. Es la siguiente:
Bienvenido a nuestro sitio

web!
Basado en WebTutor
Piensa un poco acerca de este ejemplo. Intentas muy, muy duramente
que la gente llegue y conozca tu sitio. Pero en cuanto aterrizan por l lo
Enlaces abusivos
Organizacin de
archivos.
Enlaces abusivos.
Tambin puedes
visitar
WebTutor
primero que encuentran es un enlace invitndolos a marcharse!. No

te parece una estupidez?.
Y luego estn esas pginas que no contienen nada ms que enlaces, que
enlazan con otras pginas que tienen ms enlaces que a su vez enlazan
con otras pginas que...odioso.
Entonces, qu debo hacer con los enlaces?
Organzalos al final de la pgina. Esto le dar a tus visitantes la
posibilidad de explorar tu sitio, y de experimentar con tus enlaces, una
vez hayan llegado al final de tu pgina, y no antes de que hayan
tenido siquiera la oportunidad de echarle un vistazo.
Volver a la introduccin
Por si no te has enterado de algo
Tutor de
Formularios
http://perso.wanadoo.es/catwalk/WebTutor/forms/index.html11/12/2003 04:31:57 p.m.

Introduccion Al Diseno Web Sitio Completo Muy Bueno

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Introduccion Al Diseno Web Sitio Completo Muy Bueno

Загружено:

Авторское право:

Доступные форматы

Introduccin

Cada pgina tiene tres partes:

Para empezar pincha en la flecha inferior, o haz una eleccin en el

Ir a la primera pgina de Psimo

http://perso.wanadoo.es/catwalk/paginilla/intro.html (1 of 2)11/12/2003 01:02:01 p.m.

http://perso.wanadoo.es/catwalk/paginilla/intro.html (2 of 2)11/12/2003 01:02:01 p.m.

Diseo Web Profesional

Est buscando a un profesional que le disee la

Tiene alguna duda?

Tiene algo pensado? *

Quin se ocupa del

Cunto cuesta disear una

Si prefiere el correo electrnico:

http://perso.wanadoo.es/catwalk/Inicio.html11/12/2003 01:02:26 p.m.

* No sabe qu puede poner en

Tienes poco dinero o eres un

Por qu necesita mi empresa una pgina Web?

Por qu necesita mi empresa una pgina Web?

La presencia de las empresas en Internet se est convirtiendo en una prioridad para

http://perso.wanadoo.es/catwalk/queries/page.html11/12/2003 01:02:43 p.m.

El diseo de una pgina Web (o de un Sitio completo) es un proceso complejo en el que

1. El promotor de la pgina, que aportar la idea bsica del proyecto.

http://perso.wanadoo.es/catwalk/queries/design.html11/12/2003 01:02:51 p.m.

Quin se ocupa del mantenimiento?

Quin se ocupa del mantenimiento?

El mantenimiento de un Sitio Web comprende varias tareas.

http://perso.wanadoo.es/catwalk/queries/work.html11/12/2003 01:03:04 p.m.

Cunto cuesta disear una pgina?

Cunto cuesta disear una pgina?

http://perso.wanadoo.es/catwalk/queries/cost.html11/12/2003 01:03:19 p.m.

No sabe qu puede poner en su pgina?

No sabe qu puede poner en su pgina?

Qu productos o servicios ofrece su empresa?

http://perso.wanadoo.es/catwalk/queries/idea.html11/12/2003 01:03:27 p.m.

Tienes poco dinero o eres un particular?

Tienes poco dinero o eres un particular?

No desesperes, todava tienes oportunidades.

WebTutor. WebTutor es un grupo de tutoriales

http://perso.wanadoo.es/catwalk/queries/poor.html11/12/2003 01:03:35 p.m.

As que quieres hacer una pgina Web

Tabla General de Contenidos

Para conseguir el smbolo del Euro () se utiliza el cdigo siguiente: &#128;

http://perso.wanadoo.es/catwalk/WebTutor/Index.html11/12/2003 01:03:51 p.m.

Diseo Web Profesional - As que quieres hacer una pgina web!

As que quieres hacer una

Hola. Mi nombre es Jose Angel

Diseo Web Profesional - As que quieres hacer una pgina web!

Si ests usando algn servicio en lnea como Amrica Online, MSN,

* PREGUNTA: Qu demonios en el Bloc de Notas y dnde puedo encontrarlo?

Diseo Web Profesional - As que quieres hacer una pgina web!

m. Por qu tendra que mentirte? ;-)

Basado en la idea original de Joe Barta

http://perso.wanadoo.es/catwalk/WebTutor/makapage/index.html (3 of 4)11/12/2003 01:04:50 p.m.

Diseo Web Profesional - As que quieres hacer una pgina web!

As que quieres hacer una pgina Web! - Introduccin

DISEO WEB PROFESIONAL

http://perso.wanadoo.es/catwalk/WebTutor/makapage/index.html (4 of 4)11/12/2003 01:04:50 p.m.

Diseo Web Profesional - Tutor de Tablas

Diseo Web Profesional - Tutor de Tablas

DISEO WEB PROFESIONAL

http://perso.wanadoo.es/catwalk/WebTutor/tables/index.html (2 of 2)11/12/2003 01:05:27 p.m.

Diseo Web Profesional - Tutor de Marcos (Frames)

DISEO WEB PROFESIONAL

http://perso.wanadoo.es/catwalk/WebTutor/frames/index.html (1 of 2)11/12/2003 01:06:36 p.m.

Para conseguir el smbolo del Euro () se utiliza el cdigo siguiente: