{"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\/lenguajes-visuales-y-creacion-multimedia\/","title":{"rendered":"Llenguatges visuals i creaci\u00f3 multim\u00e8dia"},"content":{"rendered":"<p><b style=\"font-size: 1.17em\">Introducci\u00f3: una imatge val m\u00e9s que mil paraules?<\/b><\/p>\n<p>Les relacions entre el llenguatge verbal i el llenguatge visual han caracteritzat l\u2019estudi te\u00f2ric de les imatges durant el segle XX. Les imatges s\u00f3n les unitats de representaci\u00f3 del llenguatge visual com les paraules ho s\u00f3n del llenguatge escrit. En la cultura digital, el consum visual del ciutad\u00e0 s\u2019ha disparat a nivells abans inimaginables.<\/p>\n<p>La publicitat i el disseny, la creaci\u00f3 art\u00edstica, la comunicaci\u00f3 pol\u00edtica i social, han trobat en el llenguatge visual una eina molt potent per a comunicar coneixements i emocions de manera directa, o per a donar suport visualment a una idea concreta.<\/p>\n<p>Aix\u00ed, en un m\u00f3n on els mitjans de comunicaci\u00f3 tenen altes cotes de poder, el control i la manipulaci\u00f3 t\u00e8cnica de la imatge han esdevingut un element central en la difusi\u00f3 de coneixement en tots els \u00e0mbits. Les imatges no s\u00f3n neutres i a m\u00e9s de mostrar les intencions art\u00edstiques i est\u00e8tiques dels creatius assumeixen funcions pol\u00edtiques, comercials o socials.<\/p>\n<p>L\u2019an\u00e0lisi de l\u2019\u00fas del llenguatge visual en el context actual ens porta a adonar-nos, r\u00e0pidament, de la fusi\u00f3 que s\u2019esdev\u00e9 entre el dibuix, la fotografia, el v\u00eddeo, el text i el s\u00edmbol, etc., en la producci\u00f3 multim\u00e8dia, en qu\u00e8 \u00e9s de vital import\u00e0ncia la mescla ordenada de llenguatges i recursos amb la intenci\u00f3 de comunicar i interactuar amb l\u2019usuari.<\/p>\n<p>Per a m\u00e9s informaci\u00f3 sobre la teoria de la imatge i el llenguatge visual en general es pot consultar el curs que hi ha disponible al <a href=\"http:\/\/ocw.uoc.edu\/informatica-tecnologia-i-multimedia\/imatge-i-llenguatge-visual\/Course_listing\">UOCopencourseware<\/a>, en qu\u00e8 es parla detalladament i d\u2019una manera molt completa de les teories interpretatives de la imatge, de l\u2019evoluci\u00f3 hist\u00f2rica del grafisme i de la identitat gr\u00e0fica. All\u00e0 es pot treballar des de la hist\u00f2ria de la topografia fins a les bases per a informar gr\u00e0ficament (infografia).<\/p>\n<h3><b>Multim\u00e8dia o la suma de llenguatges per a la creaci\u00f3 d\u2019experi\u00e8ncies visuals interactives<\/b><\/h3>\n<p>S\u2019anomena <i>multim\u00e8dia<\/i> la combinaci\u00f3 de diversos mitjans t\u00e8cnics de comunicaci\u00f3 d\u2019informaci\u00f3 amb vocaci\u00f3 interactiva en un \u00fanic espai visual, tant si \u00e9s una pantalla com qualsevol dispositiu digital. L\u2019augment de la capacitat dels processadors inform\u00e0tics i l\u2019abaratiment del cost que tenen ha propulsat una revoluci\u00f3 en la implantaci\u00f3 dels mitjans digitals, que, en si mateixos, requereixen el llenguatge multim\u00e8dia per a ser explotats d\u2019una manera completa i garantir una experi\u00e8ncia d\u2019usuari pr\u00e0ctica, rica i efectiva.<\/p>\n<p>La creaci\u00f3 multim\u00e8dia, per tant, requereix l\u2019estudi i el tractament dels diferents llenguatges de comunicaci\u00f3 (visual, textual, sonor, etc.) per a aconseguir el producte final desitjat. Aix\u00ed, el disseny d\u2019un entorn multim\u00e8dia implica, necess\u00e0riament, una fase de conceptualitzaci\u00f3 i disseny, una fase de programaci\u00f3 del funcionament i l\u2019estructura de l\u2019entorn i una fase de maquetaci\u00f3 de l\u2019aparen\u00e7a final.<\/p>\n<h3><b>Disseny multim\u00e8dia<\/b><\/h3>\n<p>El disseny de productes multim\u00e8dia s\u2019orienta b\u00e0sicament a l\u2019entorn del web i de la creaci\u00f3 d\u2019aplicacions interactives (programari). El disseny multim\u00e8dia \u00e9s una eina molt efectiva per a transmetre un missatge basat, principalment, en el disseny gr\u00e0fic, que \u00e9s la disciplina que s\u2019encarrega d\u2019ordenar la informaci\u00f3 de manera est\u00e8tica i llegible per a l\u2019usuari i mostrar-la d\u2019una manera atractiva. Mitjan\u00e7ant el disseny combinem textos, imatges, colors, animacions, v\u00eddeos, espais, \u00e0udio i interacci\u00f3 en una aplicaci\u00f3 inform\u00e0tica.<\/p>\n<p>Si b\u00e9 \u00e9s cert que hi ha uns principis b\u00e0sics del disseny que s\u00f3n perfectament v\u00e0lids en l\u2019entorn digital (proporci\u00f3, ritme, unitat, \u00e8mfasi, varietat, etc.), tamb\u00e9 ho \u00e9s que els multim\u00e8dia \u2013la suma de diferents llenguatges en un mateix entorn i de manera org\u00e0nica\u2013 requereixen un enfocament particular, a l\u2019hora d\u2019afrontar un projecte multim\u00e8dia.<\/p>\n<p>En els recursos seg\u00fcents es poden llegir diferents articles en qu\u00e8 es parla dels principis del disseny gr\u00e0fic i s\u2019expliquen visualment els conceptes principals:<\/p>\n<ul>\n<li>\u201c<a href=\"http:\/\/esperandolasal.wordpress.com\/2010\/02\/19\/principios-basicos-del-diseno-grafico\/\">Principios b\u00e1sicos del dise\u00f1o gr\u00e1fico<\/a>\u201d<\/li>\n<li>\u201c<a href=\"http:\/\/www.tecnopedia.net\/infografia-y-graficos\/fundamentos-del-diseno-grafico\/\">Fundamentos del dise\u00f1o gr\u00e1fico<\/a>\u201d<\/li>\n<li>\u201c<a href=\"http:\/\/disenoiv.com\/principios-basicos-de-diseno\/\">Principios b\u00e1sicos del dise\u00f1o gr\u00e1fico editorial<\/a>\u201d<\/li>\n<li>\u201c<a href=\"http:\/\/creatividadnatural.blogspot.com.es\/2009\/07\/logica-visual-principio-de-la-jerarquia.html\">L\u00f3gica visual<\/a>\u201d<\/li>\n<\/ul>\n<p>Per tant, \u00e9s necessari tenir en compte les particularitats de l\u2019entorn digital i entendre que, a difer\u00e8ncia dels mitjans convencionals, en la multim\u00e8dia la tecnologia \u00e9s alhora una font inesgotable de recursos i opcions i un l\u00edmit pel qual no \u00e9s tecnol\u00f2gicament possible.<\/p>\n<p>Les decisions sobre el disseny d\u2019un entorn multim\u00e8dia doncs, estaran condicionades en tot moment per les possibilitats t\u00e8cniques de les plataformes en qu\u00e8 desenvolupem l\u2019aplicaci\u00f3 i els llenguatges de programaci\u00f3 necessaris per a fer-la funcionar.<\/p>\n<h3><b>Usabilitat<\/b><\/h3>\n<p>Les primeres etapes del disseny multim\u00e8dia es van fer en un entorn inestable en qu\u00e8 no hi havia est\u00e0ndards de refer\u00e8ncia. La falta d\u2019experi\u00e8ncia del sector va provocar aut\u00e8ntics desprop\u00f2sits en forma de webs inintel\u00b7ligibles o impossibles d\u2019entendre per a un usuari normal. L\u2019aparici\u00f3 de tecnologies visuals molt potents i la poca feina feta en la reflexi\u00f3 de pensar a introduir-les en l\u2019entorn web van provocar que Flash, per exemple, es convert\u00eds en un obstacle per a l\u2019acc\u00e9s a la informaci\u00f3 en forma de presentacions interminables o entorns de navegaci\u00f3 molt dif\u00edcils de fer anar.<\/p>\n<p>A poc a poc, per\u00f2, els dissenyadors es van adonar de la necessitat d\u2019introduir l\u2019an\u00e0lisi de l\u2019experi\u00e8ncia de l\u2019usuari per a millorar-la i dissenyar molt m\u00e9s d\u2019acord amb el llenguatge natural i amb la nostra manera intu\u00eftiva de pensar. En aquest context neix la <a href=\"http:\/\/www.usabilitynet.org\/management\/b_what.htm\">usabilitat<\/a>, que \u00e9s la branca del disseny que s\u2019ocupa d\u2019analitzar i dissenyar l\u2019experi\u00e8ncia de l\u2019usuari en l\u2019\u00fas d\u2019un entorn multim\u00e8dia interactiu.<\/p>\n<p>Avui dia hi ha un ampli ventall d\u2019empreses, professionals i investigadors treballant a l\u2019entorn de la millora de l\u2019experi\u00e8ncia d\u2019usuari (UX), i aix\u00f2 fa que hagi esdevingut una de les branques m\u00e9s actives i din\u00e0miques del sector.<\/p>\n<p>Hi ha, per tant, un llenguatge de la usabilitat: unes regles i uns codis que garanteixen que l\u2019experi\u00e8ncia de l\u2019usuari \u00e9s t\u00e9 en un marc c\u00f2mode, funcional i interactiu. L\u2019experi\u00e8ncia de l\u2019usuari \u00e9s una cosa subjectiva, que no es pot definir des del disseny; tanmateix, si garantim un disseny s\u00f2lid, directe i senzill potenciarem l\u2019experi\u00e8ncia positiva de l\u2019usuari.<\/p>\n<p>En els recursos seg\u00fcents es poden consultar els principis b\u00e0sics que cal tenir en compte per al disseny d\u2019una bona experi\u00e8ncia d\u2019usuari:<\/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\u00e0ndards 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>Llenguatges de maquetaci\u00f3: fulls d\u2019estil en cascada<\/b><\/h3>\n<p>Un cop plantejat el disseny visual d\u2019un projecte multim\u00e8dia, tinguts en compte els principis b\u00e0sics del disseny gr\u00e0fic i de la usabilitat, codificarem aquest disseny mitjan\u00e7ant codis inform\u00e0tics.<\/p>\n<p>Per a l\u2019estructura b\u00e0sica d\u2019una web, per exemple, usem HTML-XHTML per a marcar les diferents parts de la p\u00e0gina (l\u2019encap\u00e7alament, els t\u00edtols, el cos del text, el peu, etc.) i definir-ne l\u2019estructura. Un cop tenim el document base (HTML) hem de comunicar al navegador o al dispositiu que reprodueixi el resultat final del projecte com el volem mostrar i quin \u00e9s el format i l\u2019aparen\u00e7a.<\/p>\n<p>Per a fer-ho hem de formatar les diferents seccions del document assignant-hi un format determinat: un color, una mida, una posici\u00f3 determinada o relativa, els efectes visuals que vulguem aplicar, etc.<\/p>\n<p>El CSS (fulls d\u2019estil en cascada o <i>cascading style sheets<\/i>) \u00e9s un llenguatge de fulls d\u2019estil utilitzat per a descriure la sem\u00e0ntica de presentaci\u00f3 (aspecte i format) d\u2019una p\u00e0gina web o de qualsevol classe de document XML (webs, llibres electr\u00f2nics o <i>e-books<\/i>, SVG, etc.). El CSS est\u00e0 dissenyat, principalment, per a permetre la separaci\u00f3 del contingut del document de la presentaci\u00f3 del document.<\/p>\n<p>El CSS ens permet determinar aquest format amb un seguit d\u2019avantatges enfront d\u2019altres sistemes i llenguatges:<\/p>\n<ul>\n<li>Control centralitzat de la presentaci\u00f3 d&#8217;un lloc web complet. Aix\u00f2 permet modificar un sol full d\u2019estil i aplicar els canvis a diferents webs que hi estiguin vinculades.<\/li>\n<li>Reaprofitament dels fulls d\u2019estil: un full CSS es pot aplicar a diferents p\u00e0gines.<\/li>\n<li>Una p\u00e0gina pot disposar de diferents fulls d&#8217;estil segons el dispositiu que la mostri. Per exemple, per a ser impresa, per a ser mostrada en un dispositiu m\u00f2bil o per a ser \u201cllegida\u201d per un sintetitzador de veu. D\u2019aquesta manera es garanteix l\u2019adaptaci\u00f3 del document als diferents dispositius (<i>responsive design<\/i>).<\/li>\n<li>Els documents HTML resultants s\u00f3n molt m\u00e9s clars i lleugers, ja que n\u2019extraiem tota la informaci\u00f3 sobre l\u2019aparen\u00e7a visual de la p\u00e0gina que recolliran els CSS.<b><\/b><\/li>\n<\/ul>\n<p>El CSS ha esdevingut el llenguatge amb qu\u00e8 es defineix l\u2019aparen\u00e7a i el format final de la majoria de projectes multim\u00e8dia. Tant si els projectes s\u00f3n orientats a l\u2019entorn web i es basen en HTML\/XHTML (o en qualsevol dels llenguatges de programaci\u00f3 web), com si funcionen amb alguna de les altres variants d\u2019XML, el CSS \u00e9s el llenguatge correcte per a definir com volem mostrar la informaci\u00f3 a l\u2019usuari.<\/p>\n<p>Si tenim en compte que l\u2019XML \u00e9s l\u2019est\u00e0ndard creat pel World Wide Web Consortium<i> <\/i>(W3C) per a l\u2019intercanvi d\u2019informaci\u00f3 estructurada entre diferents plataformes, que pot ser usat tant en bases de dades com en editors de textos, fulls de c\u00e0lcul i la majoria de projectes digitals o multim\u00e8dia, r\u00e0pidament ens adonarem de la import\u00e0ncia de dominar el CSS per al disseny de qualsevol aplicaci\u00f3 o entorn multim\u00e8dia.<\/p>\n<p>A Internet hi podem trobar molts recursos per a aprendre a usar el CSS; alguns dels m\u00e9s interessants s\u00f3n aquests:<\/p>\n<h4>Tutorials<b> i cursos<\/b><\/h4>\n<ul>\n<li>Curs de CSS a 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>Curs a Code School: <a href=\"http:\/\/www.codeschool.com\/paths\/html-css\">http:\/\/www.codeschool.com\/paths\/html-css<\/a><\/li>\n<li>Curs de CSS a 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 a l\u2019aprenentatge de CSS: <a href=\"http:\/\/www.csstutorial.net\/\">http:\/\/www.csstutorial.net\/<\/a><\/li>\n<\/ul>\n<h4><b>Recursos i plantilles (<\/b><b><i>templates<\/i><\/b><b>)<\/b><\/h4>\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\u00f3: una imatge val m\u00e9s que mil paraules? Les relacions entre el llenguatge verbal i el llenguatge visual han caracteritzat l\u2019estudi te\u00f2ric de les imatges durant el segle XX. Les imatges s\u00f3n les unitats de representaci\u00f3 del llenguatge visual com les paraules ho s\u00f3n del llenguatge escrit. En la cultura digital, el consum visual del &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/fem\/lenguajes-visuales-y-creacion-multimedia\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abLlenguatges visuals i creaci\u00f3 multim\u00e8dia\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\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":30,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":504,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/posts\/140\/revisions\/504"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/fem\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}