{"id":140,"date":"2013-03-08T01:00:55","date_gmt":"2013-03-08T01:00:55","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/?p=140"},"modified":"2013-04-24T19:07:23","modified_gmt":"2013-04-24T19:07:23","slug":"lenguajes-visuales-y-creacion-multimedia","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/lenguajes-visuales-y-creacion-multimedia\/","title":{"rendered":"Lenguajes visuales y creaci\u00f3n multimedia"},"content":{"rendered":"<p><\/p>\n<h3><b>Introducci\u00f3n: \u00bfUna imagen vale m\u00e1s que mil palabras?<\/b><\/h3>\n<p>Las relaciones entre el lenguaje verbal y el lenguaje visual han caracterizado el estudio te\u00f3rico de las im\u00e1genes durante el siglo XX. Las im\u00e1genes son las unidades de representaci\u00f3n del lenguaje visual como las palabras lo son del lenguaje escrito. En la cultura digital, el consumo visual del ciudadano se ha disparado a niveles antes inimaginables.<\/p>\n<p>La publicidad y el dise\u00f1o, la creaci\u00f3n art\u00edstica, la comunicaci\u00f3n pol\u00edtica y social, han encontrado en el lenguaje visual una herramienta muy potente para comunicar conocimientos y emociones de forma directa, o para apoyar visualmente una idea concreta.<\/p>\n<p>As\u00ed, en un mundo donde los medios de comunicaci\u00f3n tienen altas cotas de poder, el control de la imagen y su manipulaci\u00f3n t\u00e9cnica se ha convertido en elemento central en la difusi\u00f3n de conocimiento a todos los niveles. Las im\u00e1genes no son neutras, y m\u00e1s all\u00e1 de mostrar las intenciones art\u00edsticas y est\u00e9ticas de los creativos, asumen funciones pol\u00edticas, comerciales o sociales.<\/p>\n<p>El an\u00e1lisis del uso del lenguaje visual en el contexto actual nos lleva a darnos cuenta \u2500r\u00e1pidamente\u2500 de la fusi\u00f3n que tiene lugar entre el dibujo, la fotograf\u00eda, el v\u00eddeo, el texto y el s\u00edmbolo, etc. en la producci\u00f3n multimedia, donde es de vital importancia la mezcla ordenada de lenguajes y recursos, con la intenci\u00f3n de comunicar e interactuar con el usuario.<\/p>\n<p>Para m\u00e1s informaci\u00f3n sobre la teor\u00eda de la imagen y el lenguaje visual en general, se puede consultar el curso que hay disponible en el <a href=\"http:\/\/ocw.uoc.edu\/informatica-tecnologia-i-multimedia\/imatge-i-llenguatge-visual\/Course_listing\">UOCopencourseware<\/a>, donde se habla en detalle de las teor\u00edas interpretativas de la imagen, de la evoluci\u00f3n hist\u00f3rica del grafismo y de la identidad gr\u00e1fica de una manera muy completa. En este curso se puede trabajar desde la historia de la topograf\u00eda, hasta las bases para informar gr\u00e1ficamente (infograf\u00edas).<\/p>\n<h3><b>Multimedia o la suma de lenguajes para la creaci\u00f3n de experiencias visuales interactivas<\/b><\/h3>\n<p>Llamamos multimedia a la combinaci\u00f3n de varios medios de comunicaci\u00f3n con vocaci\u00f3n interactiva en un \u00fanico espacio visual; sea este una pantalla o cualquier dispositivo digital. El aumento de la capacidad de los procesadores inform\u00e1ticos y el abaratamiento de su coste han propulsado una revoluci\u00f3n en la implantaci\u00f3n de los medios digitales que, en s\u00ed mismos, requieren del lenguaje multimedia para ser explotados de una forma completa y garantizar una experiencia de usuario pr\u00e1ctica, rica y efectiva.<\/p>\n<p>La creaci\u00f3n multimedia \u2500por lo tanto\u2500 requerir\u00e1 del estudio y el tratamiento de los diferentes lenguajes de comunicaci\u00f3n: visual, textual, sonoro, etc. para conseguir el producto final deseado. As\u00ed, el dise\u00f1o de un entorno multimedia implicar\u00e1, necesariamente, una\u00a0 fase de conceptualizaci\u00f3n y dise\u00f1o<b>,<\/b> una fase de programaci\u00f3n<b> <\/b>del funcionamiento y la estructura<b> <\/b>del entorno, y una tercera fase de maquetaci\u00f3n de la apariencia final.<\/p>\n<h3><b>Dise\u00f1o multimedia<\/b><\/h3>\n<p>El dise\u00f1o de productos multimedia se orienta b\u00e1sicamente en el entorno de la web y de la creaci\u00f3n de aplicaciones interactivas (software). El dise\u00f1o multimedia es una herramienta muy efectiva para transmitir un mensaje basado principalmente en el dise\u00f1o gr\u00e1fico, que es la disciplina que se encarga de ordenar la informaci\u00f3n de forma est\u00e9tica y legible para el usuario, y mostrarla de una forma atractiva. Mediante el dise\u00f1o combinamos textos, im\u00e1genes, colores, animaciones, v\u00eddeos, espacios, audio e interacci\u00f3n en una aplicaci\u00f3n inform\u00e1tica.<\/p>\n<p>Si bien es cierto que hay unos principios b\u00e1sicos del dise\u00f1o que son perfectamente v\u00e1lidos en el entorno digital: proporci\u00f3n, ritmo, unidad, \u00e9nfasis, variedad, etc., no es menos cierto que los multimedia \u2013la suma de diferentes lenguajes en un mismo entorno y de forma org\u00e1nica\u2013 requieren un enfoque particular a la hora de afrontar un proyecto.<\/p>\n<p>En los recursos siguientes se pueden leer diferentes art\u00edculos donde se habla de los principios del dise\u00f1o gr\u00e1fico y se explican visualmente los principales conceptos:<\/p>\n<ul>\n<li><a href=\"http:\/\/esperandolasal.wordpress.com\/2010\/02\/19\/principios-basicos-del-diseno-grafico\/\">Principios b\u00e1sicos del dise\u00f1o gr\u00e1fico<\/a><\/li>\n<li><a href=\"http:\/\/www.tecnopedia.net\/infografia-y-graficos\/fundamentos-del-diseno-grafico\/\">Fundamentos del dise\u00f1o gr\u00e1fico<\/a><\/li>\n<li><a href=\"http:\/\/disenoiv.com\/principios-basicos-de-diseno\/\">Pr<\/a><a href=\"http:\/\/disenoiv.com\/principios-basicos-de-diseno\/\">incipios b\u00e1sicos del dise\u00f1o gr\u00e1fico editorial<\/a><\/li>\n<li><a href=\"http:\/\/creatividadnatural.blogspot.com.es\/2009\/07\/logica-visual-principio-de-la-jerarquia.html\">L\u00f3gica visual<\/a><\/li>\n<\/ul>\n<p>Por lo tanto, ser\u00e1 necesario tener en cuenta las particularidades del entorno digital y entender qu\u00e9 \u2013a diferencia de los medios convencionales\u2013 en la multimedia la tecnolog\u00eda es a la vez una fuente inagotable de recursos y opciones, y un l\u00edmite para lo que no es tecnol\u00f3gicamente posible.<\/p>\n<p>Las decisiones sobre el dise\u00f1o de un entorno multimedia estar\u00e1n condicionadas, en todo momento, por las posibilidades t\u00e9cnicas de las plataformas donde desarrollamos la aplicaci\u00f3n, y los lenguajes de programaci\u00f3n necesarios para hacerla funcionar.<\/p>\n<h3><b>Usabilidad<\/b><\/h3>\n<p>Las primeras etapas del dise\u00f1o multimedia se realizaron en un entorno inestable en el que no hab\u00eda est\u00e1ndares de referencia. La falta de experiencia del sector provoc\u00f3 aut\u00e9nticos desprop\u00f3sitos en forma de webs ininteligibles o imposibles de entender para el usuario normal. La aparici\u00f3n de tecnolog\u00edas visuales muy potentes, y el poco tiempo dedicado a reflexionar sobre su introducci\u00f3n en el entorno web, provocaron que Flash \u2500por ejemplo\u2500 se convirtiera en un obst\u00e1culo para el acceso a la informaci\u00f3n en forma de presentaciones interminables o entornos de navegaci\u00f3n muy dif\u00edciles de usar.<\/p>\n<p>Poco a poco, sin embargo, los dise\u00f1adores se dieron cuenta de la necesidad de introducir el an\u00e1lisis de la experiencia del usuario para dise\u00f1ar entornos mucho m\u00e1s intuitivos y f\u00e1ciles de usar. En este contexto nace la usabilidad, que es la rama del dise\u00f1o que se ocupa de analizar y dise\u00f1ar la experiencia del usuario en el uso de un entorno multimedia interactivo.<\/p>\n<p>Hoy en d\u00eda hay un amplio abanico de empresas, profesionales e investigadores trabajando en el entorno de la mejora de la experiencia de usuario (UX), lo que hace que haya sido una de las ramas m\u00e1s activas y din\u00e1micas del sector.<\/p>\n<p>Existe un lenguaje de la usabilidad: unas reglas y unos c\u00f3digos que garantizan que la experiencia del usuario se realiza en un marco c\u00f3modo, funcional e interactivo. La experiencia es algo subjetivo, que no se puede definir desde el dise\u00f1o; aun as\u00ed, si garantizamos un dise\u00f1o s\u00f3lido, directo y sencillo, potenciaremos la experiencia positiva del usuario.<\/p>\n<p>En los recursos siguientes se pueden consultar los principios b\u00e1sicos a tener en cuenta para el dise\u00f1o de una buena experiencia de usuario:<\/p>\n<ul>\n<li><a href=\"http:\/\/52weeksofux.com\/post\/475093254\/10-principles-of-ux\">http:\/\/52weeksofux.com\/post\/475093254\/10-principles-of-ux<\/a><\/li>\n<li><a href=\"http:\/\/www.usability.gov\/basics\/index.html\">http:\/\/www.usability.gov\/basics\/index.html<\/a><\/li>\n<li><a href=\"http:\/\/uxmag.com\/articles\/guiding-principles-for-ux-designers\">http:\/\/uxmag.com\/articles\/guiding-principles-for-ux-designers<\/a><\/li>\n<li>Est\u00e1ndares UX: <a href=\"http:\/\/www.usabilitynet.org\/tools\/r_international.htm#9241-11\">http:\/\/www.usabilitynet.org\/tools\/r_international.htm#9241-11<\/a><\/li>\n<\/ul>\n<h3><b>Lenguajes de maquetaci\u00f3n: Hojas de estilo en cascada (CSS)<\/b><\/h3>\n<p>Una vez planteado el dise\u00f1o visual de un proyecto multimedia, y tenidos en cuenta los principios b\u00e1sicos del dise\u00f1o gr\u00e1fico y de la usabilidad, procederemos a codificar<b> <\/b>este dise\u00f1o mediante c\u00f3digos inform\u00e1ticos.<\/p>\n<p>Para la estructura b\u00e1sica de una web, por ejemplo, usamos HTML-XHTML para marcar las diferentes partes de la p\u00e1gina: el encabezamiento, los t\u00edtulos, el cuerpo del texto, el pie, etc. y definir su estructura. Una vez tenemos el documento base (HTML), hay que comunicar al navegador o al dispositivo que reproduzca el resultado final del proyecto, c\u00f3mo lo queremos mostrar, cu\u00e1l es su formato y su apariencia.<\/p>\n<p>Para hacerlo, tenemos que formatear las diferentes secciones del documento, asign\u00e1ndoles un formato determinado: un color, una medida, una posici\u00f3n determinada o relativa, los efectos visuales que queramos aplicar, etc.<\/p>\n<p>CSS (<i>cascade style sheets<\/i>) es un lenguaje de hojas de estilo utilizado para describir la sem\u00e1ntica de presentaci\u00f3n: aspecto y formato, de una p\u00e1gina web o de cualquier clase de documento XML (webs, ebooks, SVG,&#8230;). CSS est\u00e1 dise\u00f1ado, principalmente, para permitir la separaci\u00f3n del contenido del documento de su presentaci\u00f3n.<\/p>\n<p>CSS nos permite determinar este formato con una serie de ventajas frente a otros sistemas y lenguajes:<\/p>\n<ul>\n<li>Control centralizado de la presentaci\u00f3n de un sitio web completo. Lo que permite modificar una sola hoja de estilo y aplicar los cambios a diferentes webs vinculadas.<\/li>\n<li>Reaprovechamiento de las hojas de estilos, una hoja CSS puede ser aplicada a diferentes proyectos.<\/li>\n<li>Una p\u00e1gina puede disponer de diferentes hojas de estilo seg\u00fan el dispositivo que la muestre. Por ejemplo, para ser imprimida, mostrada en un dispositivo m\u00f3vil, o ser \u00able\u00edda\u00bb por un sintetizador de voz. Con lo que se garantiza la adaptaci\u00f3n del documento a los diferentes dispositivos (<i>responsive design<\/i>).<\/li>\n<li>Los documentos HTML resultantes son mucho m\u00e1s claros y ligeros, puesto que extraemos toda la informaci\u00f3n sobre la apariencia visual de la p\u00e1gina<b> <\/b>que quedar\u00e1 registrada en las hojas de estilo en cascada (CSS).<\/li>\n<\/ul>\n<p>CSS se ha transformado en el lenguaje con el que se define la apariencia y el formato final de la mayor\u00eda de proyectos multimedia, tanto si est\u00e1n orientados al entorno web, y se basan en HTML\/XHTML (o en cualquiera de los lenguajes de programaci\u00f3n web), como si funcionan con alguna de las otras variantes de XML. CSS es el lenguaje correcto para definir c\u00f3mo queremos mostrar la informaci\u00f3n al usuario.<\/p>\n<p>Si tenemos en cuenta que XML es el est\u00e1ndar creado por el Wide Web Consortium<i> <\/i>(W3C) para el intercambio de informaci\u00f3n estructurada entre diferentes plataformas, que puede ser usado tanto en bases de datos como en editores de textos, hojas de c\u00e1lculo y en la mayor\u00eda de proyectos digitales o multimedia, r\u00e1pidamente nos daremos cuenta de la importancia de dominar CSS para el dise\u00f1o de cualquier aplicaci\u00f3n o entorno multimedia.<\/p>\n<p>En Internet podemos encontrar muchos recursos para aprender a usar CSS, algunos de los m\u00e1s interesantes son:<\/p>\n<p><b>Tutoriales y cursos<\/b><\/p>\n<ul>\n<li>Curso de CSS en Code Academy: <a href=\"http:\/\/www.codecademy.com\/es\/courses\/web-beginner-en-tRcuF?curriculum_id=50afc73a4e9f856d7e007373\">http:\/\/www.codecademy.com\/es\/courses\/web-beginner-en-trcuf?curriculum_id=50afc73a4e9f856d7e007373<\/a><\/li>\n<li>Curso en Code School: <a href=\"http:\/\/www.codeschool.com\/paths\/html-css\">http:\/\/www.codeschool.com\/paths\/html-css<\/a><\/li>\n<li>Curso de CSS en Mozilla Developer: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/Getting_Started\">https:\/\/developer.mozilla.org\/en-us\/docs\/css\/getting_Started<\/a><\/li>\n<li>Web completa dedicada al aprendizaje de CSS: <a href=\"http:\/\/www.csstutorial.net\/\">http:\/\/www.csstutorial.net\/<\/a><b><\/b><\/li>\n<\/ul>\n<p><b>Recursos y <i>templates<\/i>:<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/speckyboy.com\/2010\/11\/08\/40-essential-css-templates-resources-and-downloads\/\">http:\/\/speckyboy.com\/2010\/11\/08\/40-essential-css-templates-resources-and-downloads\/<\/a><\/li>\n<li><a href=\"http:\/\/www.noupe.com\/design\/40-css-reference-websites-and-resources.html\">http:\/\/www.noupe.com\/design\/40-css-reference-websites-and-resources.html<\/a><\/li>\n<li><a href=\"http:\/\/www.webdesignerdepot.com\/2009\/08\/250-resources-to-help-you-become-a-css-expert\/\">http:\/\/www.webdesignerdepot.com\/2009\/08\/250-resources-to-help-you-become-a-css-expert\/<\/a><\/li>\n<li><a href=\"http:\/\/www.csszengarden.com\/\">http:\/\/www.csszengarden.com\/<\/a><\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n: \u00bfUna imagen vale m\u00e1s que mil palabras? Las relaciones entre el lenguaje verbal y el lenguaje visual han caracterizado el estudio te\u00f3rico de las im\u00e1genes durante el siglo XX. Las im\u00e1genes son las unidades de representaci\u00f3n del lenguaje visual como las palabras lo son del lenguaje escrito. En la cultura digital, el consumo visual &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/lenguajes-visuales-y-creacion-multimedia\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abLenguajes visuales y creaci\u00f3n multimedia\u00bb<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,12],"tags":[51,60,59,52,53,55,54,57,58,56],"class_list":["post-140","post","type-post","status-publish","format-standard","hentry","category-fundamentals","category-languages","tag-css","tag-diseno","tag-disseny","tag-experiencia-visual","tag-imagen","tag-lenguaje-visual","tag-llenguatge-visual","tag-usabilidad","tag-usabilitat","tag-ux","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":30,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":504,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/posts\/140\/revisions\/504"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/es\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}