LA INFLUENCIA DEL DISEO GRAFICO EN LAS PAGINAS WEB

METODOLOGIA DE LA INVESTIGACION

PRESENTADO POR: YURI KATHERINE VERA ROJAS COD: 20320200 DIEGO FERNANDO CHARRIS BELLO COD: 20320232 MAXI JAVIER CHARRIS BELLO COD: 20320229 PRESENTADO A LA PRF: MILENA RONCANCIO

BOGOTA D.C CORPORACION DE EDUCACION SUPERIOR ISES INGENIERIA DE SISTEMAS DISEO GRAFICO. III SEMESTRE DIURNO. DICIEMBRE 03 DE 2004.

DELIMITACION DEL PROBLEMA

En estos momentos en la red encontramos pginas Web que hacen pensar que son realizadas sin tener encuenta los parmetros bsicos del diseo, tal vez porque un Ingeniero de Sistemas es el encargado del diseo de estas sin ser un comunicador visual, haciendo mal uso de la publicidad. Muchas de las pginas que encontramos carecen de soportes grficos a diferencia de otras donde se muestra la integracin de lo conceptos de diseo en la creacin de una buena pgina Web con un buen uso de las herramientas. En una minora encontramos que estas, son realizadas por empresas ya constituidas como las agencias de publicidad dedicadas especialmente a la comunicacin visual. En el mercado encontramos gran oferta de diseadores de pginas Web, que por el hecho de tener un computador y un programa de diseo han saturado la red con pginas que no satisfacen las necesidades de los usuarios. Partamos del hecho que un simple anuncio que tenga como objetivo impartir un mensaje hace parte de la comunicacin visual y se deben tener en cuenta ciertos parmetros que permitan una buena interpretacin de este mensaje por parte del Receptor, haciendo uso de algunos elementos psicolgicos como lo son: los diferentes colores, las fuentes tipogrficas y ciertos parmetros de diagramacin. Es aqu cuando surge la inquietud si un Ingeniero de Sistemas posee conocimientos de diseo que le permita llevar a cabo la realizacin de pginas Web, que cumpla con los requisitos de un buen diseo publicitario, ya que estas hacen parte de la comunicacin visual. Es por eso que en este proyecto queremos determinar SI LOS DISEADORES DE PGINAS WEB TIENEN CONOCIMIENTO DE LOS PRINCIPIOS FUNDAMENTALES DEL DISEO GRFICO Y SI SON UTILIZADOS EN LA REALIZACIN DE ESTAS MISMAS EN INTERNET?

JUSTIFICACION

Actualmente podemos constatar un notable incremento de usuarios de Internet y la necesidad de ofrecer productos y servicios en este medio, haciendo que esto exija al mximo la comunicacin visual, que influye de una manera contundente en la humanidad. Es irnico que el lenguaje del diseo grfico se muestre a diario en todos los sitios, ya sea de forma correcta o incorrecta y no se hable mucho de su teora y conceptos; por esta razn hemos realizado este proyecto para demostrar que muchos diseadores de estos sitios, que poseen o no el conocimiento no hacen el uso correcto del diseo como tal. Un buen diseo soportar bien la prueba del tiempo, mientras que las modas transitan precipitadamente hacia la frivolidad, el xito de un buen diseo Web va ms all de la moda y la tecnologa; Para construir lugares Web que perduren, el elemento fundamental es la comunicacin visual clara y efectiva de sus ideas a los lectores. Por eso se dice que una pgina Web no sirve para casi nada, si no est integrada en los planes globales de la comunicacin visual como herramienta importante para mejorar la competitividad en el desarrollo como sitio Web. Segn nuestra experiencia, el desarrollo de la pgina Web es nicamente un 5% del total de trabajo a realizar para que esta est en disposicin de aprovechar las posibilidades que Internet le ofrece para darse a conocer. La preocupacin de los diseadores grficos en general, es la esttica de estas, y cmo van a ser empleadas en Internet. Por ello, el desarrollo de las pginas Web debe ser la consecuencia de un profundo anlisis de cmo mnimo, el color, la diagramacin, la tipografa y al grupo objetivo. Nuestro inters es demostrar que el uso de las pginas Web es cada vez ms frecuente en Internet por parte de diversos usuarios como fuente de investigacin, estas se han convertido en un instrumento que cada vez se ha hecho mas necesario y til dentro de la cotidianidad de las personas, posibilitando el avance tecnolgico, comunicativo, intelectual entre otros; lo que hace que este estudio sea necesario ya que se pretende demostrar que el Ingeniero de Sistemas como diseador de pginas Web requiere conceptos bsicos del diseo, o si ofreciera un mejor resultado un equipo de trabajo conformado por un Ingeniero de sistemas y un diseador grfico. Ahora que la globalizacin pretende unir a todo el planeta, el diseo grfico es el mensaje que debe autoevaluarse para producir cdigos universales, donde la lectura ptica de todo el mundo inicia su entonacin hacia la unidad

OBJETIVOS

OBJETIVO GENERAL Determinar el mal uso de la comunicacin visual en Internet por parte de los creadores de paginas Web, demostrando si poseen conocimientos de diseo y no hacen uso de ellos o por el contrario no los manejan.

OBJETIVOS ESPECIFICOS Saber emplear de manera sencilla y eficiente las herramientas que se han de emplear para construir material destinado a Internet en su modo grfico. aprender a observar la competencia como fuente de recursos ante el desarrollo de conceptos bsicos grficos a utilizar en una pgina Web. Identificar las causas por las cuales se hace necesario los conceptos de diseo en la creacin de pginas Web. Describir los posibles cambios que pueden ocurrir por parte de los ingenieros de sistemas en la esquematizacin de pginas Web. Determinar por que el ingeniero de sistemas es capaz de disear una pagina Web sin hacer uso de los conceptos bsicos del diseo. Ofrecer una gua de conceptos y herramientas de diseo bsico. Ofrecer instrucciones para la creacin de pginas Web.

MARCO TEORICO

DEFINICION DE CONCEPTOS Internet: Es una gran red de redes, tambin llamada Supercarretera de la informacin. Es el resultado de la interconexin de miles de computadoras de todo el mundo. Todas ellas comparten los protocolos de comunicacin, es decir que todos hablan el mismo lenguaje para ponerse en contacto unas con otras. Pgina Web: Una pgina Web es la unidad bsica del World Wide Web (WWW), es un documento electrnico que contiene informacin especfica de un tema en particular y que es almacenado en algn sistema de cmputo que se encuentre conectado a la red mundial de informacin denominada Internet, de tal forma que este documento pueda ser consultado por cualesquier persona que se conecte a esta red mundial de comunicaciones y que cuente con los permisos apropiados para hacerlo. HTML: Son las siglas en ingls de hypertext markup language, que en espaol viene a ser algo as como lenguaje de marcacin de hipertexto. el html no es un lenguaje de programacin propiamente dicho, aunque tiene algunas caractersticas de stos, como lo es una sintaxis bien definida. tal como lo dice su nombre, este lenguaje consiste en marcar partes de un texto para que stas adquieran cierto formato o cumplan con cierta funcin lo que convierte a tal texto en hipertexto. un documento en hipertexto es aquel en el que ciertas palabras o frases presentan un formato diferente (tpicamente color distinto y subrayado) que las distingue del resto del texto y que pueden ser seleccionadas para desplegar un nuevo documento. dicha seleccin se lleva a cabo, en los ambientes grficos como Windows, por medio de un "clic" del ratn en la palabra o frase marcada, y en los ambientes basados en texto, por medio de las flechas del teclado y la barra espaciadora o la tecla [enter]. las partes del texto marcadas se conocen como links o ligas y al ser activadas pueden llevarnos a diferentes prrafos dentro del mismo documento, a diferentes documentos o a partes especficas en diferentes documentos. PROTOCOLO DE COMUNICACIONES El protocolo es el conjunto de normas o reglas que emplean dos equipos informticos para comunicarse sin errores. Normas para que los programas puedan intercambiar datos entre s. Los protocolos especifican la forma en que se transmitirn los mensajes y gestionarn los errores, permitiendo crear estndares independientemente de las marcas de microcomputadoras. Web: World Wide Web, o simplemente Web, es el universo de informacin accesible a travs de Internet, una fuente inagotable del conocimiento humano. El componente ms usado en el Internet es definitivamente el Web. Su caracterstica sobresaliente es el texto remarcado, un mtodo para referencias cruzadas instantneas. En la

mayora de los Sitios Web, ciertas palabras aparecen en texto de otro color diferente al resto del documento. Por lo general, este texto es subrayado. Al seleccionar una palabra o frase, uno es transferido al sitio o pgina relacionado a esa frase. En algunas ocasiones hay botones, imgenes, o porciones de imgenes que pueden activarse mediante un clic. Si Usted mueve el apuntador sobre el contenido del documento y el apuntador cambia a un smbolo con una mano, eso indica que Usted puede realizar un clic para ser transferido a otro sitio. Usando el Web, se tiene acceso a millones de pginas de informacin. La exploracin en el Web se realiza por medio de un software especial denominado Browser o Explorador. La apariencia de un Sitio Web puede variar ligeramente dependiendo del explorador que use. As mismo, las versiones ms recientes disponen de una funcionalidad mucho mayor tal como animacin, realidad virtual, sonido y msica. Diseo Grfico a pesar de ser un programa hermano de las bellas artes, y una ciencia de la comunicacin, esta lejos de ser una herramienta menor de la publicidad como lo creen algunos empresarios del sector productivo, sino mas bien un oficio complementario y a fin, que tienen sus propios mtodos, sus resultados teora e historia. Es la actividad que permite entablar comunicacin entre un emisor y un receptor. El diseo grfico adopta el lenguaje del arte compuesto por el signo y el smbolo, luego, pone dicho lenguaje en un medio de comunicacin visual que siempre lleva algn contenido, para ser entendido por un grupo objetivo seleccionado. Hay compromiso con un receptor y su objetivo es generar funciones superiores de pensamiento a travs de la percepcin visual. Basa su esttica en las bellas artes, la conceptualiza y la deja entendible al receptor, buscando una comunicacin de carcter masivo. Comunicacin visual: Transmisin de seales mediante un cdigo comn entreun emisor y un receptor. que consiste en emitir por medio de manifestndose grficas.

HISTORIA

Internet Empez en los Estados Unidos de Amrica en 1969, como un proyecto puramente militar. La Agencia de Proyectos de Investigacin Avanzados de Defensa (DARPA) desarroll una red de computadoras llamada ARPANET, para no centralizar los datos, lo cual permita que cada estacin de la red poda comunicarse con cualquier otra por varios caminos diferentes, adems presentaba una solucin para cuando ocurrieran fallas tcnicas que pudieran hacer que la red dejase de funcionar. Los sitios originales que se pusieron en red eran bases militares, universidades y compaas con contratos del Departamento de Defensa. Conforme creci el tamao de esta red experimental, lo mismo sucedi con las precauciones por la seguridad. Las mismas redes usadas por las compaas y las universidades para contratos militares se estaban volviendo cada vez ms accesibles al pblico Como resultado, en 1984, ARPANET se dividi en dos redes separadas pero interconectadas. El lado militar fue llamado MILNET. El lado educativo todava era llamado tcnicamente ARPANET, pero cada vez se hizo mas conocida como Internet. En mayo de 1995, entre 35 y 45 millones de personas usaban Internet y este nmero fue creciendo mes a mes en un 10 a 15%. Las estimaciones actuales colocan al nmero de personas en Internet en enero de 1997 en 62 millones de usuarios individuales. Podemos decir que el resultado final es que lo que comenz como un proyecto de investigacin gubernamental y educativo ahora se ha convertido en uno de los medios de comunicacin ms importante de la actualidad. Nunca antes haba sido posible tener acceso a tantas personas de culturas y antecedentes tan variados. Adems podemos decir que la Internet no es gratis, la pagamos bsicamente nosotros, los contribuyentes, centros de investigacin, educacionales, institutos y universidades, las empresas comerciales, nosotros a travs del incremento en sus productos y la publicidad. Web La Web es una idea que se construyo sobre la Internet. Las conexiones fsicas son sobre la Internet, pero introduce una serie de ideas nuevas, heredando las ya existentes. Empez a principios de 1990, en Suiza en el centro de investigacin CERN (centro de Estudios para la Investigacin Nuclear) y la idea fue de Tim Berners-Lee, que se gest observando una

libreta que l usaba para aadir y mantener referencias de cmo funcionaban los ordenadores en el CERN. Antes de la Web, la manera de obtener los datos por la Internet era catica: haba un sinfn de maneras posibles y con ello haba que conocer mltiples programas y sistemas operativos. La Web introduce un concepto fundamental: la posibilidad de lectura universal, que consiste en que una vez que la informacin est disponible, se pueda acceder a ella desde cualquier ordenador, desde cualquier pas, por cualquier persona autorizada, usando un nico y simple programa. Para que esto fuese posible, se utilizan una serie de conceptos, el ms conocido es el hipertexto. Con Web los usuarios novatos podran tener un tremendo poder para hallar y tener acceso a la riqueza de informacin localizada en sistemas de cmputos en todo el mundo. Este solo hecho llev un avance tremendo de Internet, un mpetu tan grande que en 1993 World Wide Web creci un sorprendente 341000%, tres aos despus, en 1996, todava s esta duplicando cada 50 das. DISEO GRFICO Con anterioridad al invento de la imprenta, los amanuenses espaoles se haban destacado por sus cualidades ilustrativas, prueba de las cuales son los Comentarios al Apocalipsis de san Juan, un extraordinario cdice mozrabe realizado por el Beato de Libana. Sin embargo, parece que la nica herencia que de ello recogieron los primeros impresores casi todos ellos alemanes se manifest en una experimentada industria de naipes, tradicin que se ha conservado intacta hasta nuestros das. Posteriormente, durante el imperio ultramarino gobernado por los Austrias, destac la labor colonizadora de los calgrafos Juan de Yciar invent la letra bastarda espaola, difundida por toda la geografa hispana y americana gracias a las rdenes religiosas. El entronamiento de los Borbones a comienzos del siglo XVIII supuso un cambio radical para la mayora de las llamadas artes industriales. Durante esta centuria se crearon las fbricas nacionales tapices, porcelanas, vidrio y se impuls decididamente la industria del libro. Para emular las investigaciones que llevaban a cabo en Europa impresores de la importancia de John Baskerville, Giambattista Bodoni y Pierre Didot, Carlos III llam a la corte madrilea a los mejores especialistas peninsulares: los tipgrafos Josep Eudald Maria Pradell y Jernimo Antonio Gil, creador de un tipo de letra caracterstico llamado gilismo en su honor; y el impresor real Joaqun Ibarra, inventor de procedimientos de estampacin y considerado en su poca un momento histrico decisivo en la evolucin de las artes grficas uno de los mejores profesionales del mundo. El siglo XIX signific un importante retroceso para la industria espaola, incorporada lentamente al proceso de modernizacin que comenz a finales del siglo anterior en Inglaterra. La litografa permiti la aparicin de numerosas publicaciones peridicas, y entre los mejores grafistas destacaron aquellos que practicaron la caricatura, un gnero estrechamente vinculado a

la catica situacin poltica decimonnica. Hacia finales de este siglo se extendi por toda Europa un movimiento artstico de carcter renovador, que pretenda asumir nuevos principios estticos asociados a la modernidad. Este movimiento, llamado Art Nouveau en Francia, Jugendstil en Alemania, y asociado a la Sezession vienesa, se introdujo con vigor en Catalua con el nombre de modernismo, auspiciado por la creciente burguesa nacionalista. As, al amparo de una pujante industria situada a la altura de los mejores rivales, se introdujo la nueva tcnica publicitaria del cartel, en cuyo mbito se destacaron algunas figuras decisivas para la evolucin del diseo grfico: el pintor Ramn Casas, que consigui fundir la influencia vanguardista francesa con la inspiracin tradicional espaola; el ilustrador Alexandre de Riquer, mximo representante del estilo modernista cataln; y Josep Triad, cartelista y dibujante de estilo geometrizante, ms influido que sus compatriotas por las corrientes centroeuropeas. En las primeras dcadas del siglo XX aument el alejamiento entre Espaa y los pases industrializados, lo que provoc un enorme distanciamiento del grafismo con respecto a los movimientos artsticos de vanguardia. Tan slo cabe destacar la adhesin de la burguesa acomodada al Art Dco, un estilo inerme en cuyas filas se destacaron personalidades dispersas como los noucentistas catalanes Francesc Gal y Josep Obiols, el ilustrador valenciano Jos Segrelles, el madrileo Rafael de Penagos o el gallego Federico Ribas, que lleg a ser el director artstico de la perfumera Gal. El advenimiento de la II Repblica produjo una concentracin de la intelectualidad espaola, involucrada en su mayor parte en la modernizacin del pas. As, el estallido de la Guerra Civil supuso un inesperado y unnime resurgimiento del grafismo propagandstico, encabezado por el valenciano Josep Renau con sus caractersticos fotomontajes de influencia expresionista y seguido por otros cartelistas excepcionales como Antoni Clav, Arturo y Vicente Ballester o Jos Morell. Los primeros aos del franquismo con una economa autrquica cercana a la miseria y los mejores diseadores en el exilio supusieron de nuevo un momento de penuria creativa, quebrada slo por la figura marginal de Ricard Giralt-Miracle, que al frente de su taller artesanal desarroll una lnea particular de investigacin grfica. Con el aperturismo iniciado hacia 1955, sin embargo, comenz un periodo de crecimiento econmico que permiti la aparicin, a finales de la dcada de 1950 y principios de la de 1960, de dos asociaciones que se convirtieron en la espina dorsal del diseo espaol: el SEDI Sociedad de Estudios de Diseo Industrial en Madrid, heredera del Grupo 13 y encabezada por el arquitecto Carlos de Miguel, en cuyas filas se encontraba ya el grafista Jos Mara Cruz Novillo; y el ADG FAD Agrupacin de Diseo Grfico del Fomento de las Artes Decorativas en Barcelona, influida por el grafista italo-suizo Sandro Bocola y dirigida por Josep Pla Narbona, mximo representante de la nueva tendencia artstica que comenzaba a despuntar en la capital catalana. Poco tiempo despus, en 1963, Alianza Editorial lanza una coleccin de bolsillo diseada por el joven Daniel Gil, formado en la escuela de Ulm y figura inslita tanto por su ingenio como por su precisin tcnica. Sus cubiertas imaginativas y sugerentes, que oscilan entre la obviedad y el hermetismo, se han convertido en un paradigma de la comunicacin visual, y junto con los trabajos del cataln Enric Satu han situado al diseo editorial espaol entre los ms destacados del panorama internacional.

Con la recuperacin de la democracia y el final de la crisis econmica de 1973 se inici en Espaa un nuevo periodo de consolidacin en el campo del diseo, refrendado por la entrada en las instituciones europeas y por el apoyo institucional. Hacia finales de la dcada de 1970 comenzaron a aparecer las primeras muestras de imgenes corporativas, que se generalizaron durante la dcada de 1980 de la mano de Ives Zimmermann, Jos Mara Cruz Novillo, Josep Maria Trias y Alberto Corazn, antiguo editor independiente dotado de una fuerte personalidad que se ha convertido en el smbolo grfico de la etapa poltica socialista. A finales de la dcada de 1980 y principios de la de 1990 destacaron una serie de diseadores de carcter independiente, ligados al mundo de la pintura o la ilustracin. Entre ellos destaca la figura del valenciano Javier Mariscal, creador de la mascota para los Juegos Olmpicos de 1992 en Barcelona, as como la del cataln Peret (Pere Torrent) y la del madrileo scar Marin, ligados a una reivindicacin vitalista cuya influencia se pierde en las corrientes posmodernas italianas.

MARCO REFERENCIAL

ESTRUCTURA BASICA DE UNA PAGINA WEB

El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera: <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> Un documento HTML en s est dividido en dos zonas principales:
o

El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>

Dentro del encabezamiento hay informacin del documento, que no se ve en la pantalla principal del BROWSER que es utilizado para visualizar el documento HTML, principalmente la informacin encontrada en el encabezamiento es el ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de direcciones). Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.) Por tanto, la estructura de un documento HTML queda de esta manera: <HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <BODY> [Aqu van las etiquetas que visualizan la pgina] </BODY> </HTML>

DANDO FORMA AL TEXTO DE UNA PAGINA WEB Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que ste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos prrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>) El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el nmero 6), siendo el nmero indicativo del tamao. El tamao mayor es el correspondiente al nmero 1. Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque s la mayora de ellos). Nos centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. Tambin tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuacin: EJEMPLO <HTML> <HEAD> <TITLE> Mi pagina en el Web - 1 </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera Pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todava es muy sencilla. Como l lenguaje HTML no es difcil, pronto estar en condiciones de hacer cosas ms interesantes. <P> Aqu va un segundo prrafo, que les parece. </BODY> </HTML> Una etiqueta puede estar anidada dentro de otra. En el ejemplo anterior cmo lo est la etiqueta <CENTER> dentro de la etiqueta <H1>. Cuando queremos poner un texto sin ninguna caracterstica especial, lo ponemos directamente. Unicamente, la separacin entre prrafos (dejando una lnea en blanco) la conseguimos con la etiqueta <P>. Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre.

Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras observamos que el navegador slo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el cdigo "&nbsp;" (non-breaking space). Para destacar alguna parte del texto se pueden usar: <B> y </B> para poner algo en negrita (bold). <I> y </I> para poner algo en cursiva (italic). Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estar preformateado, es decir que aparecer como si hubiera sido escrito con una mquina de escribir, con una fuente de espaciado fijo (tipo Courier). Adems se respetarn los espacios en blanco y retornos del carro, tal como estaban en nuestro documento HTML. Es muy apropiada para confeccionar tablas y otros documentos similares. Con la etiqueta <TT> y </TT> conseguimos tambin que el texto tenga un tamao menor y la apariencia de los caracteres de una mquina de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto, sino que nicamente cambia su apariencia. La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general. Este prrafo est escrito entre ambas etiquetas. Obsrvese los mrgenes a ambos lados. En las frmulas matemticas puede interesar poder escribir ndices y subndices, que se consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente. A menudo nos interesar presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos:
o o o

Listas desordenadas (no numeradas) Listas ordenadas (numeradas) Listas de definicin.

Las listas desordenadas (Unordered Lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente: <UL> <LI> Un elemento <LI> Otro elemento <LI> Otro ms <LI> etc. </UL> Es decir, toda la lista est dentro de la etiqueta <UL> y </UL>, y luego cada elemento va precedida de la etiqueta <LI> (list tem). El resultado de lo anterior es el siguiente: Se puede anidar una lista dentro de otra. Por ejemplo: <UL> <LI> Mamferos <LI> Peces

<UL> <LI> Sardina <LI> Bacalao </UL> <LI> Aves </UL> Las listas ordenadas (Ordered Lists) sirven para presentar elementos en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecer automticamente un nmero correlativo para cada elemento. <OL> <LI> Primer Elemento <LI> Segundo Elemento <LI> Tercer Elemento <LI> etc. </OL> Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas. El tercer tipo lo forman las listas de definicin. Como su nombre indica, son apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada rengln de la lista tiene dos partes:
o

El nombre de la cosa a definir , que se consigue con la etiqueta <DT> (definition term). La definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).

<DL> <DT> Una cosa a definir <DD> La definicin de esta cosa <DT> Otra cosa a definir <DD> La definicin de esta otra cosa </DL> Comentarios no visibles en la pantalla A veces es muy til escribir comentarios en el documento HTML sobre el cdigo que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos smbolos: <!-- y --> Ejemplo <HTML> <HEAD> <TITLE> Mi pagina del Web - 2 </TITLE> </HEAD>

<BODY> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes: <!-- Una lista sin orden alguno --> <UL> <LI> El cine <LI> El deporte <UL> <LI> Natacion <LI> Baloncesto </UL> <LI> La musica </UL> La musica que ms me gusta es <I> (en orden de preferencia): </I> <!-- Una lista con un orden --> <OL> <LI> El rock <LI> El jazz <LI> La musica clasica </OL> </BODY> </HTML> 3. Caracteres especiales Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los smbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, dara esto lugar a una ambigedad, ya que el programa navegador podra interpretarlos como el comienzo o final de una etiqueta, en vez de un carcter ms del texto. Para resolver este problema, existen unos cdigos para poder escribir estos caracteres y otros relacionados con las etiquetas. &lt; para < (less than, menor que) &gt; para > (greater than, mayor que) &amp; para & (ampersand)

&quot; para " (double quotation) Como se ve, estos cdigos empiezan siempre con el signo "&" y acaban siempre con ";" De una manera similar, existen cdigos para escribir letras especficas de distintos idiomas. Hay muchos de ellos, pero, lgicamente, los que ms nos interesan son los propios del castellano (las vocales acentuadas, la " " y los signos " " y " " ) Los cdigos de las vocales acentuadas se forman comenzando con " & ", seguido de la vocal en cuestin, seguido de la palabra acute (aguda) y terminando con el signo " ; " &aacute; Para la &eacute; Para la &iacute; Para la &oacute; Para la &uacute; Para la &Aacute; Para la &Eacute; Para la &Iacute; Para la &Oacute; Para la &Uacute; Para la

El resto de los cdigos son: &ntilde; Para la &Ntilde; Para la &uuml; Para la &Uuml; Para la &#191; Para &#161; Para Todo esto, que como se ve es muy laborioso, puede parecer intil ya que si escribimos nuestro texto sin hacer ningn caso de estas convenciones, escribiendo las letras acentuadas y dems signos directamente, es muy posible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos, estar seguros que les ocurra lo mismo a todos los que accedan a nuestras pginas con otros navegadores distintos. 4. ENLACES La caracterstica que ms ha influido en el espectacular xito del WEB ha sido, aparte la de su carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. En general, los enlaces tienen la siguiente estructura: <A HREF="XXX"> YYY </A> Donde XXX es el destino del enlace (Obsrvese las comillas). YYY es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado) Tipos de enlaces 1. Enlaces dentro de la misma pgina 2. Enlaces con otra pgina nuestra 3. Enlaces con una pgina fuera de nuestro sistema 4. Enlaces con una direccin de e-mail

1. Enlaces dentro de la misma pgina A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la pgina a donde queremos saltar, se sustituye por #MARCA (la palabra MARCA puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). Su estructura es, entonces: <A HREF="#MARCA"> YYY </A> Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="MARCA"> </A> Enlaces con otra pgina nuestra Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar con la pgina creada en el ejemplo 2, que la hemos llamado mipag2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo: <A HREF="mipag2.html"> Ejemplo de mi segunda pagina </A> Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pgina, adonde va por defecto, en ese sitio tenemos que colocar una marca (ver la Enlaces dentro de la misma pgina), y completar el enlace con la referencia a esa marca. Lo veremos con el siguiente ejemplo: <A NAME="MIMARCA"></A> es la marca que colocaremos en nuestra pagina, que deseamos accesar desde otra nuestra. Entonces la etiqueta tiene que ser: <A HREF="mipag2.html#MIMARCA"> En mi otra pagina </A>. Una observacin importante: Pudiera ocurrir que nuestro sitio del WEB estuviera organizado con un directorio principal, y otros subdirectorios auxiliares. Si la pgina a la que deseamos accesar est, por ejemplo en el subdirectorio misubdir, entonces en la etiqueta tendra que colocarse "misubdir/mipag2.html". Y a la inversa, si quiero saltar desde una pgina a otra que est en un directorio anterior, en la etiqueta tendra que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsrvese que se debe utilizar el smbolo / para indicar los subdirectorios, y no este otro \, que es propio nicamente de Windows. Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un nico directorio, pero esto tiene el inconveniente de que est todo ms desordenado, y sean ms difciles de hacer las futuras modificaciones. Enlaces con una pgina fuera de nuestro sistema Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin completa, o URL (Uniform Resource Locator). El URL podra ser, adems de la direccin de una pgina del WEB, una direccin de FTP, GOPHER, etc.

Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos llamado anteriormente XXX (el destino del enlace). Si queremos enlazar por ejemplo con la pgina de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sera: <A HREF="http://home.netscape.com/"> Pgina inicial de Netscape </A> Es muy importante copiar estas direcciones correctamente (respetando las maysculas y minsculas, pues los servidores UNIX s las distinguen) Enlaces con una direccin de e-mail En este caso, sustituimos lo que se ha llamado antes XXX (el destino del enlace) por mailto: seguido de la direccin de e-mail. La estructura de la etiqueta es: <A HREF= "mailto: direccin de e-mail"> Texto del enlace </A> Un ejemplo podra ser: <A HREF= "mailto: tzambran@delfos.ucla.edu.ve"> Tom Zambrano</A> Hay algunos navegadores que no subrayan el comentario de este tipo de enlace. Una manera recomendable y ms segura para conocer la direccin e-mail seria poner algo as como: Comentarios a Tom Zambrano en <A HREF="mailto: tzambran@delfos.ucla.edu.ve"> tzambran@delfos.ucla.edu.ve </A> Es decir, es conveniente, por la razn dicha anteriormente, poner tambin en el texto del enlace la direccin de e-mail. Ejemplo <HTML> <HEAD> <TITLE> Mi pagina del Web - 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis paginas favoritas </H1> </CENTER> <HR> Estas son mis paginas favoritas: <P><A HREF="http://home.netscape.com"> Netscape </A> <BR> <A HREF="http://www.microsoft.com"> Microsoft </A> <BR> <A HREF="http://www.yahoo.com"> Yahoo! </A> </BODY> </HTML> Imgenes La etiqueta que nos sirve para incluir imgenes en nuestras pginas del WEB es muy similar a la de enlaces a otras pginas, que hemos visto en el captulo anterior. La nica diferencia es que, en lugar de indicar al programa navegador el nombre y la localizacin de un documento de texto HTML para que lo cargue, se le indica el nombre y la localizacin de un archivo que contiene una imagen. La estructura de la etiqueta es:

<IMG SRC="imagen.gif"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT <IMG SRC="imagen.gif" ALT="descripcin"> Con el comando ALT se introduce una descripcin (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra pgina con un programa navegador en forma de texto como el lynx. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es slo por esto. Hay casos, como veremos ms adelante, en los que se utiliza una imagen como enlace a otra pgina. Si se omitiera este comando, los que utilizan dichos navegadores no podran de ninguna manera acceder a esas pginas. Con respecto a la localizacin del archivo de esa imagen, se puede decir aqu lo mismo que en el captulo anterior referente a los enlaces. Si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el archivo imagen.gif est en el mismo directorio que el documento HTML que estamos escribiendo. Si no es as, se siguen los mismos criterios que los indicados para los enlaces. Las imgenes deben estar guardadas en un formato de archivo especial llamado GIF. (Hay tambin otro formato ms avanzado JPG). Este formato GIF almacena las imgenes con un mximo de 256 colores, en forma comprimida. Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien est intentando cargar nuestra pgina se canse de esperar, y desista de ello. Para elegir la posicin de la imagen con respecto al texto hay distintas posibilidades. La ms sencilla es colocarla entre dos prrafos, con un titular a un lado. Los navegadores ms actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen. De momento nos vamos a limitar a escoger la posicin del titular con respecto a la imagen. Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se aade el comando ALIGN a la etiqueta, de la siguiente manera: <IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba <IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio <IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pgina. Para estos casos se utilizan generalmente imgenes pequeas (iconos), aunque se puede usar cualquier tipo de imagen.

Segn vimos en el captulo anterior, la estructura general de un enlace es: <A HREF="XXX"> YYY </A> En este caso sustituimos XXX por el nombre del archivo de la pgina a la que queremos acceder. Y en lugar de YYY ponemos la etiqueta completa de la imagen (que queda as englobada dentro de la etiqueta del enlace). Como por ejemplo (hombre.gif) para acceder al ejemplo prctico del captulo 2 (mipag2.html): <A HREF="mipag2.html"><IMG SRC="hombre.gif"></A> Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada. Obsrvese adems que la imagen est rodeada de un rectgulo del color normal en los enlaces. Si no se desea que aparezca ese rectngulo, hay que incluir dentro de la etiqueta de la imagen el atributo BORDER=0, es decir: <A HREF="mipag2.html"><IMG SRC="hombre.gif" BORDER=0></A> Posicionando el cursor sobre esta ltima imagen, comprobamos que acta tambin como enlace aunque carezca del rectngulo de color. Esto puede resultar ms esttico, pero se corre el riesgo de que el usuario no se d cuenta de que la imagen sirve de enlace. Tambin podemos utilizar una imagen para enlazar con otra imagen. Supongamos que queremos enlazar con la imagen estaimagen.gif por medio de esta otra imagen desdeesta.gif: <A HREF="estaimagen.gif"><IMG SRC="desdeesta.gif"></A> Por ultimo, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos XXX (el destino del enlace) con el nombre del archivo de la imagen a la que queremos acceder e YYY (lo que aparece en pantalla como el enlace) por el texto. Por ejemplo: <A HREF="isla.gif"> un paraso tropical </A> Un tipo de imgenes del que se hace abundante uso y que sirven para mejorar la presentacin de la pgina son los iconos, botones, barras separadoras, etc. A pesar de su tamao o forma, son imgenes como cualquier otra. Alineacin y dimensionado de imgenes Alineacin de las imgenes Si se quieren lograr diseos fantasticos y rodear con textos los grficos exactamente igual que en las revistas se pueden usar los comando o atributos conjuntamente con la etiqueta <IMG SRC= "imagen.gif">, ALIGN=. Donde quiera que se desee que aparezca una imagen basta con insertar: <IMG SRC="/camino/imagen.gif" ALIGN=LEFT> Alinea la pagina a la izquierda <IMG SRC="/camino/imagen.gif" ALIGN=CENTER> Alinea la pagina al centro <IMG SRC="/camino/imagen.gif" ALIGN=RIGHT>

Alinea la pagina a la derecha Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <BR>: <BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda. <BR CLEAR=RIGHT> Busca el primer margen libre a la derecha. <BR CLEAR=ALL> Busca el primer margen libre a ambos lados. Un ejemplo para aclarar esto: <IMG SRC="imagen.gif" ALIGN=LEFT> Este texto esta a un lado de la imagen. <BR> Este tambien esta a un lado de la imagen, en la linea siguiente. <BR CLEAR=LEFT> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda. Dimensionando la imagen Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le enve dicha imagen, quedando a la espera hasta que se complete el envo, repitindose este proceso con cada una de las imgenes. Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la pgina se encuentra una imagen grande, ya que durante un tiempo relativamente largo no se ver nada en la pantalla. Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen <IMG SRC="imagen.gif"> que sirven para indicar al navegador cules son sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algn programa grfico). En este caso, el navegador acta de una forma ms favorable, ya que entonces, como conoce las dimensiones de las imgenes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupcin, a la vez que va rellenando esos espacios reservados a las imgenes. Estos comandos o atributos son WIDTH (ancho) y HEIGHT (alto). Por ejemplo, para la imagen isla.gif situada ms arriba: <IMG SRC="imagen.gif" WIDTH=120 HEIGHT=94> Es conveniente hacer esto con todas las imgenes, incluso con las ms pequeas (iconos, botones, etc), para que no haya ninguna interrupcin en el proceso de carga del documento. Se puede tambin, si se quiere, dimensionar las imgenes con unos valores distintos a los que realmente tienen, variando el tamao, la anchura o la altura. Esto es muy

conveniente, por ejemplo para poner en la pgina un thumbnail (reproduccin en pequeo de una imagen), que hace de enlace a la imagen en su verdadero tamao. De esta manera no recargamos demasiado una pgina, y el usuario ser quien decida qu imgenes desea cargar. Para hacer que una imagen reducida sea el enlace con la imagen en su tamao original, lo conseguimos con: <A HREF="imagen.gif"> <IMG SRC="imagen.gif" WIDTH=150 HEIGHT=75> </A> Tambin se puede conseguir esto de otra manera, ms correcta aunque ms laboriosa. Es la de reducir en un programa grfico esta imagen a 150x75, guardarla con otro nombre, y luego hacer que la pequea sea el enlace de la grande. Es ms correcta esta otra solucin porque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, incluso tampoco algunas de las versiones ms antiguas de Netscape. Fondos y colores Se puede cambiar el fondo de dos maneras distintas: 1.Con un color uniforme 2.Con una imagen 1. Fondos con un color uniforme Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera: <BODY BGCOLOR="#XXYYZZ"> XX Es un nmero indicativo de la cantidad de color rojo YY Es un nmero indicativo de la cantidad de color verde ZZ Es un nmero indicativo de la cantidad de color azul Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16 dgitos (en lugar de los diez de la numeracin decimal habitual). Estos dgito son: 0123456789ABCDEF Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los otro dos colores. Los colores primarios son: #FF0000 Rojo

#00FF00 Verde #0000FF Azul Otros colores son: #FFFFFF Blanco #000000 Negro #FFFF00 Amarillo Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando los otros dos invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o an ms oscuro con #550000. Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar los otros dos colores hacindolos ms claros (nmero ms alto), en una cantidad igual. As, podemos convertir el rojo en rosa con #FF7070. Colores del texto y de los enlaces Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podra ocurrir que su lectura contra un fondo oscuro fuese muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul. Para evitar esto, se pueden escoger los colores del texto y de los enlaces, aadiendo a la etiqueta (si se desea) los siguientes comandos: TEXT color del texto LINK color de los enlaces VLINK color de los enlaces visitados ALINK color de los enlaces activos (el que adquieren en el momento de ser pulsados)

Los cdigos de los colores son los mismos que los que se han visto anteriormente. La etiqueta, con todas sus posibilidades, sera: <BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ"> El comando TEXT explicado anteriormente (que va englobado dentro de la etiqueta <BODY>) cambia el color de la totalidad del texto de la pgina. Tanto el Netscape Navigator 2, como el Microsoft Explorer soportan una etiqueta de color de la fuente con la que se puede cambiar slo una parte del texto: <FONT COLOR="#XXYYZZ"> Este texto es de color XXYYZZ </FONT>

2. Fondos con una imagen El fondo de una pgina puede ser tambin una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la pgina, de una manera anloga al tapiz de Windows. La estructura de la etiqueta puede ser: <BODY BACKGROUND="imagen.gif"> <BODY BACKGROUND="imagen.jpg"> No todos los navegadores soportan este formato. Se pueden aadir tambin a esta etiqueta todos los comandos para cambiar los colores del texto y de los enlaces, vistos anteriormente. Esto es imprescindible a veces para conseguir que el texto sea legible, en contraste con el fondo. Hay que prever la posibilidad de que quien acceda a nuestra pgina haya deshabilitado la carga automtica de imgenes, en cuyo caso tampoco cargara la imagen que sirve como fondo y slo vera el fondo estndar de color gris. Esto podra ser muy perjudicial si hemos escogido unos colores para el texto y los enlaces que no contrastan bien con ese fondo gris. La solucin a este problema es poner dentro de la etiqueta <BODY> los dos comandos BACKGROUND y BGCOLOR (en este orden), teniendo cuidado en escoger un color uniforme de fondo parecido al de la imagen. Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg. Escogemos entonces un color de fondo azul claro, #CCFFFF. La etiqueta quedara as: <BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF"> Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automtica de imgenes, al cargar la pgina, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la imagen. Tablas Las tablas pueden parecer un modo sencillo de disponer el texto en columnas o quizs de aadir un titular a una ilustracin, pero hay modos de sacar un gran partido de una caracterstica aparentemente sencilla. La etiqueta <TABLE> puede ser una poderosa herramienta de formato. Se puede hacer por ejemplo, no mostrar el borde de una tabla en absoluto. Tambien se puede hacer uso de la etiqueta <TABLE> para ubicar texto e imgenes con precisin, en prcticamente casi cualquier lugar de una pgina. Estructura de una tabla Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas. <TABLE> [resto de las etiquetas] </TABLE> Es la etiqueta general, que engloba a todas las dems. <TABLE BORDER=n>

[resto de las etiquetas] </TABLE> Presenta los datos tabulados con un borde, haciendo las tablas ms atractivas, y el grosor es de n pixeles. <TR> [etiquetas de las distintas celdas de la primera fila] </TR> Permite formar cada fila de la tabla. Hay que repetirla tantas veces como filas queremos que tenga la tabla. <TD> [contenido de cada celda (imgenes, texto, etc.)] </TD> Permite formar las distintas celdas que contendr cada fila de la tabla. Hay que repetirlas tantas veces como celdas queramos que tenga la fila. <TH> [encabezamiento de tabla] </TH> Es utilizada para colocar encabezamientos en negrita sobre las columnas EJEMPLO <HTML> <HEAD> <TITLE> Pgina de prueba para tablas</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH>Columna 1</TH> <TH> Columna 2</TH> <TH> Columna 3</TH> <TD>fila1 - c elda1</TD> <TD>fila1 - celda2</TD> <TD>fila1 - celda3</TD> </TR> <TR> <TD>fila2 - celda1</TD> <TD>fila2 - celda2</TD> <TD>fila2 - celda3</TD> </TR> </TABLE> <BR>[Aqu van las etiquetas que visualizan la pgina]

</BODY> </HTML>

Qu pasa si el numero de celdas de una fila es distinto al de otra? Pues el navegador forma el nmero de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas. Titular de tabla Se puede aadir un titulo a la tabla, es decir un texto situado encima de la tabla que indica cul es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>. Por ejemplo: <CAPTION> Esta es mi primera tabla </CAPTION> <CAPTION ALIGN=TOP>TITULO</CAPTION> Coloca l titulo sobre la tabla. <CAPTION ALIGN=BOTTOM>TITULO</CAPTION> Coloca l titulo bajo la tabla.

Contenido de las celdas Solo se ha puesto hasta ahora en el ejemplo, texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imgenes, enlaces, etc. No hay ms que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc. EJEMPLOS Con una imagen <TABLE BORDER> <TR>< TD> <IMG SRC="imagen.gif"> </TD> </TR> </TABLE> Con un enlace <TABLE BORDER> <TR> <TD><A HREF="index.html"> Mi pgina principal </A></TD> </TR> </TABLE>

Posicionamiento del contenido dentro de la celda Normalmente, el contenido de una celda est alineado a la izquierda. Pero se puede cambiar esto aadiendo dentro de la etiqueta de la celda los siguientes atributos: <TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD> <TH ALIGN=LEFT> Cabecera a la izquierda </TH> El alineamiento por defecto en el sentido vertical es en el medio. Tambin se puede cambiar, aadiendo dentro de la etiqueta de la celda los siguientes atributos: <TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD> Variando las dimensiones de la tabla El navegador se encarga normalmente de dimensionar el tamao total de la tabla de acuerdo con el nmero de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc. A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue aadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensin de la pantalla, o a una cifra que equivale al nmero de pixels. Por ejemplo, si colocamos: <TABLE WIDTH=60%> O, por ejemplo ponemos: <TABLE HEIGHT=200> Celdas que abarcan a otras varias A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue aadiendo dentro de la etiqueta de la celda los atributos COLSPAN=nmero para extenderse sobre un nmero determinado de columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un nmero determinado de filas. Por ejemplo, en la primera tabla del ejemplo anterior vamos a aadir una fila con una sola celda, que abarca a dos columnas: <TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR> O, en la misma tabla, vamos a aadir una celda en la primera fila, pero que abarque tambin a la siguiente: <TD ROWSPAN=2> Celda junto a 2 filas </TD> Color de fondo en las tablas Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente anlogo al empleado para que una pgina tenga un color de fondo uniforme

(segn vimos en el captulo 7). Para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ", visto en dicho captulo. Se puede conseguir: <TABLE BORDER BGCOLOR="#XXYYZZ"> [resto de las etiquetas] </TABLE> La totalidad de la tabla tendr un color de fondo. <TD BGCOLOR="#XXYYZZ"> [contenido de la celda] </TD> Solamente una celda determinada tendr un color de fondo, distinto al del resto de la tabla.

Imgenes de fondo en las tablas El Explorer de Microsoft soporta la colocacin de imgenes de fondo en el interior de las tablas, de una manera anloga a como se hace en una pgina (segn vimos en el captulo 7). Para ello debemos, utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg", visto en dicho captulo. Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestin se multiplicar detrs de todas las celdas. (Con el Netscape no se ver ninguna imagen de fondo, slo con el Explorer) Si, por el contrario, slo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la imagen de fondo se ver slo en esa celda. Separacin entre las celdas de una tabla Por defecto, la separacin entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separacin de 20 pixels entre celdas ponemos: <TABLE BORDER CELLSPACING=20> A primera vista parece como si esto fuera lo mismo que si hubiramos aumentado el espesor de los bordes. Pero para comprobar que no es as, hagamos que en el caso anterior, tenga adems unos bordes de 5 de espesor: <TABLE BORDER=5 CELLSPACING=20> Separacin entre el borde y el contenido dentro de las celdas

Por defecto, la separacin entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y los bordes, dentro de cada celda: <TABLE BORDER CELLPADDING=20> Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior). Por ejemplo, una tabla con bordes de 5 de espesor, separacin entre celdas de 15 y separacin del contenido con respecto a los bordes de las celdas de 20, lo obtendramos con: <TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20> Videos El formato de vdeo utilizado es el AVI de Windows, que como es sabido, incluye imgenes y sonido digitales. El mayor problema de los ficheros digitales de vdeo es el gran tamao de los mismos, ya que en la prctica unos pocos segundos de vdeo con sonido puede representar un fichero de varios Mb. (mega bytes), en realidad es como si se trataran dos ficheros separados, uno con el sonido y otro con las imgenes, pero sincronizados. No hay que confundir este formato AVI con el MPEG, que tambin puede integrar imgenes y sonido, aunque con un nivel de compresin diferente, y peor sincronizacin con el sonido. Habitualmente los ficheros .MPG se suelen encontrar sin sonido. Al utilizar estos videos en nuestra pagina debemos tener cuidado porque como se explico anteriormente son de gran tamao, lo cual puede hacer que nuestra pagina se demore mucho en abrirse lo que puede ocasionar que el visitante se desepere y se salga de nuestra pagina Los conocimientos que teniamos hasta el momento no nos permitain manejar elementos de multimedia, solo nos permitian insertar imagenes, colocar un ancla, darle color al fondo,ec. Pero en estos momentos comenzaremos a manejar el concepto de multimedia y Plug-ins(Son programas que permiten tratar diversos tipos de ficheros, de esta forma podr insertarse estos tipos de ficheros dentro de una pgina HTML, permitiendo mostrar vdeo en distintos formatos (mpeg, avi, mov), interpretar sonido, en varios formatos (au, mid,), incluir ficheros de Adobe Acrobat (pdf), mostrar ficheros VRML, etc... ) La etiqueta utilizada para insertar un video en tu WEB es EMBED> y va acompaada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene el video a insertar. EJEMPLO:

<EMBED SRC="c:\variedades\videos\traduweb.avi">

ATRIBUTOS AUTOSTART: Este atributo posee dos valores posibles: TRUE y FALSE(por defecto). El primero sirve para que el video se cargue junto con la pagina, es decir, apenas se abre la pagina comienza a abrirse. El segundo valor es para que el visitante al hacer click sobre el video lo active. LOOP: Al ingles traduce lazo. Este atributo al igual que el anterior tanbien posee dos valores: FALSE (por defecto) y TRUE, el primero hace que el video se repita una solo vez, y el segundo hace que el video se repita infinitas veces HEIGHT y WIDTH: Estos atributos son utilizados para definir el alto y el ancho del video respectivamente. A la hora de utilizar estos valores se debemos tener mucho cuidado ya que si los valores no coinciden con los de las dimenciones del video este sera recortado ALING: Este atributo no lo voy a explicar porque funciona igual que en las imagenes, no funciona sobre el video sino sobre su alineacion con el texto en la pagina. Sonidos Una pgina Web puede tener sonidos incorporados, bien sea como un fondo sonoro(se ejecuta automticamente al cargar la pgina), o como una opcin para que el visitante la active. El Internet Explorer est mejor adaptado para el sonido, pues a partir su versin 2.0 fue capaz de reproducir fondos sonoros sin necesidad de aadir nada, y no hay ninguna complicacin con los servidores, como con el Netscape. Adems, a partir su versin 3.0, es compatible con los plug-ins del Netscape. El archivo de sonido puede ser un MIDI(musical instrument digital interface) o un .WAV(waveform audio) 1. MICROSOFT EXPLORER: Se utiliza la etiqueta &ltBGSOUND> acompaada de su atributo principal que es el SRC. <BGSOUND SRC="Ruta\Sonido.wav"> ATRIBUTOS: LOOP Sirve para especificar el nmero (n) de veces que se debe ejecutar el fichero de sonido. Si se escoje el nmero n=-1 o se pone LOOP=infinite, el sonido se ejecutar indefinidamente. El valor por defecto de este es 1, es decir, se repite una sola vez. Si yo quiero que se repita infinito numero de veces se le coloca INFINITE

2.NETSCAPE NAVIGATOR. La etiqueta que debemos emplear en Netscape es &ltEMBED>, que como cosa rara debe ir acompaada de su atributo principal que es el SRC, para indicar la direccion de donde se encuentra. ATRIBUTOS: LOOP: Con este atributo se indica que, el sonido de fondo se debe reproducir continuamente.Al igual que los videos puede tomar el valor de FALSE y TRUE AUTOSTART: Tambien posee los mismos valores que el anterior. Con e l TRUE arranca cuando se este cargando la pagina y con el FALSE no. VOLUME="n". Con esta directiva controlamos el volumen de sonido.n es un numero entero de 1 a 100.El valor por defecto de este atributo es 50.Pero este tambien se puede cambiar manualmente. WIDTH="n". Es el ancho en pixels de la consola que aparece y que tiene diversas teclas, stop, play, etc. HEIGHT="n". Es el alto en pixels de la consola que aparece. Dependiendo del plug-in que se tenga tenemos el problema que las dimensiones de consola son diferentes por lo que habr ocasiones en que se vean zonas en blanco. CONTROLS="smallconsole". Visualiza los controles para la reproduccin. HIDDEN="true". Con este atributo ocultamos la consola, pero tambien se deben definir sus dimensiones STARTTIME=mm:ss y ENDTIME=mm:ss Este atributo es utilizado para activar la consola despues de cierto tiempo. mm son los minuto y ss son los segundo. Para que esto funcione se deben tener dos digitos ALING: Este atributo es igual que al de los videos PRINCIPIOS DE DISEO BASICO Disear es un acto humano fundamental diseamos cada vez que hacemos algo por una razn definida. Ello significa que casi todas nuestras actividades tienen algo de diseo: lavar platos, llevar una contabilidad o pintar un cuadro. Ciertas accione son no solo intencionales, sino que terminan por crear algo nuevo es decir son creadoras, entonces diseo e toda accin creadora que cumple una finalidad.

SEGN DAVID N. PERKINS: Esfuerzo humano para dar forma a los objetos de acuerdo a propsitos. Dar cuerpo al conocimiento bajo la forma de una herramienta para lograr algo. Una estructura adaptada a un propsito. El diseo es el conocimiento para conceder un propsito. El propsito lleva una estructura o investigacin para poderlo argumentar. Seguir parmetros establecidos para poder obtener una investigacin del tema a tratar. Toda informacin es potencialmente diseo, solo hace falta que ste conocimiento se conecte a un propsito. 1. Propsito? 2. Estructura? 2.1. Casos del modelo de diseo? 2.2. Qu lo explica y lo evalua? 3. Modelo? 4. Argumentos? Las anteriores pregunta guan la comprensin proporcionando un diseo completo. SEGN GILLAM SCOTT: Es toda accin creadora que cumple su finalidad. Es un acto humano fundamental. Es parte del conocimiento innato o por medio de la intuicin. La capacidad de representar una idea ( plasmar y crear ). La necesidad humana es la causa primera de la que surge un diseo. Toda creacin nace para satisfacer una necesidad. Las necesidades son materiales, espirituales y emocionales. Crear funcin y expresin con determinado fin. Funcin: Es el uso especifico al que se destina una cosa. Expresin: Es aquella que genera un sentimiento a una necesidad. En el proceso del diseo lo principal es tener un motivo para disear. Para crear diseo se debe conocer material, tcnicas y forma. Causa Material: Es el estudio de los materiales a usarse en la construccin del diseo. Causa Tcnica: Es la eleccin de tcnicas y herramientas usadas. Causa Formal: Es el proceso de creacin dividido en dos formas, el diseo para llegar a la construccin y disear a medida en que se va construyendo. Las artes visuales se dividen entres clases: Tridimensionales, relaciones de secuencia y duracin en tiempo.

SEGN YUES ZIMMERMAN: El diseo se basa en el designio. Se basa la utilidad de un producto a disear. Un buen diseo es el que tiene facilidad de manejo y su utilidad es a gran escala. Los medios de comunicacin han llevado a un punto o imagen equvoca del diseador. EL DISEO ES LA NECESIDAD POLTICA DEL DISEADOR PARA HACER COMUNIDAD MEDIANTE LA COMUNICACIN.

LOS TIPOS DE DISEADOR: Diseador Pragmticomercantilista: El que vende por cualquier dinero. Diseador Tecnogrtico: Es elitista y acumula poder. Diseador Autorrealizacin: El que por medio de la perfeccionamiento llega a ser un buen diseador. BUEN DISEADOR: Pensamiento prctico y autnomo. Compromiso tico. Saber, ser, querer. Tener o hacer un buen proyecto. Crear, ejecutar, innovar. LENGUAJE DEL MOVIMIENTO Movimiento horizontal: tranquilidad, estabilidad y paciencia Movimiento vertical: aspiracin, esencia del equilibrio Movimiento curvilneo: vigor, dominio, grandeza, nobleza y enrgico. Movimiento ondulado quebrado: privacidad o calma, tensin o inestabilidad. Movimiento ondulado: continuidad, plenitud y totalidad. Movimiento quebrado regular: impulso entre dos polos opuestos, constancia y movilidad Movimiento en forma S: tranquilidad y mesura Movimiento en formas variadas: delicadeza y gracia-uniforme, impresionante y desbordanteirregular

LENGUAJE DE LOS CONTORNOS Cuadrado: rectitud, honestidad, perfeccin, voluntad, robustez, firmeza y resistencia Rectngulo vertical: elegancia distincin Tringulo vertical: tensin accin conflicto Tringulo equiltero: equilibrio por excelencia Tringulo issceles: movimiento, voluntad y elevacin Tringulo horizontal: movimiento y estabilidad al mismo tiempo Ovalo: distincin, afecto, vitalidad y atraccin Circulo: forma perfecta ms dinmica, mxima atencin

LENGUAJE DE LOS COLORES Los colores pueden transmitir sensaciones, referirse a ideas, resaltar o atenuar un elemento del diseo, evocar emociones, etc. Pueden relacionarse con cuestiones culturales, generacionales, de gnero, con tendencias de la moda, etc. Por cierto que estas asociaciones no son automticas, no todos los observadores reaccionan del mismo modo ni interpretan lo mismo frente a una determinada coleccin de colores. Pero el diseador, al definir el conjunto de colores que usar en un diseo, puede aumentar la fuerza expresiva si los elige correctamente. Azul: recompensa, tristeza, verdad, fidelidad, fri, constancia, pasividad, ternura Azul violeta: espiritualidad Azul claro: fe Azul oscuro: poder, misterio, terror Violeta: caos, amor, divinidad, muerte, soledad, amenaza, opresin Verde: belleza, humanidad, camaradera, ocio, envidia, salud, tranquilidad, esperanza Amarillo: inteligencia, travesura, excelencia, confidencia, sabidura Dorado: distincin, riqueza, valor Marrn: accin, fertilidad, deporte, fuerza fsica, masculinidad, virilidad, amistad Prpura: afliccin, melancola, dignidad, poder Rojo: excitacin, ejecucin, amor, humanidad, pasin, emocin, peligro Naranja: furia, dinamismo, amor fsico, pintoresco, triunfo, sacrificio Rosado: aurora, alegra, intimidad, sexo, feminidad Negro: autoridad, poder, muerte, dolor, lealtad Blanco: Santidad, tregua, pureza, inocencia, fri

****Esta tcnica nos da una forma de expresin grfica ms sintetizada y de rpida respuesta para expresar cualquier clase diseo, a travs de lneas, contornos y colores.

LENGUAJE TIPOGRAFICO Las letras pueden transmitir sensaciones y definir personalidades, resaltar o atenuar un diseo. Las diferentes fuentes tipogrficas expresan un lenguaje independiente acorde a lo que se quiere expresar . PALOSECO: Psicolgicamente transmiten seriedad, sencillez, solidez y son de alta legibilidad. ROMANAS: Psicolgicamente transmiten elegancia, formalidad, costumbre, gracia, clsicas y de alta legibilidad. ROTULADAS: Psicolgicamente transmiten romanticismo, elegancia, movimiento, estilo. DECORADAS:: Psicologicamente transmiten alegria, movimiento, y sentimiento independiente.-

DISEO METODOLGICO

Diseo de la Investigacin: Al ser sta una investigacin social de tipo experimental, viendo la problemtica que aborda este proyecto se ha optado como mtodo de recoleccin de informacin el uso de la entrevista para reunir una serie de datos tiles que apoyarn este estudio. Esta entrevista se aplico a un grupo de ingenieros de sistemas que tienen cada uno su propia empresa de creacin de pginas Web. Por esta razn se tomo esta muestra en Bogot. Poblacin y Muestra. Poblacin: Ingenieros de sistemas que se desempean en la creacin de paginas Web, Muestra: Se escogieron diez (10) Ingenieros de Sistemas. Empresas independientes consolidadas en Bogot

Presentacin y Anlisis de Resultados. La entrevista gir en torno a cuatro preguntas bsicas, a saber: 1.- Qu recurso de diseo bsico utiliza Ud. con ms frecuencia para la creacin adecuada de una pagina Web?. 2.- Cree Ud. como Ingeniero de Sistemas que el uso de las herramientas bsicas de diseo disminuye de alguna manera los resultados y aceptacin a su creacin?.

3.- Ha hecho Ud. alguna serie de estudios de diseo que le permita reforzar su conocimiento con respecto a la realizacin y creacin de paginas Web para que sean manejadas en Internet?. 4.- La informacin que Ud. ha manejado hasta el momento le ha parecido la mas adecuada y le ha sido til para su trabajo en Internet?. Esta entrevista verifica la tendencia actual, ms sin embargo no asegura que esta se mantenga por siempre, por cuanto podramos estar frente a una simple "moda" o quizs en un futuro cercano existan mejores diseadores en este medio.

CRONOGRAMA DE ACTIVIDADES

Noviembre 1 semana 2 semana 16 17 18 19 22 23 24 25 26 Recoleccin de informacin Recoleccin de informacin Entrevista Ing. N3 y N4 Entrevista Ing. N1 y N2 Entrevista Ing. N5 y N6 Entrevista Ing. N7 Entrevista Ing. N8

29 recoleccin de informacin

Diciembre 3 semana 30 1 2 Conceptualizacin de la recoleccin de datos Conceptualizacin de la recoleccin de datos Entrevista Ing. N10

3 Presentacin anteproyecto

PRESUPUESTO Valor Cantida Unitario d Resma de papel Computado r Impresin Pasta del trabajo Transporte 10.000 1.000/h 250/hoja 10.000 1 48 horas 100 hojas 1 Aporte Propio Aporte Solicitad o 10.000 48.000 25.000 10.000 51.100 4.800 Total 10.000 48.000 25.000 10.000 51.100 4.800 148.900

Material fungible

5.110 10 g.gasolin galones a Alimentaci 1.600 3 n SUBTOTAL

Entrevista Ing. N9

CONCLUSIONES

Con este trabajo se ha llegado a una serie de consideraciones acerca del uso de principios bsico de las herramientas de diseo como fuente de creacin y su influencia en el desarrollo de las paginas Web. De los resultados obtenidos por la entrevista realizada se puede constatar el hecho de que los Ingenieros de Sistemas de las diferentes empresas se sienten influenciados negativamente por el mal uso frecuente de diseo a la hora de crear las paginas Web. Ms an si se refuerza la idea de que las herramientas de diseo son muy importantes y que en un futuro no tan lejano podran llegar ha ser requisito para la realizacin de las paginas Web. Entre las principales ventajas que se puede indicar acerca del manejo de los principios bsicos de diseo en la realizacin de paginas Web, se puede destacar una mejor aceptacin y respuesta por parte de las personas que visitan a diario el Internet. Otra ventaja importante es el hecho de tener acceso al conocimiento de las bases del diseo que permitan realizar las paginas con mejor calidad. Todo esto hace suponer que en un futuro no tan lejano la educacin tendr que dar paso a un nuevo modelo de enseanza. Un modelo que ya se est planteando en distintas universidades y escuelas del mundo. Una enseanza que se oriente hacia el desarrollo de la capacidad de anlisis, de sntesis, de razonamiento del estudiante y no hacia la memorizacin intil de conceptos, caractersticas, y dems datos detallados sobre hechos, situaciones, personas o cosas.

BIBLIOGRAFA

Bustos, E.d., La metfora, ensayos multidisciplinares. Fondo de cultura econmica de. Gillam, S. R, Fundamentos del diseo. Noriega editores Contreras, F. and C. San Nicolas, Diseo grfico, creatividad y comunicacin. Madrid: Blur Ediciones. 230. Cerezo, J.M., Diseadores en la nebulosa: el diseo grfico en la era digital. Madrid: Ed.itores. Erickson, T.D., Working with Interface Metaphors, in The Art of Human-Computer Interface Design, B. Laurel, Editor. Bilancio, G., Marketing, el valor de provocar. Buenos Aires: Pearson Educacin. Echevarra, M.A., Creatividad y Comunicacin. Madrid: GTE Editorial. Perkins, D. Conocimiento como diseo. Facultad de psicologa Pontificia Universidad Javeriana. Van Gogh. V, Teoria del color.
www.micromegas.com www.rincondelvago.com

Biblioteca Microsoft Encarta 2004