Curso Diseno Web Parte1

Embed Size (px)

Citation preview

  • 8/6/2019 Curso Diseno Web Parte1

    1/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Curso prctico de diseo webUn manual que trata el diseo orientado a la web, con una interesante introduccin al diseoen general y el desarrollo del diseo en la web en particular.

    Autores del manual

    Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:

    Luciano MorenoConsultor, diseador y desarrollador weben ParaRedeBJS. Especialista enusabillidad y diseo centrado en elusuario.(61 captulos)

    Introduccin al diseo grficoLa historia del diseo grfico, desde los orgenes de la humanidad hasta la aparicin de la web eInternet.

    El ser humano ha tenido siempre la necesidad de comunicarse con sus semejantes, hasta tal punto que podemos afirmar quesi el hombre es el ser ms avanzado de la naturaleza, es debido en gran parte a la facilidad que ha tenido para hacer partcipea los dems de sus ideas de una forma u otra.

    Las primeras formas comunicativas fueron mediante elementos visuales. Antes de que desarrollaran capacidades de

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    1

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    2/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    expresin mediante el lenguaje hablado, los hombres utilizaron su cuerpo para comunicar a los dems estados de nimo,deseos e inquietudes a travs de ademanes, expresiones y signos, que con el tiempo adquirieron la condicin de "lenguaje", alconvertirse en modelos de comunicacin.

    Aunque posteriormente el lenguaje hablado pasara a ser el medio de intercambio de informacin ms directo, el lenguajevisual sigui teniendo un importante peso en las relaciones comunicativas, sobre todo a partir del uso de diversos materialesy soportes como medios del plasmar mensajes visuales, como lo demuestran multitud de dibujos en piedra y pinturasrupestres que han llegado a nuestros das, en las cuales se representan elementos naturales, actividades cotidianas y diferentessignos artificiales con significado propio.

    Pintura rupestre (Cueva de Altamira, Espaa)

    La representacin de ideas mediante grafos experiment su mayor avance con la aparicin de los lenguajes escritos, quepermitieron expresar cadenas estructuradas de pensamientos mediante un conjunto de elementos grficos de significadopropio dispuestos segn una estructura definida, capaces de transmitir mensajes entendibles por la comunidad.

    Estos lenguajes escritos estaban basados, bien en la representacin de elementos tomados de la naturaleza, a los que se les

    asignaba una interpretacin particular, bien en un conjunto artificial de smbolos inventados: los alfabetos. Cada uno deestos signos aislado tena a veces un significado incierto, pero unido a otros, permitan representar grficamente el lenguajehablado por cada pueblo o cultura.

    Grabado en piedra con jeroglficos (Egipto)

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    2

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    3/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Como soporte fsico se utiliz inicialmente la piedra, pero pronto se buscaron otros tipos de materiales que permitieran unamayor facilidad de uso y una mayor portabilidad, como los papiros o los pergaminos.

    Papiro de los muertos

    Tambin se empezaron a usar diferentes tipos de pigmentos naturales para dar un mayor colorido y expresibidad a las obrasescritas y composiciones artsticas, y a disponer los diferentes elementos textuales y grficos de forma armoniosa yequilibrada, ya que se apreci que con ello se ganaba poder comunicativo, claridad y belleza. Esto se puede apreciar en laconfeccin de los incunables medievales realizados en los monasterios, en los que se observa de forma clara la importanciade la "FORMA" (diseo) para transmitir un mensaje.

    Incunable medieval

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    3

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    4/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Posteriormente, Johann Gutenberg invent la imprenta, artefacto capaz de reproducir en grandes cantidades y de formacmoda un original, lo que hizo posible que los documentos impresos y el mensaje que contenan fueran accesibles a ungran nmero de personas.

    Primer libro impreso

    Pronto empezaron a aparecer imprentas en las que se reproducan todo tipo de obras, cada vez ms elaboradas. Seempezaron a usar nuevos materiales como soporte, nuevas tintas y nuevos tipos de letras, originando la aparicin de unosprofesionales especializados en su manejo, los tipgrafos y los cajitas, tal vez los primeros diseadores grficos como tal, yaque se encargaban de componer y maquetar los diferentes elementos que iban a formar una obra de forma que resultaralgica, clara, armoniosa y bella.

    Otro gran impulsor del desarrollo del diseo grfico fue la Revolucin Industrial. Surgieron las fbricas y la economa demercado, un gran nmero de personas se desplaz a las ciudades a trabajar, aumentaron las tiendas y los comercios yempez la competitividad entre empresas por hacerse con una parte del mercado. Con ello apareci y se desarroll unanueva tcnica comercial, la publicidad, encargada de hacer llegar a los consumidores mensajes especficos que les

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    4

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    5/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    convencieran de que un producto dado era mejor que otros anlogos.

    Cartel publicitario

    El desarrollo de la publicidad trajo consigo un desarrollo paralelo del diseo grfico y de los soportes de comunicacin.

    Haba que convencer al pblico de las ventajas de un producto o marca, y para ello nada mejor que mensajes concisos,cargados de componentes psicolgicos, con diseos cada vez ms elaborados, que se hacan llegar al mayor nmero posiblede personas. El cmo se transmita la informacin lleg incluso a superar en importancia a la misma informacintransmitida.

    No se trataba ya de presentar mensajes visuales bellos, sino efectivos, que vendieran, y para ello no se dudo en realizargrandes inversiones, haciendo posible un gran avance en las tcnicas de diseo y la aparicin de profesionales dedicadosexclusivamente a desarrollarlas y ponerlas en prctica: los diseadores grficos.

    En el siglo XX, hicieron su aparicin los ordenadores, mquinas en un principio destinadas a un grupo reducido de tcnicosy especialistas, pero que poco a poco fueron ganando popularidad y que con la aparicin del ordenador personal seextendieron a todos los ambientes y grupos sociales.

    El ordenador es til porque permite el uso de programas informticos capaces de realizar multitud de tareas. Pero estosprogramas tienen una estructura interna muy compleja, que la mayora de las veces va ms all de los conocimientos que

    poseen los usuarios de los mismos.

    Esto dio lugar a la introduccin de unos elementos intermedios, denominados "Interfaces de Usuario", cuya misin eraaislar al usuario de las consideraciones tcnicas y procesos internos de los programas, permitindoles realizar tareas con ellospor medio de un "lenguaje" intermedio, ms fcil de entender por el usuario.

    Interfase de usuario en modo texto

    En sus principios, estos programas se manejaban de forma textual, mediante comandos crpticos, que entendan tan soloexpertos en la materia. Pero con el acceso a la informtica de todo tipo de personas se hizo necesaria una simplificacin enel manejo de las aplicaciones, surgiendo el concepto de "Interface Grfica de Usuario" en toda su extensin, como un mediocapaz de hacer entendibles y usables estas aplicaciones a travs de elementos visuales comunes, que presentados en lapantalla del ordenador permitieran al usuario medio realizar las tareas propias de cada programa concreto.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    5

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    6/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Interfase Grfica de Usuario

    La labor de disear estas IGU correspondi inicialmente a los mismos programadores que desarrollaban las aplicaciones,pero pronto se vio que su concepto de interface de usuario no se corresponda con la que necesitaban los usuarios finales.

    Haca falta pues profesionales del diseo que se encargaran de concebir las interfaces, pero los diseadores grficos clsicosno estaban acostumbrados a construir obras con capacidades de interaccin y navegabilidad, por lo que hubieron dereciclarse, aprendiendo conceptos y funcionalidades nuevas.

    Con la entrada en escena de Internet y las pginas web se hizo an ms patente el desfase de los diseadores grficos con elnuevo medio. Haca falta ahora disear y construir interfases de usuario muy especiales, condicionadas a pequeos tamaosde fichero y a un medio concreto de presentacin, los navegadores web, que imponan serias limitaciones al diseo, quenecesitaban sistemas de navegacin entre pginas simples y entendibles.

    Interfase web

    Si a esto sumamos la necesidad de los creadores de interfaces web de conocer a fondo diferentes lenguajes de marcas y deprogramacin (HTML, JavaScript, DHTML), es evidente que era necesaria la aparicin de un nuevo profesional, eldiseador web, hbrido entre el diseador grfico clsico y el programador de aplicaciones para Internet.

    Artculo porLuciano Moreno

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    6

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    7/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Diseo grficoUna aproximacin al diseo grfico en general, con una descripcin de los elementos que componen

    habitualmente un diseo y las caractersticas principales que podemos encontrar en ellos.

    Podemos definir el diseo grfico como el proceso de programar, proyectar, coordinar, seleccionar y organizar una serie deelementos para producir objetos visuales destinados a comunicar mensajes especficos a grupos determinados.

    La funcin principal del diseo grfico ser entonces transmitir una informacin determinada por medio de composicionesgrficas, que se hacen llegar al pblico destinatario a travs de diferentes soportes, como folletos, carteles, trpticos, etc.

    El diseo grfico busca transmitir las ideas esenciales del mensaje de forma clara y directa, usando para ello diferenteselementos grficos que den forma al mensaje y lo hagan fcilmente entendible por los destinatarios del mismo.

    El diseo grfico no significa crear un dibujo, una imagen, una ilustracin, una fotografa. Es algo ms que la suma de todosesos elementos, aunque para poder conseguir poder comunicar visualmente un mensaje de forma efectiva el diseador debeconocer a fondo los diferentes recursos grficos a su disposicin y tener la imaginacin, la experiencia, el buen gusto y elsentido comn necesarios para combinarlos de forma adecuada.

    El resultado final de un diseo grfico se denomina grafismo, y es una unidad por s misma, aunque est compuesto pormultitud de elementos diferentes. Podemos establecer una analoga entre un grafismo y un plato de cocina. Ambos estncompuestos por diferentes elementos individuales que, unidos correctamente y con sabidura, componen una obra finalnica y definida que va ms all de la suma de las partes que la forman.

    Formas, colores y textos en un grafismo

    Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un diseador grfico no es uncreador 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 hacerllegar al destinatario a travs del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos,

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    7

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    8/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    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, util izadas para presentar mensajes textuales.

    Grficos varios: logotipos, iconos, etc.

    Ilustraciones

    Fotografas

    Cualquier otro elemento visual apto para comunicar un mensaje.

    Un diseo limpio

    Estos elementos bsicos se combinan unos con otros en un grafismo, y de esta combinacin surge un resultado final en elque tienen mucha importancia una serie de conceptos propios del diseo grfico, entre los que destacan:

    Las agrupaciones: conjuntos de elementos relacionados mediante proximidad, semejanza, continuidad o simetras.

    La forma: forma de cada elemento grfico aislado y de las agrupaciones de elementos.

    Los contornos: partes lmites de los elementos, que permiten distinguirlos de los dems y del fondo, pudiendoestar definidos mediante border, cambios de color o cambios de saturacin.

    La ubicacin: lugar que ocupa cada elemento grfico o agrupacin de ellos en el espacio del grafismo.

    El tamao: tamao relativo de cada elemento grfico respecto los que le rodean. Escalas.

    El color: color de cada elemento individual, colores de cada agrupacin de elementos, conjunto total de coloresusado en un grafismo, disposicin relativa de los elementos con color y armona entre colores.

    El contraste: intensidad de visualizacin de cada elemento con relacin a los que le rodean y al grafismo completo.

    El equilibrio: cada grafismo conlleva un sistema de referencia espacial que consigue un nivel de equilibrio mayor omenor.

    La simetra : disposicin espacial regular y equilibrada de los elementos que forman la composicin grfica.

    Los diferentes elementos de un grafismo son percibidos por el destinatario de acuerdo con la influencia que ejercen cadauno estos conceptos a nivel individual, grupal y total. Pero la unin de todos ellos, la obra grfica, es una entidadcomunicativa individual y completa, cargada de complejos elementos humanos asociados con el lenguaje, la experiencia, laedad, el aprendizaje, la educacin y la memoria.

    Artculo porLuciano Moreno

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    8

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    9/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Diseo grfico en la web

    El diseo web va ms all del diseo tradicional pues existen muchos limitadores relacionados con elmedio donde se presentan las pginas: Internet. Conocemos las caractersticas fundamentales del diseoen la web.

    El diseo grfico de una pgina web es tan solo una parte del diseo de la misma, ya que, adems, hay que considerar unconjunto ms o menos extenso de condicionantes que van a limitar la libre creatividad del diseador.

    En primer lugar, las pginas web se deben descargar de un servidor web remoto por medio de Internet, por lo que el anchode banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualizacin. La mayora de losusuarios se conectan todava a Internet con un mdem, con velocidades tericas de 56 Kbps, aunque en realizada no superarlos 10-15 Kbps en el mejor de los casos.

    Los elementos grficos, ya tengan formato de mapa de bits o vectorial, suelen traducirse en ficheros de bastante peso,dependiendo del tamao de la imagen y del formato en que se guarde. Esto origina que las pginas que contienen en sudiseo muchas imgenes, o pocas pero de gran tamao, tarden mucho tiempo en ser descargadas desde el servidor web ypresentadas en la ventana del ordenador del usuario, que no suele ser muy paciente.

    Estudios realizados demuestran que el tiempo mximo de aguante de una persona que espera la descarga de una pginasuele ser de unos 10 segundos, pasados los cuales prefiere abandonar nuestro sitio web y buscar otro ms rpido. Por lotanto, el nmero de elementos grficos que podemos introducir en una pgina web queda bastante limitado, teniendo quebuscar alternativas mediante el uso imaginativo de fuentes y colores.

    Otro aspecto a tener en cuenta es que las pginas web son visualizadas en unas aplicaciones especficas, los navegadoresweb, que imponen grandes limitaciones al diseo de las mismas. La ventana de un navegador es eminentemente rectangular,con unas medidas concretas (dadas por la resolucin empleada por el usuario en su monitor) y con unas capacidades deinterpretacin de colores que varan mucho segn el ordenador usado, el sistema operativo, el monitor y la tarjeta grfica.

    Estos factores imponen fuertes limitaciones al diseador web, que debe buscar siempre que sus pginas puedan ser

    visualizadas correctamente por el mayor nmero de usuarios.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    9

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    10/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Diseo de un formulario web

    En segundo lugar, los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de laspginas. Internet Explorer interpreta en muchas ocasiones una pgina web de forma muy diferente a Netscape Navigator 4x,y este a su vez lo hace de forma diferente a Netscape Navigator 6x.

    Para intentar solventar estas diferencias, el diseador web debe trabajar a la vez con varios navegadores, diseando suspginas de tal forma que la interpretacin de ellas sea similar en todos, lo que impone nuevas limitaciones al diseo.

    Por otra parte, una pgina web no es un diseo grfico esttico, sino que contiene diferentes elementos que tienen lacapacidad de interaccionar con el usuario, como mens de navegacin, enlaces, formularios, etc. Adems, una pgina aisladano existe, sino que forma parte de un conjunto de pginas inter-relacionadas entre s (el sitio web), que deben presentarse alusuario con el mismo estilo, aunque su funcionalidad sea muy diferente.

    A esto hay que sumar que las pginas diseadas deben luego construirse en un lenguaje especfico, el HTML, que por smismo es muy limitado, lo que hace que el diseador web tenga que estar siempre pensando si la interfase que estdiseando grficamente va a poder ser luego construida.

    Por ltimo, una pgina web suele ocultar, en la mayora de los casos, una serie de procesos complejos que se ejecutan sin queel usuario sea consciente de ellos (ejecucin de cdigos de lenguajes de programacin tanto en cliente como en servidor,

    acceso a bases de datos en servidores remotos, etc.), procesos que aaden tiempo a la presentacin de las pginas y quemuchas veces suelen afectar de forma importante al diseo de estas, ya que el diseador no sabe de antemano qucontenidos concretos van a tener.

    Resumiendo: el diseo web va ms all del diseo grfico, al influir en l multitud de factores que limitan las posibilidadesdel diseo, pero tambin otros que aaden interactividad y funcionalidades a una pgina web que no tiene un cartel, folleto orevista.

    Artculo porLuciano Moreno

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    10

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    11/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Componentes grficos de un ordenadorDescripcin de los principales componentes grficos de un ordenador: La tarjeta de grficos y el monitor.

    Los principales componentes de un ordenador encargados de la interpretacin y presentacin de colores son la tarjetagrfica y el monitor.

    La tarjeta grfica o de vdeo es el componente hardware encargado de procesar los datos grficos que enva el procesador,interpretarlos y codificarlos en voltajes adecuados que son enviados luego al monitor para su presentacin en pantalla.

    Tarjeta grfica

    Existen diferentes modelos de tarjeta grfica, que van desde las ms simples, incluidas en la placa base, hasta las msavanzadas, verdaderos mini-ordenadores, con su propio procesador, memoria, bus, etc.

    Los monitores son los dispositivos encargados de presentar al usuario las interfaces de las aplicaciones que se ejecutan en elordenador. Todos sabemos cmo es un monitor por fuera, ya que estamos acostumbrados a los monitores de los televisores,algo tan comn en nuestras casas. Interiormente, los monitores varan unos de otros en funcin de su calidad, de la formade manejar de voltajes y de la tecnologa grfica empleada.

    Monitor CRT

    Los monitores ms comunes son los CRT o de rayos catdicos, formados por un tubo en cuyo interior se ha hecho elvaco, en uno de cuyos extremos se sitan tres caones de electrones, uno por cada color primario, y en el otro una pantallade cristal, cuya parte externa es la que ve el usuario.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    11

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    12/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Tubo de rayos catdicos de un monitor CRT

    Los electrones generados en los caones por calentamiento son impulsados hasta la parte interna de la pantalla, que seencuentra recubierta por pequeos grupos de fsforo pigmentado en cada uno de los tres colores primarios (rojo, verde yazul). Estos grupos reciben el nombre de tradas, y se corresponden con un punto de la pantalla, denominado pxel, que

    aparecer de un color u otro segn la intensidad de los electrones que le llegue de cada can.Una caracterstica importante es el paso de punto (dot pitch), distancia diagonal entre dos puntos vecinos del mismo color,que determina el mnimo tamao de un detalle que es capaz de resolver una pantalla. Cuanto menor sea esta distancia,mayor ser la nitidez. Se mide en puntos por pulgada (ppp).

    La resolucin mxima distinguible en una pantalla de 800x600 es de 72 ppp y en una de 1024x768 es de 93 ppp. Estos sonvalores tericos y en la prctica son algo mayores.

    Paso de punto y pixel

    Segn la resolucin empleada, los pxeles (unidad mnima de informacin) son representados en pantalla por una o mstradas, con lo que la adaptacin a las diferentes resoluciones es muy buena.

    Con objeto de que los electrones lleguen de forma ordenada e impacten justo en el punto adecuado, entre la pantalla y loscaones se sita una mscara o rejilla que filtra los electrones y los dirige a sus puntos destino de forma adecuada.

    La representacin de una imagen en pantalla se realiza mediante barridos de los rayos de electrones, que recorren toda la

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    12

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    13/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    pantalla de izquierda a derecha y de arriba hacia abajo. La velocidad con la que se realiza esta operacin se denominafrecuencia de refresco vertical o refresco de pantalla, se mide en Hz (hertzios) y debe estar por encima de 60 Hz,preferiblemente 70 u 80. A partir de esta cifra, la imagen en la pantalla es sumamente estable, sin parpadeos apreciables, conlo que la vista sufre mucho menos.

    La frecuencia de refresco vertical de nuestro monitor podemos averiguarla accediendo a la pantalla de configuracin delmonitor, a la que se accede en sistemas Windows mediante las selecciones:

    Inicio > Panel de control > Pantalla > Configuracin > Opciones avanzadas > Monitor

    Tambin podemos en esta pantalla cambiar la frecuencia de refresco, pero antes de hacerlo es aconsejable consultar elmanual del monitor, ya que una frecuencia incorrecta puede resultar bastante perjudicial.

    Monitor LCD

    Otro tipo de monitores son los LCD o de cristal lquido, que se diferencian de los anteriores en que en ellos las tradas estnformadas por cristal lquido en vez de fsforo pigmentado, y en que los haces de electrones son guiados por polarizacinmagntica. Adems, en los monitores LCD trabajan con una trama de pxeles concreta, siendo fijo el tamao de cada uno,por lo que al cambiar a una resolucin inferior pueden quedar franjas de pxeles desactivadas.

    Sea cual sea el tipo de tarjeta grfica y monitor usado, es fundamental tener instalados y actualizados los drivers propios deestos componentes.

    Un driver es un conjunto de libreras de software especficas encargadas de configurar y controlar los dispositivos dehardware. Cada componente necesita para funcionar bien los drivers adecuados, que generalmente vienen junto a ste en undisquete o en un CD.

    Con el avance de las funcionalidades de los sistemas operativos y de los dems componentes de software y hardware de losequipos informticos, se hace necesaria una actualizacin constante de los drivers de los monitores y tarjetas de video.

    Estas versiones actualizadas suelen ofrecerlas los distintos fabricantes en sus sitios web, por lo que es muy importante visitarestos cada cierto tiempo para bajar las versiones actualizadas de los drivers e instalarlos en nuestro equipo, con objeto de noperder capacidades y de evitar incompatibilidades con los nuevos sistemas operativos.

    Si tenemos instalada una tar jeta grfica en nuestro ordenador, generalmente los drivers de esta (controlador) son losresponsables de manejar de forma adecuada el monitor. Para acceder a la propiedades del controlador, basta seguir la ruta:

    Inicio > Panel de control > Pantalla > Configuracin > Opciones avanzadas > Monitor > Propiedades > ControladorDesde esta ventana podemos ver el tipo de controlador instalado y si est funcionando bien o tiene algnproblema. Tambin actualizarlo, para lo que es necesario tener previamente los nuevos drivers, ya que tendremos que indicarsu localizacin en nuestros discos duros.

    Una consideracin importante: hay que estar seguro que el driver que vamos a instalar se corresponde con el de nuestratarjeta grfica o monitor, ya que un driver inadecuado puede originar un mal funcionamiento de los componentes grficos.

    Artculo porLuciano Moreno

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    13

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    14/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Resolucin de pantallaConsideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio

    disponible para cada caso.

    Las aplicaciones encargadas de presentar las pginas web son los navegadores (browsers), entre los que cabe destacar por suimportancia y difusin Internet Explorer, Netscape Navigator y Opera.

    La interfaz de un navegador, en su modo estndar, presenta al usuario una o ms barras superiores (de mens, de direccin,etc.), una barra inferior (la barra de estado) y un espacio principal, la ventana, en el que son presentadas las pginas web.

    La forma de esta ventana es siempre rectangular, pero su tamao vara, dependiendo del monitor y de la tarjeta grfica.Podemos hablar de dos tamaos de pantalla diferentes:

    Tamao absoluto: es el tamao "real" de la ventana del monitor, medido generalmente en pulgadas. Depende delmonitor.

    Resolucin o tamao relativo : viene determinada por el nmero de pixels que se muestran en la ventana del

    monitor, siendo el pxel la unidad mnima de informacin que se puede presentar en pantalla, de formageneralmente rectangular. Depende de la tarjeta grfica.

    El tamao absoluto se suele expresar en pulgadas de diagonal (1 pulgada = 25,4 mm). El ms comn en la actualidad es de17 en ordenadores de sobremesa, aunque todava quedan bastantes equipos antiguos con monitores de 15 y existen en elmercado bastantes de 21. El tamao absoluto de los monitores de los equipos porttiles suele ser de 14-15.

    En cuanto a la resolucin, los valores ms comunes son de 800x600 y de 1024 x768 pixels, aunque quedan todava usuariosque trabajan por debajo, a 640x480, y por encima, a resoluciones de 1152x864 y 1280x960 pixels.

    El tamao absoluto y la resolucin deben estar en concordancia para una visualizacin correcta, siendo valores aceptableslos siguientes:

    14" - 15": Resolucin mxima apreciable: 800x600

    17": Resolucin mxima apreciable: 800x600 1024x768

    21": A partir de 1024 x 768

    Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor y de la tarjeta grfica delordenador, y se configuran, en sistemas operativos Windows, bien haciendo click con el botn derecho del ratn sobre elescritorio, seleccionando la opcin Propiedades y accediendo a la pestaa Configuracin, bien desde Inicio > Panel decontrol > Pantalla.

    La importancia de la resolucin de pantalla sobre la forma de ser visualizadas las pginas web en la ventana del navegador esmuy importante. A mayor resolucin se dispone de ms puntos de informacin para presentar los elementos en pantalla,pero estos puntos son ms pequeos, con lo que los elementos de la interfaz (textos, imgenes, objetos de formulario, etc.)se ven ms pequeos.

    Tamao de pgina y resoluciones

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    14

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    15/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Si diseamos una pgina para una resolucin dada, ocupando toda la ventana del navegador, aquellos usuarios que lavisualicen a resoluciones menores no tendrn espacio en pantalla para contener toda la pgina, por lo que se vern obligadosa usar las barras de desplazamiento del navegador. Por el contrario, aquellos usuarios que la visualicen a resolucionesmayores tendrn demasiado espacio en pantalla para tan poca pgina, por lo que les quedar bastante espacio vaco, sincontenidos.

    Para solucionar estas diferencias, lo normal es que se diseen las pginas web para una resolucin base, generalmente la msusada en la actualidad (800x600), y se construyan internamente mediante tablas o capas de tamaos relativos, con anchurasdefinidas en %, con lo que se consigue que al ser visualizadas en monitores de ms resolucin se "abran", ocupando todo elespacio de pantalla disponible.

    Las pegas que tiene este sistema son que no da soporte a los usuarios de con menores resoluciones y que, en el caso deresoluciones mayores, el diseo de la pgina puede verse seriamente afectado al modificar sus elementos las dimensionesoriginales.

    Otra posibilidad es maquetar toda la pgina dentro de un contenedor padre (una tabla o capa) y asignar a ste una alineacincentrada, con lo que la pgina quedar en el centro de la pantalla si se usa una resolucin mayor que la de diseo.

    Artculo porLuciano Moreno

    Colores en un ordenador

    Cmo trabajan los ordenadores para codificar un color. El formato RGB.

    El ojo humano puede distinguir aproximadamente entre 7 y 10 millones de colores. Debido a esto la vista es para nosotrosel principal sentido que nos une con el exterior, de tal forma que sobre el 80% de la informacin que recibimos del mundoexterior es visual.

    Pintores y diseadores grficos utilizan esta capacidad humana de apreciar colores para crear obras que profundicen en el

    alma y que inspiren sentimientos en los seres que las contemplan. Pero qu podemos hacer cuando debemos expresarnoscon un nmero limitado de colores?.

    Los ordenadores trabajan con tres colores bsicos, a partir de los cuales construyen todos los dems, mediante un procesode mezcla por unidades de pantalla, denominadas pixels. Estos colores son el rojo, el azul y el verde, y el sistema s definidose conoce como sistema RGB (Red, Green, Blue).

    Cada pxel tiene reservada una posicin en la memoria del ordenador para almacenar la informacin sobre el color que debepresentar. Los bits de profundidad de color marcan cuntos bits de informacin disponemos para almacenar el nmero delcolor asociado segn la paleta usada. Con esta informacin, la tarjeta grfica del ordenador genera unas seales de voltajeadecuadas para representar el correspondiente color en el monitor.

    A ms bits por pxel, mayor nmero de variaciones de un color primario podemos tener. Para 256 colores se precisan 8 bits(sistema bsico), para obtener miles de colores necesitamos 16 bits (color de alta densidad) y para obtener millones decolores hacen falta 24 bits (color verdadero). Existe tambin otra profundidad de color, 32 bits, pero con ella no se

    consiguen ms colores, sino que los que usemos se muestren ms rpido, ya que para el procesador es ms fcil trabajar conregistros que sean potencia de 2 (recordemos que trabaja con nmeros binarios).

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    15

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    16/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Cuanto mayor es el nmero de colores, mayor ser la cantidad de memoria necesaria para almacenarlos y mayores los

    recursos necesarios para procesarlos. Por este motivo, los ordenadores antiguos disponen de paletas de pocos colores,normalmente 256, al no tener capacidad para manejar ms sin una prdida notable de prestaciones.

    Para representar un color en el sistema RGB se utilizan dos formas de codificacin diferentes, la decimal y la hexadecimal,correspondindose los diferentes valores con el porcentaje de cada color bsico que tiene un color determinado.

    Porcentajes de color y cdigos

    Por ejemplo, un rojo puro (100% de rojo, 0% de verde y 0% de azul) se expresara como (255,0,0) en decimal, y como#FF0000 en hexadecimal (delante de el cdigo de un color en hexadecimal siempre se sita un smbolo almohadilla).

    De los 256 colores bsicos, el propio sistema operativo de queda con 40 para su gestin interna, con lo que disponemos de216 colores. De ellos, 18 se corresponden con la gamas de los colores primarios, correspondientes a 6 tonos de rojo, 6 deazul y 6 de verde:

    Gamas de colores primarios

    Y el resto, los colores secundarios, son combinaciones de estas gamas de colores primarios:

    Colores secundarios

    Si usamos una profundidad de color de 24 bits, correspondiente a millones de colores, disponemos de una amplia gama para

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    16

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    17/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    trabajar, pero siempre teniendo en cuenta que slo sern compatibles los colores que tengan su equivalente en el sistema de256 colores, es decir, aquellos en los que cada color primario viene definido por una pareja de valores iguales, debiendo estosser 00,33,66,99,CC o FF.

    Cuando usamos una profundidad de color de 16 bits disponemos de miles de colores, pero el problema es que debido a ladivisin de esta gama de colores, los valores obtenidos no se corresponden con los equivalentes en 256 colores ni enmillones de colores. Por ejemplo, #663399 es el mismo color a 256 y a millones, pero no es igual que el obtenido con milesde colores.

    Como el cdigo de un color dado puede ser difcil de recordar, se ha adoptado una lista de colores a los que se le ha puestoun nombre representativo en el idioma ingls (red, yellow, olive, etc.), de tal forma que los modernos navegadoresinterpretan el mismo y lo traducen internamente por su valor hexadecimal equivalente.

    Artculo porLuciano Moreno

    Calibracin del monitorUna composicin grfica puede verse con diferentes tonalidades dependiendo de la configuracin delmonitor. Tenemos que calibrar el monitor para que el aspecto de nuestra obra sea el mismo en todos losordenadores.

    Las composiciones grficas pueden aparecer de manera diferente en los distintos monitores, debido principalmente a ladiferencia en los parmetros que definen la calidad y las caractersticas luminosas y cromticas de cada uno de ellos.

    Esto puede originar, por ejemplo, que al realizar un composicin seamos nosotros mismos los engaados, al nocorresponder los colores que vemos en pantalla a los reales que estamos codificando en el grafismo. O que el aspecto visualde una pgina web diseada en un monitor mal configurado no se corresponda con al que luego vern los usuarios, con laconsiguiente prdida de control y de calidad que ello supone.

    Para evitar estos errores se hace preciso utilizar unos valores estndar de los parmetros de configuracin, que hagan posibleque el aspecto de una obra grfica sea el mismo en cualquier ordenador configurado segn los mismos valores. Estos valoressuelen corresponderse con los que trae un monitor al salir de fbrica, y la recuperacin de los mismos recibe el nombre decalibracin.

    La calibracin es el proceso de ajuste de la configuracin de la conversin de color del monitor a un nivel estndar, demanera que la imagen se presenta de igual manera en diferentes monitores.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    17

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    18/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    El mtodo ms simple de calibracin pasa por el uso de imgenes cartas de ajuste, similares a las que aparecan en eltelevisir antes de empezar la emisin. Son imgenes formadas por diferentes lneas de colores, unas finas y otras msgruesas, que se pueden tomar como referencia para realizar un ajuste totalmente manual, usando para ello los controles queposee el monitor. Es un mtodo poco fiable, ya que los ajustes son totalmente subjetivos.

    Otro mtodo de calibracin ms avanzado son las herramientas de gestin del color que facilitan ciertos programas deaplicacin, como Adobe Photoshop, que incluye una herramienta bsica, denominada Adobe Gamma, que puede serutilizada para eliminar tonalidades de color y estandarizar la presentacin de las imgenes. A esta herramienta se accede atravs de men Ayuda > Gestin del color > Abrir Adobe Gamma, con el que accedemos a una pantalla que nos permiteajustar los valores directamente o por medio de un asistente. Una vez calibrado el monitor, los valores pueden seralmacenados en un fichero para las sucesivas reconfiguraciones.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    18

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    19/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Calibrador de monitor

    Pero sin duda la mejor forma de calibrar un monitor es utilizar hardware especfico para ello. El funcionamiento vara segnel dispositivo usado Unos se conectan directamente al monitor para recogida de datos binarios, permitiendo un ajusteindividual directo de cada uno de los caones. Otros se basan en situar frente a la pantalla del monitor diferentes medidores(calormetros, colormetros, etc.) para recoger datos, suministrando una lectura de los valores actuales y proporcionando los

    valores idneos de configuracin.

    Sea cual sea el mtodo elegido, para una correcta configuracin del monitor deberemos ajustar una serie de parmetros,

    entre los que se incluyen los siguientes:

    Brillo

    Tambin llamado luminosidad, define la relacin no lineal entre la tensin de entrada y la luminancia de salida, es intrnsecode la fsica del entorno de los caones de electrones y no depende de la iluminacin ambiente.

    De otra forma, el brillo es la intensidad de luz emitida sobre un rea especifica, por lo que los cambios de brillo puedenoscurecer o aclarar todo el contenido de la pantalla.

    Los monitores tradicionales (CRT) generan aproximadamente de 80 a 100 cd/m (candela por metro cuadrado). En el casode monitores LCD, no se admiten valores inferiores a 150 cd/m .

    En cuanto al tipo de ordenador, en un PC el brillo no se corrige internamente, por lo que si una imagen se ve bien en el PCdonde se crea, se ver igualmente bien en todos. En los Mac, por el contrario, existe una correccin adaptada al de las

    primeras impresoras lser para Mac, por lo que una imagen creada en un Mac se ve algo ms oscura en un PC.El brillo tpico de un monitor de PC es de 2,35 (+/- 0,1). La de un sistema Mac es de 1,8. Para Internet se pueden crear lasimgenes ajustando la gamma a un valor intermedio ponderado entre PC y Mac.

    Ajustes del brillo

    Si el valor del brillo en un monitor es bajo, los colores luminosos se oscurecern, pareciendo grises. Por el contrario, si el

    brillo es elevado, sern los colores oscuros los que pierdan profundidad, virndose a grises.Contraste

    El contraste es la relacin existente entre la intensidad luminosa del punto ms claro y el ms oscuro de una imagen. Cuantomayor sea el valor de contraste, mejor ser la legibilidad.

    Si tenemos una fotografa con lo un punto blanco y otro negro y estos mismos en un monitor, generalmente el contraste enun monitor (170:1) es superior al que se da en una fotografa (100:1), pero si el ambiente est muy iluminado, el punto negrodeja de ser negro y la relacin de contraste puede bajar bastante (hasta 50:1). Esta situacin se agrava cuando hay reflejos enla pantalla que, adems, producen fatiga al usuario.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    19

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    20/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Ajustes del contraste

    Para una correcta calibracin de contraste hay que buscar valores de 100:1, es decir, que el punto blanco tenga 100 vecesms luminosidad que el punto negro (valor cercano a 2,2).

    Color

    El color en un monitor es producido por la suma de diferentes intensidades de los colores bsicos (rojo, verde y azul),mediante un proceso denominado adicin de colores.

    La calibracin del color consiste en el proceso de ajustar el color de un dispositivo a un estndar establecido para conseguirque los colores de una composicin grfica se aprecien igual en todos los monitores calibrados.

    Ajustes de la tonalidad

    Se debern ajustar los diferentes parmetros que definen las cualidades de los colores, como tono, saturacin, gamma,balance de colores primarios, etc.

    Resumiendo: Es muy importante que a la hora de disear nuestras pginas web y sus elementos grficos tengamos nuestro

    monitor bien configurado, ya que en caso contrario los resultados que obtengamos no sern reales, producindosediferencias apreciables entre lo que ven los usuarios en sus ordenadores y el trabajo que hemos desarrollado, con laconsiguiente prdida de control y de calidad que ello conlleva.

    Artculo porLuciano Moreno

    Formas bsicas en diseo grfico

    El lenguaje visual a travs de grafismos puede descomponerse en entidades bsicas, cada una de lascuales tiene por s misma un significado propio, pero que unidas de diferentes formas pueden constituirelementos comunicativos distintos.

    Estamos acostumbrados a comunicarnos con nuestros semejantes mediante el lenguaje hablado, verbal, formado por unaserie de elementos bsicos (letras, palabras, frases, etc.) que, combinados, forman entidades comunicativas complejas.

    De igual modo, el lenguaje visual a travs de grafismos puede descomponerse en entidades bsicas, cada una de las cualestiene por s misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativosdistintos.

    Estas entidades grficas constituyen la sustancia bsica de lo que vemos. Por lo tanto, son muy importantes y todo diseadordebe conocerlas y manejarlas perfectamente.

    Las formas bsicas del diseo grfico son pocas: el punto, la lnea y el contorno. Pero son la materia prima de toda lainformacin visual que aporta una composicin.

    Cada una de ellas posee un conjunto de caractersticas propias que las modifican y condicionan, entre las que destacan:

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    20

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    21/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Forma: definida por disposicin geomtrica. La forma de una zona o contorno va a permitirnos reconocerlas comorepresentaciones de objetos reales o imaginarios.

    Direccin: proyeccin plana o espacial de una forma, continuacin imaginaria de la misma an despus de su finalizacinfsica. Puede ser horizontal, vertical o inclinada en diferentes grados.

    Color: tal vez las ms importante y evidente, puede imprimir un fuerte carcter y dinamismo a los elementos a los que seaplica. Toda forma o zona tendr en general dos colores diferentes, el de su contorno y el de su parte interna, pudiendoaplicarse tanto colores puros como degradados de colores.

    Textura: modificacin o variacin de la superficie de los materiales, sirve para expresar visualmente las sensacionesobtenidas mediante el sentido del tacto o para representar un material dado. La textura est relacionada con la composicin

    de una sustancia a travs de variaciones diminutas en la superficie del material, y se consigue en una composicin grficamediante la repeticin de luces y sombras o de motivos iguales o similares.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    21

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    22/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Escala: tamao relativo de una zona respecto a las dems y al total de la obra. Los diferentes tamaos de las diferenteszonas modifican y definen las propiedades de cada una de ellas.

    Dimensin: capacidad tridimensional de un elemento o zona. La dimensin slo existe en el espacio real tridimensional,pero se puede simular en una composicin grfica plana mediante tcnicas de perspectiva, sombreado o superposicin.

    Tambin, mediante el uso de fotografas, que introducen espacios tridimensionales en la composicin.

    Movimiento: propiedad muy importante, que aporta connotaciones de dinamismo y fuerza. En las obras grficas puras noexiste movimiento real, pero s se encuentra implcito en ciertos elementos y se puede conseguir con ciertas tcnicas que

    engaan al ojo humano (diseo cintico, pintura cintica) o representando elementos que s lo tienen en el mundo real.

    En las pginas web podemos introducir animaciones grficas que aportan sensaciones de movimiento mucho mayores,

    como animaciones Flash, gifs animados, capas dinmicas, elementos de vdeo, etc.

    Artculo porLuciano Moreno

    El punto

    El punto es la unidad mnima de informacin visual, y est caracterizado por su forma, tamao, color yubicacin.

    El punto es la unidad mnima de informacin visual, y est caracterizado por su forma (generalmente circular, pero tambin

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    22

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    23/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    puede ser rectangular, como ocurre en los monitores, triangular o una mancha sin forma definida), por su tamao, por sucolor y por la ubicacin que tenga dentro de la composicin grfica.

    Las principales caractersticas del punto son:

    Tiene un gran poder de atraccin visual, creando tensin sin direccin.

    Cuando se sitan prximos dos puntos pueden producir sensaciones de tensin o de direccin, creando en lamente del espectador una lnea recta imaginaria que los une.

    Si se sitan diferentes puntos en prolongacin sugieren una direccin, un camino, ms acentuada cuanto msprximos estn los puntos entre s.

    Cuando se agrupan varios puntos pueden definir formas, contornos, tonos o colores (pensemos en la pintura impresionista).

    Los puntos aislados son poco usados en el diseo web. Sin embargo, las sucesiones de puntos prximos son un buenelemento para dirigir la atencin del visitante, para guiar su mirada a una zona concreta, para establecer relaciones entreelementos o para separar zonas de la pgina.

    Artculo porLuciano Moreno

    La lnea

    La lnea es el elemento bsico de todo grafismo y uno de los ms usados. Representa la forma deexpresin ms sencilla y pura, pero tambin la ms dinmica y variada.

    La lnea es el elemento bsico de todo grafismo y uno de los ms usados, teniendo tanta importancia en un grafismo comola letra en un texto. Representa la forma de expresin ms sencilla y pura, pero tambin la ms dinmica y variada.

    Est formada por la unin de varios puntos en sucesin, pudindose asimilar a la trayectoria seguida por un punto enmovimiento, por lo que tiene mucha energa y dinamismo. Su presencia crea tensin y afecta al resto de elementos cercanosa ella.

    Las principales propiedades de la lnea son:

    Contiene gran expresividad grfica y mucha energa.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    23

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    24/41

  • 8/6/2019 Curso Diseno Web Parte1

    25/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Lnea recta

    Define el camino ms corto entre dos puntos. Es poco frecuente en la naturaleza, donde predominan las lneas curvas (eluniverso en su totalidad es curvo), pero muy abundante en el entorno humano, que necesita de ellas para dar estabilidad a

    sus creaciones.

    La lnea recta horizontal expresa equilibrio, calma, equilibrio estable. No hay estabilidad sin una lnea recta horizontal de

    referencia, una lnea de horizonte, ya que nos movemos en un plano horizontal.

    Las lneas rectas horizontales son muy usadas en las pginas web, tanto que el lenguaje HTML proporciona una etiquetaespecfica para introducirlas, HR. Se utilizan sobre todo como elemento delimitador de bloques de contenido en pginas depoco contenido grfico, siendo conveniente no presentarlas con efecto tridimensional, sino como una simple lnea plana(atributo noshade).

    La lnea recta vertical sugiere elevacin, movimiento ascendente, actividad. Tambin expresa equilibrio, pero inestable, comosi estuviera a punto de caer. Esto se puede corregir haciendo trabajar las lneas verticales con otras horizontales de apoyo,que les darn la estabilidad de que carecen.

    En una pginas web, las lneas rectas verticales pueden ser usadas para separar columnas textuales o bloques de contenidos,bien como lneas frontales, con un color que destaque lo suficiente sobre el fondo, bien como lneas de fondo, del mismocolor que ste, separando zonas de un color diferente.

    La lnea recta inclinada, por el contrario, expresa tensin, inestabilidad, desequilibrio. Parecen que estn a punto de caerse.Dentro de las lneas inclinadas, la que forma 45 con la horizontal es la ms estable y reconocible.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    25

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    26/41

  • 8/6/2019 Curso Diseno Web Parte1

    27/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Un factor a tener en cuenta siempre que se trabaje con lneas curvas en una pgina web es el efecto de escalado producido alno ser capaz el sistema grfico de los ordenadores de representar con exactitud formas curvas por medio de pxeles. Es eltpico efecto de "dientes de sierra" que aparece en todos los objetos con partes curvas, efecto que aumenta con el tamaodel objeto.

    Una solucin a este problema visual es incluir las lneas curvas como imgenes en formato web (GIF, JPG, PNG, etc.) yaplicarles el proceso de rastrillado o antialias, disponible en casi todas las aplicaciones grficas, por medio del cual se creanuno o ms pxeles entre los bordes de la lnea y el fondo, de un color intermedio entre ellos.

    Trazo

    Un trazo es el elemento lineal formado por la unin sucesiva de diferentes lneas. Es tal vez la forma grfica ms humana, laque mejor representa nuestra forma natural de dibujar.

    Un trazo heredar las propiedades de las lneas que lo crean, existiendo trazos rectos, curvos o mixtos.

    Artculo porLuciano Moreno

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    27

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    28/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    El contornoEl contorno es el objeto grfico creado cuando el trazo de una lnea se une en un mismo punto.

    Podemos definir el contorno como el objeto grfico creado cuando el trazo de una lnea se une en un mismo punto. Esdecir, cuando una lnea continua empieza y acaba en un mismo punto.

    Todo contorno delimita dos zonas, una acotada (el contorno y su interior) y otra infinita (el fondo), crendose un sub-mundo grfico particular en cada forma definida por cada contorno.

    La lnea base de un contorno define la complejidad de ste y sus propiedades. Cuando una lnea se cierra sobre s misma, elcontorno creado determina un espacio interno, crendose una tensin entre este espacio y sus lmites, otorgando a la lneacreadora un gran poder de atraccin visual.

    Las cualidades grficas de un contorno estarn definidas por las lneas que lo crean y las propiedades de stas.

    Los principales contornos son el cuadrado, la circunferencia y el tringulo, a los que podemos aadir los contornos mixtos ylos orgnicos.

    Artculo porLuciano Moreno

    El cuadrado

    Elementos de diseo: el cuadrado.

    El cuadrado es la figura geomtrica formada por cuatro lneas rectas de igual longitud, denominadas lados, que formanngulos perfectamente rectos en los puntos de unin entre ellas (esquinas a 90).

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    28

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    29/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    El cuadrado es una figura muy estable y de carcter permanente, asociada a conceptos como estabilidad, permanencia,honestidad, rectitud, limpieza, esmero y equilibrio.

    La figura derivada del cuadrado por modificacin de sus lados es el rectngulo, de propiedades anlogas al cuadrado, aunquesugiere menos perfeccin y estabilidad.

    El cuadrado expresa direccionalidad horizontal y vertical, referencia primaria con respecto al equilibrio y el bienestar. Esmenos sugerente y ms neutro que los rectngulos, pero ms slido. Invita a mirar su centro y pasear la mirada en espiral entorno a ese punto.

    Los rectngulos horizontales aportan solidez, estabilidad, dan la sensacin de ser difciles de volcar. Cuando son de grantamao permiten que la mirada el espectador se pasee de un lado a otro, en sentido horizontal.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    29

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    30/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Los rectngulos verticales, por el contrario, da sensacin de menos solidez, es menos estable, parece que puede volcarse encualquier momento. En ellos, la mirada del espectador no puede de un lado a otro, pero puede moverse verticalmente,dando sensacin de elevacin, y es apto para representar aquellos objetos que en la realidad tienen una forma ascendente.

    Los cuadrados y rectngulos vern modificadas sus cualidades visuales segn su forma, tamao, color del contorno y rea

    interna, ubicacin, escala, etc.La proyeccin tridimensional del cuadrado es el hexaedro o cubo, cuerpo geomtrico muy asociado a las obras propias delser humano, como los edificios.Los rectngulos son las formas ms naturales para un ordenador, ya que el monitor y las ventanas de los sistemas operativosgrficos son todas rectngulos horizontales. Una pgina web posee una forma claramente rectangular, definida por la

    ventana del navegador. Adems, los elementos web (tablas, capas, animaciones Flash, applets de Java, etc.) son de formarectangular.

    Esto hace que los rectngulos sean especialmente adecuados para su uso en las pginas web, proporcionando equilibrio yestabilidad a las mismas.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    30

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    31/41

  • 8/6/2019 Curso Diseno Web Parte1

    32/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    considerada perfecta por nuestros antepasados. Su direccionalidad es la curva, asociada al movimiento, al encuadramiento, ala repeticin y al calor.

    La forma circular produce un movimiento de rotacin evidente, posee un gran valor simblico, especialmente su centro, ytiene connotaciones psicolgicas como proteccin, inestabilidad, totalidad, movimiento contnuo o infinitud. Es tpicorepresentar tambin los espacios cerrados, hermticos, con circunferencias o crculos.

    Contornos derivados de la circunferencia son el valo y el ovoide, con cualidades parecidas a las de sta, pero que expresanan ms inestabilidad y dinamismo, aunque el movimiento perfecto sea una cualidad propia de la circunferencia.

    La proyeccin tridimensional de la circunferencia es la esfera, el cuerpo geomtrico ms perfecto, el que contiene un mayorvolumen en un menor espacio, el que define la forma tanto de los tomos como de los cuerpos celestes.

    La circunferencia y el crculo son tal vez los elementos geomtricos ms perfectos y estables, aunque cargados de una grancarga dinmica.

    Las formas circulares son muy difciles de representar en una pgina web, ya que todos los elementos que nos facilita ellenguaje HTML son rectangulares, aunque aparenten no serlo. Adems, las formas curvas se visualizan muy mal en losmonitores, debido a la interpretacin grfica mediante pixels, que origina efectos de escalado indeseables.

    Otro inconveniente de usar crculos en el diseo web deriva precisamente de ser la forma que contiene ms rea en el menorpermetro, ya que la mayora de las veces al diseador le interesa precisamente lo contrario, reducir al mnimo el rea ymaximizar al mximo el permetro.

    Tal vez la nica forma de incluir una forma circular completa en una pgina sea incluyndola en una imagen. Pero cualquierimagen es de por s rectangular como objeto HTML, lo que nos obligar a desperdiciar todo el espacio comprendido entreel contorno circular y los bordes de la imagen, apareciendo espacios sin contenido no deseables en la mayora de los casos.

    Este efecto negativo se puede paliar incluyendo dentro de la imagen la forma circular y los dems objetos que le rodean enla composicin y que se encuentran dentro de los lmites del rectngulo que define la imagen, pero entonces esos elementossern estticos, fijos, sin posibilidad de ser modificados si no es cambiando todo el contenido de la imagen.

    Una mejor solucin es incluir la imagen que contiene el contorno circular (o curvo en general) como fondo de la pgina ode un elemento contenedor de la misma (tabla, celda de tabla, prrafo, capa, etc.), lo que nos permitir presentar otrosobjetos HTML ocupando espacios vacos alrededor de la forma circular.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    32

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    33/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Formas ms sutiles y efectivas de incluir curvas en una pgina pueden ser recortando imgenes en forma de valo o crculo,e incluso simulando caminos curvos mediante elementos textuales o grficos dispuestos en sucesin.

    Artculo porLuciano Moreno

    Contornos mixtosElementos de diseo: contornos mixtos, que son los que estn compuestos por varios tipos de contornos.

    Mediante combinaciones de los elementos bsicos y contornos anteriores se pueden construir todas las formas imaginables,cada una de las cuales tendr unas propiedades dependientes de las partes que la forman, de su orientacin, de su tamao, deespesor del trazo lmite, de su color y de su ubicacin.

    Hay que tener en cuenta, en cualquier caso, que el predominio de la referencia horizontal-vertical da una sensacin deequilibrio, mientras que el dominio de la direccin diagonal aporta inestabilidad.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    33

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    34/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Los contornos mixtos son muy usados en las pginas web, a las que aportan variedad en el diseo y definicin de espaciosde informacin, rompiendo la monotona visual de las formas rectangulares puras.

    El nico inconveniente es que las lneas curvas se deben implementar mediante imgenes, generalmente en formato GIF,que se pueden incluir como secciones curvas en las celdas extremas de una tabla o como imgenes completas en una capa,sobre la que se sita otra capa con el texto.

    Tambin es posible incluirlas como ficheros SWF (Macromedia Flash), que aportan gran definicin a las zonas curvas, sinproducirse efectos de escalado, al ser tratadas como grficos vectoriales. El inconveniente es entonces la actualizacin de loscontenidos textuales, ya que hace falta para ello acceder al fichero FLA fuente del grfico

    Artculo porLuciano Moreno

    Contornos orgnicosElementos de diseo: contornos orgnicos, que estn formados por curvas libres.

    Los contornos orgnicos son aquellos formados por curvas libres.

    Son los contornos ms abundantes en la naturaleza, y sugieren fluidez, desarrollo, humanidad, inspirando sensacionesfavorables en el espectador.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    34

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    35/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Los contornos orgnicos son utilizados abundantemente en pintura y dibujo artstico, ya que son la base para representarfiguras humanas, bodegones, paisajes, etc.

    Sin embargo, son muy difciles de incluir en una pgina web, tanto por aspectos tcnicos (deben incrustarse como imgenes)como por su aspecto visual, que puede chocar con la naturaleza propia de una pgina, composicin ordenada en la quepredominan las formas rectangulares. No obstante, bien usados pueden dar un toque natural o humano a la pgina.

    Una posible solucin, si deseamos introducir en una pgina contornos orgnicos, es adaptarlos lo ms posible a un contornomixto, transformando las curvas libres en curvas Bzier, porciones de circunferencias o lneas rectas. Otra solucin esintroducir fotografas o ilustraciones que los contengan.

    Artculo porLuciano Moreno

    El diseo equilibrado. IntroduccinEstudio de las reglas bsicas del diseo grfico. No existe una frmula que de un diseo infalible pero sunas reglas bsicas.

    Podemos definir el diseo de una composicin grfica como la adecuacin de distintos elementos grficos previamenteseleccionados dentro de un espacio visual, combinndolos de tal forma que todos ellos puedan aportar un significado a lamisma, consiguiendo el conjunto transmitir un mensaje claro al espectador.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    35

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    36/41

  • 8/6/2019 Curso Diseno Web Parte1

    37/41

  • 8/6/2019 Curso Diseno Web Parte1

    38/41

  • 8/6/2019 Curso Diseno Web Parte1

    39/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    destinatarios de la composicin y las caractersticas funcionales y comunicativas de cada elemento.

    Ahora debemos definir qu partes del rea de diseo deben estar ocupadas por elementos y qu partes van a quedar vacos,sin contenido alguno. Si dejamos muchos espacios vacos la composicin puede resultar descordinada, ya que ser difcilestablecer relaciones globales entre los elementos o entre los grupos de ellos. Pero si el nmero de componentes es elevado,podemos obtener una obra sobrecargada, difcil de entender, en la que no se distingue con claridad qu es cada cosa y cules el mensaje que quiere transmitir.

    Empezaremos a situar entonces los elementos en escena, como si fueran actores de nuestra particular obra de teatro,combinndolos de diferentes formas hasta que obtengamos un resultado satisfactorio. En este punto es muy importantetener en cuenta que cada elemento visual tiene una funcin determinada dentro de la composicin.

    La informacin visual que aporta un elemento puede cambiar segn lo hagan las propiedades del mismo, como su tamao,

    forma o color, pero sobre todo su proporcin, el peso visual que tenga en el total de la composicin.

    Indudablemente, la forma ms directa de marcar proporciones es mediante el tamao relativo de los elementos. Loselementos ms grandes, altos o anchos tienen una carga visual superior a los ms pequeos, cortos o finos, creando zonas deatraccin ms intensas.

    Tambin podemos delimitar proporciones en un grafismo mediante el color, con el que podemos definir distintas reastonales tiles para distribuir de forma adecuada toda la informacin grfica. En este sentido, los colores puros y saturadostienen un mayor peso visual que los secundarios neutros, y estos mayor que los terciarios poco saturados.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    39

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    40/41

    Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

    Otra tcnica para definir proporciones es el uso de agrupaciones de elementos y la correcta distribucin de estas en elescenario, lo que nos va a permitir estructurar de una forma u otra la composicin.

    Proporcin por agrupaciones

    Este sistema suele dar buenos resultados, siempre que no abusemos de l creando un excesivo nmero de bloquessignificativos, ya que entonces se restaran importancia unos a otros y se perdera la proporcionalidad buscada.

    Ms reglas prcticas referentes a la proporcin son:

    Las formas regulares tienen menor peso que las irregulares.

    Las formas alargadas y angulares alargan el campo de visin, creando zonas dominantes.

    Curso prctico de diseo web Parte I:http://www.desarrolloweb.com/manuales/47/ Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

    40

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/manuales/47/http://www.desarrolloweb.com/
  • 8/6/2019 Curso Diseno Web Parte1

    41/41