Professional Documents
Culture Documents
Autores:
Ingenieros:
JORGE EDUARDO SALAZAR ZIGA
ORLANDO PUENTES ANDRADE
Revisin y Modificacin
(Ingeniero. MAURICIO PERDOMO VARGAS)
La Plata Huila 10 de Diciembre de 2009
TITULO
1
PAG.
1.
UNIDAD
1.
GENERALIDADES
DEL
MODELAMIENTO Y LAS ARQUITECTURAS WEB
1.1
1.2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.2.8
INTRODUCCIN
CAPITULO 1: TEMAS CLAVES DEL DISEO DE SITIOS WEB
LECCIN 1: QUE ES EL DISEO DE SITIOS WEB
LECCIN 2: LA PIRMIDE DEL DISEO WEB
LECCIN 3: MODELOS PARA EL DESARROLLO WEB.
LECCIN 4: EVALUACIN DE UN SITIO WEB
LECCIN 5: RECOMENDACIONES FINALES
ACTIVIDADES
AUTOEVALUACIN
BIBLIOGRAFA
4
5
5
5
6
7
8
10
10
10
1.3
1.3.1
11
11
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.3.7
1.3.8
1.4
1.4.1
1.4.2
1.4.3
11
13
14
15
16
16
16
17
17
19
21
24
UNIDAD
2:
VNCULOS,
BSQUEDAS
TIPOGRAFA PARA EL DISEO WEB
35
2.1
2.2
INTRODUCCIN
CAPITULO 4: VNCULOS: TEXTO, BOTONES, CONOS Y
GRFICOS
LECCIN 16: VNCULOS EN EL DISEO WEB
LECCIN
17: BSQUEDA, DISEO Y MOTORES DE
BSQUEDA
LECCIN 18: COMO AJUSTARSE Y SER VISIBLE PARA LOS
MOTORES DE BSQUEDA
LECCIN 19: OTRAS TCNICAS DE PROMOCIN EN LNEA
LECCIN 20: EL PROCESO DE ADICIN DE UNA FACILIDAD
DE BSQUEDA
ACTIVIDADES
AUTOEVALUACIN
BIBLIOGRAFA
35
36
1.4.5
1.4.6
1.4.7
1.4.8.
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.2.6
2.2.7
2.2.8
2.3
2.3.1
2.3.2
2.3.3
2.3.4
2.3.5
2.3.6
2.3.7
2.3.8
27
33
33
34
36
41
46
53
55
58
58
59
60
60
64
65
67
69
71
71
72
LA
73
73
75
79
86
90
96
96
97
98
98
101
101
103
107
111
116
127
127
127
128
128
131
134
138
141
144
145
BIBLIOGRAFA
145
3.4
146
3.4.1
3.4.2
3.4.3
3.4.4
3.4.5
3.4.6
3.4.7
3.4.8
146
149
154
159
163
165
165
166
INTRODUCCIN
El curso de Diseo de sitios Web, componente electivo de los Programas de
Tecnologa e Ingeniera de Sistemas tiene como objetivo la fundamentacin de los
conceptos bsicos en el Diseo de sitios Web, de los estudiantes de estos
programas o programas afines y/o particulares, bajo la estrategia de educacin
abierta y a distancia.
El curso tiene 3 crditos acadmicos los cuales comprenden el estudio
independiente y el acompaamiento tutorial, con el propsito de:
Para el desarrollo del curso es importante el papel que juega los recursos
tecnolgicos como medio activo e interactivo, buscando la interlocucin durante
todo el proceso de dilogo docente-estudiante.
Los materiales impresos en papel, se han convertido en el principal soporte
para favorecer los procesos de aprendizaje autodirigido.
Sitios Web: propician el acercamiento al conocimiento, la interaccin y la
produccin de nuevas dinmicas educativas.
Sistemas de interactividades sincrnicas: permite la comunicacin a travs de
encuentros presenciales directos o de encuentros mediados (Salas de
conversacin, audioconferencias, videoconferencias, tutoras telefnicas,
foros)
DISEADORES
USUARIOS
FORMA
FUNCIN
Visual
Tecnologa
Modelo en cascada:
Modelo en espiral:
10
1.2.6 ACTIVIDADES.
Navegue en la red y recopile informacin adicional a los temas tratados y escriba
un ensayo, sobre el proceso de cambio de evolucin desde el papel hasta el
software.
Navegue en la red y recopile informacin adicional a los temas tratados y escriba
un ensayo, sobre el proceso el Diseo Web.
Consulte bibliografa de Ingeniera de Software y profundice sobre los modelos de
diseo de Software, concepte sobre los diseos las siguientes pginas:
www.sun.com,
www.microsoft.com,
www.sony.com,
www.bmw.com
y
www.corel.com.
1.2.7 AUTOEVALUACIN.
En qu consiste la etapa de implementacin del modelo de Cascada?
En qu consiste la etapa de construccin del modelo de Iterativo?
En qu consiste la etapa de anlisis del modelo de Espiral?
Elabore su propio manual de evaluacin de sitios Web, y escriba un ensayo de
argumentacin del mismo.
1.2.8 BIBLIOGRAFA.
Ana Moreno. Relaciones Externas. http://www.digitalvalley.com/. Texto
adaptado de Webmonkey.com
DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Editorial Addison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.
11
12
Un sitio no puede tener todo para todo el mundo, usted debe centrarse en un tipo
de audiencia y en un conjunto de tareas; intente encontrar una filosofa comn de
diseo dejando que la gente discuta sobre lo que no desean ver en el sitio.
Para refinar los objetivos es necesario que conozca al mximo los usuarios
potenciales del sitio de tal suerte que puede hacerse una mejor idea del diseo
que implementar. Para conocer los usuarios basta con unas preguntas sencillas
como por ejemplo:
Dnde viven?
Qu edad tienen?
Son hombres o mujeres?
Qu idioma hablan?
Qu conocimientos tcnicos poseen?
Qu clase de conexin a internet tienen?
Qu equipo utilizan?
Qu explorador utilizan?
Actividad.
En los siguientes renglones escriba 4 nuevas preguntas que considere necesarias:
1._______________________________________________________________
__?
2._______________________________________________________________
__?
3._______________________________________________________________
__?
4._______________________________________________________________
__?
A continuacin piense por qu se conectaran estos usuarios con su sitio:
Qu obtiene del sitio?
Qu desean ejecutar en el sitio?
Cundo visitarn el sitio?
Cunto tiempo por visita al sitio estaran?
Desde cul pgina abandonan el sitio?
Cundo volvern al sitio, s es que lo hacen?
En los siguientes renglones escriba 4 preguntas que considere:
1.______________________________________________________________?
13
2.______________________________________________________________?
3.______________________________________________________________?
4.______________________________________________________________?
1.3.3 LECCIN 8: PLANIFICACIN DEL SITIO.
A continuacin se indicar como sera una planificacin formal de un sitio:
Breve declaracin de objetivos. Se argumenta clara y concisamente el
propsito global del sitio y las medidas bsicas adoptadas para alcanzar el xito.
Anlisis detallado de los objetivos. Se analizarn cada uno de los objetivos del
sitio y se proporcionarn unos objetivos mensurables para verificar la utilidad del
sitio.
Anlisis de la audiencia. Se describen los perfiles de los usuarios que van a
visitar el sitio. La seccin describir tanto las caractersticas de la audiencia como
las tareas que esta audiencia trata de realizar en el sitio.
Anlisis de los escenarios de empleo. Se analizan los diversos escenarios de
tareas que realizarn los usuarios del sitio. Comience primero analizando cmo
llegar el usuario al sitio, y despus, contine la visita hasta su conclusin.
Requisitos del contenido. Esta seccin proporcionar una lista de todos los
textos, imgenes, y otros medios de comunicacin que se necesitan incluir en el
sitio. Se podra hacer una matriz o tabla en donde la primera columna contiene el
nombre del contenido, la segunda columna la descripcin, en la tercera columna el
tipo de contenido, en la cuarta columna el formato, en la siguiente columna si
existe o no existe dicho contenido y por ltimo el propietario o responsable de
dicho contenido.
Requisitos tcnicos. Se describe el tipo de tecnologa empleada como por
ejemplo si se desarrolla en HTML, Java, ASP, etc., adicionalmente que programas
complementarios se requerirn.
Requisitos visuales. Se indica a grandes rasgos cmo se relacionar el sitio con
cualquier material de marketing existente y definir las restricciones que tendrn
los usuarios para emplear grficos y otros elementos multimedia, tales como el
tamao de la pantalla, el nmero de colores, el ancho de banda, etc. En este
aparte debe quedar bien definido la fuente de los textos el color que primar en el
sitio.
14
15
los propios prototipos de diseo. Escuche a sus usuarios y vuelva a definir sus
diseos.
El sitio simulado. El siguiente paso es montar una primera versin en un
ambiente de pruebas integrado las pginas con o sin texto real, lo que se pretende
es ver la facilidad de navegacin, lo atractivo del diseo y la funcionalidad del sitio.
1.3.5 LECCIN 10: IMPLANTACIN DE LA VERSIN BETA DEL SITIO.
Cuando el prototipo del sitio es aceptado se realiza el despliegue o puesta en
funcionamiento en un entorno real con los verdaderos contenidos. En este punto
se realizan pruebas de aceptacin visual (con el cliente), pruebas funcionales,
revisin del contenido, pruebas de compatibilidad entre el sistema y el explorador,
pruebas de descargas y por ltimo el Visto bueno por parte del cliente.
Frame superior
Frame
izquierdo
Frame principal
Frame inferior
16
1.3.6 ACTIVIDADES.
Investigar en qu consiste el mtodo de Web and Hoc.
Investigar la estructura y aplicacin del modelo del mtodo Web clsico.
Basado en el tem PLANIFICACIN DE UN SITIO, construya la planificacin para
un sitio Web que se dedique a la venta de revistas a travs de Internet.
1.3.7 AUTOEVALUACIN.
En qu consiste el Plan de tejido para diseo de sitios Web?
Enuncie y explique tres reglas del Plan de Tejido?
Como se define un Sitio Transaccional.
Enumere cuales son las 5 reas de las facetas mayores del plan de tejido.
Cul es el enfoque de usuarios del plan de tejido?
Explique el concepto de agrupacin abstracta para sitios Web.
1.3.8 BIBLIOGRAFA
DISEO DE SITIOS WEB. Manual de referencia. Thomas a. Powell. McGraw Hill
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Editorial Addison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.
Artculos sobre diseo Web. http://www.Webdesignref.com/
17
FACILIDAD DE EMPLEO.
La facilidad de empleo de un sitio hace referencia a la manera cmo el sitio
permite la navegacin por l de manera intuitiva, sin recovecos, sin ambigedad,
con acceso directo a lo que el usuario necesita encontrar. La siguiente definicin
fue extrada de una norma ISO:
Se entiende por facilidad de empleo la facilidad con la que un grupo de usuarios
puede utilizar un sitio para conseguir objetivos determinados con efectividad,
eficacia y satisfaccin en un contexto concreto de empleo.
Otros autores de renombre como Jacob Nielsen (http://www.useit.com) toman
como indicadores de facilidad de empleo los siguientes aspectos:
Facilidad de aprendizaje
Eficacia en su uso
Fiabilidad en su uso
Hay algo muy cierto, un sitio que es de fcil manejo para un experto puede ser de
difcil manejo para un novato o viceversa, por lo cual no existe una verdad
absoluta al definir la expresin la facilidad de empleo; por otro lado si el sitio es
dedicado a un grupo selecto de personas con conocimientos e incluso experiencia
sobre el contenido del sitio lo ms seguro es que el sitio ganara puntos en cuanto
a la facilidad de empleo, adicionalmente si el grupo principal de usuarios (para
quienes fue diseado el sitio, recuerde que nunca deja de faltar el curioso que
llega al sitio) frecuenta repetidamente el sitio con toda seguridad que despus de 1
o 2 das la facilidad de empleo ser una frase que se la aadir al sitio.
18
LOS USUARIOS.
Como ya lo haba pensado los usuarios de la Web pueden ser todos los que
tengan acceso a internet desde cafeteras, hipermercados, salas especiales de
internet, universidades, colegios, sus propias casas, etc. Lo que tambin queda
claro es que en el momento en que se define el objetivo del sitio se est buscando
satisfacer la necesidad de un tipo de usuario preestablecido por lo cual se tendra
una cierta idea de antemano sobre las caractersticas de ste, su mundo y todo
aquello que se mencion anteriormente.
MEMORIA.
La memoria de los usuarios es un aspecto importante para los propietarios de los
sitios puesto que si el usuario recuerda un determinado sitio ya sea por su aspecto
grfico tan maravilloso o por su contenido tcnico tan profundo, o por la gran
cantidad de distintas utilidades y juegos que tiene para la descarga con toda
seguridad volver a ser visitado. A continuacin se describirn un conjunto de
sugerencias a tener en cuenta a la hora de disear con el objetivo de lograr ganar
importancia en sus usuarios mediante la memoria fotogrfica y/o visual:
Los usuarios tienen tendencia a maximizar las ganancias y a minimizar el trabajo.
El reconocimiento (memoria visual) resulta ms sencillo que la memorizacin, de
modo que no obligue a los usuarios a memorizar informacin.
No utilice el mismo color para resaltar los vnculos visitados de los que no lo han
sido todava, puesto que este proceder obligara a los usuarios a recordar dnde
han estado con anterioridad.
Puesto que es ms fcil recordar imgenes, elabore pginas que incluyan
importantes diferencias visuales con el resto de pginas.
Limite el nmero de opciones de importancia similar, tales como vnculos, a
grupos de entre 5 y 9 elementos.
Pngase por objetivo la memorizacin de slo tres elementos o pginas
secuenciales.
19
20
Actividad.
Haga la siguiente prueba:
Vaya a www.ego7.com tal vez uno de los mejores sitios interactivos que hay.
Navegue por 10 minutos.
Cierre el explorador.
Vuelva a www.ego7.com
Qu le interesara buscar ahora?
Navegue por 10 minutos
Cierre el explorador.
Vuelva a www.ego7.com
Qu le interesara buscar ahora?
Desde que comenz esta nueva sesin a qu no le prest atencin?
Siente la misma emocin que la percibida la primera vez?
Vuelva a navegar en www.ego7.com en 2 das, luego a los 3 das y as
sucesivamente.
Qu conclusin sac de este ejercicio?
CONVENIOS WEB.
A continuacin se mencionarn algunos de los acuerdos o conclusiones que se
derivan del acceso a cientos de sitios de gran importancia y que por lo tanto se
entienden dichas caractersticas como convenios en la Web:
5
3
21
Los elementos sobre los que se puede hacer clic son azules y se
encuentran subrayados
22
Sitios interactivos.
Saque sus propias
www.ego7.com
conclusiones
despus
de
visitar
www.lego.com
23
Actividad.
Actividad.
24
Actividad.
Ha escuchado
www.google.com
de
la
comunidad
Linux?
no,
averige
mediante
Actividad.
25
26
Este tipo de estructura se suele combinar con otro jerrquico o mixto que ayude a
navegar dentro de los subtemas principales, a los que se accede a travs del
frame lateral.
El sistema de mens consiste generalmente en un men situado en un frame
lateral, que nunca cambia, desde el que se accede a las diferentes secciones
principales del sitio, cuyas pginas inciales se cargan en el frame central, que
suele ser el de mayor tamao. Para acceder a las diferentes subsecciones y
27
EXPLORACIN.
No hay mucho que aclarar sobre esta actividad, solo que cuando se explora en la
Web se encuentra en un mundo completamente tangible y mucho menos en un
mundo en el que se puede dar una localizacin exacta frente al mundo real sino
ms bien frente a una gran estructura lgica de informacin llamada Internet.
Cuando se explora se tiene la certeza o tendencia sobre lo que se espera
encontrar y de alguna manera se intuye por donde se comienza la navegacin.
Afortunadamente existen muchas ayudas, como lo son las grandes empresas que
prestan su servicio gratuito mediante motores de bsqueda como Yahoo, Google,
Lycos, etc., aunque de manera intuitiva s un usuario no sabe algo de esto (que es
casi imposible puesto que la cultura informtica se est masificando a un ritmo
exponencial) seguramente en la direccin URL del explorador colocara
www.lo_que_busco.com (lo_que_busco es el nombre la palabra principal o
representativa de lo que se est buscando) y aparecer en el explorador algn tipo
de informacin relacionada o algn elemento que le indicar al usuario por dnde
empezar a buscar lo que l quiere y necesita.
28
REFERENCIA.
Las pginas de referencia son aquellas fciles de recordar, tienen un aspecto
estable pero diferente al de otras pginas Web, puede considerarse como pgina
de referencia, las pginas principales o las pginas de inicio.
Actividad.
29
Ubicacin en el sitio
2. Elementos de navegacin
primarios
Empresa
1. Elementos
de navegacin
primarios
rea de actualizacin y
presentacin de la
informacin
30
31
document.MM_pgW=innerWidth;
document.MM_pgH=innerHeight; onresize=MM_reloadPage;
}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<frameset rows="80,*" cols="*" frameborder="NO" border="0" framespacing="0">
<frame src="Home_Supr.asp" name="topFrame" scrolling="NO" noresize >
<frameset rows="*" cols="118,*" framespacing="0" frameborder="NO" border="0">
<frame src="Home_Izq.asp" name="leftFrame" scrolling="NO" noresize>
<frame src="Home_Ppal.asp" name="mainFrame">
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
Concntrese en el ltimo segmento de cdigo donde se invocan las otras pginas
para integrarlas en una sola con cierto tamao.
SUBVENTANAS.
Existen otro tipo de objetos a los que se puede recurrir para publicar informacin o
manipularla dentro de un entorno de ventanas, pero con la diferencia de no dejarle
al usuario los controles tradicionales de guardar, abrir, siguiente, etc. y todas
aquellas opciones que se encuentran en los browsers.
Supongamos ahora que al ejemplo Demo del anterior tema le aadimos la
funcionalidad que muestre una ventana flotante con algn mensaje, entonces se
tendra el siguiente nuevo cdigo del frame izquierdo:
<html>
<head> <title>Contenido</title>
<Script language="JavaScript">
<!-window.name = "mainwindow";
function spawn()
32
33
ACTIVIDADES.
AUTOEVALUACIN.
Cules son las principales acciones a tomar para mantener al usuario conectado
el sitio Web, en espera de una respuesta?
Cules son las principales caractersticas a implementar, para estimular al usuario,
a navegar por el Sitio Web.
Cules son las principales acciones a tomar para mantener al usuario conectado
el sitio Web, en espera de una respuesta?
Que se debe tener en cuenta en la construccin de un sitio Web, para que ste
permanezca en la memoria de los usuarios?
Qu diferencias existen entre los sitios estticos, dinmicos e interactivos?.
Elabore un cuadro comparativo.
Qu diferencias similitudes existen entre los sitios estticos, dinmicos e
interactivos?. Elabore un cuadro comparativo.
Cul es el tipo de estructura Web, ms aconsejable para el desarrollo de un Sitio
Web. Por qu?
Elabore un cuadro comparativo de ventajas y desventajas de las diferentes tipos
de estructuras Web.
34
Construya una pgina Web principal con un frame superior en donde se inserte un
logotipo y un hipervnculo que llame a una ventana flotante, en el frame inferior y
ms grande. Anexe contenido a gusto.
Construya una pgina Web en donde utilice texto referente a frames y construya
una pgina en donde haya texto referente a Subventanas (ventanas flotantes)
Construya una pgina Web en forma de ventana flotante en la que existan dos
hipervnculos para que se puedan invocar las dos pginas de los puntos
anteriores.
BIBLIOGRAFA.
35
OBJETIVO GENERAL.
Dar a conocer los diferentes tipos de elementos que pueden servir como vnculos
y otras herramientas que mejoran la navegacin y la visibilidad de nuestro sitio
Web en Internet as como la manera en que se utilizan, adicionalmente se dan
recomendaciones sobre su mantenimiento.
ESTRUCTURA TEMTICA.
El modelo bsico de vnculos web.
Temas de implantacin de vnculos.
Soporte de teclados para vnculos.
Mantenimiento de los vnculos.
Vnculos estticos.
Vnculos dinmicos.
Vnculos de texto.
Vnculos de botones.
Vnculos en imgenes
36
37
38
VNCULOS DE BOTONES.
Se pueden emplear grficos (bmp, Gif, o jpg) en la creacin de botones mediante
aplicativos como FireWorks, Flash, DreamWeaver, Xara, Swift, etc..., el gran
inconveniente es que al cargar mucha imgenes, el despliegue de la pgina html
en el cliente puede ser demorado; una de las maneras de agilizar el proceso de
carga es la de crear botones en HTML, aunque si bien el diseo es muy simple
puesto que se emplearan celdas o tablas sencillas, un relleno y un texto, a cambio
se obtendr una gran velocidad de despliegue en el browser.
En ciertas herramientas de desarrollo como las anteriormente mencionadas, ya
hay diseos prediseados de botones lo cual facilita el trabajo de los diseadores
y desarrolladores, pero de igual manera un diseador puede disear su propio
estilo de botones.
VNCULOS EN IMGENES.
Para ponerle ms interaccin a un documento y volverlo atractivo se pueden
emplear imgenes llamativas que permitan a los usuarios navegar a diferentes
lugares del sitio, a continuacin se escribe el cdigo fuente de un documento que
cuando se pasa el cursor sobre la imagen, sta cambia y s se hace clic sobre esta
ltima entonces lleva al usuario a otra pgina htm (a esto se le llama Rollover
Image):
<html>
<head>
<title>Imágenes</title>
<script language="JavaScript" type="text/JavaScript">
<!-function MM_preloadImages()
{
//v3.0
var d=document;
if(d.images)
{
if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}
}
}
39
function MM_swapImgRestore()
{
//v3.0
var i,x,a=document.MM_sr; for (i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src =
x.oSrc;
}
function MM_findObj(n, d)
{
//v4.01
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById)
x=d.getElementById(n);
return x;
}
function MM_swapImage()
{
//v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null)
{
document.MM_sr[j++]=x;
if(!x.oSrc)
x.oSrc=x.src;
x.src=a[i+2];
}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('freedom.png')">
40
ACTIVIDAD
Descargue el documento ch09.pdf encontrado en el sitio Web:
www.Webdesignref.com/chapters/ch09.htm donde encontrar desarrollados los
temas de esta sesin.
Bsqueda y diseo
Muchos usuarios encontraran que la exploracin tradicional es un mtodo poco
eficiente de encontrar lo que estn buscando. Muchas veces, un usuario sabe que
existe algo, y necesita encontrarlo dentro de un sitio. La bsqueda atrae a los
usuarios expertos, a los visitantes frecuentes y a los impacientes, que quieren
obtener algn resultado rpidamente. Una facilidad de bsqueda bien ejecutada
es una ventaja de primer orden que tiene un sitio sobre los medios de
comunicacin impresos, puesto que concede al usuario un control importante
sobre el contenido del sitio, permitindole filtrar exactamente lo que desea ver. Los
sitios Web ms grandes, especialmente aquellos con datos muy complejos, tienen
41
que ofrecer algn tipo de facilidad de bsqueda y pueden hacer de ella el mtodo
de exploracin central. Las facilidades de bsqueda, sin embargo, tienen que
disearse teniendo en cuenta a los usuarios. Tenga muy presente, antes de incluir
un sistema de bsqueda en un sitio, la forma en que los usuarios esperan que
funcione la bsqueda, el tipo de bsqueda que necesitan, el diseo de la pgina
de bsqueda, el sistema de ayuda y los listados de resultados de una bsqueda.
.
Cmo los Usuarios Investigan.
Definicin: Un directorio Web es un conjunto de vnculos de sitios y su informacin asociada, tal como descripciones o reseas, organizado y editado
por personas.
Definicin: Un motor de bsqueda es un recopilador y organizador
automtico de la informacin de los sitios al que los usuarios pueden dirigir
sus solicitudes.
Antes de comenzar con la teora de cmo funcionan y cmo utilizar los motores de
bsqueda, tanto locales como extremos, para mejorar el diseo del sitio, piense
primero como utiliza la gente las facilidades de bsqueda.
La gente busca por muy variadas razones. Un buen motivo es cuando quieren
encontrar algo que saben que existe. Un ejemplo de una bsqueda de un
elemento conocido es cuando un usuario est buscando un repuesto determinado,
como RBA-4456. En este caso, es bastante fcil para una persona localizar el
elemento en cuestin, suponiendo que la facilidad de bsqueda lo haya visto con
anterioridad especialmente, si el elemento es nico o casi nico. A veces, sin
embargo, el usuario no sabe si el elemento que est buscando existe o no; de
hecho, puede realizar la bsqueda para ver si ese elemento existe. Una solicitud
tal como Robot shops (talleres de robots) es una bsqueda ms general, en
la que el usuario busca un taller en el que pueda reparar su robot. Otras veces, el
usuario puede estar realizando una bsqueda exploratoria para comprobar la
magnitud o extensin de algo. Por ejemplo, puede hacerse una solicitud tal como
Robot Butler, no solamente para saber si existe, si no para saber la cantidad de
sitios que ofrecen informacin sobre los sirvientes metlicos. Afortunadamente, los
usuarios utilizan, generalmente, los motores de bsqueda para localizar elementos
conocidos, pero, de todas maneras, las bsquedas para comprobar la existencia
de algo y las bsquedas exploratorias tambin se emplean con frecuencia.
Independientemente del motivo de la bsqueda, los usuarios pasan por las cuatro
fases bsicas siguientes.
42
43
Segn los resultados, el usuario decide que hacer. Por ejemplo, si no hay
resultados, el usuario puede realizar una nueva bsqueda mediante otra
pregunta, o puede dejarlo. Si la bsqueda no produce los resultados
esperados, tambin pueden realizar una nueva bsqueda. Cuando la bsqueda
proporciona demasiados resultados, el usuario intentara mejorar el criterio de
bsqueda y puede que seleccione algunos de los documentos obtenidos como
resultado de la bsqueda para examinarlos. Aunque puede haber muchas
variaciones en los resultados, bsicamente, el usuario decide entre examinar
algunos de los resultados, volver a realizar o refinar la bsqueda o, simplemente, marcharse.
Es importante tener una visin global de esto y no olvidarlo cuando se disea
una facilidad de bsqueda. Ms adelante, en este captulo, ofreceremos
sugerencias tericas y prcticas para el diseo, para ocuparse de cada uno de
las fases por las que pasa el usuario durante el proceso de bsqueda. Sin
embargo, antes, le explicaremos, de forma somera, cmo funcionan los
motores de bsqueda.
Funcionamiento de los motores de bsqueda
44
Esto puede cambiar en el futuro, pero, por ahora, este contento, porque no
todo est incluido en estas listas. El maremagnun de informacin resultante
empeorara las cosas.
La mayora de los motores de bsqueda utilizan programas llamados spiders,
Dbots o gathers para recopilar pginas de la Web y catalogarlas. Utilizaremos
el trmino spider para referirnos a cualquier programa que se utilice para
recopilar pginas Web. Los spiders comienzan con un cierto nmero de
direcciones URL, propuestas por la gente que quiere estar en su lista, o
formando direcciones URL de los nombres de dominio listados en el registro de
nombre de dominio. Cuando el spider visita las diversas direcciones de la lista,
guarda las pginas, o partes de ellas, para analizarlas y busca los vnculos
para seguirlos. Por ejemplo, si el spider visita la direccin URL
http://www.democompany.com, podra encontrar vnculos que parten de esta
pgina y decidir seguirlos. No todos los motores de bsqueda listan las pginas
situadas muy en el interior del sitio, pero la mayora suelen seguir los vnculos
esencialmente desde las pginas que disponen de buenos vnculos o que
poseen mucho contenido.
Indexado de las pginas
45
46
2.2.3 LECCIN 18: COMO AJUSTARSE Y SER VISIBLE PARA LOS MOTORES
DE BSQUEDA
El primer paso para que un sitio pueda ser encontrado en la Web es que un
motor de bsqueda recopile sus pginas. La forma ms fcil de hacer esto es,
sencillamente, decir a los motores de bsqueda que su sitio existe. La mayora
de los motores de bsqueda le permitirn incluir una direccin URL para
indexarla. Por ejemplo, Lycos le permitir incluir un sitio para indexarlo
mediante un sencillo formulario (http://www.lycos.com/addasite.html). Por
supuesto que aadir su sitio a todos y cada uno de los motores de bsqueda
existentes puede ser una tarea tediosa, por lo que muchos fabricantes
(http://www.submit-it.com) ofrecen herramientas de desarrollo con un sistema
para ofrecerse en masa a numerosos motores de bsqueda. La mayora del
software de promocin de sitios, tal como WebPosition Gold
(http://www.webposi tion.com/). Tambin incluyen utilidades para realizar un
ofrecimiento automtico.
47
48
49
Advierta que la exclusin del robot estndar supone que los programas
recopiladores lo respetaran. Un malicioso spider, por supuesto, ignorara este
archivo, obligndole a configurar su servidor para bloquear determinadas
direcciones IP o agentes usuario, si alguien ha decidido atacar su sitio.
Control del Robot con <META>
50
51
Una de las mejores formas de lograr ser indexado es tener, realmente, las
palabras y las frases clave dentro del contenido de la pgina. Muchos motores
de bsqueda miraran el texto de la pgina, especialmente si se encuentra
52
53
54
55
56
57
Regla: Tanto d formulario para realizar una bsqueda como las pginas
de resultados tienen que compaginar con el aspecto del sitio.
El formulario para realizar una bsqueda debe ser adecuado para el tipo de
datos que se estn buscando. For ejemplo, si el usuario est buscando objetos
que estn coloreados, no debera proporcionar el formulario un modo de
especificar el color?
.
Tenga presente la regla de oro del diseo de una facilidad de bsqueda para
un sitio cuanto mejor conozcamos qu es lo que buscan los usuarios, mejor
podremos ayudarles a encontrarlo. Una forma de hacer esto es analizar lo
que la gente busca, observando las preguntas que hacen. Independientemente
de cmo averigemos lo que buscan los usuarios, tenemos que ayudarles a
concretar las cosas adecuadamente. For ejemplo, si estamos buscando
nombres, ayudemos a la gente introduciendo los apellidos o los nombres en
ventanas de texto individuales, en lugar de dejar que introduzcan los nombres
completos en una ventana de texto nica. Si se estn buscando nmeros de
partes dentro de un rango que va del 1 al 10.000, informe a la gente del rango,
limtela a ese rango y avsela si se salen de l. Un ToolTip utilizando el atributo
TITLE en HTML o un sencillo JavaScript son dos formas sencillas de informar
al usuario sobre los rangos, sin necesidad de escribirlos explcitamente en la
pantalla
58
2.2.6 ACTIVIDADES
Investigar que es y cul es la aplicacin del modelo avanzado para vinculacin
Web.
Investigar sobre la manera de implementar hipervnculos dinmicamente o en
general la implementacin de los vnculos de manera dinmica.
Investigue sobre el tipo de errores presentados en el browser cuando estos son
generados del lado del servidor Web y del lado del cliente.
Investigue sobre la manera como se podra realizar el manejo de errores en un
sitio.
2.2.7 AUTOEVALUACIN.
Defina claramente qu es un vnculo, en Internet, y enuncie los diferentes tipos
que existen.
Elabore un cuadro comparativo de ventajas y desventajas de los diferentes tipos
de vnculos que existen.
Qu diferencia hay entre un vnculo dinmico y un vnculo esttico.
Construya una pgina HTM, donde se aplique cada uno de los tipos de vnculos
expuestos en esta sesin.
Despus de leer cuidadosamente el texto referenciado, dirjase al apartado
Etiquetas <Meta> y escriba tres ejemplos (ayudndose de la etiqueta META), por
medio de los cuales Ud. ayudara a los robots de bsqueda a encontrar tres sitos
en donde se habla de diseo Web????. Ejemplo: <META NAME = Keywords
CONTENT=Diseo Web, Web Design, cmo disear un sitio Web>.
Segn la lectura realizada que parmetros de bsqueda posee el motor
encontrado en la siguiente direccin: http://hotbot.com/
Como trabajan los motores de bsqueda?
Cules son los principales aspectos a tener en cuenta en la adicin de una
facilidad de bsqueda?
Cul es la importancia del diseo de la interface en una pgina de bsqueda?
59
2.2.8 BIBLIOGRAFA.
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Editorial Addison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.
60
61
History
About PINT
Jobs
Corporate
Production
Products
Robots
Ballon Packs
PSVs
Contact
News
Help
La ms utilizada es la navegacin mixta correspondiente a la Estructura linealjerrquica que es una mezcla de las dos anteriores, en la que partiendo de una
pgina principal o de inicio se accede a diferentes pginas de entrada a secciones,
a partir de las cuales la navegacin es lineal.
62
63
sealizacin de su ubicacin en el entorno global del mapa general, por otro lado
el manejo de imgenes en el diseo del mapa debe ser previamente estudiado
segn se torne pesada o no la pgina en la cual se publicara ste.
Se sabe que la simplicidad va de la mano con la belleza por lo que se sugiere que
piense primero en un modelo sencillo y lo pruebe y s definitivamente no le da
buenos resultados entonces re evale y vuelva a disear el mapa del sitio, aunque
generalmente no sucede esto.
COMO MOSTRAR LAS OPCIONES DE DESTINO Y DE MBITO.
Para mostrar las opciones de destino y de mbito de un sitio muy complejo
(integrado por muchas pginas) se pueden utilizar mens desplegables o
controles de rbol expandido.
Otra forma de solucionar ste inconveniente en el mbito grfico es emplear
componentes que simulen la funcionalidad que se puede visualizar en un
explorador de directorios (explorador de Windows); recuerde que se debe tener
presente mostrar un detalle adecuado de la informacin y referenciar las pginas
principales o elementos de contenido ms relevante del sitio.
64
65
MRGENES DE PGINAS.
En consideracin del tamao de la pgina, los mrgenes deben ser controlados,
mediante un factor seguridad (marcos), para que no haya un deterioro de la
pgina en otros exploradores.
TIPOS DE PGINAS.
La clasificacin de las pginas vara dependiendo su funcin y los intereses de
sta, ya sea de contenido, exploracin o tareas. Dentro de la categora de las
pginas de exploracin, se debe tener en cuenta las entradas y salidas de stas,
es decir, si una pgina es de entrada o salida. Por eso un buen diseo Web se
debe tener claro el punto de entrada y el punto de salida, de aqu la gran
importancia que tiene el contenido y la exploracin de la pgina.
En las pginas de exploracin los planos de sitios y los ndices de sitio son de
gran importancia. Los primeros se utilizan para dar una visin estructural del sitio
Web, y los segundos, se utilizan una lista del contenido organizndolas
alfabticamente. Las pginas de contenido son subpginas que estn ms
enfocadas en la presentacin de ste, su estructura y presentacin variar
dependiendo de la informacin que haya en sta. Dentro de sta categora estn
las pginas FAQ (Frequently Asked Questions), las cules le ofrecen respuestas
concisas a preguntas de un documento especifico, las pginas de tareas le
permiten interactuar al usuario ya sea mediante un formulario o por medio de una
solicitud de base de datos.
66
PGINAS DE SALIDA.
Por concepto de explorador, todas las pginas son de salida, ya que por medio de
un botn de ste, la salida es inmediata. Sin embargo, cuando se encuentra en
una pgina en la cual haya informacin particular (transacciones, cuentas de
correo), es recomendable salir por el vinculo que la pgina proporciona, como
mtodo de seguridad de su informacin personal.
EJEMPLOS DE DISPOSICIN.
En la Web encontramos varios ejemplos de organizacin y distribucin de los
sitios, tales como: Pginas TLB (Top-Left-Bottom) o superior-izquierda-abajo
donde la parte superior est destinada para la etiqueta, marca de la empresa, el
lado izquierdo contiene elementos de exploracin (botones) y la parte inferior se
reserva para vnculos de texto, informacin suplementaria (autor, trminos legales,
informacin de contacto).
Las Pginas cabecera-pie proporcionan exploracin en la parte superior e inferior
del sitio, utiliza el contenido de la pgina en todo el ancho. Las Pginas de
ventana flotante se basan en la creacin de una regin (cuadro de texto) en el
centro de la pantalla para el contenido, proporcionando una regin fija para
disear. Las pginas estirables son aquellas que permiten alargar la pgina, sin
67
68
69
FORMATEO DE TABLAS.
El elemento <TABLE>, puede utilizarse para distribuir texto e imgenes en una
pgina. Las tablas se utilizan para presentar informacin en forma organizada. En
la estructura de una tabla intervienen elementos que varan segn su disposicin,
alineamiento, as hay elementos como <TH>, <TD>, y dependiendo a cules
caracteres se les vaya a aplicar estos elementos, titulo, elementos de la tabla de
datos, etc. Existen tres conjuntos bsicos de etiquetas: <TABLE></TABLE> da
inicio y fin a la tabla. <TR></TR> define las filas de la tabla y contiene celdas de
datos, <TD></TD> define las celdas de datos y muestra la informacin real.
CARACTERES ESPECIALES.
La insercin de caracteres especiales en una pgina Web, se basa en la
comprensin del manejo de las entidades carcter, como por ejemplo ©,
©, los cuales pertenecen al carcter de derechos de autor. Hay que tener
especial atencin cuando la fuente o el sistema que se est utilizando soporta ese
carcter, por ejemplo &trade, carcter designado para la marca registrada.
EFECTOS ESPECIALES PARA TEXTO.
Son muchos los efectos que se le pueden aplicar a los textos y muchas las
herramientas con que hacerlo. Con el siguiente ejemplo se crea una pgina html
con tratamiento de efectos especiales. Prubela en el explorador y saque sus
propias conclusiones.
<HTML>
<BODY>
<DIV NAME="Layer1" STYLE="position:absolute; z-index:1; width:180; height:50;
top:52; left:52; background:#0000cc">
</DIV>
<DIV NAME="Layer2" STYLE="position:absolute; z-index:2; width:180; height:50;
top:50; left:50; background:#99ffff">
</DIV>
<DIV NAME="Layer3" STYLE="position:absolute; z-index:3; top:66; left:57;
background:none; font-family:Arial; font-size:18px; font-weight:bold; color:#ffffff">
PGINA PRINCIPAL</DIV>
70
71
2.3.6 ACTIVIDADES.
Investigue y luego qu es men desplegable, control de rbol expandido y
componente ActiveX?
Consulte informacin sobre normatividad, estndares y temas al respecto en la
direccin www.w3c.org. Adems puede ampliar la informacin buscando en las
diferentes comunidades de desarrollo Web (www.desarrolloWeb.com).
Ample los conceptos de disposicin consultando en la direccin:
www.w3.org/StyleSheets/Core/
2.3.7 AUTOEVALUACIN.
Disee la estructura de un sitio Web sencillo dedicado a la comercializacin de
automviles por Internet y realice para el diseo los dos tipos de mapas existentes
(textual y grfico).
Enuncie y argumente tres beneficios importantes de la exploracin geogrfica
sobre sitios Web.
Profundice en el tema y enumere 5 medios diferentes que sirvan como sistemas
de ayuda de los sitios Web identificando cules son sus ventajas y desventajas.
Ingrese a las siguientes pginas: www.store.apple.com, www.google.com, y
www.nec.com. Determine el tipo de navegacin que poseen y realice los mapas
textual y grfico de cada una.
De las mismas pginas consultadas identifique que sistemas de ayuda existen
para el usuario.
Cree una tabla en HTML para mostrar informacin en un sitio Web en tres
columnas, incluyendo imgenes en el segundo prrafo de la primera columna,
tercer prrafo de la segunda columna y primer prrafo de la tercera columna.
Cul es la diferencia entre pgina de entrada y pgina de salida. Elabore un
cuadro comparativo de semejanzas y diferencias?
Cul es el tamao de pgina adecuado a utilizar en un sitio Web?
Cul es la verdadera importancia del Texto en los sitios Web?
72
2.3.8 BIBLIOGRAFA.
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Editorial Addison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.
Sitio de consulta: www.desarrolloWeb.com
Sitio de consulta: www.laWebdelprogramador.com
Sitio de consulta: www.macromedia.com
Sitio de consulta: www.asp-basico.com
73
COLORES EN LA WEB.
74
Como no todos los usuarios del sitio contarn con los mismos monitores o las
mismas condiciones visuales entonces se busca un conjunto de colores estndar
que garanticen la mejor aproximacin a la realidad que se quiere mostrar en los
sitios; algo si es bien claro cuando se hace referencia a este conjunto de colores
es porque con ellos se obtiene una amplia gama. la cual puede visualizarse de
manera muy similar en la mayora de los monitores (poli cromticos a 256 colores)
de los usuarios. Este tema acarrea conceptos como Profundidad de bits, Colores
hbridos, correccin gamma, etc.
IMGENES EN LA WEB.
Como ya se ha mencionado las imgenes son un elemento rico en informacin,
por otro lado es totalmente cierto cuando se dice una imagen vale ms que mil
palabras. Una de las regularidades que se encuentra en los diseos Web es que
las imgenes se almacenan en un mismo directorio, y ste es independiente de
los dems; otro aspecto importante es el nombre de los archivos de las imgenes,
hay personas que emplean codificacin alfanumrica para nombrar los archivos
pues seguramente han definido cierto orden y estndares para el nombre de
archivos, existen otras personas menos formales que nombran los archivos de las
imgenes con una palabra que corresponda a la imagen, pero tambin existen
otras personas que nombran sus archivos grficos cuyas dos o tres primeras
letras representan de alguna manera la correspondencia con la pgina en la cual
se publica dicha imagen y el resto de letras corresponden a algn tipo de
identificacin con la imagen.
ACTIVIDADES.
Descargue y lea con mucha atencin el documento pdf de la siguiente direccin
www.Webdesignref.com/chapters/ch13.htm.
COLOR
PROFUNDIDAD DE BITS
La profundidad de bits (BIT depth), llamada tambin profundidad de color, es el
nombre que se da al nmero de bits utilizados para describir el color en una
imagen o en una pantalla. La idea bsica es muy sencilla: cuantos ms bits se
utilicen para especificar el color, ms colores podrn definirse. En conclusin,
cuantos ms bits, ms colores. Con un BIT pueden especificarse dos colores,
generalmente blanco y negro. Cuando se utilizan dos bits para describir el color,
podemos definir cuatro colores; tres bits permiten definir ocho colores, etc.
Observe que el nmero de colores especificados por la profundidad de bits es 2n,
donde n es el nmero de bits.
75
76
Estos son solo unos cuantos de los colores disponibles. Utilizando tripletas RGB,
convertidos a su valor hexadecimal, es posible utilizar 256 variedades de rojo,
verde y azul, para crear colores alrededor de 16,4 millones de colores!
Existen, aproximadamente, otros 100 nombres de colores definidos por Netscape,
que son soportados, en su mayor parte, por las nuevas versiones de Explorer y de
Otros exploradores. Lo crea o no, se incluyen nombres de colores tan variados
como tomate, cardo y coral claro (tomato, thistle y lightcoral).
En lnea: La lista complete de los nombres de los colores, junto con sus
equivalentes RGB y hexadecimal, se encuentra en la red en
www.htmlref.com/Re ference/AppE/colorchart.htm.
Regla: Para tener la seguridad de que se reproduce el color adecuado, utilice
siempre un valor hexadecimal en lugar del nombre del color, excepto en el
caso de los colores bsicos, como blanco, negro, rojo, etc.
COLORES SEGUROS PARA EXPLORADORES
Que son los colores seguros y porque es importante utilizarlos? El primer paso
para contestar a esta pregunta es realizar otra: que es lo que controla los colores
que pueden representarse en una pantalla? Estos colores estn controlados por la
tarjeta de video y limitados por las capacidades del monitor que se utilice. El rango
de los colores puede variar de forma continua desde 256 (y menos) colores, en el
extremo ms desfavorable, hasta millones y color verdadero en los casos ms
favorables. Los sistemas ms antiguos solo soportan 16 colores. Para tener una
seguridad completa en todos los sistemas, el diseo Web debe tener en cuenta las
peores condiciones. Pero, como podemos predecir que eso va a pasar?
Realmente no podemos. Muchos de los sistemas ms modernos, disponibles
actualmente, disponen de todos los colores necesarios para representar todas sus
imgenes, pero debemos ir sobre seguro y garantizarnos que los que disponen
solamente de una capacidad de 256 colores no van a tener una terrible
experiencia.
Como podemos utilizar los colores seguros para explorador? Cuando cree sus
grficos, es importante tener la seguridad de que est utilizando la paleta de
colores correcta en su software para grficos. Los programas tales como Adobe
Photoshop e Illustrator vienen con muestras seguras para la Web que pueden
cargarse. En HTML, ser necesario convertir esos colores en su valor
hexadecimal.
Es muy duro de decir. Si usted tiene una audiencia especfica y sabe lo que
tienen, tal como en una Intranet de una empresa, en ese caso, sin ninguna duda,
disee para esas condiciones, pero, puesto que la mayora de las veces no se
77
sabe qu es lo que tienen los usuarios, deber tomar sus propias decisiones sobre
lo que desea hacer. Algunos usuarios sern dejados en la cuneta, pero ese es el
riesgo que tiene que asumir. Sin embargo, puesto que es posible realizar un
diseo excitante y de calidad dentro de los lmites de la paleta de colores seguros
para la Web, por que arriesgarse? Antes de utilizar un color no seguro, pregntese
si puede utilizar un color seguro y obtener resultados comparables.
Colores hbridos
En su cruzada por superar las limitaciones de 256 colores de la paleta segura para
la Web, los diseadores van encontrado una solucin sencilla, a la que
denominan, generalmente, colores hbridos. Aprovechndose de la pequeez de
los pxeles y la tendencia de la visin humana de rellenar los espacios en blanco
que presenta la informacin visual, los colores hbridos toman dos o ms colores
seguros para la Web y los combinan segn un determinado patrn
generalmente en tablero de ajedrez, pero algunas veces en franjas para
engaar al ojo y que vea un color diferente. En cierto modo, esta es una forma de
mezcla intencional y controlada que, si se hace adecuadamente, el usuario final no
podr notar.
Sugerencia: Para romper de forma segura la barrera de los 256 colores,
utilice patrones premezclados, tambin llamados colores hbridos.
HTML y los colores
Hay muchas maneras de poner los colores en HTML. Los elementos (etiquetas)
en los que poner el color en una opcin incluyen el color de fondo del cuerpo del
documento, el color predeterminado del texto del documento, los colores de los
vnculos, el color de las fuentes que se utilizan en el documento, y los colores de
fondo en las tablas. En las pginas siguientes, se presenta una visin general de
cmo utilizar los atributos de color dentro de estos elementos HTML.
CONFIGURACIN DE LOS COLORES DEL DOCUMENTO
Pueden definirse dos ajustes de color bsico para un documento utilizando el
elemento BODY:
<BODY BGCOLOR=#FFFFFF TEXT="# 0 0 0 0 0 0">
Esta instruccin proporcionar al documento un fondo blanco, y el color
predeterminado para el texto del documento ser negro. Adems, el elemento
78
BODY tiene tres atributos que definen los colores para tres estados diferentes de
los vnculos de texto.
<BODY LINK="blue" ALINK="red" VLINK="purple">
El atributo LINK define el color de los vnculos no visitados de un documento. Por
ejemplo, si se ha establecido el color de fondo como negro, podra ser til utilizar
color de vnculo claro en lugar del azul estndar. El atributo ALINK define el color
del vnculo cuando se est haciendo clic sobre l; frecuentemente es muy rpido
no para que pueda notarse, pero crea un efecto de destello si se desea. Para una
experiencia Web ms controlada, podra ser mejor establecer el atributo ALINK
igual; el atributo LINK, o igual que el siguiente, VLEVK. El atributo VLINK define el
color de un vnculo despus de haber sido visitado, que para muchos usuarios es
morado.
Muchos autores gustan poner el valor del atributo VLINK a rojo, lo que tiene
sentido, dada la interpretacin estndar de los colores. As, utilizando los ltimos
atributos, puede crearse, mediante el cdigo que se presenta aqu, una pgina
blanca, con el texto verde, los vnculos rojos y con los vnculos ya visitados de
color fucsia:
<BODY
BGCOLOR="#FFFFFF"
ALINK="#FFOOOO"
VLINK="#FFOOOO'
TEXT*"#008000
VLINK="#FFOOFF"
<BASEFONT>: no recomendado
Finalmente, el elemento <BASEFONT> soporta valores de color en Internet Explorer 4 y en las versiones posteriores. El cdigo:
<HTML>
<HEAD>
<TITLE>Sin ttulo</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<BASEFONT FACE="Arial" SIZE="4" COLOR="maroon">
<B>;Soy de color marr6n!</B>
</BODY>
</HTML>
Mostrar una fuente Arial en tamao 4 y en color marrn bajo estos exploradores.
Observe que el atributo SIZE es el nico valor soportado por Netscape para este
elemento. BASEFONT no es una forma especialmente buena de poner los valores
de una fuente de cualquier tipo en un documento, a menos que est seguro que
su sitio solamente va a explorarse con Internet Explorer.
79
80
En este cdigo, las celdas de los titulares (TH) de la primera fila tendrn un color
de fondo azul claro; las tres celdas (TD) en la segunda fila, tendrn un fondo
naranja, como se define en la fila entera (TR); las tres celdas, en la tercera fila,
tendrn diferentes colores de fondo, segn se define por el atributo BGCOLOR
para cada etiqueta <TD>, y las celdas de la ltima fila, que no tienen un color de
fondo definido para su fila, tendrn el color predeterminado de fondo, verde,
definido en la etiqueta <TABLE>.
Algunos elementos de agrupamiento asociados con tablas, como <THEAD> y
<TFOOT>, segn se definen en la especificacin de HTML 4.0, tambin aceptan
BGCOLOR, pero hasta ahora solamente IE 4 y las versiones superiores soportan
el uso de este atributo.
Para los elementos tabla, tambin se van definido otros atributos propietarios. Internet Explorer 4 y posteriores definen un atributo BORDERCOLOR para TABLE.
Bajo IE 4 y versiones posteriores, el cdigo:
<TABLE BORDERCOLOR="#FFOOOO" BORDER="1"> <TRxTD>. . . contenido.
. ,</TD></TR> </TABLE>
presentar una tabla con un borde rojo alrededor de toda la tabla y de las celdas.
Netscape 4 y las versiones posteriores presentaran s61o un borde rojo alrededor
de los cuatro lados de la tabla, pero el efecto es completamente distinto de la
representaci6n IE 4. Bajo IE 4 y versiones posteriores, puede aplicarse tambi6n
BORDERCOLOR a las filas (TR), titulares (TH) y celdas (CD).
IE 4 y sus versiones posteriores tambin ofrecen otros dos atributos de color para
el borde: BORDERCOLORDARK y BORDERCOLORLIGHT:
<TABLE BORDERCOLORDARK="#FFO 00 0" BORDERCOLORDARK="#0 0 0
OFF"
BORDER="4">
<TRxTD>. . .contenido. . .</TDx/TR> </TABLE>
Con IE 4 y versiones posteriores, presentara' un borde exterior de la tabla de dos
tonos, siendo el borde superior y el izquierdo de color azul, y el borde inferior y el
derecho de color rojo. No tendr ningn efecto en Netscape. Experimente con los
elementos y los atributos con distintos exploradores para comprender y controlar
las variaciones de representacin entre los distintos exploradores.
CONTRASTES ENTRE LOS PRIMEROS PLANOS Y LOS FONDOS
Los autores de pginas van de tener mucho cuidado cuando ponen los colores al
texto y al fondo, porque es necesario conservar la legibilidad. Los diseadores
tienen a veces la tentacin de utilizar colores claros sobre fondos claros o colores
oscuros sobre fondos oscuros. Por ejemplo, un texto gris sobre un fondo negro
podra tener un gran aspecto en su pantalla, pero si el valor gamma de la pantalla
de otra persona es muy diferente del que tiene usted establecido, ser ilegible. El
blanco y el negro siempre hacen una buena pareja, y el rojo tambin es til. La
81
82
83
Color verdadero.
Millones de colores.
65.536 colores (alto o miles de colores).
32.768 colores.
256 colores.
84
Realmente, no son las pantallas las que limitan el nmero de colores que pueden
ser representados, excepto en trminos de sus inherentes limitaciones por motivo
de coste, modelo, fabricante y uso para el que se destina. El nmero de colores
disponible se define en la tarjeta de video de la computadora. En nuestro
escenario inferior (256 colores), se utilizan 8 bits para representar colores.
(Recuerde: 2 a la octava potencia es 256). Para ms colores, el equipo deber
asignar ms memoria para procesar los colores. El color de 16 bits proporciona
ms de 65.000 colores, mientras que 24 bits proporciona, literalmente, millones de
colores. Esto podra ser excesivo, puesto que se ha demostrado que la persona
media no puede distinguir entre colores de 16 y de 24 bits. Por otro lado, es muy
fcil distinguir entre colores de 8 y de 16 bits.
Recuerde que un explorador Web es un programa; la parte de ese programa que
procesa imgenes GIF puede procesar ciertos colores de una manera, mientras
que la parte de ese programa que procesa HTML puede desplazar el mismo valor
de forma algo diferente cuando representa un color de fondo. Esto puede dar
como resultado una imagen que no se compagina con el fondo, aunque usted se
hay a esforzado enormemente para mantener ese tono de rojo en su valor
correcto. Puede encontrar ms informacin sobre este tema en
http://www.macromedia.com/go/13901 La naturaleza impredecible de las
interacciones entre las tarjetas de video y las pantallas se complica,
adicionalmente, con inconsistencias en la representacin de los mismos
exploradores.
TIPOS DE PANTALLAS: CRT FRENTE A LCD
La mayora de las pantallas de los PC de escritorio son tubos de rayos catdicos
(CRT), exactamente como la pantalla de un televisor. El interior de una pantalla
CRT est recubierta de miles de puntos de fsforo. Tres de esos puntos uno
rojo, uno verde y uno azul forman un pxel. Los puntos de fsforo brillan como
respuesta a las cargas emitidas por un can de electrones situado en la parte
posterior de la pantalla. Mediante un circuito convertidor de digital a analgico
(DAC), una pantalla cambia la informacin digital proveniente de la tarjeta de video
a una serial analgica que controla el can de electrones de la pantalla. Las
variaciones repentinas y errticas en la presentacin del color en una pantalla
pueden ser producidas por problemas en el DAC. Cuando aparezca una
importante distorsin del color, compruebe siempre la pantalla en otro PC antes de
culpar del problema a un componente equivocado del hardware.
Otro asunto importante con las pantallas CRT es el parpadeo. Esto ocurre cuando
los puntos de fsforo del interior de la pantalla, que han sido estimulados por el
haz de electrones, comienzan a perder su carga antes del refresco. Ajustando la
pantalla a una frecuencia de refresco superior a 70 Hz, solucionar este problema;
aunque el video Electronics Standards Association (VESA) define 85 Hz como el
estndar, este valor puede ser mayor del necesario. Ajustando la frecuencia de
refresco demasiado elevada puede producir daos en la pantalla. Existen diversos
85
tipos de pantallas CRT, tales como con rejilla de apertura o con mscara de
sombra, pero esto se escapa del mbito de este anlisis.
Las pantallas de cristal lquido LCD (Liquid Crystal Display), usadas durante
mucho tiempo en equipos portables, se estn utilizando cada vez con ms
frecuencia en las pantallas de sobremesa, debido a que la tecnologa ha mejorado
lo suficiente para hacer pantallas ms grandes y a precios razonables. Puesto que
las pantallas LCD no necesitan espacio para un can6n de electrones, son
planas y ocupan, de media, solamente un tercio del espacio que necesitan las
voluminosas pantallas CRT. Otro factor en su favor es la no existencia de emisin
de rayos catdicos por lo que son mejores para los ojos y unos requisitos de
potencia sensiblemente menores. El aumento del uso de las pantallas LCD tiene
varias implicaciones en trminos de utilizacin del color.
EL SIGNIFICADO DEL COLOR
Aparte de los aspectos fsicos de la percepcin del color, es fcil tener problemas
con un tema ms delicado: el significado del color. Los artistas, los filsofos, los
cientficos, los pensadores religiosos y otros muchos, han pensado durante siglos
sobre esta cuestin, pero ninguno ha llegado a la misma conclusin. El poeta
Goethe empleo una gran parte de su vida desarrollando una teora de los colores
la mayor parte de la cual ha sido consignada al cubo de la basura de la filosofa
por los pensadores modernos. Incluso dejando aparte esquemas de
color/concepto muy codificados, tales como los utilizados en el arte religioso
tibetano, o el cambio de colores en la liturgia de las iglesias occidentales, es difcil
aplicar un significado concrete a algn color especifico. En occidente, el negro
esta generalmente asociado con la muerte y con pensamientos sombros,
mientras que en Japn, el color asociado con la muerte es el blanco, un punto de
vista totalmente opuesto al occidental. Teniendo en cuenta que la Web es un
medio de comunicacin internacional, no es prctico dar por buenos los
significados de los colores aceptados en las diferentes culturas.
Incluso sin las complicaciones de las asociaciones de tipo cultural, las
convenciones de la Web tambin utilizan el color para transmitir mensajes. Al
principio de este captulo, se indica el significado de los colores de los
hipervnculos la gente est acostumbrada a hacer clic sobre el texto de color
azul para ir a alguna otra parte, y sabe que el texto morado significa que ya van
estado all. Cambiar el color de los hipervnculos es siempre una propuesta
cuestionable, especialmente si la audiencia del sitio no est formada por usuarios
avanzados pueden ver texto de color azul claro y no pensar en hacer clic sobre
l porque saben que los vnculos corrientes son de color azul mas fuerte. Pero
los mensajes pueden ser ms sutiles y ms difciles de captar. Reflexione sobre lo
que usted piensa cuando ve una pgina Web con el texto en rojo sobre un fondo
86
87
Para incluir una imagen en una pgina Web, utilice el elemento <IMG> y ponga el
atributo SRC del elemento igual a la direccin URL de la imagen. La direccin URL
puede ser una direccin URL absoluta o una direccin URL relativa.
La mejor solucin es utilizar una direccin URL relativa a una imagen que se
encuentra en el directorio de imgenes. Para incluir una imagen GIF, llamada
logo,gif, que se encuentra en ese directorio, utilice:
<IMG SRC="images/logo.gif">
Tambin podra usar una direccin URL absoluta para indicar una imagen sobre
otro servidor, por ejemplo:
<IMG SRC="http: / /www. democompany. com/ images/logo.gif" >
Aunque la utilizacin de direcciones URL absolutas para vincular una imagen
funciona, limitar la movilidad de su sitio Web. Imagine que intenta hacer una
copia en un CD-ROM. Utilizando vnculos relativos, ser una mejor solucin a
largo trmino. La utilizacin de una direccin URL externa no es aconsejable
porque las imgenes pueden moverse y dar lugar a que la pgina se cargue a un
ritmo desigual.
Regla: No puede utilizar la etiqueta <IMG> sin el atributo SRC.
Sugerencia: El texto ALT debera reforzar el significado de las imgenes
importantes; si una imagen no tiene un significado esencial, es mejor dejar
el valor ALT vaci en lugar de llenar la pgina con ToolTips innecesarios.
Regla: Use siempre los atributos HEIGHT y WIDTH con la etiqueta <IMG>.
Algunos diseadores utilizan mal los atributos HEIGHT y WIDTH para cambiar el
tamao de las imgenes con HTML. Es muy fcil detectar este error: si se
encogen o se expanden, decreciendo o aumentando los valores de los atributos,
las imgenes redimensionadas en HTML suelen tener un aspecto distorsionado.
Regla: No utilice nunca los atributos HEIGHT y WIDTH para cambiar de
tamao las imgenes con HTML. Si necesita una versin ms pequea de
una imagen, cree una versin menor de la imagen y utilice correctamente
HEIGHT y WIDTH.
Imgenes y bordes
Los exploradores suelen representar sin borde las imgenes cuyo atributo
BORDER no est definido, con una notable excepcin. Mientras que la imagen se
representar con un borde de color, generalmente azul. ste es el equivalente
88
grfico Web a subrayar los vnculos de texto. Actualmente, con las convenciones
de exploracin grfica bastante bien establecidas, esto es ms una molestia que
un favor. Preparar todas las imgenes para que tengan un borde cero es una
buena idea la mayora de las veces.
Regla: Asigne siempre el valor cero al atributo BORDER de una imagen, a
menos que tenga alguna razn especfica de diseo para hacer otra cosa.
Recuerde que las imgenes vinculadas sin atributo BORDER se
representaran, de forma predeterminada, con bordes coloreados.
Otros atributos <IMG>
Tipos de imagen
Estas imgenes pueden dividirse en dos clases bsicas: imgenes vectoriales e
imgenes de mapas de bits. La Web solamente soporta las imgenes de mapas
de bits, a menos que se empleen programas complementarios. Una imagen de
mapa de bits es, bsicamente, una coleccin de pxeles con valores de color
diferentes. Debido al gran nmero de pxeles y de informaci6n de color que hay en
una imagen, los mapas de bits pueden ser muy grandes. Una imagen de mapa de
bits sin comprimir, de 640 x 480 pxeles y con 24 bits de informacin de color,
ocupara, aproximadamente, 1 MB, lo que hace poco prctica la transmisin de
este tipo de imgenes por Internet.
Una solucin al problema del tamao es comprimir las imgenes. Hay, en general,
dos formas de comprimir las imgenes: sin prdida y con prdida. La compresin
sin prdida es aquella en que la imagen comprimida es idntica a la imagen sin
comprimir. Como deben preservarse todos los datos de la imagen, el grado de
compresin y el ahorro correspondiente son pequeos. La compresin con
perdida, por otro lado, no mantiene la imagen exactamente igual, pero puede
proporcionar un grado de compresin mucho mayor. Con la compresin con
perdida, la calidad de la imagen es el resultado de un compromiso para conseguir
menor nmero de bytes. Debido a que el ojo humano apenas puede notar esa
prdida de calidad, este compromiso puede ser aceptable.
Aunque el estndar HTML no dice nada sobre cules son los formatos de
imgenes que pueden utilizarse en la Web, los exploradores suelen soportar los
mismos tipos de imgenes. En la Web, los formatos de imagen ms importantes
son los GIF (Formato de Intercambio Grfico) y JPEG (Grupo Conjunto de
Expertos en Fotografa). Dada la histrica asociacin entre UNIX e Internet, los
formatos Image X XBM (X Bitmaps) y XPM (X Pixelmaps) son soportados a
menudo por los exploradores. Se aconseja a los diseadores que utilicen
nicamente imgenes GIF o JPEG, porque son las soportadas ms
corrientemente.
89
90
91
92
93
94
95
exploradores. Esto nos lleva a un espinoso asunto: hasta que punto desea tener
compatibilidad con exploradores anteriores? Con todos hasta Mosaico? Hay
tanta gente que utilice Netscape 2 como para que este tema sea una
preocupacin? Posiblemente no. Recuerde que, por duro que trabaje, nunca podr
crear un sitio Web al que puedan acceder el 100 por 100 de los usuarios Web, a
menos que presente solamente texto sin formatear y ningn grafico ni color.
96
RESUMEN
En general, este captulo ha examinado varios temas sobre el uso de colores e
imgenes en la Web. La reproduccin del color en la Web es difcil. Dadas las
distintas capacidades de soporte del color por el hardware de los usuarios finales,
a menudo, los diseadores se limitan a utilizar el conjunto de colores denominado
seguro para la Web. Sin embargo, la realidad es que incluso utilizando solamente
esos colores, los usuarios pueden interpretar el color de modo diferente o el
hardware puede que no represente el mismo. Los diseadores no deberan olvidar
los problemas de facilidad de uso relacionados con el color. Siempre deber
ponerse un contraste elevado. Las imgenes deberan utilizarse tambin en la
Web, a pesar de lo que dicen los cascarrabias de la facilidad de uso. Sin
imgenes, los sitios Web pueden ser muy aburridos. Sin embargo, las imgenes
deberan optimizarse adecuadamente, para que el tiempo de descarga no se
convierta en un problema. La eleccin del tipo de archivo correcto GIF o JPEG y
del ajuste del color y de la calidad es la mejor manera de reducir el tamao del
archivo de imagen. Los nuevos formatos de imagen, tales como PNG, prometen
una descarga mejorada y una mejor utilizacin de la imagen para la Web, pero,
hasta ahora, no se aconseja su uso, Cuando se utilizan imgenes, hay que tener
en cuenta siempre los numerosos detalles que implica su empleo. Por ejemplo, el
uso no adecuado de la transparencia y del antialiasing puede arruinar una imagen,
mientras que los mosaicos de fondo se estropean con facilidad cuando se ven las
uniones, o se han hecho demasiado pequeos o demasiado anchos. Los
diseadores, ciertamente, tienen sus manos llenas con el color y las imgenes en
la Web, y nada se ha dicho sobre hacer que algo tenga un aspecto agradable.
AUTOEVALUACIN.
Cules son las principales caractersticas de cada uno de los diferentes formatos
de imagen?.
Liste los principales atributos de la etiqueta <IMG> y resee su importancia en el
diseo de entornos Web.
Que es el formato RGB, y como se aplica en el diseo de entornos Web?
Como se maneja color bajo programacin HTML?
Cul es el propsito de la correccin gamma?
Que son los CRT y LCD?
97
BIBLIOGRAFA.
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Edititorial Adison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall.
98
99
ESTRUCTURA TEMTICA.
Sitios web y gui tradicionales.
Implicacin del diseo gui.
Ventanas.
Subventanas.
Formularios.
Campos para contrasea.
Mens desplegables.
Listas desplazables.
Botones pulsables.
Formularios usables.
Validacin del formulario.
Funciones gui avanzadas.
Problemas de la tecnologa web.
Exploradores.
Html.
Estructura de un documento html.
Parmetros de body.
Incluyendo texto.
Incluyendo imgenes.
Generando conexiones (links).
Css.
Estilos en la misma lnea: el atributo style.
Estilo incrustado.
Estilo incrustado.
Hojas de estilo externas vinculadas.
Hojas de estilo externas importadas.
Xml (otro lenguaje de etiquetas?).
Programacin del lado del servidor.
Programacin del lado del cliente.
Javascript.
Cookies.
Importancia de la entrega.
Protocolos de la web.
Tcp/ip, el protocolo de comunicaciones.
Smtp, el protocolo de internet para correo electrnico.
Pop3.
Imap 4.
Ftp (file transfer protocol).
Http (protocolo del transporte de hypertexto).
Servicios de la web.
Gopher.
Telnet.
Usando telnet en los distintos sistemas operativos.
100
Usenet newsgroup.
Videoconferencia.
Irc (internet relay chat).
Mensajera - correo electrnico e-mail.
La world wide web, su historia y concepto.
Transferencia de informacin en la www.
DNS.
Contratacin externa del servidor web.
Web hosting compartido.
Web hosting dedicado.
Registro de dominio.
Housing.
Seguridad en servidores web.
Administrar el servidor web.
101
Actividad.
Cree una pgina con el siguiente cdigo y saque sus conclusiones al respecto.
<!doctype html public "-//w3c//dtd html 4.0 transitional//EN">
<html>
102
<head>
<title> Abridor de ventanas </title>
</head>
<body>
<a href=http://www.democompany.com onClick = "newwindow = window.open
('http: // www.democompany.com ',' democompany ',' width=600, height = 500');
return false"> abrir ventana </A>
</body>
</html>
SUBVENTANAS
Son ventanas secundarias que le permiten al usuario realizar otras tareas.
Tambin se les denomina cuadros de dilogo, pueden contener una cantidad
cualquiera de informacin y tienen la posibilidad de personalizarse, generalmente
se crean mediante JavaScript.
Actividad.
Cree una pgina para cada una de las siguientes estructuras y diga a qu tipo de
subventana pertenecen.
<FORM>
<INPUT TYPE="button" VALUE="PLSEME"onclick="window.alert('alerta roja')">
</FORM>
<FORM>
<INPUT TYPE="button"
VALUE = "PLSEME" onclick = "window.confirm
('Realmente desea despegar en la nave?') ">
</FORM>
<FORM NAME="testform">
Respuesta: <INPUT TYPE="text" VALUE=""NAME="favcolor"SIZE="20">
<INPUT TYPE="button" VALUE = "Pregnteme" onclick = "document.testform.
favcolor.value = window.prompt('Desea viajar a Miami?',' ')">
</FORM>
103
Actividad.
A continuacin cree una casilla de verificacin y analice su contenido.
<FORM NAME="miform">
<B>opciones PSV</B><BR>
Destructores de asteroides:
104
105
Actividad.
Cree una nueva lista desplazable con 10 opciones de un tema diferente utilizando
un SIZE de 4.
BOTONES PULSABLES
Sirven para producir una accin significativa. Utilice la sintaxis <INPUT
TYPE=button VALUE=plseme> para su creacin.
<FORM>
<INPUT TYPE="BUTTON" VALUE="Diga hola"onclick="alert('Hola')">
<BR><INPUT TYPE = "BUTTON" VALUE = "cargar una pgina" onclick =
"window.location = 'http://www.democompany.com'">
</FORM>
En la Web se puede encontrar varios tipos de botones pulsables, alguno de ellos
son los botones de inicializacin, de envo y de imagen, consltelos y haga un
ejemplo para cada tipo de botn.
FORMULARIOS USABLES
La usabilidad de un formulario, reside en su disposicin y organizacin segn el
tema que se vaya a tratar. Para esto se sugiere aplicar campos con solo formato
HTML O CSS, hacer los formularios fciles de rellenar, etiquetar los campos
necesarios utilizando un asterisco o la palabra necesario, as le ahorrara al usuario
adivinar cules campos son los realmente necesarios.
Los formularios tabulados permiten un buen rendimiento de sta, utilizando la tecla
Tab y especificando el orden de los campos en los cules se realizara la accin
106
del tabulador. Para la ejecucin del la tecla Tab en los formularios, se utiliza el
atributo TABINDEX.
Actividad.
Desarrolle la siguiente estructura y analice en cules campos se ignora la accin
del tabulador y cul es su posicin dentro de ellos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Ejemplo de tabuladores</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TABINDEX="0" TYPE="Text" NAME="Field1" VALUE="tabulado despus
de definir los campos"><BR>
<INPUT
TABINDEX="1" TYPE="Text" NAME="Field2" <VALUE="primer
campo"><BR>
Verifique:
<INPUT TYPE="CHECKBOX" NAME="field3" TABINDEX="4"><BR>
<INPUT TABINDEX="-2" TYPE="Text" NAME="Field4" VALUE="ignorar este
campo"><BR>
<SELECT TABINDEX>="10" NAME="field5">
<option>opcin 1
<option>opcin 2
</SELECT><BR><BR>
<INPUT TABINDEX="3" TYPE="submit" VALUE="enviar">
</FORM>
</BODY>
</HTML>
VALIDACIN DEL FORMULARIO
Antes de enviar los formularios, deben comprobarse en nivel de contenido, para
que no haya ningn error. Para hacer esta comprobacin por parte del servidor, se
puede poner un campo de formulario escondido, que indique el estado de
validacin.
<INPUT TYPE>=HIDDEN NAME=validated VALUE=false>
Tambin se puede utilizar mascaras, o por medio de la indicacin de desplazarse
de un campo a otro. Disponga al usuario de la informacin correcta de cada
107
Actividad.
Visite el sitio www.browserwatch.com e investigue cuales son las ltimas
tendencias y noticias acerca de los browsers.
Busque a travs de varios navegadores, (Yahoo, Google, Altavista, y Lycos), un
tema especfico. Realice un cuadro comparativo de ventajas y desventajas de
cada uno de ellos.
108
HTML.
A continuacin se brindar una primera parte de un curso de HTML, pero se aclara
que el objetivo de esta sesin no es dar un curso para expertos sino una breve
introduccin:
HTML significa HyperText Markup Language. Es el lenguaje en que se escriben
los millones de documentos que hoy existen en el World Wide Web. Cuando
accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx,
IBrowse) los interpreta y los despliega.
Existen clientes grficos como Netscape, y otros como el Lynx que solo
despliegan texto. Es muy importante no olvidar esto cuando se disea una pgina
web.
Crear una buena pgina tiene dos aspectos; por un lado el conocimiento tcnico
para crear cdigo HTML correcto, por otro lado el claro diseo para presentar la
informacin.
Estructura de un documento HTML
Todas las pginas Web tienen la siguiente estructura:
<HTML>
<HEAD>
<TITLE>Primera pgina</TITLE>
</HEAD>
<BODY>
...
...
...
...
</BODY>
</HTML>
En la primer lnea encontramos el comando <HTML>. Esto le indica al cliente
(ejemplo: Netscape) que comienza un documento HTML. Luego viene <HEAD>, la
primer parte de un documento HTML. Dentro de HEAD puede ir el titulo <TITLE>
del documento (Netscape lo muestra en la barra superior de la ventana) y otros
comandos ms avanzados. Luego de HEAD viene <BODY>, que es donde se
coloca la informacin que se quiere mostrar.
109
BGCOLOR="#xxxxxx"
TEXT="#xxxxxx"
LINK="#xxxxxx"
VLINK="#xxxxxx"
En la ltima lnea del cdigo del ejemplo esta </HTML>. Esto le indica al cliente
(Netscape) que termin el documento. Noten que: <HEAD> tiene su
correspondiente llave de cierre </HEAD>, y <BODY> tiene </BODY>. Esto es
fundamental incluirlo en la pgina para tener un documento HTML correcto. Esta
estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida.
Envolviendo estas dos secciones va el <HTML> y </HTML>.
Incluyendo texto.
Si se carga el cdigo del primer ejemplo se ver que no aparece nada. (Solo el
titulo!)
Se tiene la estructura, pero ahora hace falta agregarle la informacin. Lo primero
que se debe tener claro es que al cliente web (Netscape) no le importa los
espacios, tabs, o fin de lneas que tenga un texto creado con el edit. Como
ejemplo, vea la siguiente pgina:
<HTML>
<HEAD>
<TITLE> primera pgina </TITLE>
</HEAD>
<BODY>
<H1>Bienvenido a mi pgina</H1>
Esta pgina se encuentra en <STRONG>Montevideo Uruguay</STRONG>,<BR>
en el <EM>servidor web</EM> de Compuservice.
110
<HR>
Hasta luego!
</BODY>
</HTML>
Este cdigo se ve as:
Bienvenido a mi pgina
Esta pgina se encuentra en Montevideo Uruguay, en el servidor web de
Compuservice
Hasta luego!
Aqu aparecen varios comandos nuevos. <H1> es para indicar el que texto es un
ttulo. Cuando esta pgina es cargada ese texto aparece en un tipo de letra ms
grande. <H1> es un comando 'contenedor', significa que necesita una llave de
cierre que es </H1>. Esta llave indica que hasta ah llega el ttulo, sino toda la
pgina aparecera con letras grandes.
<STRONG> le indica al cliente que muestre 'Montevideo, Uruguay' ms fuerte.
<EM> indica que le d nfasis. Generalmente todos los clientes muestran al texto
<STRONG> como bold, y <EM> como italic.
<BR> no es un comando contenedor. Cuando se coloca un <BR>, indica un corte
de lnea (CR). <HR> tampoco es contenedor, indica incluir un separador.
Comandos bsicos de formateo de texto
<H1> </H1>
<STRONG>
</STRONG>
<EM> </EM>
ms
con
<BR>
<HR>
Inserta un separador.
fuerte.
nfasis.
111
<P> </P>
WIDTH
112
BORDER
ALIGN
LOWSRC
113
pgina dentro del mismo directorio donde esta la primera pgina basta con incluir
su nombre. Por ejemplo, si en index.html y se quiere hacer una conexin a
servicios.html que est en el mismo directorio, solo basta con <A
HREF="servicios.html">texto</A>.
* Ejemplos tomados de HTML al instante - Parte #1. Versin: 1.1. Autor: Santiago
Baldano. Ultima actualizacin: 13 Oct 96
CSS.
Las hojas de estilo son la manera en que publican los profesionales - los fondos,
fuentes, los colores, y as sucesivamente - de una sola pgina a las colecciones
grandes de documentos. La mayora de publicaciones de software se apoyan en
las hojas de estilo, como lo hacen los procesadores de texto populares.
Actividad.
Investigue sobre la evolucin y definicin de las CSS en la direccin
http://www.w3.org/style .
A continuacin se extraen las ideas principales de uno de los manuales de
referencia ms usados a nivel mundial (Diseo de sitios web. Manual de
Referencia. Powell Thomas).
De manera simple una hoja de estilo es una regla que le dice al browser como
mostrar un tag HTML particular. Cada tag tiene un nmero de propiedades
asociadas, cuyos valores definen cmo el tag se da por el browser. Una regla
define un valor especfico para una o ms propiedades de un tag. Por ejemplo, la
mayora de los tags tienen la propiedad de color, el valor empleado para mostrar
dicho tag. Otras propiedades incluyen los atributos de la letra, el espacio de
interlineado, las mrgenes, los bordes y la presentacin.
Hay tres maneras de adjuntar un estilo a un tag: estilos en la misma lnea, estilo
incrustado y hojas de estilo externas.
Estilos en la misma lnea: el atributo style
El estilo en la misma lnea es la forma ms simple de adjuntar un estilo a un tag
slo incluya el atributo style con el tag en la lista de propiedades y sus valores. El
browser emplea esas propiedades de estilo y valores para brindar el contenido de
esa instancia del tag.
Por ejemplo, el estilo siguiente dice al navegador que despliegue el primer nivel
del texto del encabezado, Im so bluuuuoooo!, no solamente en el estilo del tag
114
<h1> del browser, sino tambin en color azul y en tipo de letra itlica (s el browser
acepta).
<h1 style=color: blue; font-style: italic>Im so bluuuuoooo!</h1>
Este tipo de propiedad de estilo es llamado estilo en la misma lnea porque
ocurre con el tag como aparece en el documento.
Estilo incrustado.
El verdadero poder de las hojas de estilo se da cuando se coloca una lista de
reglas de presentacin dentro de la cabecera de un documento HTML. Encerrados
en sus propios tags <style> y </style>, los estilos incrustado afectan todos los
mismos tags dentro del documento, excepto a aquellos tags que contengan un
atributo style in la misma lnea.
<style>
Funcin: define un estilo incrustado.
Atributos: DIR, LANG, MEDIA, TITLE y TYPE.
</style> tag de finalizacin, raramente omitido.
Contiene: estilos
Empleado en: contenido de cabecera.
El tag <style> debe aparecer dentro de la cabecera (<head>) de un documento.
Todo entre los tags <style> y </style> es considerado parte de las regals de estilo
que sern aplicadas al documento. Para ser estrictos, el contenido del tag <style>
no es HTML y no es algo fuera de las reglas normales de HTML.
Por ejemplo, un navegador estilo-consciente desplegar los volmenes de todos
los tags <h1> de color azul y cursiva en un documento que tiene la siguiente
definicin de estilo incrustado en su cabecera:
<head>
<title>All True Blue</title>
<style type="text/css">
<!-/* make all H1 headers blue */
H1 {color: blue; font-style: italic}
-->
</style>
</head>
<body>
<h1>I'm so bluuuuoooo!</h1>
...
<h1>I am ba-loooooo, tooooo!<h1>
115
116
@import url(estilos2.css);
BODY: {background: url(backgrounds/marble.gif)}
-->
</style>
</head>
Actividad.
Investigue los siguientes temas:
Cules son los orgenes de XML?
Cul es estado actual de XML?
Qu relacin hay entre e-commerce y XML?
Cmo se realiza el acceso a base de datos con XML?
3.2.5 LECCIN 35: OTRAS CONSIDERACIONES IMPORTANTES.
PROGRAMACIN DEL LADO DEL SERVIDOR.
La programacin del lado del servidor consiste en el empleo de ciertos scripts que
estn almacenados en el hosting y que cuando a travs del browser se realiza una
solicitud de un recurso (una pgina Web con una animacin en especial o el
procesamiento de la cierta informacin) y para poderlo recibir se deben llevar a
cabo varios procesos en el servidor el cual se ayuda de libreras dinmicas,
intrpretes, mquinas virtuales y en fin varios elementos que despus de realizar
117
Actividad.
Investigue que significa cada una de las siglas de los lenguajes de programacin
mencionados anteriormente.
PROGRAMACIN DEL LADO DEL CLIENTE.
Cuando se habla de programacin del lado del cliente lo que se quiere dar a
entender es el conjunto de comandos y/o scripts que son interpretados por el
browser (internet explorer, Netscape, opera, etc.), estos comandos o scripts son
codificados en lenguajes tales como VisualBasic Script y Java Script.
Repase y estudie los lenguajes anteriormente mencionados para posteriores
cursos.
JAVASCRIPT.
Javascript es un nuevo lenguaje escrito. Los 'scripts' de Javascript pueden ser
introducidos dentro de sus pginas de HTML. Con Javascript se puede dar
respuesta a eventos iniciados por el usuario (el observador las pginas, por
ejemplo), eventos tales como la entrada de una forma o algn enlace. Esto sucede
sin ningn tipo de transmisin. De tal forma que cuando un usuario escribe algo en
una forma, no es necesario que sea transmitido hacia el servidor, verificado y
devuelto. Las entradas son verificadas por la aplicacin cliente y pueden ser
transmitidas despus de esto, Tambin se puede pensar de programa que se
ejecuta en la versin cliente.
Aunque JavaScript se parece a Java, no es lo mismo! Java es un lenguaje de
programacin mucho ms complejo que JavaScript. JavaScript est hecho para
ser un lenguaje bastante fcil de entender. A los autores del JavaScript no les
debi haber importado mucho el tema de la programacin. Por esta razn, algunos
elementos de Java no son aceptados en JavaScript.
Ahora se mostrarn algunos pequeos scripts, de modo que se pueda aprender
de qu modo estos son implementados dentro de los documentos de HTML y
mostrar con que posibilidades se cuenta en este nuevo lenguaje script. Se
comenzar con un script muy pequeo el cual solo mostrar texto dentro de un
documento HTML.
118
<html>
<head>
Mi primer JavaScript!
</head>
<body>
<br>
Este es documento normal en HTML.
<br>
<script language="LiveScript">
document.write("Esto es JavaScript!")
</script>
<br>
Otra vez en HTML.
</body>
</html>
Si est usando Netscape 2.0 por el momento, tendr la posibilidad de ver este
script trabajando. Si su browsers no es compatible con JavaScript entonces este
escrito se debe ver un poco extrao...
Este es un documento normal en HTML.
Esto es JavaScript!
Otra vez en HTML.
Las funciones son invocadas por eventos iniciados por el usuario. Por esto parece
razonable mantenerlas dentro de los tags <head>. Ellos son cargados antes de
que el usuario pueda hacer algo que llame una funcin. Los scripts pueden ser
ubicados como comentario para asegurarse que los browsers obsoletos no
muestren el script por si solos.
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("Hola!");
}
</script>
</head>
<body>
<form>
<input type = "button" name = "Button1" value = "Presineme" onclick =
"pushbutton()">
</form>
</body>
</html>
119
Este script crear un botn que cuando es presionado muestra una ventana
diciendo 'Hola!'. No es esto grandioso? Adems, qu est sucediendo en este
script? Primero la funcin se carga y es guardada en memoria. Entonces un botn
es hecho con el tag normal <form> (HTML). Hay algo completamente nuevo con el
tag <input>. All puede ver 'onclick'. Esto le dice al browser qu funcin tiene que
invocar cuando este botn es presionado (lgicamente si el browser es compatible
con JavaScript). La funcin 'pushbutton()' se aclara en el encabezado (<head>).
Cuando el botn es presionado esta funcin se ejecuta. Existe otra cosa nueva en
este script el mtodo 'alert'. Esto mtodo ya es declarado en JavaScript- solo se
necesita invocarlo. Existen muchos mtodos diferentes los cuales se pueden
invocar. Aqu mostrar algunos. Puede encontrar una descripcin completa en el
home page de Netscape. Creo que esa lista se ir volviendo ms y ms extensa
en el futuro. Pero por el momento hay algunas cosas divertidas que se pueden
hacer con los mtodos dados.
Ahora se ver como se puede leer algo que un usuario haya insertado en una
forma.
<html>
<head>
<script language="LiveScript">
<!-- esconde el script de viejos browsers
function getname(str) {
alert("Hola "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Por favor, escriba su nombre:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Ahora puede probar este script de nuevo:
Por favor escriba su nombre:
Principio del formulario
Final del formulario
Otra vez se tienen nuevos elementos implementados en este script. Primero habr
notado el comentario en el script. De esta forma se puede esconder el script de los
120
browsers obsoletos que no ejecutan scripts. Usted debe seguir el orden mostrado!
El principio del comentario debe estar justo despus del primer tag <script>. El
comentario termina justo antes del <script> tag. En este documento HTML usted
tiene una forma donde el usuario puede escribir su nombre. El 'onBlur' en el tag
<input> le dice al programa cliente que funcin es la que tiene que invocar cuando
algo se introduce en esta forma o casilla. La funcin 'getname(str)' ser invocada
cuando se deja en blanco esta forma ('leave') o presiona 'enter' sin haber escrito
nada. La funcin tomar el 'string' que escribi a travs del comando
'getname(this.value)'. 'This.value' significa el valor que escribi en la forma.
Ahora se implementar la funcin de la fecha dentro del script. De modo que si
hace una pgina en HTML, puede hacer que el usuario vea la ltima modificacin
del documento sin que se tenga que escribir la fecha.
Simplemente se escribe un programa en script. Cuando se hagan pequeos
cambios en el futuro, la fecha cambia automticamente.
<html>
<body>
Esta es una simple pgina en HTML.
<br>
Ultima modificacin:
<script language="LiveScript">
<!-- oculta el script de los browsers obsoletos
document.write(document.lastModified)
// termina de esconder el contenido -->
</script>
</body>
</html>
La siguiente propiedad de JavaScript se puede observar moviendo el puntero del
mouse sobre este link. Tan solo observe la barra de estado en la parte baja del
browser. Esto se puede combinar muy bien con funciones de JavaScript. Si mueve
el mouse sobre este link una ventana se abrir. Ahora le mostrar la fuente que
produce estos dos efectos:
<a href="tpage.htm" onMouseOver="window.status='Otro link estpido...'; return
true">
La nica cosa por hacer es agregar el mtodo onMouseOver en su tag <a>. El
window.status permite escribir cosas en la barra de estado del browser. Como
puede ver, tiene que alternar con las comillas. No puede usar " todo el tiempo,
porque de otra manera JavaScript no es capaz de identificar el string que quiere
imprimir en la barra de estado. Despus del string se tiene que escribir ;return true.
121
Bueno, esto no es realmente JavaScript. Usted puede pensar que otros browsers
interpretan esto a travs del estilo HTML. El segundo ejemplo usa JavaScript
llamando la funcin 'alert'. Aqu est la fuente:
<html>
<head>
<script language="LiveScript">
<!-- Escondemos la funcion
function hello() {
alert("Hola!");
}
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
Esto es completamente fcil. Usa el mtodo 'onMouseOver' y la funcin hello() es
invocada cuando este evento ocurre. Ahora se ver un ejemplo usando el mtodo
de la fecha y la hora, ya vio la propiedad lastModified trabajando.
Ahora se va a escribir la hora local al documento. Este mtodo utiliza la fecha y la
hora de su mquina, si la fecha de su mquina es 5/17/1983 esta ser la fecha
que ver. Estos datos no son conservados por Internet o algo parecido.
La hora actual es: 22:35
La fecha es: 9/29/2003
Aqu est la fuente:
<script language="LiveScript">
<!-- Escondiendo
today = new Date()
document.write("La hora actual es: ",today.getHours(),":",today.getMinutes())
document.write(" La fecha es: ", today.getMonth() + 1, "/", today.getDate(), "/",
today.getYear());
// se termina de esconder -->
</script>
Primero se crea una variable de tiempo. Esto es hecho por today=new Date().
Cuando no se especifica cierta fecha y hora el browser usa la hora local y la pone
en la variable 'today'. Note que no se tiene que aclarar la variable 'today' en
ninguna parte. Esta es una diferencia entre Java y otros lenguajes de
programacin donde se tiene que especificar la que escribe antes de usarlo. Se ha
122
creado un objeto que mantiene la fecha y hora local. Ahora se puede simplemente
escribir su contenido en el documento, tiene que escribir today antes de cada
mtodo get... De otra forma el browser no sabra a que objeto referirse. El mtodo
getMonth manda un nmero entre 0 y 11. 0 para enero y 11 para diciembre. Por
esto se tiene que sumar 1 al nmero enviado para tener el mes correcto.
Algo interesante que se puede pensar es crear una fecha, por ejemplo la fecha
cuando se elabor el documento, as se podra calcular cuntos das despus
alguien est leyendo su documento. Y si eso es 10 das despus le puede decir:
Hey, esto est muy viejo, no lo lea!
Para esto necesitar la fecha de hoy como se muestra en el ejemplo y adems la
fecha de creacin. Se le puede poner una fecha de publicacin al documento para
que se publique automticamente. Sera as:
docStarted= new Date(96,0,13)
Se tiene que especificar primero el ao, luego el mes (recuerde que el mes
disminuye en uno) y luego el da. Tambin se puede especificar as:
docStarted= new Date(96,0,13,10,50,0)
Los primeros nmeros siguen siendo la fecha. Estn seguidos por la hora, minutos
y segundos. JavaScript no tiene una entrada real para el tiempo. Pero todas
formas se puede trabajar bastante bien con esto. La forma en que esto funciona
es que las fechas son representadas por nmeros de milisegundos desde
1/1/1970 0:0h. Esto suena un poco complicado pero es un mtodo comn para
representar fechas en los computadores. Pero no debe molestarse acerca de esto,
solo debe prestar atencin a las funciones y ver que despus de todo no es tan
difcil.
Hay una muy buena funcin donde se puede calcular un nmero al azar. Esto
pronto ser implementado por JavaScript. Pero por el momento se debe trabajar
con algunos trucos. Bueno, realmente no es un truco. Esta es una forma que la
mayora de compiladores usan para calcular nmeros al azar. Si se calculan. Se
toma la hora de su mquina y se manipula de alguna manera. Talvez la versin
final de JavaScript usar este mtodo (o alguno parecido) de alguna forma. Como
le haba dicho antes l tiempo es un nmero bastante grande. Se puede usar y
hacer clculos con l. Por ejemplo se le puede calcular el seno y luego el valor
absoluto. Esto dar un nmero entre 0 y 1. Adems como el tiempo cambia cada
milisegundo no correr el riesgo de recibir el mismo nmero dos veces (cuando se
calcula inmediatamente uno despus del otro). Cuando quiera calcular muchos
nmeros al azar en un corto intervalo de tiempo no debe usar la funcin 'sin()'
sola. As obtendra siempre valores ciertamente cercanos y esto no es un nmero
al azar. Pero si lo quiere hacer en verdad y cada 20 segundos, esta es una
estupenda funcin para lograrlo.
123
124
}
</script>
</head>
<body>
<form>
<input type="button" name="Boton1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
Como siempre, se puede ver el botn que invoca la funcin. La funcin WinOpen()
crea una nueva ventana invocando el mtodo open. Las primeras comillas
contienen la URL de la pgina. Aqu puede poner la direccin del documento que
se quiere cargar. Si se deja vaco ninguna pgina se carga, pero puede escribir en
ella con JavaScript! Las siguientes comillas especifican el nombre de la ventana,
aqu puede escribir lo que quiera, esto no tiene ningn efecto en nuestros
ejemplos por ahora. Pero recibir un mensaje de error cuando escriba Display
Window (con un espacio entre ambas palabras - Netscape le dice algo diferente
en su informacin - pero estuve sentado media hora y no logr encontrar ningn
error!). Las comillas siguientes especifican las propiedades de la ventana. Esto es
realmente interesante! se puede decidir si quiere barras de herramientas, barras
de desplazamiento... Si escribe toolbar=yes entonces tendr barra de
herramientas en su ventana. Algunas propiedades que puede cambiar aparecen
abajo. Se puede especificar cada cosa posible, solo tiene que escribirse como le
mostr y sin espacios entre ellas. Aqu est lo que se le puede cambiar a la
pgina:
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixeles
height=pixeles
Para pixeles tiene que escribir el nmero de pixeles. De esta forma se le puede
decir al browser que tan grande debe ser la ventana.
Despus de abrir la ventana y llamar su msg (aparece al frente del mtodo 'open'),
se puede escribir en ella. Se puede escribir cdigo HTML! esta es una cosa
fabulosa. Se puede construir un documento HTML usando la entrada de una
forma dada en el documento anterior. Se puede hacer una pgina donde un
125
Actividades.
Despus de esta introduccin a JavaScript, repase cada uno de los ejercicios y
desarrolle otros tres con base en los descritos.
Investigue y profundice sobre el lenguaje JavaScript.
COOKIE.
Cuando se navega por la red el usuario visita muchas pginas, algunas bastante
complicadas que implementan distintos servicios de Internet. Estas pginas tienen
que guardar informacin caracterstica acerca del usuario. Para ello se tienen
mecanismos en el servidor como bases de datos u otro tipo de contenedores, pero
hay un mecanismo mucho ms interesante de guardar esa informacin que los
propios recursos del servidor, que es el la propia mquina del usuario.
En los computadores se almacenan muchos datos que necesitan conocer las
pginas web cada vez que se accede a la pgina, estas pequeas informaciones
son las cookies, definidos como: estados de variables que se conservan de una
visita a otra en el ordenador del cliente. A manera de proteccin, de la salud de la
mquina del usuario los cookies estn muy restringidos. Por ejemplo: slo se
puede almacenar textos, nunca programas o imgenes, los textos no pueden
ocupar mucho espacio (1k), y tienen fecha de caducidad.
Un ejemplo de cookies podra ser un contador de las veces que accede un usuario
a una pgina. Podramos poner una cookie en el ordenador del cliente donde
tendramos una variable que lleva la cuenta de las veces que ha accedido a la
pgina y cada vez que se accede se incrementa en uno. La utilidad principal de las
cookies es la de poder identificar al navegador una vez ste visita el sitio por
segunda vez y as, en funcin del perfil del cliente dado en su primera visita, el
sitio puede adaptarse dinmicamente a sus preferencias (lengua utilizada, colores
de pantalla, formularios rellenados total o parcialmente, redireccin a
determinadas pginas...).
Una cookie es un conjunto de informacin integrada por varios elementos que se
describen a continuacin:
Elemento
Contenido
nombre
Nombre de la cookie
valor
126
fecha expiracin
path
dominio
segura
127
ACTIVIDADES.
AUTOEVALUACIN
BIBLIOGRAFA.
128
IMPORTANCIA DE LA ENTREGA.
Los diseadores deben ser muy cautelosos en brindarle a la entrega de un sitio la
importancia que se merece, piense en la manera como los mecnicos han
diseado un automvil con excelentes piezas de diseo y funcionamiento pero
cuando usted vaya a comprar su auto se lo entreguen con la tapicera sucia y el
carro por fuera con barro y en fin mal presentado, muy seguramente usted no
recibe ese carro porque a pesar de tener las especificaciones del contrato no
cumple las expectativas de entrega que usted tena; de igual manera usted debe
realizar a la hora de la entrega de un sitio todas las pruebas necesarias (de
velocidad, funcionales, de aceptacin visual, de compatibilidad, de manejo) y las
que el cliente le solicite en un buen entorno de trabajo (oficina cmoda, buena
atencin al cliente) con el fin de lograr cubrir todas las expectativas y afianzar los
lazos comerciales con el cliente.
3.3.1 LECCIN 36: PROTOCOLOS DE LA WEB.
TCP/IP, el protocolo de comunicaciones.
Una red existe cuando hay dos o ms ordenadores conectados de forma que
puedan compartir y pasar informacin entre ellos. Cada una de estas mquinas se
denomina host o nodo de la red. Si proporciona un servicio especfico, tal como la
verificacin de contrasea, el ordenador se denomina servidor.
Los nodos de una red siguen un conjunto de reglas, denominados protocolos para
intercambiar informacin, que a su vez sirve tambin para definir los servicios que
pueden estar disponibles en un ordenador. Hay muchos tipos diferentes de
protocolos, aunque los ms habituales proporcionan conexiones TCP/IP que
permiten que los usuarios se conecten a Internet.
El protocolo de comunicaciones TCP/IP (Transmision Control Protocol/Internet
Protocol) sirve como ncleo de Internet. Este protocolo de comunicaciones permite
conectar computadores que utilizan distintos sistemas operativos.
Trabaja a nivel de capa de red y de transporte en la clasificacin del modelo de la
ISO/OSI.
129
130
Pop3.
Post Office Protocol 3 es el protocolo que permite acceder a la casilla de correos.
Mediante este protocolo, el cliente de e-mail se comunica al servidor de casilla de
correo y puede recibir el correo que el servidor ha estado recepcionando y
guardando, as como tambin enviar el generado para enviar.
Imap 4.
IMAP es la abreviatura de Internet Message Access Protocol. Es un mtodo de
acceso al correo electrnico que se mantiene en el servidor correspondiente.
A diferencia del protocolo POP 3 que retira los mensajes del servidor al conectarse
y los almacena en el servidor local, IMAP 4 los deja en el servidor remoto, con lo
que es posible acceder a los mismos desde diferentes puntos (oficina, casa etc.).
Su particularidad es que deja crear mltiples buzones en la mquina remota, es
til para alguien que viaja para no tener la necesidad de llevarse un equipo
consigo, sino poder bajar los mensajes desde cualquier otro equipo, e inclusive
permite que varios usuarios entren al mismo buzn a las vez a ver los mismos
mensajes.
131
Ghoper.
El Gopher fue desarrollado por la Universidad de Minesotta en 1991. Este fue un
paso previo a la Web ya que permite desplegar un sistema de mens jerrquicos y
acceder a la informacin en formato de caracteres, como si estuviramos
ejecutando una terminal de Unix.
Adems ste permite localizar y buscar documentos sin saber su direccin, como
por ejemplo buscar a cerca de un tema, buscar en base de datos, etc.
132
133
Usenet Newsgroup.
Un rea popular en Internet est formada por los grupos de discusin o
newsgroup, hasta la llegada de la Web este tena la supremaca en Internet en
cuanto a popularidad.
El software original de neas fue desarrollado para los sistemas operativos Unix en
1979 por dos estudiantes de la Universidad de Duke como un mecanismo para
discusin y conferencias.
Actualmente Newsgroup soporta ms de 12.000 grupos de discusin a cerca de
una gran variedad de temas.
Usenet es un sistema de conferencias y discusin de alcance global, este soporta
lo que se denominan mailing list, cuando se quiere escribir algo para que sea ledo
por los dems lectores ste se postea a un newsgroup.
Cuando se quieren leer los mensajes se utiliza un software especial denominado
reader, por supuesto los software de uso comn como Netscape Navigator e
Internet Explorer pueden leer Newsgroup.
Los nombres de los newsgroup utilizan una convencin, los usuarios tratan de ser
especficos para evitar postear mensajes a un tema que no corresponda.
Videoconferencia.
Al telfono va Internet se le sum la transmisin de video en directo creando el
nuevo concepto de "Videoconferencia".
Existe en el mercado un programa denominado CUSeeMee "Comunicandonos en
Vivo". Por el momento las imgenes que transmite CuSeeMee son de resolucin
regular y se actualizan a intervalos regulares. La calidad del sonido, en cambio, es
bastante superior a la del video pues el sonido es ms fcil de enviar porque
requiere menos recursos que el video.
Adems, el sistema permite transmitir textos e imgenes fijas, al mismo tiempo en
que se habla y se ve la imagen en movimiento. Pasando del Videotelfono a la
Videoconferencia, CuSeeMe permite conectar ocho personas, cada uno frente al
monitor de su PC en distintos puntos de la red.
No caben dudas de que el sistema an necesita muchas mejoras en cuanto a la
calidad y la velocidad de transmisin. El lmite ms difcil de franquear es el que
impone la propia estructura actual de Internet, con su ancho de banda bastante
comprometido.
134
135
136
137
138
3.3.4
LECCIN
39:
REGISTRO
DE
DOMINIO
ADMINISTRACIN
SEGURIDAD.
El Registro y Administracin de Dominio pertenece al conjunto de facilidades
denominado Funcionalidades IP, dirigido a dar a los clientes herramientas para su
completa y adecuada presencia en el mundo de Internet y de la red IP.
Las Funcionalidades IP son complementarias y en algunos casos se pueden
contener unas a otras.
El Registro de Dominio consiste en el trmite ante las autoridades de Internet
nacionales o internacionales, para asignar un nombre (dominio) vlido a la
empresa cliente que lo solicita. Mediante el servicio de Administracin de Dominio,
el proveedor se encarga de realizar las labores de contacto administrativo ante el
ente registrador, realizar las pruebas o modificaciones sobre los parmetros del
dominio a que haya lugar y suministrar el soporte tcnico ante el cliente y el
organismo registrador para realizar las pruebas o modificaciones sobre los
parmetros del dominio. La vigencia de la prestacin del servicio es de dos (2)
aos.
Housing.
Consiste en una especie de arrendamiento fsico y lgico de la infraestructura
necesaria para hacer hosting. A continuacin presentamos algunas caractersticas
del Housing:
Alojamiento:
Espacio en Racks compartidos, Rack exclusivo o metros cuadrados.
Operacin bsica:
- Encendido y apagado de los equipos.
- Soporte de Backup en cinta.
- Chequeo de indicadores.
Monitoreo de servicios:
- Internet.
- Sistema Operativo.
- Aplicaciones.
Backup centralizado:
139
140
Prctica recomendada
de
la
Tecnologa
141
el servidor ejecutar.
Operacin del Servidor
142
143
144
ACTIVIDADES.
145
AUTOEVALUACIN.
Busque a travs de internet (www.google.com) empresas que brinden la
publicacin de pginas gratuitamente, y por medio de lo enseado en el apartado
de html disee una pgina y siguiendo las instrucciones del proveedor de hosting,
publique su pgina y acceda a ella en una nueva ventana.
Elabore un cuadro comparativo sobre las diferencias que hay entre POP, IMAP y
SMTP respecto a las funciones o comandos que se emplean.
Elabore un cuadro comparativo de similitudes y diferencias de
HTTP y FTP.
los protocolos
BIBLIOGRAFA.
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Edititorial Adison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall
146
147
CLASES DE CMS.
A continuacin dejare a su consideracin un listado de los principales y ms
populares CMS que se encuentran actualmente en la red con algunas de sus
principales caractersticas:
Wordpress: es la plataforma de gestin de Blogs ms utilizada y popular en la
actualidad, entre sus caractersticas ms destacadas estn: la gestin de
entradas, pginas y enlaces, posee un sistema de comentarios, de proteccin anti
Spam y requiere para su instalacin de un servidor Web, se recomienda apache
que maneje PHP Ver. 4.3 y MySQL Ver. 4.0 o superior.
miaCMS: esta aplicacin est basada en el CMS Mambo, por lo que tiene y
adopta la filosofa del Open source bajo la licencia GPL Ver. 2.0, a diferencia de
otras herramientas para gestionar contenidos, esta adems de PHP y MySQL
necesita de Java Script para funcionar, dentro de sus caractersticas mas
destacadas encontramos: asistente para instalacin, soporte de multilenguaje,
RSS Feeds (informacin actualizada de un sitio web por suscripcin), sistema de
comentario integrado entre otras.
DotClear: es una plataforma de Blogs de cdigo abierto, la cual apareci en el
ao 2002, para permitir la publicacin de contenidos por cualquier persona sin
importar su nivel tcnico, esta herramienta es de autora del desarrollador Olivier
Meunie, dentro de sus caractersticas mas destacadas encontramos: Instalacin
148
149
150
EXTENSIONES EN JOOMLA
Las extensiones tienen una funcionalidad determinada como por ejemplo:
Generadores de Formularios Dinmicos, Directorios de Empresas u
Organizaciones, Gestores de Documentos, Galeras de Imgenes Multimedia,
Motores de Comercio y Venta Electrnica, Software de Foros y Chats,
Calendarios, Software para Blogs, Servicios de Directorio, Boletines de Noticias,
Herramientas de Registro de Datos, Sistemas de Publicacin de Anuncios,
Servicios de Suscripcin.
Las extensiones se pueden agrupar en: Componentes, Mdulos, Plantillas,
Plugins, Lenguajes.
Componentes.
Estos elementos pertenecen al nucle de Joomla, tienen una funcionalidad
determinada y especfica, la cual podemos observar en el cuerpo principal de la
plantilla web. Por ejemplo podemos encontrar entre los componentes ms
comunes de Joomla los siguientes: Banners (seccin de anuncios), Contactos,
Noticias Externas, Encuestas y Enlaces web entre otros.
Mdulos.
Permiten asignar nuevas funcionalidades de software a nuestro Sitio Web Joomla,
un modulo es un pequeo artculo de contenido que puede mostrarse en cualquier
parte de la plantilla siempre que esta lo permita, por ejemplo por defecto Joomla
incluye los mdulos: men principal, men superior, selector de plantilla entre
otros.
Plantilla (Tmplate)
Estos componentes proporcionan el aspecto visual del Sitio Web de Joomla, una
de las grandes ventajas de Joomla es precisamente que gracias a esta
arquitectura se separa el contenido del Sitio de su entorno grafico, lo cual permite
un rediseo visual del sitio sin sacrificar el desarrollo previo que se ha hecho al
Sitio pues solo con cambiar la plantilla se tiene un nuevo sitio en base a diseo
pero se mantiene toda su informacin y contenidos intactas. Por lo general una
instalacin de Joomla maneja dos plantilla por defecto pero podemos importar las
que queramos y as tener diferentes opciones de apariencia para nuestro sitio
Web.
151
Plugins
Los Plugins nos permiten modificar el comportamiento de nuestro Sitio Joomla al
ejecutar cualquier accin, los Plugins son objetos derivados de la clase Jplugin los
cuales pertenecen fsicamente al directorio Plugins y dentro de este se genera un
directorio para cada plugin que se inserta en nuestro sitio. Por ejemplo los Plugins
se utilizan ms para acciones de autenticacin de usuarios, el funcionamiento del
buscador interno o con la edicin de contenidos.
Lenguajes.
Joomla viene soportado por una gran variedad de lenguajes predeterminados
como los son: Alemn, rabe, Blgaro, Bengal, Checo, Croata , Espaol, Griego,
Ingls, Finlands, Francs, Hebreo, Holands, Hngaro (Magyar), Indio
(Devaganari), Italiano, Malayo, Noruego (bokmal), Portugus (Brasil), Portugus
(Portugal), Rumano, Ruso, Serbio, Sueco, Tailands y otros que estn siendo
aadidos a su vez por medio de paquetes que permiten cambiar el lenguaje de
nuestro Sitio web tanto en el sitio publicado como en la consola del administrador.
COMPONENTES DE ACCESO A UN SITIO JOOMLA
Los sitios Web de Joomla, permiten dos tipos diferentes de acceso uno para
usuarios y otro para los administradores. Para esto existe el front end o puerta
delantera y el back end o puerta trasera.
Front end.
En el front end o puerta delantera tenemos un acceso directo al Sitio por medio de
la URl del Sitio por ejemplo el sitio www.mijoomla.com es el link de acceso a mi
Sitio Joomla en su front end, sin embargo en este sitio dependiendo de nuestros
requerimientos podemos establecer un formulario de login para que los usuarios
que se creen para el Sitio y segn su rol puedan acceder a sus privilegios desde
este Front end. Es de anotar que este acceso se puede hacer desde cualquier
Usuario sea: Autor, Editor o Supervisor. Permitiendo solo la opcin de realizar
procesos con contenidos.
Back end.
El Back end o puerta trasera permite solo el ingreso de los usuarios
administradores, para acceder al Back end se usa la URL del Sitio pero se agrega
/administrator, pues hay que tener en cuenta que el back end y el front end
152
pueden usar lenguajes distintos cada uno, al agregar este la URL quedara as:
www.mijoomla.com/administrator, al teclear esta direccin en un navegador nos
debe abrir una pgina as:
Este formulario inicial nos permitir realizar el login con nuestra cuenta de
administrador, seguido a esto nos aparecer el panel de control del administrador
que tiene el siguiente aspecto:
153
SECCIN
CATEGORA
CATEGORA
ARTICULO
ARTICULO
ARTICULO
154
155
All damos el nombre de la base de datos, la cual se llamara prueba, tal cual
como se llama la carpeta y el Sitio despus damos clic en crea y listo ya tenemos
la base de datos para nuestra instalacin de Joomla.
156
Como hemos descargado la versin 1.5 con el pack de espaol por defecto
tendremos un proceso de instalacin en este idioma lo cual facilitara el proceso
para los usuarios no avanzados. Como esta seleccionado este lenguaje por
defecto le damos clic en siguiente y con esto iniciamos el proceso de instalacin.
Despus de esto podemos observar la comprobacin previa que hace el instalador
del sistema, para asegurar una instalacin con xito. Ahora damos de nuevo clic
en siguiente para continuar con la instalacin.
157
Despus nos aparece la venta con la licencia GPL de Joomla la podemos leer si
es necesario y damos clic en siguiente de nuevo para ir a la siguiente ventana
que tiene esta apariencia:
All debemos insertar los datos de la base de datos que usar nuestro Sitio Joomla
para almacenar la informacin, es importante tener claro que en el momento de
crear la base de datos no necesitamos crear ninguna tabla, pues el instalador de
Joomla y el mismo Sitio genera las tablas y campos a medida que se instala y se
configura el Sitio. En este pequeo formulario se nos piden los siguientes datos:
Nombre del servidor en este caso mi servidor se llama localhost, Nombre del
usuario que se conecta a la base de datos en este caso se llama root, tambin
la Contrasea del usuario que se conecta a la base de datos en este caso es
123 y por ultimo nos solicita el nombre de la base de datos que usara nuestro
Sitio web en Joomla, para este caso como lo hemos mencionado anteriormente
nuestra base de datos se llama prueba. Despus de digitar la informacin
debemos dar clic en siguiente.
Despus de esto y si es necesario podemos configurar el servicio ftp directamente
en nuestro Sitio para hacer los Upload que necesitemos, seguido a esto nos
aparece otra nueva pantalla para llenar los campos: Nombre de nuestro sitio, en
este caso se llamar prueba, correo electrnico y clave del usuario admin,
adems nos permite instalar los datos de ejemplo al dar clic sobre el botn que
dice instalar los datos de ejemplo predeterminados esto se debe hacer antes
de dar clic en siguiente, pues as los datos de ejemplo quedaran cargados en
nuestro Sitio al finalizar la instalacin. Esta es la pantalla que se muestra para la
insercin de los datos.
158
159
Aqu damos clic sobre la opcin nuevo que se encuentra resaltada en el recuadro
para iniciar la creacin de la nueva seccin. Para esto el CMS nos muestra una
nueva pgina para la construccin de nuestra seccin
160
161
162
En esta agina procedemos a crear nuestro artculo, para esto debemos definir un
titulo para el mismo el cual ser hola mundo en alias lo dejaremos vacio, en
publicado lo dejamos en la opcin si, y en la opcin de pgina principal
seleccionamos si, por ultimo seleccionamos la seccin que en nuestro caso es
Noticias y la categora que en nuestro caso ser deportes por ultimo
redactamos nuestro artculo, en este caso escribir tan solo articulo de prueba
en el sitio prueba de Joomla y damos clic en guardar.
Para ver nuestro nuevo artculo tan solo basta con dar clic en la opcin pre
visualizar del men principal del control panel la cual est en la parte superior
derecha de la pagina, con esto se abrir una nueva pgina de nuestro sitio pero
ahora desde el front end lo cual nos permite visualizar el sitio y all encontraremos
el artculo que hemos creado. As se ver nuestro sitio con el nuevo artculo.
163
Primero que todo se debe tener en cuenta la configuracin del PC, pues
aunque no est definido un requerimiento mnimo de hardware para usar
Joomla si es importante que nuestro ordenador posea como mnimo una
tarjeta de Red o un Modem, adems el diseo Web demanda tambin
recursos para diseo grafico y diseo de multimedia para nuestro sitio por
lo que debemos contar con recursos de hardware que nos permitan
manejar grficos para nuestro sitio as como la creacin y desarrollo de
multimedia y animaciones en formatos como el flv u otros.
Los colores, aqu si hay un punto en el cual casi siempre se falla, pues as
como se combinan los colores en nuestra ropa o nuestras casas, se deben
combinar de forma acertada los colores que usara nuestro sitio, sobre todo
en fuentes pues se deben usar mximo dos colores sino nuestro sitio ser
164
165
3.4.6 ACTIVIDADES.
Investigue sobre las nuevas tecnologas para desarrollo Web existentes.
Haga un cuadro comparativo sobre estas tecnologas y segn su criterio
identifique cual es la mejor, debe sustentar con su propias palabras su respuesta.
Indague sobre las aplicaciones existentes para generar contenidos multimedia les
y grficos para un sitio o pagina web.
Realice un cuadro comparativo sobre estas aplicaciones resaltando sus
caractersticas y funciones especiales
Identifique un tema para su sitio web, defina el nombre y los contenidos que va a
publicar en este.
Realice el proceso de instalacin del CMS Joomla, de acuerdo al sitio que ha
decidido crear, trabaje con el manual de Joomla y empiece a crear las secciones y
los contenidos de su sitio de Joomla.
3.4.7 AUTOEVALUACIN.
Un aplicativo CMS, es un editor de texto que sirve solo para crear blogs en
formato html. Esto es (F o V)_____
Determine cuales son las principales caractersticas del CMS Joomla que lo hacen
una herramientas efectiva en las construccin de Sitio Web
Describa cuales con los elementos que necesita el CMS Joomla para su correcta
operacin en procesos de construccin de sitios web
Cuales son las formas en que un desarrollador puede ingresar a un sitio web de
Joomla para su edicin y administracin.
Realice un cuadro comparativo de las bondades de los CMS frente a otras
herramientas de desarrollo web como DreamWeaver u otros lenguajes o
herramientas de desarrollo web
Investigue como se pueden hacer templates o plantillas de Joomla, cual es su
estructura y componentes, adems que herramientas existen en la actualidad que
simplifique su creacin
166
3.4.8 BIBLIOGRAFA.
EL PROCESO UNIFICADO DE DESARROLLO DE SOFTWARE. Jacobson,
Booch and Rumbaugh. Edititorial Adison Wesley.
Diseo de sitios Web. Manual de referencia. Thomas A. Powell, Editorial McGraw
Hill.
XML, Elizabeth Castro. Editorial Prentice Hall.
Active Server Pages 3.0. Serie Prctica. Nicholas Chase.
Programacin de Active Server Pages. Scott Hillier and Daniel Mezick. Editorial
McGraw Hill Microsoft Press.
Administracin de IIS 5. Gerry OBrien. Editorial Prentice Hall
http://es.wikipedia.org/wiki/Cms
http://www.cmsenespanol.com/
http://www.difundefirefox.com/que-es-un-feed-rss-y-como-usarlo
http://www.mambohispano.org/
http://www.mambohispano.org/Especiales/Newbie/%BFQu%E9_es_Mambo?/
http://es.wikipedia.org/wiki/Joomla!#Historia_del_proyecto
http://www.nosolocodigo.com/tutorial-crear-plugins-joomla-15
http://www.solojoomla.com/
http://www.aulablog.com/planeta/node/26636