SUBSECRETARIA DE EDUCACIN MEDIA SUPERIOR DIRECCIN GENERAL DE BACHILLERATO PREPARATORIA FEDERAL POR COOPERACIN RICARDO FLORES MAGN CLAVE:

20SBC2181V COMPONENTE DE FORMACIN PROFESIONAL. CAPACITACIN PARA EL TRABAJO EN INFORMTICA Mdulo II.- Creacin de productos multimedia a travs de software de diseo. Submdulo III.- Elaboracin de pginas web. 1. Utilizar los elementos fundamentales del diseo. Diseo.- Proceso de creacin visual con un propsito, el cual cumple con exigencias practicas. Un buen diseo es la mejor expresin visual de la esencia de algo cuya creacin no debe ser solo esttica sino tambin funcional. Diseo grfico.- Es una profesin cuya actividad es la accin de concebir, programar, proyectar y realizar comunicaciones visuales, producidas en general por medios industriales y destinadas a transmitir mensajes especficos a grupos sociales determinados. Esta es la actividad que posibilita comunicar grficamente ideas, hechos y valores procesados y sintetizados en trminos de forma y comunicacin, factores sociales, culturales, econmicos, estticos y tecnolgicos. Tambin se conoce con el nombre de diseo en comunicacin visual, debido a que algunos asocian la palabra grfico nicamente a la industria grfica, y entienden que los mensajes visuales se canalizan a travs de muchos medios de comunicacin, y no slo los impresos. Diseo web.- Es una actividad que consiste en la planificacin, diseo e implementacin de sitios web y pginas web. No es simplemente una aplicacin del diseo convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen y vdeo. Se lo considera dentro del diseo multimedia. La unin de un buen diseo con una jerarqua bien elaborada de contenidos aumenta la eficiencia de la web como canal de comunicacin e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, caracterstica destacable del medio. El diseo web ha visto amplia aplicacin en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresin plstica en s. Artistas y creadores hacen de las pginas en Internet un medio ms para ofrecer sus producciones y utilizarlas como un canal ms de difusin de su obra. Elementos del diseo.

Los siguientes elementos son las bases que construyen el Diseo. Lnea.- Una lnea es definida como una marca con longitud y direccin, creada mediante un punto que se mueve a lo largo de una superficie. Una lnea puede variar en longitud, ancho, direccin, curvatura y color. La lnea puede ser de dos dimensiones (una lnea de lpiz sobre papel), o tres dimensiones implcitas. Forma.- Una figura plana o una forma es creada cuando lneas actuales o implcitas se encuentran alrededor de un espacio. Un cambio en el color o el sombreado puede definir una forma. Las formas pueden ser clasificadas en varios tipos: geomtricas (cuadrado, tringulo, crculo) y orgnicas (irregulares en contorno). Tamao.- Este se refiere a las variaciones de las proporciones de los objetos, lneas o formas. Hay una variacin de tamao en objetos ya sean reales o imaginarios.

Espacio.- es el rea vaca o abierta entre, alrededor, arriba, debajo o entre objetos. Figuras y formas son realizadas en el espacio alrededor y entre l. El espacio tambin es llamado bidimensional o tridimensional. El espacio positivo es rellenado con formas o figuras. El espacio negativo rodea una forma o figura. Color.- El Color es el carcter percibido de una superficie de acuerdo con la longitud de onda o la luz reflejada desde esta. El Color posee tres dimensiones: TINTE (otra palabra para color, indicada por su nombre as como rojo o amarillo), VALOR (su luminosidad o oscuridad), INTENSIDAD (su brillo u opacidad).

Textura.- La Textura es la forma como se siente la superficie (textura actual) o como puede ser observada (textura implcita). Las Texturas son descritas con palabras como spero, sedoso o rugoso.

Valores.- El Valor es que tan oscuro o claro se ve algo. Podemos alcanzar cambios de valores en el color por medio de la adicin de blanco o negro a dicho color. Claroscuro usa valores en los dibujo mediante contrastes de claros y oscuros en una composicin.

Principios de Diseo. Los principios emplean elementos del diseo para crear composiciones. Balance.- El Balance es el sentido de equidad visual en una forma, figura, valor, color, etc. El Balance se puede hacer simtrica o uniformemente en objetos, valores, colores, texturas, formas, etc.,

Contraste.- El contraste es la yuxtaposicin (fusin) de los elementos opuestos.

nfasis.- El nfasis es usado para crear ciertas partes de sus trabajos artsticos a travs de llamado atencin de manera especial. El centro de inters o punto foco es el lugar del dibujo que le invita a enfocar su mirada.

Proporcin.- La Proporcin describe el tamao, ubicacin o el monto de una cosa comparada con otra.

Patrones.- Los Patrones son creados mediante la repeticin de un elemento (lnea, forma o color) una y otra vez.

Gradacin.- La Gradacin es el tamao y direccin producidos por una perspectiva lineal. La Gradacin del color es desde gamas clidas a fras y por su parte los tonos oscuros a claros producen una perspectiva area. La Gradacin puede agregar inters y movimiento a una forma

Composicin.- Es la combinacin de distintos elementos para formar un todo.

1.1. Analizar las teoras del diseo. Teora del diseo es una denominacin colectiva para todo el conocimiento permanente que se piensa asistir al diseo de varios productos nuevos. Esta informacin ha sido reunida en su mayor parte por un gran nmero de proyectos de investigacin. Correspondiendo a los enfoques usuales de investigacin, la informacin est esencialmente de dos tipos: 1. Conocimiento nomottico: reglas generales que se han recolectado de varios productos diferentes. A este grupo pertenecen: Regulaciones gubernamentales Estndares para propiedades y calidades de productos Patentes Herramientas para el diseo, como algoritmos, consejos, reglas que no fallan. 2. Conocimiento ideogrfico que realmente se refiere slo a productos individuales pero que no obstante se puede generalizar a otros productos tambin: Ejemplares, productos meritorios producidos ms temprano, o sus detalles, Estndares para productos completos Los componentes prefabricados que son disponibles para algunos productos (ej. los edificios y computadoras) se basan a menudo en investigacin y ellos as pueden ser dicho "contienen" conocimiento terico. En muchos otros campos de la ciencia, la informacin idiogrfica sobre casos discretos no se llamara una teora. Sin embargo, en la prctica de diseo, una teora nomottica apropiada no es siempre disponible y a menudo datos ideogrficos se utilizan como un substituto de la teora. Minimalismo. El minimalismo es una corriente esttica derivada de la reaccin al pop art. Frente al colorismo, a la importancia de los medios de comunicacin de masas, frente al fenmeno de lo comercial y de un arte que se basaba en la apariencia, el minimalismo utiliz conceptos diametralmente opuestos. El sentido de la individualidad de la obra de arte, la privacidad, una conversacin conceptual entre el artista, el espacio circundante y el espectador. As como la importancia del entorno como algo esencial para la comprensin y la vida de la obra. Los preceptos bsicos del minimalismo son: Utilizar colores puros, Asignarle importancia al todo sobre las partes, 4

 Utilizar formas simples y geomtricas realizadas con precisin mecnica, Trabajar con materiales industriales de la manera ms neutral posible y disear sobre superficies inmaculadas. Da gran importancia al espacio y a los materiales ecolgicos El resultado que define este estilo en un concepto es la palabra limpieza. Hay muchas variantes del minimalismo, con un toque ms o menos oriental, o ms o menos escandinavo. Actualmente tiene gran difusin en Europa, entre los ms jvenes, sumado a toda una corriente de muebles de diseo dans contemporneo.
La decoracin minimalista, se nutre de las formas puras, simples, y juega con sus volmenes, su iluminacin y sus superficies.

Los creadores minimalistas reducen al mximo los elementos propios del arte, los volmenes y formas en escultura. De forma anloga proceden en la arquitectura o en la pintura. Intentan condensar en escasos elementos sus principios artsticos y reflexiones.
Conceptualismo. El movimiento artstico surgido a finales de los aos sesenta, cuyos exponentes rechazan el arte como artculo de lujo, permanente, porttil y vendible, proponiendo un tipo de arte en el que cuenta primordialmente la idea o el concepto que respalda sus realizaciones Los artistas conceptuales utilizaron con frecuencia fotos, recortes de peridicos como parte de su creacin, para documentar o para expresar ideas, como por ejemplo:

Cinetismo. Arte cintico, cinetismo, "op art" o arte ptico, en lneas generales podemos definirlo como la forma de crear que se basa en el movimiento de los elementos que componen la obra o que se disponen en el espacio de la representacin grfica. Los autores, usando tcnicas pticas y de una ejecucin de la obra muy estudiada, generan sensaciones de movilidad, para ello usan los conocimientos tcnicos como son el juego con luces y sombras, el contraste de colores, el tamao y proporcionalidad de los objetos, incluso
aplican, a sus obras, de pequeos motores dotndolas de movimiento.

Caractersticas del cinetismo. Es una evolucin matemtica del arte abstracto Se usa la repeticin de las formas simples Los colores crean efectos vibrantes Gran efecto de profundidad Confusin entre fondo y primer plano Hbil uso de las luces y las sombras El resultado es el de un espacio tridimensional que se mueve Aunque el movimiento no sea real, el efecto es de total dinamismo En la retina se sienten vibraciones, altibajos, formas que emergen y se retrotraen.

1.2. Identificar el impacto y el enfoque en diseos existentes. Si bien las definiciones no pueden ser tajantes ni excluyentes, resulta necesario asumir que creatividad e innovacin, arte y diseo se parecern en la medida que las busquemos en mbitos cuyos modos de hacer mantengan alguna identidad y dejarn de parecerse en tanto nos alejemos de esos puntos en los que coinciden. El arte cuando se convierte en industria comercial va a tender a parecerse ms al diseo que al arte callejero, del mismo modo que la creatividad empresarial puede conducir a la innovacin de la misma forma que la innovacin tecnolgica puede inducir cierto estilo de creatividad, ejemplo claro de esto fue en los 80s y 90s la incorporacin de los software digitales al proceso de diseo. Queda agregar que hay descripciones definitivas en los mbitos del diseo para evitar que comencemos a confrontar y asumir que nuestro radio de accin es permeable y sensible a sinnmero de circunstancias. Que algunas de ellas no agotan la complejidad de la produccin en serie, que unas pocas se han vuelto ajenas a las urgencias del mercado, que otras muchas se han convertido en iconos de algunos productos o servicios y que unas cuantas han aceptado jugar el juego mundial de la creacin de valor, la identidad corporativa, los medios y los productos de consumo. El sector de servicios est creciendo, tanto en nmero de empleados como en su importancia en la economa, mientras el sector manufacturero decae. Sin embargo, as como los sectores manufactureros, los servicios deben ser diseados y su diseo debe ser gestionado. El diseo de servicios puede ser tangible como intangible. Puede involucrar artefactos y otras cosas incluyendo comunicacin, ambientes y conductas. Cualquier forma que adopte debe ser consistente, fcil de usar y ser aplicado estratgicamente. Slo recientemente los gerentes involucrados en el sector de servicios se han dado cuenta que un esfuerzo consciente por aplicar tcnicas de diseo a los servicios puede resultar en un incremento en la satisfaccin de clientes, mayor control sobre sus ofertas y mayores ganancias.

1.3. Disear formatos considerando las zonas ureas, direccin, sentido y equilibrio. Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un diseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un mtodo especfico (diseo) construye mensajes (comunicacin) con medios visuales (grafismos). No es el creador del mensaje, sino su intrprete. El principal componente de toda composicin grfica es pues el mensaje a interpretar, la informacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos, que pueden ser muchos y variados, aunque los ms comunes son: Elementos grficos simples: puntos y lneas de todo tipo (libres, rectas, quebradas curvas, etc.) Elementos geomtricos, con contorno o sin l: polgonos, crculos, elipses, valos, etc. Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales. Grficos varios: logotipos, iconos, etc. Ilustraciones Fotografas Cualquier otro elemento visual apto para comunicar un mensaje. Zonas aureas. La cre Vitruvio, la autoridad romana en arquitectura. Ide un sistema de clculo matemtico de la divisin pictrica, para seccionar los espacios en partes iguales y as conseguir una mejor composicin. Se basa en el principio general de contemplar un espacio rectangular dividido, a grandes rasgos, en terceras partes, tanto vertical como horizontalmente.

La escala se utiliza en planos y mapas para la representacin de una medicin proporcional real. La medicin nos permite adecuarnos a la realidad, pero ms importante es lo que colocamos junto al objeto visual o el marco en el que est colocado. La medicin universal es la propia medida del hombre, el tamao medio de las proporciones humanas. La pregunta que hacen todos los diseadores es: cmo podemos distribuir el espacio de diseo de una forma acertada? Pues bien, no hay una norma que nos indique la divisin perfecta, pero existe una frmula muy conocida en el mundo del diseo, que permite dividir el espacio en partes iguales, para lograr un efecto esttico agradable y que puede llegar a ser muy eficaz. Esta teora se denomina "La regla urea", tambin conocida como "seccin urea". sta nos indica que dividiendo nuestro cuadro en tercios, tanto horizontal como verticalmente, los puntos de interseccin de las lneas nos sealan la ubicacin adecuada para destacar el sujeto y/o los elementos ms importantes de la composicin, es decir que el centro de inters puede colocarse en cualquiera de esos puntos. Estas cuatro intersecciones ozonas de gran intensidad permiten que el centro desaparezca como tal.

Ejemplos de aplicacin de la zona aurea:

Direccin y sentido. En la comunicacin visual el diseador tendr que tener en cuenta tanto la vertiente psicolgica de la percepcin humana como las significaciones culturales que pueden tener ciertos elementos. El diseador grfico es una especie de arquitecto del espacio grfico y debe distribuir los elementos en funcin de una estructura interna que tenga una significacin, gua o intencin coincidente con el mensaje que se quiera transmitir. Esta estructura ser la responsable de la eleccin cromtica y su intencionalidad expresiva, de la eleccin de las imgenes o de la disposicin de los bloques de texto. Algunos factores psicolgicos que debemos conocer son: El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composicin y los ejes en los cuales descansa. El desequilibrio crea provocacin e inestabilidad. Tendremos que analizar qu es lo que queremos transmitir al receptor y con respecto a esto crear una composicin determinada. La referencia horizontal: Necesitamos ver que los objetos o partes que componen una composicin estn de alguna forma apoyados. La parte inferior se ver mejor que la superior, ya que ser donde se constituya la base. Angulo inferior izquierdo: Los hbitos de lectura occidentales han motivado propiciado que la atencin se centre ms en la parte izquierda y en concreto en la inferior izquierda. Relajamiento-tensin: psicolgicamente cuando tenemos una composicin equilibrada, simtrica o predecible; sin embargo generaremos tensin en el receptor si no es capaz de encontrar una lgica visual en la composicin que le presentamos. Equilibrio. La utilizacin ms eficaz de los mecanismos de la percepcin visual consiste en identificar claves visuales en un sentido u en otro, en equilibrio o en desequilibrio, fuertes o dbiles. 9

Podemos conseguir en nuestra composicin ese equilibrio de formas y lneas, es decir, los pesos de los elementos deben estar compensados. La manera de medir el peso de las formas y lneas del diseo es, analizando la importancia visual de estos dentro de nuestra composicin. Existen dos tipos de equilibrio: El equilibrio simtrico. El equilibrio asimtrico. Si dividimos la composicin en dos extremos, el equilibrio simtrico se produce cuando encontramos igualdad de peso y tono en ambos lados de nuestra composicin, y el equilibrio asimtrico se produce cuando no existe las mismas dimensiones (ya sea de tamao, color...) en ambos lados, pero an as existe equilibrio entre los elementos.

El equilibrio que crea la simetra es un factor importante de la forma en que evaluamos el atractivo visual de un objeto. Sin embargo, el atractivo de la simetra tiene lmites; un toque de asimetra puede hacer que resulte an ms atractivo, aadiendo un toque de individualidad y singularidad. La simetra, en cierta manera, da sensacin de orden y alivia la tensin; la asimetra hace lo contrario, crea agitacin y tensin, pero puede conseguir que una imagen no sea montona. Podemos hacer otra divisin de equilibrio: Equilibrio formal. Equilibrio informal. Equilibrio formal, se basa en la bisimetra. Se busca un centro ptico dentro del diseo, que no tiene por qu coincidir con el centro geomtrico de la composicin. Una composicin que siga este esquema compositivo reflejar estabilidad, calma y estatismo, pero no supone una composicin muy audaz Equilibrio informal, por el contrario, est altamente cargado de fuerza grfica y dinamismo. Prescinde por completo de la simetra, y el equilibrio se consigue aqu en base a contraponer y contrastar los pesos visuales de los elementos, buscando diferentes densidades tanto formales como de color que consigan armonizar visualmente dentro de una asimetra intencionada. 1.4. Aplicar la teora del color considerando el crculo cromtico, contrastes, el RGB (Red, Green, Blue) y CMY (Cyan, Magenta, Yellow). Empezaremos diciendo que el color en s no existe, no es una caracterstica del objeto, es ms bien una apreciacin subjetiva nuestra. Por tanto, podemos definirlo como, una sensacin que se produce en respuesta a la estimulacin del ojo y de sus mecanismos nerviosos, por la energa luminosa de ciertas longitudes de onda. El color es pues un hecho de la visin que resulta de las diferencias de percepciones del ojo a distintas longitudes de onda que componen lo que se denomina el "espectro" de luz blanca reflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda est comprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendo radiaciones, pero ya no son percibidos por nuestra vista. En las artes grficas tenemos dos grandes categoras con respecto al color, imagen en color e imagen en blanco y negro, en stas ltimas podemos diferenciar: - imgenes a pluma. - imgenes tramadas: mediante diferentes tipos de gris. Asimismo, las imgenes en color se pueden dividir en dos categoras: - colores planos: manchas uniformes de color. - degradados, tambin tramadas. El color es un elemento bsico a la hora de elaborar un mensaje visual. Muchas veces, el color no es un simple atributo que recubre la forma de las cosas en busca de la fidelidad reproducida. A pesar de que, sin el color la forma permanece, con frecuencia el Mensajes es, precisamente, el Color, o lo que slo puede expresarse por el Color. 10

El color est presente en todos los aspectos de la identidad empresarial y de marca. En la identidad, las empresas pueden hacer que el color sea el principal elemento de su identidad utilizando un nico color o una paleta de colores como parte de su identidad visual. Si el color se emplea uniformemente en una serie de elementos de la identidad, se termina convirtiendo en la rbrica de la empresa. Circulo cromtico. El ojo humano puede distinguir entre 10.000 colores. Se pueden adems emplear tres dimensiones fsicas del color para relacionar experiencias de percepcin con propiedades materiales: saturacin, brillantez y tono. El crculo cromtico nos sirve para observar la organizacin bsica y la interrelacin de los colores. Tambin lo podemos emplear como forma para hacer la seleccin de color que nos parezca adecuada a nuestro diseo. Podemos encontrar diversos crculos de color, pero el que aqu vemos est compuesto de 12 colores bsicos.

Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos. En este crculo cromtico podemos encontrar: Colores primarios: rojo, azul y amarillo; Colores secundarios: verde, violeta y naranja; Colores terciarios: rojo violceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso y azul violceo.

11

RGB (red, green, blue) y CMY (cyan, magenta, yellow) Los tonos secundarios se obtienen al mezclar partes iguales de dos primarios; los tonos terciarios se consiguen al mezclar partes iguales de un tono primario y de un secundario adyacente. Los primarios son colores que se consideran absolutos y que no pueden crearse mediante la mezcla de otros colores. Sin embargo, mezclar los primarios en diversas combinaciones crea un nmero infinito de colores. Dependiendo de qu mbito, podemos encontrar tres juegos de colores primarios: Los artistas y diseadores parten de un juego formado por el rojo, el amarillo y el azul. Mezclando pigmentos de stos colores pueden obtenerse todos los dems tonos. El segundo juego de primarios es el del rojo, verde y el azul, conocidos como primarios aditivos. Son los primarios de la luz y se utilizan en el campo de la ciencia o en la formacin de imgenes de monitores. Si se mezclan en distintos tantos por ciento, forman otros colores y si lo hacen en cantidades iguales producen la luz blanca. El tercer juego se compone de magenta, amarillo y cyan. Se tratan de los primarios sustractivos y son los empleados por los impresores. En imprenta, la separacin de colores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que se obtienen los colores de impresin por proceso sustractivo. Contrastes. El tono: Es el matiz del color, es decir el color en s mismo, supone su cualidad cromtica, es simplemente- un sinnimo de color. Es la cualidad que define la mezcla de un color con blanco y negro. Est relacionado con la longitud de onda de su radiacin. Segn su tonalidad se puede decir que un color es rojo, amarillo, verde... Aqu podemos hacer una divisin entre: tonos clidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el fuego... y tonos fros (azul y verde). Los colores fros son aquellos que asociamos con el agua, la luz de la luna ... Los trminos "clido" y "fro" se utilizan para calificar a aquellos tonos que connotan dichas cualidades; stos trminos se designan por lo que denominamos "temperatura de color". Las diferencias entre los colores clidos y los fros pueden ser muy sutiles. Por ejemplo, el papel blanco puede parecer ms clido o ms fro por una leve presencia de rojo o azul. Lo mismo ocurre con el gris y el negro. La brillantez: Tiene que ver con la intensidad o el nivel de energa. Es la luminosidad de un color (la capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono. Es una condicin variable, que puede alterar fundamentalmente la apariencia de un color. La luminosidad puede variar aadiendo negro o blanco a un tono. En general, con los tonos puros que tienen un valor ms luminoso (amarillo, naranja, verde) se consiguen las mejores variantes claras, mientras que los tonos puros que tienen normalmente un valor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores variantes oscuras. La saturacin: Est relacionada con la pureza cromtica o falta de dilucin con el blanco. Constituye la pureza del color respecto al gris, y depende de la cantidad de blanco presente. Cuanto ms saturado est un color, ms puro es y menos mezcla de gris posee.

12

2. Manejar los elementos bsicos de un lenguaje usado en la creacin de pginas WEB (HTML, DHTML, ASP, Java Script, CSS u otros). Para crear una pgina web requerimos de un lenguaje especial de programacin, el cual es un programa con un conjunto de instrucciones detalladas que le dirn a la computadora que hacer exactamente, paso a paso. Un programa puede ser tan corto como de una sola lnea de cdigo, o tan largo como de varios millones de lneas de cdigo. Estos son algunos de ellos: El HTML.- Acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de hipertexto) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web). Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado. Versiones de HTML En noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se cre con objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de las pginas era ms importante que el diseo. Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas que no existan en el estndar. El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador de una nueva versin de HTML, el borrador de HTML 3.0. Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C. En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban realizado extensiones sobre el estndar HTML 2.0. En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. En septiembre de 2001 se aprob el estndar HTML 4.01. El HTML Dinmico o DHTML (del ingls Dynamic HTML).- Designa el conjunto de tcnicas que permiten crear sitios web interactivos utilizando una combinacin de lenguaje HTML esttico, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarqua de objetos de un DOM (Document Object Model). Una pgina de mi libro HTML Dinmico es cualquier pgina web en la que los scripts en el lado del cliente cambian el HTML del documento, despus de que ste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la pgina. La caracterstica dinmica del DHTML, por tanto, es la forma en que la pgina interacta con el usuario cuando la est viendo, siendo la pgina la misma para todos los usuarios. En contraste, el trmino ms general "pgina web dinmica" lo usamos para referirnos a alguna pgina especfica que es generada de manera diferente para cada usuario, en cada recarga de la pgina o por valores especficos de variables de entorno. Este trmino no debe ser confundido con DHTML. Estas pginas dinmicas son el resultado bien de la ejecucin de un programa en algn tipo de lenguaje de 13

programacin en el servidor de la pgina web (como por ejemplo ASP.NET, PHP o Perl), el cual genera la pgina antes de enviarla al cliente, o bien de la ejecucin en la parte cliente de un cdigo que crea la pgina completa antes de que el programa cliente (usualmente, un navegador) la visualice. En una pgina DHTML, una vez sta ha sido cargada completamente por el cliente, se ejecuta un cdigo (como por ejemplo en lenguaje JavaScript) que tiene efectos en los valores del lenguaje de definicin de la presentacin (por ejemplo CSS), logrando as una modificacin en la informacin presentada o el aspecto visual de la pgina mientras el usuario la est viendo. Entre los usos ms habituales del DHTML estn el hacer mens desplegables, imgenes que cambian al pasar el cursor sobre ellas, objetos en movimiento, botones que permiten desplazar el texto que se est mostrando, textos explicativos que aparecen al situar el cursor sobre ciertas palabras clave, cronmetros, etc. Otro uso interesante de esta tecnologa es la creacin de juegos de accin que utilizan el navegador web para funcionar, aunque tradicionalmente este tipo de desarrollos han sido complicados debido a las diferencias en el lenguaje y las caractersticas soportadas por los distintos navegadores existentes. Recientemente los navegadores ms populares han empezado a soportar estndares comunes, como el DOM, lo cual ha facilitado mucho la creacin de este tipo de aplicaciones. ASP.- Active Server Pages (ASP), es una tecnologa propietaria de Microsoft. Se trata bsicamente de un lenguaje de tratamiento de textos (scripts), basado en Basic, y que se denomina VBScript (Visual Basic Script). Se utiliza casi exclusivamente en los servidores Web de Microsoft (Internet Information Server y Personal Web Server). Los scripts ASP se ejecutan, por lo tanto, en el servidor y puede utilizarse conjuntamente con HTML y Javascript para realizar tareas interactivas y en tiempo real con el cliente. Con ASP se pueden realizar fcilmente pginas de consulta de bases de datos, funciones sencillas como obtener la fecha y la hora actual del sistema servidor, clculos matemticos simples, etc. Java Script.- JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el paradigma de programacin basada en prototipos, ya que las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su funcionalidad. Todos los navegadores modernos interpretan el cdigo JavaScript integrado dentro de las pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del DOM (Document Object Model, podra ser Modelo en Objetos para la representacin de Documentos), abreviado DOM, es esencialmente un modelo computacional a travs del cual los programas y scripts pueden acceder y modificar dinmicamente el contenido, estructura y estilo de los documentos HTML y XML. CSS.- El nombre hojas de estilo en cascada viene del ingls Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML2 (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los agentes de usuario o navegadores. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. La informacin de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style". CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras claves tomadas del ingls para especificar los nombres de sus selectores, propiedades y atributos. Una hoja de estilos CSS consiste en una serie de reglas. Cada regla consiste en uno o ms selectores y un bloque de estilos con los estilos a aplicar para los elementos del documento que cumplan con el selector que les precede. Cada bloque de estilos se define entre llaves, y est formado por una o varias declaraciones de estilo con el formato propiedad: valor;. 14

En el CSS, los selectors marcarn qu elementos se vern afectados por cada bloque de estilo que les siga, pudiendo afectar a uno o varios elementos a la vez, en funcin de su tipo, nombre (name), ID, clase (class), posicin dentro del Document Object Model, etctera. 2.1. Definir objetivos y contenidos de la pgina web. Es importante tomar una decisin para elegir qu objetivos consideramos primordiales antes del desarrollo de la pgina web. La eleccin, condiciona de manera clave la concepcin y el diseo del proyecto, el cual debe ser coherente con los objetivos de la institucin. Definicin de Objetivos del Sitio. A travs de esta etapa se busca definir cules sern los objetivos centrales que deber tener el Sitio Web y establecer la forma de cumplirlos. Se recomienda comenzar por generar un objetivo central y luego definir varios objetivos secundarios; no obstante lo anterior, es importante que estos objetivos sean explicados adecuadamente al comienzo del desarrollo, con el fin de que todo el equipo tenga claro el horizonte que debe tener el proyecto. Para generar objetivos que sean vlidos y comprensibles, se aconseja escribirlos a travs de frases que se inicien con verbos que expresen las acciones a realizar. Por ejemplo: Recibir preguntas de los usuarios sobre las actividades de la institucin o Presentar pblicamente los informes ms importantes de la institucin. Una forma de llegar ms concretamente a los objetivos, es revisar la visin y la misin de la institucin, desde la cual se pueden obtener las claves que permitan definirlos. De ms est decir que los objetivos del sitio debern estar en concordancia con las necesidades y planificacin que haya hecho la institucin en sus planes a corto, mediano y largo plazo. Una de las primeras metas que se debe cumplir consiste en tener presencia en Internet. No obstante, se debe entender como tal la entrega de informacin actualizada de la institucin, ms la proposicin de alguna actividad interactiva, mediante el aprovechamiento del estado actual de la tecnologa. Por ejemplo, ofrecer las respuestas de las principales Preguntas Frecuentes que se reciben en la institucin o entregar la explicacin detallada sobre los principales trmites, permiten cumplir con la idea de tener presencia, a travs de una propuesta de contenido que ofrece un valor agregado a quienes ingresan al sitio. Idealmente el listado de objetivos del sitio debe estar acotado y no llegar a ms de cinco proposiciones. Este nmero, si bien es arbitrario, se indica como una forma de sealar que los objetivos no pueden ser tantos como para impedir su cumplimiento; ni tan pocos como para que el sitio sea poco ambicioso. De cada uno de estos objetivos se pueden desprender tareas concretas que permitan avanzar en el cumplimiento de ellos. Definicin de Contenidos del Sitio. Una vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las definiciones ms concretas que permitan decidir qu contenidos son los que va a tener el Sitio Web que se desarrolle. Para identificar contenidos, se deben utilizar como insumo los materiales que se hayan obtenido en la etapa de identificacin de Objetivos y de Audiencias, ya que en ambos la bsqueda gir en torno a las necesidades que tenan los usuarios del sitio. Para cumplir con una norma general respecto de qu debera contener un sitio, se pueden anotar las siguientes, como las ms importantes: Acerca de la Institucin: Entregar la informacin completa referida a Directivos, Organigrama, Normativa asociada, Ubicacin, Horarios de trabajo, Telfonos, Correo electrnico, etc.

15

 Productos y/o Servicios: Destacar las actividades principales que el usuario puede hacer en la institucin; puede incluir una gua de trmites que facilite las acciones de las personas que acudirn a la institucin y que considere servicios interactivos para hacerlos desde el Sitio Web. Novedades de la Institucin: ltimas actividades, noticias, etc. Viendo esta lista mnima (que crecer en la medida de las necesidades de entrega de informacin de la institucin), hay que hacer nfasis en que el inters de los contenidos variar si se trata de un usuario interno o externo. Por ejemplo, si miramos un Sitio Web desde el punto de vista del usuario externo de la institucin, lo que ms le interesar ser la informacin referida a los trmites, seguida por la que informe acerca de cmo tomar contacto con la institucin. Si la miramos desde el punto de vista del usuario interno, lo ms importante ser la informacin de Novedades, seguida por la de organigrama y presentacin interna. Por lo mismo, es muy relevante que tanto los objetivos como la audiencia del sitio se hayan definido muy bien en forma previa, porque de lo contrario no habr posibilidad de atender a ambos usuarios de manera adecuada. Agrupar y Etiquetar el Contenido. Con las definiciones hechas hasta ahora, llega el momento de poner en prctica las metodologas que permiten ordenar los contenidos, agrupndolos en conjuntos coherentes y dndoles nombres que los identifiquen. Probablemente la mejor tcnica para hacerlo es hacer unas pequeas tarjetas de papel, en las que se anotan las principales reas de contenido que se hayan detectado y revisado en el paso anterior. Una vez hecho, las cartas se ponen sobre una mesa y se van agrupando, hasta formar conjuntos de elementos coherentes entre ellos. Luego, a cada conjunto se le pone un nombre (idealmente una sola palabra) que identifique a todos sus contenidos. Con esas agrupaciones hechas, ya tendremos los elementos adecuados para generar posteriormente el rbol de contenidos que, a su vez, permitir hacer el sistema de navegacin. Una vez que el proceso de Etiquetado ha concluido, es bueno hacer comprobaciones empricas de la validez de los nombres escogidos. Para ello, se requiere que los elegidos sean mostrados a personas de diverso origen y que conozcan la institucin, como tambin a quienes la desconozcan por entero. Ellos deben responder las siguientes preguntas: Qu significa este nombre? Qu tipos de contenidos esperara encontrar en esta rea? Con las respuestas obtenidas se podr juzgar si los nombres que se han usado son los ms adecuados o, bien, hay que introducir modificaciones. Por ejemplo, dentro de los nombres ms usados para una de las secciones habituales de un Sitio Web como es la de informacin corporativa, se cuenta Acerca de, Sobre..., Quines Somos e Informacin Corporativa. Identificar Requerimientos Funcionales. Junto con la bsqueda de las reas de contenido que deber tener el sitio, se debe trabajar tambin en la definicin de lo que se busca que el sitio haga, es decir, los tipos de interaccin que se busca incluir. Dentro de los servicios interactivos ms frecuentes se cuentan las siguientes: Formulario de Contacto para envo de mensajes electrnicos Sistema de envo de una noticia por mail a un amigo Formato de impresin de los contenidos Mapa del Sitio Dentro de las funcionalidades de mayor complejidad, pero a las que todo sitio debera aspirar, se cuenta: Buscador interno del Sitio Web rea de acceso privado para usuarios registrados Sistema de envo de boletines de noticias del sitio a usuarios registrados 16

Ser importante que el sitio cuente con todos los servicios interactivos descritos como mnimos, para ofrecer una mejor experiencia al usuario que lo visita. Anlisis de Sitios Similares. El ltimo elemento que se debe desarrollar en esta etapa es la bsqueda de otros sitios en Internet que sean similares a nuestra institucin, con el fin de revisar de qu manera han resuelto los mismos problemas que deberemos atender. Esta actividad comparativa permitir llegar a las buenas prcticas que es posible adaptar a las necesidades de nuestro sitio, con el fin de asegurarnos mtodos de funcionamiento y despliegue de contenidos, que sean coherentes con los objetivos que se han planteado inicialmente. Es importante que se haga una pauta previa de comparacin, con el fin de saber de antemano cules son los parmetros que se medirn y gracias a eso, optimizar la revisin que se haga. 2.2. Esquematizar la estructura general de una pgina web. Si slo se tiene una vaga idea de cmo se relacionan las distintas secciones de una Web, si no se tiene sentido claro de la organizacin y la narrativa, los usuarios lo percibirn inmediatamente. Una buena estructura permitir al lector visualizar todos los contenidos de una manera fcil y clara, mientras que un conjunto de pginas web con una mala estructura producir en el lector una sensacin de estar perdido, no encontrar rpidamente lo que busca y terminar por abandonar nuestro sitio. Planifique la estructura antes de empezar. Incluso para los sitios ms pequeos, es conveniente hacer algn esquema sencillo, para la mayora de los casos una hoja de papel y un lapicero bastar, pero si el emplazamiento es grande, es recomendable usar algn tipo de programa que permita manejar estructuras de tipo grafo. La estructura depende del contenido. No es lo mismo crear una estructura de navegacin para un sitio que desea publicar informacin al estilo de un libro formado por captulos que se adapta bastante bien tanto a una estructura lineal como a una jerrquica. Mientras que un sitio donde se expone un tutorial o un tour es ms apropiada una estructura de tipo lineal. Depende del tipo de sitio web. Tipos de estructuras. Secuencial o lineal: Es la forma ms simple de organizar la informacin, que presentando una narrativa lineal. La informacin que fluye de forma natural como cmo una narrativa lineal o con un orden lgico es perfecta para este tipo de tratamiento.

La estructura secuencial puede ser cronolgica, una serie de temas ordenados lgicamente de lo ms general a lo ms especfico o incluso ordenado alfabticamente. Sin embargo, este tipo de organizacin slo suele funcionar para sitios pequeos; a medida que la narrativa se torna ms compleja, necesita una mayor estructuracin para seguir siendo comprensible. Parrilla: Muchos manuales de procedimientos, listados de cursos universitarios, descripciones mdicas de casos se adaptan perfectamente a este tipo de estructura. Las parrillas son una buena forma de asociar variables, en una serie de categoras standard como "eventos", "tecnologa", "cultura" Para tener xito con este tipo de estructura es necesario que las unidades individuales de una parrilla, compartan una estructura de temas y subtemas absolutamente uniforme. Sin embargo las parrillas pueden ser difciles de comprender si el usuario no consigue establecer la relacin entre las diferentes categoras de informacin, y quiz ms apropiadas para audiencias experimentadas que ya poseen un conocimiento bsico del tema y de su organizacin. En estas estructuras, resultan muy tiles los mapas grficos del "Sitio". 17

 Estructura jerrquica: es quiz la mejor manera de organizar informacin compleja. Este tipo de estructura est especialmente bien adaptada para los Web "Sites", que siempre parten de una nica pgina de inicio.

La mayor parte de los usuarios estn familiarizados con los diagramas jerrquicos, y les resulta fcil de comprender cmo esquema de navegacin. Adems, la organizacin jerrquica impone disciplina a la hora de analizar el contenido, ya que las jerarquas slo funcionan bien cuando el material est perfectamente actualizado. Dado que las estructuras jerrquicas son tan habituales en las oficinas e instituciones resulta fcil para los usuarios construirse modelos mentales. Estructura en Web: Estas estructuras imponen pocas restricciones en el patrn de la informacin.

En este caso el objetivo es imitar el pensamiento asociativo y la libre circulacin de ideas; los usuarios siguen sus intereses en una secuencia nica para cada usuario del Sitio. Este tipo de estructura se utiliza en sitios con una estructura de enlaces externos e internos muy densa. La meta es explotar al mximo el poder del hipertexto en la Web, pero este tipo de estructuras 18

confunden al usuario fcilmente, por lo que, irnicamente, resultan muchas veces poco apropiadas para Sitos Web. Funcionan mejor en Webs pequeas, en los que predominan los listados de enlaces y que estn dirigidas a usuarios muy instruidos o a usuarios experimentados buscando profundizar en su educacin, pero no para lograr un entendimiento bsico de un tema o producto. Estructura mixta: Los estudios de "funcionalidad" indican que los usuarios recuerdan mejor la informacin con este tipo de estructura (jerrquica con enlaces cruzados del tipo estructura Web), puesto que la estructura jerrquica resulta demasiado restrictiva y la no lineal ofrece demasiada informacin y lleva a la confusin.

Jacob Nielsen nos da las dos reglas ms importantes sobre la estructura de un sitio web: 1. Puede parecer obvia pero no lo es tanto: tener una estructura y conseguir que refleje el contenido de sitio y sus relaciones. 2. La estructura no debe reflejar en ningn caso la organizacin de su compaa. Al usuario no le interesa su organizacin sino su Web. La estructura debe determinarse por las tareas, incluso si eso significa que varios departamentos tienen que colaborar para realizar un slo documento. Definicin de la Estructura del Sitio. Una vez que se ha hecho el trabajo de identificacin de contenidos reseado en las etapas anteriores de este documento, se debe avanzar hacia las definiciones relacionadas con la forma que tendr el sitio que se est desarrollando. Ello implicar trabajar en tres reas concretas, a travs de las cuales se definir la estructura del sitio, el rbol de contenidos y los sistemas de navegacin que se ofrecer a los usuarios para que avancen a travs de sus contenidos. Las tres etapas se explican a continuacin: Creacin de la Estructura. Se refiere al proceso de identificar la forma que tendr el Sitio Web que se est desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseo. Estructura: Se refiere a la forma que tendr el Sitio Web en trminos generales con sus secciones, funcionalidades y sistemas de navegacin. No considera ni incluye elementos grficos (logotipos, vietas, etc.). Diseo: Se refiere a la solucin grfica que se crear para el sitio, en la cual aparecen colores, logotipos, vietas, y otros elementos de diseo que permiten identificar visualmente al sitio.

19

Dado lo anterior, cuando hablamos de la estructura nos estamos refiriendo bsicamente a cul ser la experiencia que tendr un usuario cuando accede al sitio. De esta manera podremos determinar dnde estarn ubicados los servicios interactivos (buscador, sistemas de encuestas, reas de contenidos). Gracias a la realizacin de esta etapa es posible discutir en trminos muy prcticos cul ser la oferta de elementos de informacin e interaccin que tendr el usuario. Al no incluir elementos de diseo, se permite que la discusin sobre la estructura se desarrolle en aspectos concretos, sin que intervengan an consideraciones estticas que habitualmente atrasan la aprobacin de esta etapa del desarrollo. Mapas Permanentes del Sitio. Se refiere al proceso de crear un rbol de contenido en el que se muestre de manera prctica cuntas secciones tendr el sitio en desarrollo y cuntos niveles habr dentro de cada uno. Cuando se usa la idea de crear un rbol, se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irn incorporando. En este sentido se debe evitar a toda costa que el rbol de contenidos represente la estructura de la organizacin, dado que sta es conocida y comprendida internamente, pero constituye una barrera de entrada para usuarios externos. Si ellos llegan a buscar en una estructura de contenidos basada en la forma en que funciona la organizacin, primero debern comprender cmo funciona la entidad para luego encontrar lo que les interesa. En este sentido se sugiere el uso de dos tipos de rboles posibles, Arbol Organizacional (Figura 1) y Arbol Funcional (Figura 2).

Figura 1: rbol Organizacional: agrupa los contenidos de la manera como se organiza la institucin, pero no basado en su estructura de funcionamiento, sino en su lgica de actividad.

Figura 2: rbol Funcional, agrupa los contenidos de acuerdo a las tareas que se puedan realizar dentro del sitio.

20

Dado lo anterior, las recomendaciones para la generacin de este rbol son las siguientes: Secciones: Se debe intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas reas; hay que considerar que cada una de las reas a integrar en el rbol requerir de mantenimiento posterior en contenidos, grfica y funcionalidad, lo que encarecer el costo final de operacin del sitio. Dado lo anterior, se recomienda que las secciones se siten entre 5 y 7. Niveles: Se debe intentar que el usuario est siempre a menos de tres clicks del contenido que anda buscando. Por ello no se debera crear ms de tres niveles de acceso; esto significa una Portada, una Portadilla de Seccin y los Contenidos propiamente tales. Contenidos relacionados: Se debe considerar que habr funcionalidades que estn presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas Frecuentes y Formularios de Contacto. Se recomienda que este tipo de elementos quede fuera del rbol y floten sobre ste, con el fin de indicar que desde todas las pginas habr enlaces a ellos. Definicin de los Sistemas de Navegacin. Una vez que se cuenta con los rboles de contenido desarrollados en el paso anterior, la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el Sitio Web. A travs de estos, los usuarios podrn avanzar por sus diferentes reas, sin perderse. En la generacin de dichos sistemas se debe atender a dos elementos que sern muy importantes: Textual: Se refiere a que la navegacin se har a travs de elementos concretos, tales como mens, guas, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. Para generarlos se debe conseguir que cada uno de ellos represente claramente la funcin para la que fueron designados y no dejar lugar a dudas sobre su funcin ni sobre la accin que desarrollarn al ser usados. Es decir, un botn debe parecer tal y no slo un parche de color sobre la pantalla. Adicionalmente, es muy importante que las palabras escogidas para indicar acciones, sean claras y precisas. En este sentido, si un botn necesita ser explicado, es mejor desecharlo y buscar otra solucin. Contextual: Es todo lo referido a cmo se presenta la informacin, utilizando para ellos elementos basados en texto, grficos o bien de entorno. Los elementos relevantes en este caso, sern todos aquellos que permiten mostrar la navegacin en la pantalla. Entre ellos, la grfica utilizada, la redaccin de los textos que se muestran e incluso el nombre del dominio (URL) que permitir que el usuario sienta que est en el lugar indicado. Caractersticas de los Sistemas de Navegacin Al generar el sistema de navegacin, se deben tener en cuenta las siguientes caractersticas: Consistente: El sistema debe ser similar en todo el sitio, en lo referido a su ubicacin y disposicin en las pginas. Esto se aplica tambin a aquellas instituciones que pueden tener ms de un Sitio Web. Uniforme: El sistema debe utilizar similares trminos con el fin de que el usuario que lo vea en las pginas, confe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio. Visible: El sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con l, como si se tratara de una gua permanente en el rea en que se encuentre del sitio. Se debe tener en cuenta que los buscadores de Internet tienen la capacidad de indexar e incluir en sus bases de datos, cualquier pgina del sitio, an las ms internas. Por ello, es de suma importancia que todas las pginas del sitio cuenten con el sistema de navegacin, especialmente si el Sitio Web est desarrollado con frames (o marcos) que normalmente impiden que se indique claramente en cada pgina la informacin referida a la navegacin general. De esta manera, si un usuario accede al sitio por una pgina interior que estaba indexada en un buscador, siempre contar con las herramientas adecuadas para ir a la portada o realizar cualquier otra accin que le interese.

21