Está en la página 1de 10

Lecturas - Act 8: Leccin evaluativa No.

2
Lectura 1 - Vinculos
EL MODELO BSICO DE VNCULO WEB.

El modelo bsico de vnculo Web obedece a una sintaxis bastante sencilla
afortunadamente:

El elemento A denota una ancla--un eslabn del hipertexto o el destino de un
eslabn. El atributo de HREF especifica un eslabn del hipertexto a otro recurso,
como un documento de HTML o una imagen de JPEG. Ejemplos:

<A href="album.html">My photo album</A>

<A href="../images/me.jpg">Picture of me</A>

<A href="/sounds/auldlang.mid" TYPE="audio/midi" ACCESSKEY=A>Auld Lang
Syne (5 kB MIDI)</A>

<A href="section2.html" TARGET="content" TITLE="Elements of the HEAD"
REL=next>Section 2</A>

<A href="mailto:liam@htmlhelp.com" TITLE="Feedback on HTML 4.0
Reference">liam@htmlhelp.com</A>

<A href="http://www.htmlhelp.com/" TARGET="_top" >Web Design Group</A>

<A href="http://babel.alis.com:8080/langues/iso639.zh.htm" CHARSET="big5"
HREFLANG=zh>ISO 639</A> 8705869
VINCULOS ESTTICOS.

Un vnculo esttico es aquel cuya referencia de destino ha sido especificada en el
ancla (<A>.....<A>) en la implementacin del documento HTML.
VNCULOS DINMICOS.

Un vnculo dinmico no tiene un referencia final fija. El documento destino se
determina en el momento de ver la pgina, segn el entorno y las necesidades del
usuario.
VNCULOS DE TEXTO.

Por medio del elemento ancla, se establecen los vnculos de textos. La manera de
emplear dicha etiqueta es <A REF = {Destino}> {Texto que lleva el vnculo} </A>
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&aacute;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];

}

}

}

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[[no]];

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')">

<a href="botonMX.htm" onMouseOut="MM_swapImgRestore()" onMouseOver =
"MM_swapImage('Image1','','freedom.png',1)"> <img src="luxury.png" alt="La
libertad de la seguridad" name="Image1" width="357" height="94" border="0"></a>

</body>

</html>

Lectura 2 - EL PROCESO DE ADICIN DE UNA FACILIDAD DE BSQUEDA
EL PROCESO DE ADICIN DE UNA FACILIDAD DE BSQUEDA

El proceso de adicin de una facilidad de bsqueda a un sitio se resume en los
siguientes ocho pasos.

PASO 1. DECIDA QUE INDEXAR
Desea indexar todos los documentos de un sitio o solo ciertos documentos? A
menudo, solo se indexa una parte, la base de datos del soporte tcnico u otra rea
que el usuario desee buscar. No indexe todo por el mero hecho de que puede
hacerlo.

PASO 2. DECIDA COMO SE VA A INDEXAR LA INFORMACIN
Cuando haya decidido lo que quiere indexar, tendr que definir como lo quiere
indexar. Crear el motor de bsqueda, simplemente, un ndice de texto del conjunto
del documento, en donde se registran todas las palabras con significado? o, quiz,
seria mejor crear en el sitio un vocabulario especial de trminos de b squeda y
relacionar cada trmino con determinadas pginas del sitio?

PASO 3. SELECCIONE EL MOTOR DE BUSQUEDA
Es importante no seleccionar el motor de bsqueda hasta despus de conocer el
volumen y el tipo de la informacin que se desea buscar y, tambin, la forma en
que ser indexada. Existen numerosos motores de bsqueda disponibles
comercialmente, y algunos gratuitos. Los motores de bsqueda pueden instalarse
localmente en su sistema o pueden contratarse a terceros, que ejecutaran la
facilidad de bsqueda por usted. En la direccin http://www.searchtool.com,
encontrara consejos sobre motores de bsqueda y servicios.

PASO 4. DISEE L A INTERFAZ DE BUSQUEDA
Disee la pantalla de bsqueda para los tipos de bsqueda que pueda realizar el
usuario. Frecuentemente, las bsquedas se dividen en dos tipos distintos, las
bsquedas bsicas y las avanzadas. La interfaz de la bsqueda debera estar
integrada en el sitio, satisfacer las necesidades de bsqueda del usuario y
adaptarse al tipo de datos que se estn buscando.

PASO 5. DISEE LA PGINA DE RESULTADOS
No olvide preparar pginas que se encarguen de los resultados de una bsqueda
positiva, as como de los resultados negativos cuando la bsqueda no tiene xito.

PASO 6. INDEXE LOS DATOS
Durante este paso, el motor de bsqueda se utiliza para recorrer todo el sitio o
parte de l y crear un ndice. Puede verse obligado a manipular el ndice a mano
para crear preguntas ptimas.

PASO 7. INTEGRA EL MOTOR DE BSQUEDA CON LA INTERFAZ DE
BSQUEDA
Este paso implica el acceso de la interfaz de bsqueda al ndice, Generalmente,
esto se realiza colocando el atributo <ACTION> de la etiqueta <FORM>, utilizada
para implementar el cuestionario de bsqueda. La integraci6n de la pgina de
resultados es un poco ms difcil, pero es cuesti6n de tomar la pgina de
resultados y hacerla en una plantilla especial que pueda leer el motor de
bsqueda.

Sugerencia: Cuando un sitio disponga de una funcin de bsqueda, incluya un
botn o campo de bsqueda en todas las pginas.

Lectura 3 - Paginas, conceptos
QU ES UNA PGINA?.

Una aplicacin Web consta de una o ms pginas conectadas entre s. Un buen
punto de partida sera decir que una pgina Web es un archivo de texto que
contiene lenguaje de marcas de hipertexto (HTML), etiquetas de formato y
vnculos a archivos grficos y a otras pginas Web.

TAMAO DE LAS PGINAS.
El tamao de una pgina puede ser, ilimitada, ya sea en su ancho o largo, en
teora. Sin embargo, la clave del xito de la pgina reside en que su tamao se
adapte al contenido de sta. Si el contenido es poco y hay demasiado espacio en
blanco, le resultar extrao al usuario, y si el contenido es demasiado, conllevar
a dividir el contenido en varias pantallas.

Los tamaos ms comunes de pantallas en cuanto a resolucin, incluyen: 640 x
480, 800 x 600, 1.024 x 768, 1.280 x 1.024, 1.600 x 1.200. Si esta buscando un
tamao adecuado, primero puede tomar como referencia una hoja de papel
tamao carta, cuyo tamao estndar es de 8,5 x 11 pulgadas, que da como
resultado una resolucin de 612 por 792 pxeles, tomando como ejemplo una
ventana de internet explorer, apreciar que el tamao equivale a tres pantallas
llenas de contenido a 640 x 480, a dos pantallas a 800 x 600, a pantalla y media a
1.024 x 768 y finalmente la pgina completa entrara en una pantalla de 1.280 x
1.024. A la hora de elegir el tamao de la pgina, evite el scroll hacia la derecha,
incluya los tpicos de exploracin principal, evite restricciones de acceso solo por
resolucin, de libertad al usuario de estirar o contraer la pgina sin forzar a que la
pgina se adapte a la resolucin, en lo posible, permita el desplazamiento vertical.

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 mas
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.

PGINAS DE ENTRADA.
La pgina principal puede actuar como el punto de partida de sta, es decir, la
pgina de entrada. Sin embargo, hay pginas importantes que sirven como vinculo
hacia las pginas de entrada, particularmente si tienen una direccin URL o un
dominio nico. Podemos encontrar tambin, las pginas de Bienvenida, las cules
presentan al sitio dndole un carcter mas fuerte, la pgina principal es aquella
donde se indica claramente el contenido del sitio, dentro de sta hay subpginas
las cules siguen el mismo estilo y exploracin de la pgina principal y en donde el
contenido y la exploracin son los temas preponderantes.

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 cul 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.

Lectura 4 - EL TEXTO EN LAS PGINAS WEB
IMPORTANCIA DEL TEXTO.
El motor de una pgina Web es el texto, el cual nos proporciona informacin. ste
se puede moldear, en el aspecto de su tamao, fuente, color y que por lo tanto es
un elemento que se debe trabajar con particular cuidado.

TERMINOLOGA TIPOGRFICA.
El texto est formado por caracteres, que pueden ser letras, nmeros, signos de
puntuacin y otros caracteres especiales. Las letras por ejemplo las maysculas y
minsculas, se pueden clasificar segn su forma, estilo (fuente) o las partes que
componen cada letra.

FUENTES.
Una fuente se refiere al estilo utilizado en un PC. En la Web encuentra estilos
como serif, sans serif, script y decorativo. Sin embargo, las posibilidades de tipos y
subcategoras de letras son muchas. -Fuentes proporcionales frente a mono-
espaciadas. Las fuentes proporcionales y mono-espaciadas son aquellas que la
Web soporta en forma predeterminada. Las fuentes proporcionales constan de
caracteres que ocupan solamente el espacio que necesitan dentro de una palabra.
La fuente mono-espaciada es aquella en donde cada carcter ocupa el mismo
espacio independientemente de su ancho real. Se recomienda utilizar las fuentes
proporcionales ya que pueden incluir ms caracteres en un mismo espacio y el
texto es muy fcil de leer por lo que las palabras aparecen como unidades, las
fuentes mono-espaciadas sirven ms que todo para cdigos, datos tcnicos o
poner especial nfasis en alguna palabra.

Definicin de las fuentes en pginas Web. Para la definicin de una fuente que
vaya a utilizar, es de gran importancia el uso del atributo FACE de la etiqueta
<FONT> para especificar la fuente que la pgina llevar, de lo contrario es muy
posible que cuando la pgina se exponga sin definicin de la fuente, el sistema la
cambie por otro tipo de fuente que este predeterminada por el explorador. <FONT
FACE=Courier">

Utilizacin de fuentes descargables. En la Web la descarga de fuentes es limitada,
pero las compaas como Microsoft y Netscape han desarrollado sus propias
versiones de fuentes, las cules los usuarios pueden tener acceso a ellas y
descargarlas.

Para Microsoft busque en la direccin www.microsoft.com/typography y para
Netscape www.truedoc.com donde encontrar los diferentes tipos de fuentes que
puede descargar.
DISPOSICIN DEL TEXTO.
La organizacin del texto tiene gran importancia en el contenido de la pgina,
primero se recurrir a la alineacin del texto, en HTML puede definirlo utilizando el
atributo ALIGN en elementos de bloque comn como <p>. En CSS podr realizar
la misma accin utilizando la propiedad text-align dependiendo de cmo se quiera
establecer la alineacin, tambin es justificada (JUSTIFY), derecha (RIGHT),
centro (CENTER) o izquierda (LEFT). La longitud de lnea debe estar comprendida
entre 50 y 70 caracteres, aproximadamente entre 7 y 17 palabras. El espaciado
interlineal o separacin entre dos lneas de texto consecutivas permite a los
lectores seguir las lneas de texto con mayor facilidad, CSS lo proporciona
mediante la propiedad line-height (valor de altura de lnea) y puede especificarse
en puntos (pt), pxeles (px) o valores porcentuales (%). La separacin de letras y
separacin de palabras corresponde al kerning, ajuste del espacio entre
caracteres.

DEFINICIN DE LAS JERARQUAS DE LOS TIPOS DE CARACTERES.
Para crear una jerarqua en un texto o caracteres, se hace especial nfasis en el
color, tamao, estilo y posicin de ste. Los titulares y subtitulares tienen gran
importancia dentro de la jerarquizacin de textos, en HTML los ttulos se indican
mediante etiquetas de ttulos como <H1>, <H2>... etc. Es importante diferenciar
los ttulos de los subttulos, para esto se define la propiedad display como in line,
as por ejemplo los ttulos se pueden distinguir por su tamao, color o espaciado.
Si se utiliza un gran volumen de texto, prrafos, en HTML stos se muestran conel
elemento <P>.

Lectura 5 - El Color en el Diseo Web
INTRODUCCIN AL COLOR.

Los colores enriquecen y aclaran la percepcin sobre las imgenes que se
observan, adicionalmente las imgenes brindan informacin, satisfaccin,
emociones y complementan los entornos en las que se encuentran. Aunque
existen formas de acceder a la Web mediante ambientes no grficos o se pueden
visualizar pginas Web en monitores monocromticos o con una pobre resolucin
(8 o 16 colores), lo ms seguro, es que la informacin que se pierde el usuario es
grande por las razones expuestas en el prrafo anterior. Hoy en da la riqueza de
la Web va de la mano con el color y la forma, y ms cuando se habla de sitios de
entretenimiento e interactivos. El deseo comn por vincular cada vez ms medios
a la Web hace cobrar importancia al color y la forma que conjugados en uno
pueden dar idea sobre el concepto de imagen. Tampoco se puede ser extremista
en pensar publicar una imagen de alta fidelidad (alta resolucin, 32bits) puesto
que pesara mucho y para poderla cargar en la Web seguramente se requerira de
un buen ancho de banda, y recuerde Se debe disear para usuarios que se
conectan por mdem generalmente!!.

IDEAS BSICAS SOBRE EL COLOR.
Por los estudios de los fsicos se sabe que la luz es una radiacin de energa
emitida por los cuerpos la cual recae en el espectro visible del ser humano;
siguiendo este orden de ideas los colores corresponden a ciertos cambios en los
parmetros de dichas radiaciones u ondas electromagnticas. Para el diseador el
color posee tres parmetros que lo caracterizan como lo son el matiz, la saturacin
y el tono.

El matiz representa la calidad misma del color y es cada una de las degradaciones
que puede recibir un color sin perder el nombre que lo distingue de los dems
colores y depende de la saturacin. La saturacin es la proporcin en la que un
color est mezclado con el blanco. El tono describe lo claro u oscuro que es un
color cuando se compara con otro en las mismas condiciones visuales.

COLORES EN LA WEB.
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.

También podría gustarte