UNIVERSIDAD JOSÉ MARÍA VARGAS FACULTAD DE ARQUITECTURA Y ARTES PLÁSTICAS ESCUELA DE DISEÑO
ELABORACIÓN DE SITIO WEB SOBRE CURSOS INTERACTIVOS DE PROGRAMAS DE DISEÑO DE SOFTWARE LIBRE: CURSO INICIAL “INSKCAPE”
www. vectorlibre .com
@_VectorLibre
UNIVERSIDAD JOSÉ MARÍA VARGAS FACULTAD DE ARQUITECTURA Y ARTES PLÁSTICAS ESCUELA DE DISEÑO
ELABORACIÓN DE SITIO WEB SOBRE CURSOS INTERACTIVOS DE PROGRAMAS DE DISEÑO DE SOFTWARE LIBRE: CURSO INICIAL “INKSCAPE”
Autor: Moisés Contreras Profesores: Nataly Tucci Obed Delfin
CARACAS 2013
Dedicatoria
Este proyecto esta dedicado a mi Señor y Salvador... Jesús....
Agradecimientos
Agradezco a... mi familia... Mercedes, Rafael, Harold, Angel y Vanessa por su apoyo y gran amor Nataly y Obed por su profesionalismo en todas las horas de clase Gigi, Johancer y Jussi por su motivación y estar al día con mi avance en la tesis Valentina, Ana, José, Samy, Katy, Sasha, Ori, Andres por acompañarme en esta ardua y larga carrera...
INTRODUCCIÓN -- 7
I. PROBLEMÁTICA DEL PROYECTO GRÁFICO -- 8 1.1 Planteamiento del problema -- 9 1.2 Objetivos -- 11 1.3 Justificación e importancia del proyecto gráfico -- 11
III.REFERENTE METODOLÓGICO -- 19
IV.METODOLOGÍA GRÁFICA -- 21
3.1 Consideraciones generals -- 20 3.2 Búsqueda de información -- 20 3.3 Análisis de la información -- 20
4.1 Diseño de la imagen corporativa -- 22 4.2 Origen y justificación del nombre -- 24 4.3 Diseño del sitio web -- 25 4.3.1 Diseño y diagramación de las páginas del sitio -- 25 4.3.2 Requerimientos de diseño del sitio web -- 25 4.3.3 Reglas del diseño web -- 29 4.3.4 El espacio de trabajo -- 29 4.3.5 Diseño web para diferentes navegadores -- 30
6 Índice
II. REFERENTE TEÓRICO -- 13
2.1 Diseño Web como rama del Diseño Gráfico -- 14 2.1.1 El Diseño Web -- 14 2.1.2 Siete reglas del diseño web -- 14 2.1.3 Las filosofías del diseño web -- 15 2.2 Codificación del diseño web -- 17 2.2.1 Conceptos básicos de las hojas de estilo -- 17
4.3.6 Elaboración del sitio web -- 30 4.4 Diseño del curso -- 31 4.5 Diseño del empaque y cd´s -- 32 4.6 Diseño de fondos de escritorio -- 34 4.7 Tipografías usadas en el proyecto -- 35 4.8 Campaña en Internet -- 35 4.8.1 Diseño en Redes Sociales -- 35 4.8.2 Blog -- 37 4.8.3 Posicionamiento Web -- 37 4.8.4 Autopromoción en foros y blogs -- 39
GLOSARIO DE TERMINOS -- 41 FUENTES DOCUMENTALES -- 43 Índice
7
8
Introducción El siglo XX se ha prestado con mucha facilidad para que una cantidad significativa de personajes impacten la manera de como realizamos tareas. Los avances tecnológicos han impactado la disciplina de múltiples profesiones. El computador personal se ha convertido en una herramienta indispensable para que el diseñador y el ilustrador pueda desarrollar sus trabajos. Esto es posible no solo gracias al computador (hardware) sino también a los programas (software) que en él se ejecutan. Al pasar los años compañías y organizaciones que desarrollan software de diseño, invierten dinero y horas de trabajo para que sus productos mejoren. A su vez los conocimientos y habilidades del diseñador e ilustrador necesitará estar al día, para poder utilizar estas herramientas de forma efectiva. Richard M. Stallman -fundador y responsable de la comunidad internacional dedicada en crear y compartir software libre- ha clasificado el software en dos áreas, una llamada “software privativo” y la otra “software libre”. Podemos encontrar una gran variedad de programas de diseño dentro de las dos clasificaciones. El diseñador e ilustrador es libre de seleccionar el software que desee -solo si tiene el dine ro o el crack en el caso del “software privativo”- pero su libertad se ve afectada a la hora de ejecutar un “software privativo”. Este software (si es adquirido legalmente) obliga según su licencia no compartirlo con un tercero, ni tampoco esta disponible en una versión donde el usuario es capaz de editarlo. En cambio el “software libre” (sea comprado o adquirido de forma gratuita) le da libertad al usuario para compartirlo con un tercero, editarlo y redistribuirlo. Se puede afirmar que lo antes planteado es una diferencia entre los dos software, y es evidente -solo tomando en cuenta esas características- que el “software libre” sería la opción mas utilizada, pero no es así. Hay otra diferencia importante en remarcar, la popularidad. El “software privativo” es el más utilizado y familiarizado en la comunidad de diseñadores e ilustradores caraqueños, porque esta comunidad prefiere invertir y en la mayoría de los casos crackear en programas realizados por compañías internacionales que en cierta medida han adquirido prestigio y poder económico. ¿Pero cuál es el problema hasta ahora? Primero retomamos lo afirmado en el segundo párrafo, la libertad de compartir, editar y redistribuir. Segundo el crackeo de los pr o g r a m a s . U n c r a c k es un pequeño software que viola el código de un programa con la finalidad -en este caso- de activar su uso, sin heredar algún límite en cuanto a tiempo. Estos crack son creados sin ningún estándar de calidad y en sus mayoría provocan fallas al programa. Las metas a seguir de este proyecto es dar información, motivar y enseñar acerca del “software libre” dentro de la comunidad de diseñadores gráficos e ilustradores, para que ellos puedan disminuir los problemas que se les puede presentar en la realización de sus trabajos.
Introducción
9
I. PROBLEMÁTICA DEL PROYECTO GRÁFICO
El software libre es un programa informático donde cualquier persona en cualquier parte del mundo puede usar, modificar, redistribuir y publicar mejoras, con la finalidad de beneficiar intelectualmente a una comunidad. El software libre fomenta un modelo de cooperación sin reglas, ni leyes o mando que la rigen. Gradin, Carlos (2004) lo afirma de la siguiente manera: “El software libre es una concepción colectiva de la propiedad. Todos los que escriben el código de un programa son dueños de él; y todas las personas pueden escribir y cambiar el código si quieren...”
1.1 Planteamiento del problema A principio de los años ‘60 el Instituto de Tecnología de Massachusetts (MIT) dio inicio a un proyecto el cual consistía en desarrollar una computadora capaz de entrar en un red e intercambiar información con otros computadores. Este proyecto atrajo la atención de un grupo de estudiantes especializados en matemáticas e inteligencia artificial. “Los estudiantes pasaban treinta horas seguidas en sesiones de programación en lugar de asistir a las clases regulares. Allí surgieron las ideas sobre la libertad de la información. Muchos estudiantes aprendieron a burlar cerraduras para poder aprovechar las máquinas de la Universidad” (Jonas Lowgren. 2004). Con el correr del tiempo los estudiantes se convirtieron en “viejos hackers”, nombrados así por Steve Mizraches (2004) para diferenciarlos con los “hackers falsos” divulgados por los medios de comunicación actuales. Estos hackers aparte de realizar programas experimentales como reproductores de música y juegos de ajedrez, también desarrollaron programas de criptografía con el fin de garantizar la seguridad y privacidad de envío de archivos por Internet. Los programas de criptografía se convirtieron en estándar de seguridad en todo el mundo, gracias a la distribución gratuita y la manipulación del código fuente. De esta forma se comenzó a dar origen el software libre.
Hay dos grandes pilares del software libre en día. Uno, es la fundación FSF (Fundación para el Software Libre) creado por Richard Stallman, que tiene como unos de sus objetivos programar software libre de alta calidad. Y dos, el sistema operativo GNU/Linux iniciado por Linus Trovalds, este proyecto independiente lo comenzó a trabajar Linus en el año 1991. El el sistema operativo GNU/Linux poco a poco comenzó a cobrar popularidad y atrajo una gran cantidad de desarrolladores que colaboraban con Linus por medio de Internet. La estrategia de trabajo era sencilla, publicar semanalmente en la web nuevas versiones del sistema y luego recoger información de programadores y usuarios, con el fin de mejorar el sistema (hoy en día las actualizaciones se realizan cada seis meses). Para el año 2000 han trabajado más de mil programadores y se calculaba más de veinte millones de usuarios. El sistema GNU/Linux se ha convertido en el principal proyecto informático desarrollado como software libre. Estos dos pilares ha permitido fomentar una comunidad de programadores capaces de crear programas para todo uso, tales como procesadores de textos, editores de imágenes y audio, visor de imágenes, navegadores web, entre otros. Den t ro de t o do est e co n glo merado de software, hay una cantidad dedicada a la elaboración de gráficos. A continuación se presentara una lista de los programas I.Ploblemática del proyecto gráfico
11
más populares con su breve descripción: Gimp: editor de imágenes fotográficas y mapas de bits, su equivalente en el “software privativo” es “Photohop” Scribus: es un programa dedicado a la maquetación y composición de páginas con fines editoriales, su equivalente en el “software privativo” es “InDesing” Blender: es un programa de modelado, animación, renderizado y postproducción de imágenes en 3D. El equivalente para este programa en el “software privativo” es difícil determinarlo ya que “Blender” posee herramientas de trabajo únicas. Otro software libre de buena calidad es “Inkscape”. En este proyecto trabajaremos con él porque además de ser sencillo de utilizar es un programa base en la elaboración de diseños e ilustraciones.
es una herramienta para la manipulación y el diseño de tipografías. Para los ilustradores es una herramienta de ilustración digital, el cual le permite manipular, formas, colores, texturas y algunos efectos.
“Inkscape” es un editor de gráficos vectoriales tan potente como “Illustrator” y “CorelDraw”, pero a diferencia de ellos es totalmente gratuito, de libre distribución y de código abierto. Otra diferencia importante es la ligereza que este programa presentan ante un computador en relación a la memoria virtual del mismo, es decir, “Inkscape” consume pocas cantidades de memoria RAM y poco espacio en el disco duro. Estas característica permite bajar costos, ya que no es necesario adquirir la licencia del programa y tampoco es necesario obtener equipos potentes.
En este punto, nos planteamos la siguiente interrogante: ¿Por qué “Inkscape” siendo un programa tan potente no es popular entre la comunidad de diseñadores gráficos e ilustradores? Este programa se caracteriza por ser software libre un término que no forma parte del léxico profesional del diseñador e ilustrador, pero son palabras comunes entre ingenieros informáticos y programadores. Paul Brown (2005) director de la revista Linux Magazine plantea la respuesta de la siguiente manera:
“Inkscape” nace de un software libre llamado “Sodipodi”, el cual contiene la misma característica de edición de gráficos vectoriales. En el mundo del software libre a esta acción se le llama bifurcación o ramificación, y tiene el fin de cambiar ligeramente el propósito del programa. En el caso de “Inkscape”, el propósito de creación esta dedicado exclusivamente a editar gráficos vectoriales, mientras que “Sodipodi” se aleja ligeramente de esas metas. Para el profesional del diseño gráfico, “Inkscape” es útil en la elaboración de gráficos como logos e imágenes. También 12 I.Ploblemática del proyecto gráfico
“...por desgracia, como con cualquier grupo especializado, los programadores no hablan el mismo lenguaje que el hombre de la calle. Si bien, casi todo el mundo tiene ordenador y lo utiliza, pocos entienden los términos interfaz, entorno de ventanas o, siquiera, escritorio. Normalmente, si mencionas uno de estos vocablos en una conversación con un “profano”, la respuesta que obtendrás es algo como “Y eso ¿qué es? Lo de Windows ¿no?”. Las empresas como Adobe Systems, Microsoft Corporation y Apple Inc, por su parte han desarrollado “software propietario” con la finalidad de cobrar la adquisición de sus programas. Esta fuente de ingreso se reinvierte en grandes campañas publicitarias. Por el contrario, el software libre -difundido por una
comunidad de profesionales y aficionadosno tiene grandes ingresos en comparación al software propietario. Ahora bien, ¿por cuál medio de difusión el software libre ha llegado a una determinada cantidad de usuarios? La respuesta la hemos expuesto en párrafos anteriores, esto es, a través de internet. Internet ha facilitado el crecimiento y la difusión de muchos software libre, ya que ha sido la herramienta de comunicación y transferencia de archivos de la comunidad de programadores y usuarios de dichos programas. Internet ha servido como impulsador del software libre porque es un claro ejemplo de libertad. En Internet no existen “censores oficiales, ni jefes, ni junta directiva ni accionista” (Carlos Gradin. 2004). Internet en sí es una red gigante de computadores personales, servidores y dispositivos móviles, donde cada aparato representa un nodo que conectan entre sí por conexión inalámbrica o fibra óptica, con la finalidad de intercambiar información. ¿Se puede difundir el programa “Inkscape” por medio de Internet, para que una comunidad de diseñadores e ilustradores puedan utilizar el programa sin invertir grandes cantidades de dinero y sin correr el riesgo de perder los archivos o que el sistema operativo falle? La respuesta es afirmativa. En un sitio web se puede difundir información acerca del programa “Inkscape”. Esto se desarrolla por medio de diferentes formatos o métodos, como revistas digitales, libros electrónicos, audios, vídeos, animaciones, artículos, opiniones de usuarios, entrevistas, juegos, entre otros. En el caso de este proyecto se ha elegido el curso interactivo, donde se explicará una herramienta determinada y luego se planteará llevando a cabo el ejercicio práctico, así el usuario tiene que resolver diversos problemas. El curso interactivo responderá a las acciones del usuario, sean correctas o incorrectas. Durante la ejecución del presente proyecto no existe un software libre de alto nivel, donde se pueda elaborar los cursos interactivos. Por lo cual se ha tomado la excepción
en utilizar el software “Adobe Flash”, a pesar de sus características ajenas al software libre. Por último, el nombre de este proyecto gráfico se título “Vector Libre”.
1.2 Objetivos Diseñar la imagen gráfica del sitio web www.vectorlibre.com, con la finalidad de difundir los cursos interactivos de software libre. Desarrollar y elaborar el sitio web www.vectorlibre.com para su correcto funcionamiento. Elaborar el curso interactivo “INKSCAPE” en Adobe Flash. Diseñar campaña de difusión y estrategia publicitaria enfocada en las redes sociales y otras páginas de interés.
1.3 Justificación e importancia del proyecto gráfico La mayoría de los diseñadores gráfic o s e ilustradores diseñan e ilustran sus trabajos y proyectos con herramientas de diseño computarizado como “Illustrator” o “CorelDraw”. Estos programas por ser “software propietario” tienen la característica de vender una licencia a sus usuarios, limitando la forma de usarlo, de editarlo y redistribuirlo. Algunos profesionales que no tienen el dinero para poder adquirirlos descargan por internet una versión de prueba de dichos programas que por lo general dura un mes. Al finalizar el periodo I.Ploblemática del proyecto gráfico
13
de prueba el programa deja de ejecutarse. Para poder seguir usando el programa hay dos alternativas, comprar una licencia o “crakearlo”. Este “crakeo” del software genera fallo al sistema ocasionando errores en los archivos y perdida de los mismos. La mayoría de este software “crakeado” es instalado en el sistema operativo Windows (en sus versiones superiores al XP) que por lo general no es original. Los sistemas operativos de esta clase suelen traer otros tipos de problemática como virus, cuelgues imprevistos, consumo excesivo de la memoria virtual del equipo, entre otros errores. Para el diseñador gráfico e Ilustrador perder los archivos de un determinado proyecto durante su elaboración, ocasiona perdidas económicas y disgustos de clientes. En oposición al “software propietario”, el software libre no ocasiona tales problemas como cuelgues, virus y perdidas de archivos. ¿La solución inmediata a esta problemática es comprar “software propietario”? No, porque al adquirir un software de tal característica apoyamos de manera indirecta los intereses empresariales de las compañías que desarrollan y venden esos software. Tales intereses son muy diferentes a los intereses de una sociedad, donde lo importante es “la producción de bienes públicos y de riqueza social para la vida en comunidad” (Vidal, Miguel 2000).
vancia, por que difundirá información de alta calidad y utilidad dentro de una comunidad poco conocedora del tema. “Vector Libre” es el portavoz de la solución a muchos problemas, desde la perspectiva económica, técnica, social e intelectual. Con la creación de buenos materiales de capacitación del programa “INKSCAPE” como cursos interactivos, permite ayudar a la comunidad a mejorar sus capacidades y enfrentar diferentes proyectos con el mínimo surgimiento de problemas posibles.
En este punto es importante recordar la afirmación de Richard M. Stallman (2004): “Considero que la regla de oro requiere que si a mi me gusta un programa, lo debo compartir con otra gente que le guste. Los vendedores de software quieren dividir a los usuarios y seducirlos, haciendo que cada usuario acuerde no compartir su software con otros.” Una solución a esta problemática es usar y distribuir software libre. De allí la importancia de la creación del sitio web www.vectorlibre.com. “ Ve c t or L i b r e ” se dedicará a distribuir los mejores programas de diseño de software libre, enseñara detalladamente cada herramienta y ayudará -mediante todos los medios de comunicación existente- a la comunidad de diseñadores gráficos e ilustradores. “Vector Libre” es un proyecto de alta rele14 I.Ploblemática del proyecto gráfico
II. REFERENTE TEÓRICO
2.1.2 Siete reglas del diseño web Clint Eccher en su libro Diseño Web Profesional expone siete reglas indispensables para diseñar una web. Según Eccher cumplir estas reglas “ayudará a que un diseñador principiante o con nivel medio se convierta en un profesional.” A continuación se expondrá de forma detallada cada una de ellas:
2.1 Diseño Web como rama del Diseño Gráfico 2.1.1 El Diseño Web Para Clint Eccher (2011) la definición de “Diseño Web” se mantiene en ambigüedad, tanto que los profesionales del respectivo campo emplean diferentes conceptos. Clint Eccher lo define de la siguiente manera: Mientras uno puede definirlo como la programación de la funcionalidad de fondo de un sitio, otro podría decir que consiste en el desarrollo de la presentación de la aplicación que proporciona al sitio la esencia de la empresa o individuo al que representa. Los cierto es que ambas definiciones son correctas. Los conocimientos intelectuales que debe tener un diseñador gráfico a la hora de diseñar una web deben estar fundamentados en aspectos técnicos y artísticos, pero no necesariamente debe ser especialista en algunos de los dos campos. Los estándares actuales de diseño web implican “la creación de sitios dinámicos que sean versátiles, escalable…. y bien posicionados en los motores de búsqueda. No obstante, si dichos sitios están formados con páginas sin formato con texto negro sobre pantalla blanca, no comunicarán de una forma efectiva a la mayoría de la audiencia.” (Clint Eccher 2011) Un sitio puede contener los aspectos más interesante y creativos del diseño gráfico, pero si “está formado por páginas estáticas que son difíciles de actualizar o que no mejora ni simplifican la experiencia del usuario, entonces será más inflexible y, dependiendo de los requerimientos del sitio, nada práctico.” (Clint Eccher 2011)
16
II.Referente teórico
1. Que el diseñador pueda no quiere decir que deba: Con el correr del tiempo van mejorando y apareciendo nuevas tendencias y herramientas para construir una web. Un diseñador puede dominar todas las herramientas tecnológicas o piezas de vanguardia para ser colocado en un sitio, pero no es un argumento lo suficientemente valido para utilizarlas, es decir, utilizar las últimas herramientas tecnológicas porque están de moda no crea una web de calidad. Una web arrebozada de tales elementos “puede impedir el rendimiento del sitio o empujar a los usuarios a abandonarlo.” (Clint Eccher 2011) 2. Casi siempre hay una excepción: Aunque una herramienta, una determinada diagramación, un estilo, o una tecnología no fue útil en una web anterior, no quiere decir que deba apartarse para futuras creaciones de sitios. 3. Los usuarios son los jueces definitivos: La voz del usuario es la última opinión que tiene una web referente a su calidad. El diseñador puede según su creatividad y conocimiento aportar soluciones, el cliente puede expresar sus necesidades y dar ideas, pero el usuario es el que tiene la opinión definitiva referente a la web, “ya que son los primeros a los que se debe satisfacer.” (Clint Eccher 2011) 4. La experiencia cruzada es algo a lo que el diseñador siempre deba aspirar: “El diseño web profesional requiere el conocimiento de las necesidades del usuario, con independencia de las preferencias personales del diseñador con respecto a los aspectos técnicos del sitio. Sea cual sea el tema, el diseñador cuenta con el con-
ocimiento de los diferentes aspectos técnicos del diseño.” (Clint Eccher 2011) 5. La humildad es la mejor receta: Expuesto detalladamente en el referente metodológico. 6. Es imposible complacer a todo el mundo: Para el año 2011 existieron más de dos mil millones de usuarios en la red Internet. Por lógica es imposible lograr que nuestro sitio llegue a gustarle a toda esa cantidad de personas. Lo importante no es satisfacer todos los gustos, sino “crear un sitio efectivo a la hora de comunicar. El diseñador a veces debe resistir para mantener ciertos aspectos estéticos y funcionales del diseño.” (Clint Eccher 2011) 7. Intente mantenerse actualizado en especificaciones y estándares: Expuesto detalladamente en el referente metodológico.
2.1.3 Las filosofías del diseño web Clint Eccher afirma que un diseñador web se plantea tres filosofías antes de diseñar una web: usabilidad, multimedia y ensamblaje. Éste seleccionará la que más le convenga, con el objetivo de “comunicar al usuario de la manera más eficaz” (Clint Eccher 2011) A pesar de que existen estas filosofías, Clint Eccher postula que “debido a la amplia variedad de hardware, software y usuarios en Internet, ninguna filosofía es la respuesta perfecta para nadie. Sin embargo, al comprender todas ellas y sus ventajas y desventajas, el diseñador puede tener una idea clara de cuál se adapta mejor a las necesidades de cada sitio.” A continuación se planteará cada filosofía con el objetivo de estudiarla minuciosamente y así poder determinar si en realidad éstas pueden ayudar a un diseñador a desarrollar la estrategia de diseño más efectiva para su web. 1. Filosofía del uso: En esta filosofía lo más importante a la hora de crear una web es su usabilidad. La usabilidad es un término que aunque no aparezca dentro del diccionario de la Real Academia Española,
es muy utilizado dentro del mundo de la tecnología y la informática. En sí la usabilidad son todas las facilidades que tienen el usuario al usar cualquier programa informático o aparato electrónico. En el caso del diseño web la usabilidad se determina según “el atributo de calidad que evalúa lo fácil de usar interfaces web. La palabra usabilidad también se refiere a métodos para mejorar la facilidad de uso durante el proceso de diseño.” (Jakob Nielsen 2012). Clint Eccher lo define como “la facilidad con la que el usuario puede encontrar y procesar información y llevar a cabo ciertas tareas.” Esta filosofía expone el concepto de usabilidad de forma fiel. En la filosofía del uso el objetivo es crear web con altos estándares de usabilidad dejando a un lado todo elemento que no sea primordial, como imágenes, animaciones, sonidos. También tiene la finalidad de diseñar sitios rápidos en cargar, escalables y que todo usuario a pesar del tipo de hardware y software pueda acceder sin ningún problema. Esta filosofía se concentra solamente en el uso, sin necesidad de comunicación visual. Clint Eccher expone seis características que debe tomar en cuenta un diseñador web para la creación de un sitio con buena usabilidad: 1. El tiempo de carga debe ser el mínimo posible. 2. La navegación debe ser intuitiva. 3. Las tecnologías y metáforas Web utilizadas, así como el sistema de carro d e compra, deben ser coherentes, salvo II.Referente teórico
17
que exista un motivo válido para ejercer una objeción. 4. La escritura debe ser clara y concisa para agilizar el uso. 5. Debe tenerse en cuenta la accesibilidad para usuarios con discapacidades. 6. En encontrar una información en un sitio debe ser lo más fácil posible. También Jakob Nielsen expone cinco puntos que determina la buena usabilidad de un sitio, él lo denomina “componentes de calidad”: 1. La facilidad que tiene el usuario para desarrollar tareas básicas en la primera vez que utiliza la web. 2. La rapidez que los usuarios realizan una tarea una vez aprendido a usar el sito. 3. La capacidad de recuerdo que tiene el usuario al volver a un sitio después de un largo tiempo sin usarla. 4. La menor cantidad de errores que pueda cometer el usuario y su capacidad de recuperación. 5. Lo tan agradable que es utilizar un diseño para el usuario. Aunque esta filosofía expone que las imágenes sólo cumplen una finalidad de atracción de masas, Clint Eccher defiende tres razones por las cuales la imagen ayuda a aumentar la usabilidad en la web: 1. La impresión acerca de un sitio, y por lo tanto la identidad de una empresa o individuo, se juzga en primer lugar por la vista: Todos los usuarios tienen una opinión inmediata acerca de la estética de un sitio. Si una web contiene un diseño incoherente los usuarios no van a confiar en la “seriedad del individuo o negocio y es muy probable que la abandone”. (Clint Eccher 2011) 2. El cerebro procesa más rápidamente las imágenes que el texto: Clint Eccher aporta partes de la funcionalidad de un ideograma en el diseño de un sitio web. Un sitio que contiene solo textos obliga al usuario emplear tiempo en leer su contenido para saber el contexto de la temática. En cambio, un sitio donde hay equilibrio entre imágenes y textos “reducen la frustración de un usuario que está a leer lo que con una sola imagen se puede comunicar.” (Clint Eccher 2011) 3. Los gráficos, junto con el color, ayudan a dirigir la atención del usuario: “Al igual que se utiliza una imagen para ayudar a que un usuario comprenda rápidamente un concepto, los gráficos y colores pueden utilizarse para ayudar a dirigir la atención del usuario hacia el lugar que pretenda el diseñador. Es útil cuando el diseñador ha priorizado contenido que el usuario debe ver primero.” (Clint Eccher 2011)
18 II.Referente teórico
2. Filosofía multimedia: Esta filosofía e xpone que en el diseño web tiene que predominar, las animaciones, lo videos y el sonido, con la finalidad de aumentar la interactividad. Se suele utilizar imágenes vectoriales en vez de imágenes mapas de bits, porque estas últimas suelen d i s tor si ona r se a l c a m b i a r d e t a m a ñ o , en cambio una imagen vectorial mantendrá su calidad aunque se altere su tamaño. 3. Filosofía del ensamblaje: Es la unión de las mejores características de la filosofía del uso y multimedia. “El ensamblaje no solo complementa la funcionalidad de un sitio, sino que también permite a los diseñadores utilizar técnicas que la industria del diseño gráfico ha tardado perfeccionar sin sacrificar el tiempo de carga... los sitios ensamblados se basan en el conocimiento más que en el software.” (Clint Eccher 2011) Las anteriores palabras las expresa Clint Eccher, dejando claro que un sitio ensamblado es mucho más que pura estética. También realizar un sitio dentro de un software de diseño web no permite un resultado eficiente, donde el tamaño tiene que ser lo menor posible disminuyendo la cantidad de código innecesario.
y la ubicación” (Matthew MacDonald 2012) En el presente proyecto es muy importante conocer los parámetros y caracterizarás de la codificación de archivos CSS, ya que estos van a permitir que el diseño gráfico de la web pueda ser llevado al formato digital, y así los navegadores web puedan interpretarlos.
Clint Eccher expone algunas ventajas de esta filosofía:
El proceso por el cual se ejecuta los archivos CSS es muy sencillo, primero el navegador pide al servidor los archivos HTML. Segundo el servidor encuentra una instrucción en el archivo HTML indicando la utilización de una hoja de estilo. Tercero el navegador analiza el archivo HTML y emplea la hoja de estilo para ajustar su apariencia.
1. Los sitios ensamblados pueden resultar impactantes, rápidos y con gran usabilidad. 2. El usuario puede comprender de forma más rápida el mensaje que se quiere transmitir, ya que se utiliza más imágenes y menos texto. 3. Un sitio ensamblado cumple con todas las características para ser rastreado por los buscadores web. 4. Los sitios ensamblados son fáciles de actualizar y modificar.
2.2 Codificación del diseño web 2.2.1 Conceptos básicos de las hojas de estilo Las hojas de estilo también conocidas como CSS son formatos de archivo que “cambian la apariencia de los elementos de una página web, modifica cada detalle como el color, la tipografía, el tamaño, los bordes
Las hojas de estilo están conformadas por muchas cantidades de reglas. Cada reglas es un instrucción de formato que se aplica en un página web. He aquí un regla sencilla que le dice al navegador que muestre todos los textos dentro de la etiqueta <h1> en color azul: h1 { color: blue } Como podemos ver las reglas CSS las compone tres elementos, selectores, propiedades y valores. Éste es el formato de una regla: selector { propiedad: valor } II.Referente teórico
19
Se puede definir cada parte de la regla: Selector: es el identificador del tipo de contenido al que se desea dar formato. Propiedad: identificador el tipo de formato que quiere aplicarse. Valor: establece un rango para la propiedad definida anteriormente. A un selector se le puede aplicar diferentes propiedades, donde cada una de ella se le asigne un valor. Por ejemplo: h1 { text-align: center; color: black; } Las llaves delimitaran las propiedades junto a sus valores. El punto y como separarĂĄ las propiedades entre ella. TambiĂŠn podemos aplicar la misma propiedad a diferentes selectores. Por ejemplo: h1 h2 h3 { color: blue } En la regla anterior aplicamos la misma propiedad para todos los textos que estĂŠn dentro de la etiqueta <h1>, <h2> y <h3>.
20 II.Referente teĂłrico
III. REFERENTE METODOLÓGICO
3.1 Consideraciones generales En el referente metodológico del presente proyecto gráfico, se explicará cada proceso por el medio del cual se llevó a cabo la presente investigación. Se planteará de que manera o cuales métodos se utilizaron en la estrategia de investigación. Se explicará las técnicas operacionales de como se recolectó la información y cuál fue su método de análisis. También se expondrán los pasos a seguir para que el proyecto gráfico sea real y alcance sus objetivos. Se estudiara desde como un sitio web esté en funcionamiento hasta su publicación para alcanzar a un público determinado.
3.2 Búsqueda de información Para poder llevar a cabo este proyecto es importante determinar cuál es el área de objeto a tratar. En este caso, y por medio de los objetivos antes planteados, se realizará el diseño de un sitio web. Esto obliga a investigar un campo profesional denominado Diseño Web. A partir de aquí se ha realizado una investigación por medio de Internet, la cual se llevó a cabo por medio de la siguiente pregunta; ¿Profesionales y/o expertos del Diseño Web?. La anterior pregunta arrojó diferentes sitios web donde hace referencia, pero a partir de aquí se seleccionó y clasifico la información considerando la ubicación geográfica y lenguaje donde se llevará a cabo el proyecto, con el fin de adquirir de manera precisa las fuentes de información. Tres son los expertos en el área del Diseño Web que se pudo obtener información; Clint Eccher, Matthew MacDonald y Jakob Nielsen. Los dos primeros con sus respectivos libros Diseño Web Profesional y Creación y Diseño Web y el último con el sitio www. nngroup.com. Es importante clasificar y ordenar toda esta información obtenida para luego obtener los puntos más relevantes del Diseño Web que se adaptan o beneficien al proyecto. 22
III.Referente metodológico
3.3 Análisis de la información Después de obtener todas estas fuentes de información se ha procedido al análisis de la información. Se encontraron varios aspectos primordiales para poder crear un sitio web de altos estándares profesionales, como; usabilidad, rendimiento y velocidad de carga, diseño gráfico (tipografía, color, imagen corporativa, manipulación de imágenes), contenido de calidad y actualización, posicionamiento en los buscadores, vinculación con redes sociales, entre otros.
IV. METODOLOGÍA GRÁFICA
Logo del proyecto
Lente
Lazo
4.1 Diseño de la imagen corporativa El logo a diseñar para “Vector Libre” está conformado por el isologo y el logotipo. Para el diseño del isologo se han tomado en cuenta la problemática expuesta por el presente proyecto, con la finalidad cumplir los objetivos planteados. El isologo está conformado por las siguientes síntesis graficas: Lente: Con estilo de referencia al pixel art, domina en tamaño y posición gran parte del isologo. En su parte derecha superior está incompleta, realizando a la vista un cerramiento. Este lente hace referencia a los primeros programadores que crearon software con la finalidad de compartirlo de forma libre en una determinada comunidad. Ellos son llamados “viejos hackers”, y los lentes forma parte de su característica física. El formato 8-bits, por el medio del cual muchos de ellos realizaban sus trabajos se ve reflejado en la tendencia artística utilizada, el pixel art. Plumilla y lazo: Es una síntesis gráfica de unas de las herramientas populares dentro de los software de diseño, que permite realizar dibujos vectoriales. Está ubicada en la parte superior derecha del logo y toca con su punta parte del lente antes explicado. Esta plumilla por su inclinación y ubicación en el logo, denota su acción creadora hacia la imagen del lente.
24
IV.Metodología gráfica
Lazo: Ubicado en la parte superior izquierda del isologo. Este lazo forma parte de la herramienta de edición vectorial utilizada por los software de diseño. El logotipo está conformado por dos palabras, primero la palabra “vector”, luego “libre”. Existe una pequeña separación entre ellas. La fuente utilizada es Nexa, y está en su versión bold en la palabra “vector”, y en la versión light en la palabra “libre”. Esto con la finalidad de lograr un contraste tipográfico. Debajo de las dos palabras principales del logotipo, hay una frase de forma centrada y relativamente de menor tamaño. La frase es “cursos online de software libre”. Se han utilizados tres versiones de color para el logo. Cada una de ellas con la finalidad de presentar los tres principales cursos. Uno desarrollado en su mayoría para el siguiente proyecto, y los otros dos para ser desarrollado como una etapa posterior al proyecto, que a la vez no será presentado en el mismo. Una de las tres versiones del color se ha utilizado para ser presentado en el diseño del sitio web.
Plumilla y Lazo
Pantone 877C
Pantone 7712C
Pantone 7673C
Pantone Black 6C
Pantone 7667C Otras versiones de color
Pantone 7419C
Pantone 5625C
8x
=x 8x Logo sobre retícula IV.Metodología gráfica
25
4.2 Origen y justificación del nombre Su origen fue a causa de una realización de propuesta de nombre, donde “Vector Libre” fue el seleccionado, por que reflejaba con sencillez el aspecto general del proyecto. La palabra “Vector” transmite y da a conocer unos de los términos técnicos utilizados por el diseñador gráfico.
El fundador de la Free Software Foundation Richard Stallman en su libro Software libre para una sociedad libre afirma: “Un significado se refiere al precio y el otro se refiere a la libertad. Cuando hablo de software libre, me refiero a la libertad, no al precio”
A la vez este formato de dibujo es por el medio del cual se dedica el programa principal tratado en el proyecto. La palabra “Libre” viene a causa de la naturaleza de los software que se va a mencionar y facilitar en los cursos. Se quiere acotar que la palabra “Libre” no proviene de la traducción directa de la palabra ingles “Free” (a su vez también significa gratis), sino que proviene de la filosofía por el medio del cual estos programas son creados. En el preámbulo de la Licencia Pública General GNU de estos programas lo explica de manera más clara: “Cuando hablamos de software libre, estamos refiriéndonos a libertad, no a precio. Nuestras Licencias Públicas Generales están diseñadas para asegurarnos de que usted pueda tener la libertad de distribuir copias de software libre (y cobrar por ellos si lo desea), que reciba el código fuente o que pueda conseguirlo si quieren, que se puede cambiar el software o usar fragmentos de él en nuevos programas libres, y de que sepa que puede hacer estas cosas.”
26
IV.Metodología gráfica
4.3 Diseño del sitio web El sitio web a diseñar debe transmitir la idea y filosofía del software libre, por medio de sus colores, diagramación y forma. Es importante la usabilidad en la web, pero se ha decidido estilizar cada elemento que lo conforman, como botoneras, banners, párrafos, títulos, vínculos, fondos, entre otros. A continuación aparte de exponer la gráfica también se planteara métodos de diseño aplicados al proyecto.
4.3.1 Diseño y diagramación de las páginas del sitio En el diseño general de las mayorías de las páginas del sitio, estarán divididos de la siguiente manera: Cabecera: En la cabecera esta ubicado el logo de forma centrar y alrededor diferentes palabras hipervinculadas a otros páginas del sitio. Diapositivas: Son laminas con gráficos y textos que abarcan todo el ancho del sitio. Estas laminas están hipervinculadas a otros páginas del sitio. Cuerpo: Esta ubicado entre el pie y las diapositivas, su tamaño varia según el contenido de la página. El cuerpo contiene información de importancia conformada por imágenes y textos. Se mantiene el ancho de 960px.
4.3.2 Requerimientos de diseño del sitio web Antes que un diseñador se tome el reto de crear un sitio web tiene que tomar en cuenta estas consideraciones que Clint Echer expone a continuación: 1.Aspecto: Diagramación del contenido, colores, tipografía, imágenes y la manera que la compañía, organización o individuo quieren comunicar el mensaje. 2.Velocidad de carga: Es de suma importancia elaborar sitios que sean rápido en cargas, así varié la velocidad de conexión, el modelo del servidor y del computador o dispositivo a ver la página. 3.Resolución: “Un sitio con una resolución impropia puede entorpecer su usabilidad o credibilidad” ” (Clint Eccher 2011) 4.Escalabilidad: Dado que el diseño web está en constante evolución, es importante que el diseñador realice una web fácil de modificar. 5.Contenido: Una frase por Internet de aparente escritor anónimo ha sido tomada en cuenta a la hora de crear un sitio la cual es: “Lo importante es el contenido” o “El rey es el contenido”. Un contenido debe ser cuidadosamente pensado, porque en éste es que los usuarios, por lo general, evaluarán el sitio web.
Pie: Ubicado en la parte inferior del sitio. Contiene tres iconos de las redes sociales, Facebook, Twitter y Pinterest. Debajo de estos iconos hay información de contacto como teléfono e emails. A su vez y por debajo del contacto hay una simple botonera. Para la diagramación del sitio web, se ha basado en un estilo de retícula nombrada por Timothy Samara (2006) como retícula de jerarquía, la cual consiste en adaptar las “necesidades de la información basadas más bien en la disposición intuitiva de alineaciones vinculadas a las proporciones de los elementos, y no en intervalos iguales y repetitivos. La anchura de las columnas, al igual que los intervalos entre estas, tienden a presentar variaciones.” Se ha creador una retícula base para el diseño del sitio, pero ha sido alterada ligeramente según la información expuesta en cada página. IV.Metodología gráfica
27
Cabecera 960px x 216px Diapositivas 960px x 370px
Cuerpo 960px x 1500px Cuerpo 960px x 1900px
Pie 960px x 200px Diseño de la página de inicio
Diseño de la página servicio
Retícula utilizada
28
IV.Metodología gráfica
Cuerpo 960px x 1150px
Cuerpo 960px x 1350px
Diseño de la página descarga
Diseño de la página vectorlibre
Retícula utilizada IV.Metodología gráfica
29
Cuerpo 960px x 550px
Cuerpo 960px x 1720px Diseño de la página contacto
Diseño de la página cursos
Retícula utilizada
30
IV.Metodología gráfica
Después de analizar estas web el diseñador se dará cuenta q u e e x i s t e n m u c h a s similitudes entre ellas, como diagramación, tipografía, colores, tendencias tecnológicas, etc.
4.3.3 Reglas del diseño web Como anteriormente se expuso en el referente teórico, el diseño web según Clint Echer está basado en siete reglas básicas para su total rendimiento y funcionamiento. A continuación se expondrán las reglas 5 y 7 que incumben a la metodológia gráfica. 5. La humildad es la mejor receta: “Siempre va haber diseñadores que creen sitios más atractivos con la tecnología más avanzada, o que utilicen la tecnología de una forma más creativa. El resto debe aprender de los otros para fortalecer sus habilidades como diseñador web” (Clint Eccher 2011) Es habitual que un diseñador web antes de empezar la elaboración de un sitio, realice una investigación de las web existente que tengan la misma temática a realizar. Por ejemplo, a un diseñador se le ha encargado realizar un sitio para un periódico cualquiera. En esta web se van a publicar las últimas noticias más importantes. El diseñador deberá realizar una investigación antes de comenzar a realizar flujos de ideas y bocetos. Realizará una investigación de las web de noticias más populares. Visitará las páginas más visitadas de la localidad donde se publica el periódico. Sí sería en Venezuela, estudiara los portales de www.noticias24.com o www. eluniversal.com. Pero también estudiará las páginas más populares a nivel mundial como, www.bbc.co.uk, www.nytimes.com, www.reuters.com, entre otros.
7. Intente mantenerse actualizado en especificaciones y estándares: Estar al día en los avances tecnológicos, las tendencias y estándares web es muy importante. Siempre con el correr del tiempo el mundo de la web va a ir cambiando, esto es algo imposible de evitar. Estar actualizado es fundamental, ya que nos permite crear web actualizadas. Una web fuera de los estándares de tendencia y tecnología actuales no entrará con facilidad dentro de las web posicionadas en su campo temático.
4.3.4 El espacio de trabajo En el mercado de computadores existen muchos modelos de monitores creando una amplia gama de opciones para el consumidor. Este hecho obliga al diseñador web crear un sitio escalable y apto para cualquier resolución, ya que nunca va a saber en cual monitor un usuario va a acceder a una web. Además como demuestra Matthew MacDonald (2012), “en el mundo de la web… los usuarios pueden configurar sus monitores en todo tipo de dimensiones distintas. Estos detalles afectan a la cantidad de espacio de pantalla con el que las páginas tienen que trabajar. Cuanto mayor es la resolución y más grande la ventana de navegación, más contenido cabe en el visor.” Clint Echher expone un caso particular en que “si la resolución de un monitor se establece en 800x640 píxeles, un sitio que esté diseñado para la resolución de 1024x768 píxeles aparecerá demasiado extendido. Si la resolución del monitor es 1024x768 píxeles, el mismo sitio aparecerá demasiado estrecho y corto o se extenderá en horizontal”. Como podemos ver es importante tomar en cuenta estos detalles, ya que puede afectar en gran medida el diseño de una web. ¿Có mo el diseñ ado r web det ermin a el tamaño más apropiado para su web sin que el diseño del mismo pierda valor?
IV.Metodología gráfica
31
tras que el sitio estuviera destinado a una audiencia más general no sería así.” (Clint Eccher 2011)
4.3.5 Diseño web para diferentes navegadores Un navegador web es un programa que invoca una página web para ser visualizada por el usuario. Un sitio web ya diseñado -sin tomar en cuenta la variedad de navegadores- podría presentar algunos cambios de diseño si se invoca en diferentes navegadores, es decir, puede ocurrir que una página invocada por Internet Explorer no se vea igual en Firefox.
Matthew MacDonald estableces dos estrategias para resolver este problema: 1. Buscar la flexibilidad con tamaños proporcionales: Con ellos el diseño se expande o contrae para adaptarse al espacio disponible en la ventana del navegador. 2. Seleccionar un tamaño fijo razonable: Utilizar páginas de ancho fijo que se vean bien en cualquier tamaño de monitor. La segunda opción es la alternativa más utilizada, porque al determinar un ancho de página f i j o s e e v i t a p r o b l e m a s de redimensión de tamaño, que sera alterada cuando el usuario acceda a un sitio con cualquier resolución de pantalla. El factor que afecta la dimensión de un sitio es “el tamaño de la ventana de navegación del visitante. Las últimas estadísticas revelan que un 20 por ciento de los usuarios usan pantallas de 1.024 píxeles de ancho... un diseño de ancho fijo tendrá un magnífico aspecto con un diámetro de 1.000 píxeles.” (Matthew MacDonald 2012) Gracias a ello un usuario que acceda a la web por medio de una ventana de 1.024 píxeles puede observar todo el contenido de la página. También es importante tomar en cuenta el factor del target antes de elegir una resolución a la cual se va a trabajar. Si esta audiencia forma parte del sector de la alta tecnología, “es más probable que el sitio se diseñe para la resolución más alta aceptable, mien32
IV.Metodología gráfica
Una solución para evitar este problema es bifurcar las páginas para los distintos navegadores. El diseñador web creara una página especial para cada navegar que presente problema.
4.3.6 Elaboración del sitio web A continuación se enumeraran los pasos a seguir en la creación del sitio web. 1. Búsqueda de tendencias: Se investigará en la web los sitios que tenga una temática parecida al proyecto, esto con la finalidad de determinar los estándares de diseño y usabilidad. 2. Diseño gráfico aplicado el sitio web: Se diseñara cada una de las páginas del sitio web. Estas páginas estarán en formato imagen, sin implementación de códigos. 3. Segmentación del diseño: Se dividirá cada parte del diseño, en logo, botonera, fondo, banners, iconos, encabezado, cuerpo y pie. 4.Aplicación del código según la segmentación previa: El código HTML se aplicará conforme a la diagramación de cada páginas. Se implementará código CSS con el fin de llevar igualar las páginas con el diseño gráfico realizado. 5. Implementación de hipervínculos: Se colocará el enlace de cada botón y vínculo con la finalidad de conectar todas las páginas y forma el sitio.
Primer fotograma para curso del programa Inkscape
Primer fotograma para curso del programa Gimp
6.Traslado del sitio web: Todos los archivos, que incluyen imágenes, .html, .css, entre otros. Serán copiados al servidor y así poder observar todo el trabajo realizado por medio de Internet.
4.4 Diseño del curso Cada curso es presentado por una animación del logo, el cual va a variar de color según el tipo del programa presentado en el curso. De fondo tiene una textura que de igual manera va a variar de color según la justificación presentada anteriormente al cambio cromático del logo.
Primer fotograma para curso del programa Blender
Consecutivo a la portada animada se presentara el nombre del curso y su contenido a tratar. Se mantiene la misma gama cromática del logo pero la tipografía utilizada es “LT Okasana”. Luego del cuadro de bienvenida se empezara a dar el contenido del curso en si. De fondo vemos la interfaz gráfica del programa abordar, el texto explicativo utilizada por medio de la fuente “Helvetica”, unas líneas discontinuas alrededor del texto, y una línea continua saliendo de esta anterior con la finalidad de señalar respectivas áreas de la interfaz gráfica. Debajo de la interfaz gráfica hay un pequeño navegador que ubicara al usuario en determinadas secciones del curso. En su parte derechas se colocó dos flechas para dirigir al usuario a las direcciones izquierda o derecha del curso. Mantendrá la misma gama cromática del logo.
Diseño interno del curso Inkscape
IV.Metodología gráfica
33
4.5 Diseño del empaque y cd´s Se ha creado un empaque que van contener tres cd´s con los cursos de cada programa (para el presente proyecto solo se elaboro algunas lecciones del curso “Inkscape”), sus respectivos archivos ejecutables, para los sistemas operativos Linux, Mac OS y Winsdows, además van a contener algunos materiales de apoyo como videos, libros electrónicos, archivos pdf e imágenes. El empaque esta conformado por un embalaje exterior de forma paralelepípeda, que en su parte frontal tiene el logo de “Vector Libre” y algunos textos e iconos dando como referencia el contenido interno del empaque. Es la parte trasera del mismo tiene impreso información detalla de cada programa y de los curso, además de la información de derecho de autor, créditos y contacto. Dentro de este empaque en su interior contiene un envoltorio de papel desplegable. En unas de sus caras internar y por medio de una ranura estarán ubicados los cd´s. En la parte frontal tendrá el logo de “Vector Libre” y en la parte trasera la información de contacto. El diseño de los cd´s contiene sus propias composiciones geométricas y color con la finalidad de diferenciar el contenido de cada cd. Los cd´s en su caratula aportaran información corporativa y de contenido.
34
IV.Metodología gráfica
Empaque
IV.Metodología gráfica
35
Fondo para computador
4.6 Diseño de fondos de escritorio Se diseñaron dos fondos de escritorio que van a estar disponibles al público en el link www.vectorlibre.com/descarga.htlm. Su diseño esta basado en la compasión geométrica de los cd´s, pero adaptado a un formato apaisado. En la parte derecha de los fondos de pantallas se coloco la siguiente frase: “La creatividad puede considerarse una contribución social, pero sólo si la sociedad es libre de aprovechar sus resultados.” Richard M. Stallman
Fondo para teléfonos
36
IV.Metodología gráfica
También se crearon fondos para teléfonos inteligentes basado en la misma estética pero solo van a tener en su parte inferior la dirección web www.vectorlibre.com
4.7 Tipografías usadas en el proyecto Nombre: Nexa Uso: Logo a, b, c, ch, d, e, f, g, h, i, j, k, l, ll, m, n, ñ, o, p, q, r, s, t, u, v, w, x, y, z. 1, 2, 3, 4, 5, 6, 7, 8,9. Nombre: Caviar Dreams Uso: Diseño web a, b, c, ch, d, e, f, g, h, i, j, k, l, ll, m, n, ñ, o, p, q, r, s, t, u, v, w, x, y, z. 1, 2, 3, 4, 5, 6, 7, 8,9. Nombre: Helvetica Uso: Curso a, b, c, ch, d, e, f, g, h, i, j, k, l, ll, m, n, ñ, o, p, q, r, s, t, u, v, w, x, y, z. 1, 2, 3, 4, 5, 6, 7, 8,9. Nombre: Lt Okasana Uso: Diseño CD´S a, b, c, ch, d, e, f, g, h, i, j, k, l, ll, m, n, ñ, o, p, q, r, s, t, u, v, w, x, y, z. 1, 2, 3, 4, 5, 6, 7, 8,9. Nombre: TitiliumMaps Uso: Diseño empaque a, b, c, ch, d, e, f, g, h, i, j, k, l, ll, m, n, ñ, o, p, q, r, s, t, u, v, w, x, y, z. 1, 2, 3, 4, 5, 6, 7, 8,9. Nombre: Futura Md BT Uso: Diseño empaque a, b, c, ch, d, e, f, g, h, i, j, k, l, ll, m, n, ñ, o, p, q, r, s, t, u, v, w, x, y, z. 1, 2, 3, 4, 5, 6, 7, 8,9.
4.8 Campaña en Internet 4.8.1 Diseño en Redes Sociales Con el pasar del tiempo las redes sociales han tomado un papel muy importante en la implementación de campañas publicitarias por Internet, tanto así que la participación en las redes es un requisito fundamental en la comunicación de una empresa. Por ello se ha creado varios perfiles públicos dentro de algunas de las redes sociales más populares. Google Inc. cada año publica estadísticas donde se ven reflejadas las redes sociales con mayor tráfico de visita diario. El estudio es llamado Google Trends for Website (2012) y colocan de forma ordenada la cantidad de visita de cada red social. Se ha analizado y estudiado la información con el fin de sacar las redes sociales más visitadas en América y Europa. Los resultados son: Facebook con 600 millones de visitas, Instagram con 40 millones de visitas y Twitter c o n 3 5 m i l l o n e s d e v i s i t a s . Se tomará en cuenta en esta primera etapa de campaña solo las redes Facebook y Twitter. Para las redes sociales se diseño la imagen de perfil. En el caso de Facebook se elaboro la imagen de portada y en el Twitter el fondo. Los diseño contienen una textura negra con composiciones geométricas brillantes de color rojo. La diferencia entre las dos redes es que cada una esta representada por el icono popular que lo represente. El caso de Facebo o k l a m a n o i n d i c a n d o la expresión “me gusta”, y en el Twitter parte del pájaro de su identidad corporativa.
IV.Metodología gráfica
37
Perfil Facebook
Perfil Twitter
38
IV.Metodología gráfica
4.8.2 Blog Un blog es un sitio web que posee las siguientes características: Los blogs están organizados cronológicamente: Los blogs tienen un enfoque distinto a un sitio web en cuanto al orden en el que se van a colocar el material o contenido, los blogs organiza el contenido de forma cronológica. Los blogs se actualizan regularmente: Con los blogs se pueden colocar información de forma constante. A diferencia de un sitio web muy estructurado es difícil sustituir información para cambiarla por otra. Los blogs crean una conversación más amplia: Los blogs forman comunidades más fácilmente que los sitios web. No solo son más conversacionales, también admiten comentarios y enlaces que pueden vincular distintos blogs en una conversación. Los blogs están conectados con las redes sociales: Es fácil compartir un artículo de un blog dentro de la red social. Si un blog se mantiene actualizado regularmente, también va obtener una presencia regular dentro de las redes sociales. Cada artículo pude ser compartido en las redes sociales por cualquier usuario. En conclusión y en vista de todas estas características de un blog se ha decidido crear uno dentro del sitio web del presente proyecto. Este blog ayudará al sitio mantenerse actualizado y vinculado con las redes sociales.
la palabra clave por medio de la cual los usuarios encontraran el sitio. Para saber cuál es la palabra clave más efectiva es recomendable utilizar herramientas que permiten saber cuáles son las más utilizadas. Una de estas herramientas la posee el servicio de Google llamado AdWords. Aquí se determina las palabras de más uso y las que tienen mayor competencia. Es importante elegir la palabra clave que especifique el contenido del sitio pero que también tenga una competencia media o baja. Si se elige una palabra clave con competencia alta es probable que el posicionamiento no resulte efectivo.
Para que un sitio web tenga un buen posicionamiento en buscadores (un sitio bien posicionado es aquel que aparezca en las primeras tres páginas de un buscador) debe seguir algunas técnicas básicas de posicionamiento SEO (Search Engine Optimization), las cuales son:
2. Título del sitio: Los buscadores realizan un rastreo llamado spiders, el cual “es un programa auto m a t i z a d o q u e r e c o r r e la red, descargando todo lo que encuentra. Este programa llega a su sitio web y copia su contenido” (Matthew MacDonald 2012). La primera información que toman en cuenta es el Título. Clint Eccher (2011) afirma que “las primeras palabras son las más importantes, por tanto, las palabras que se van a indexar deben situarse cerca del principio de la frase”, es decir, se colocara de primer lugar en el título la palabra clave que se eligió.
1. Elegir la palabra clave: La palabra clave es la frase o conjunto de palabras que un usuario coloca en el buscador para encontrar la información que le sea útil. Según la temática de un sitio se elegirá
Matthew MacDonald (2012) los describe de la siguiente manera: “El texto del título es imp o r t a n t e , y a q u e l o s m o t o r e s de búsquedas encuentran dicho texto. En realidad, le dan más importancia
4.8.3 Posicionamiento Web
IV.Metodología gráfica
39
los buscadores para mostrar resultados a los usuarios. “Si las palabras incluidas en esta etiqueta no tienen sentido, el usuario puede no seleccionar el sitio, porque puede resultarle caótico o incluso obvio que el diseñador ha sobreoptimizado” (Clint Eccher 2011) Es importante realizar una breve descripción del sitio y además colocar en ellas la palabra clave principal seleccionada, pero que no pierda sentido con la redacción del texto, ya que “si un motor de búsqueda encuentra palabras claves que coincidan con un fragmento de la descripción, lo enseña.” (Matthew MacDonald 2012)
que al de la página. Por ello, si alguien rastrea palabras claves que coincidan con su título, es muy probable que su página obtenga una mejor clasificación en los resultados de búsquedas”. En la actualidad muchos diseñadores web han colocado en el título solamente la palabra clave de su interés. Dentro código HTML quedaría el título del sitio web vectorlibre.com, de la siguiente manera: <title>Diseño Gráfico Caracas Venezuela Curso Online Diseño Gráfico </title>. Como podemos observar la palabra clave es “Diseño Gráfico Caracas Venezuela” y se ha colocado al principio del título. 3. Palabras claves en el código HTML: El código HTML posee una etiqueta especial para colocar las palabras claves. Allí se colocan todas las posibles combinaciones de la palabra clave principal que se ha elegido. En el código de vectorlibre.com se colocó: <meta name=”keywords” content=”diseño gráfico caracas, caracas diseño gráfico, diseño gráfico venezuela, curso oline diseño gráfico, diseño páginas web caracas, diseño web caracas, diseño web venezuela”/> La cantidad de palabras a utilizar es importante, se recomienda usar menos de 25 ya que “esto puede resultar en una clasificación no muy alta, porque los motores de búsqueda podrían penalizar el sitio como spam.” (Clint Eccher 2011) 4. Descripción del sitio: Dentro del código HTML se puede colocar la descripción del sitio web. Esta descripción lo utilizan 40
IV.Metodología gráfica
La palabra clave se colocara dentro de las primeras 23 palabras, por que son las que se van a mostrar en los resultados de búsqueda. Por ejemplo en vectorlibre.com se utilizo: <meta name=”description” content=”Estudio de diseño gráfico en Caracas Venezuela que realiza servicios especializados en la enseñanza y elaboración de imágenes visuales de vanguardia para terceras empresas.”/>. Como podrán ver las palabras clave principal seleccionada “Diseño Gráfico Caracas” aparece en las primeras palabras de la descripción del sitio. Si un usuario coloca en su buscador preferido las palabras “Diseño Gráfico Caracas” los buscadores les arrojaran los datos de vectorlibre.com de la siguiente manera: Diseño Gráfico Caracas Venezuela Curso Online Diseño Gráfico... vectorlibre.com Estudio de diseño gráfico en Caracas Venezuela que realiza servicios especializados en la enseñanza y elaboraciónde imágenes visuales de vanguardia para terceras... Como podrán ver las palabras clave “Diseño Gráfico Caracas” son colocadas en negrita por los buscadores y aparece dentro de la descripción del sitio. 5. Jerarquía de textos: “Los motores de búsquedas priorizan el texto al que se aplica estilo de las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Facilitan una clara jerarquía sobre cuálde las etiquetas se considera más importante con respecto a las otras y a otro texto
del cuerpo” (Clint Eccher 2011). Es decir, los buscadores prioriza los texto que estén dentro de la etiqueta <h1>, ya que esta es la que tiene un grado mayor. En el sitio se utilizo la palabra clave “Diseño Gráfico Caracas” dentro de frases que tienen etiquetas <h1> y <h2>, por ejemplo: <h2> Enseña las maravillas del Software Libre y el Diseño Gráfico.</h2>, <h1> Servicios de Diseño Gráfico.</h1>, <h2> Estamos al día con las tendencias del Diseño Gráfico.</h2>. 6. Negritas e inclinadas: “Igual que ocurre con las etiquetas <h1> a <h6>, los motores de búsquedas rastrean maneras de diferenciar el texto. Los estilos de negrita y cursiva facilitan esta tarea. El diseñador sólo necesita incluir el texto entre las etiquetas <strong> o <em>, la primera para negrita la segunda para cursiva.” (Clint Eccher 2011)
4.8.4 Autopromoción en foros y blogs En Internet hay muchas cantidades de blogs y foros que manejan la misma temática del presente proyecto. La estrategia de promoción dentro de aquellos sitios consiste en intervenir o comentar contenido y a la vez dejar como firma personal la dirección web del proyecto, en nuestro caso es www.vectorlibre.com. Si la temática a discutir lo exige y además el proyecto aporta información relevante se puede incluir la dirección web dentro del comentario. Por ejemplo:
se puede colocar la dirección quedando de alguna manera así: “En mi opinión y experiencia personal puedo afirmar con toda seguridad que el programa Inkscape es una herramienta muy poderosa en la creación de gráficos. Al principio es algo complicado adaptarse pero con la práctica se domina el software. Los cursos online del sitio www.vectorlibre.com me ayudaron mucho a dominar el programa. Hoy en día puedo realizar trabajos...” Como se puede ver la dirección de vectorlibre.com fue incluida en el comentario, de esta manera no es necesario colocarla en la firma personal. Pero “estas maniobras requieren de mucho tacto. Por lo general, el mensaje deberá ser bien intencionado.” (Matthew MacDonald 2012)
Moisés: En mi opinión y experiencia personal puedo afirmar con toda seguridad que el programa Inkscape es una herramienta muy poderosa en la creación de gráficos. Al principio es algo complicado adaptarse pero con la práctica se domina el software. Hoy en día puedo realizar trabajos de muy alto nivel profesional. No tiene nada que enviarle a Ilustrator. Moisés Contreras www.vectorlibre.com Como podemos ver anteriormente la dirección web se coloca como parte de la firma personal. Las ventajas en participar en ciertas temas de foros y blog esta en que “cientos de aficionados leerán su comentario.” (Matthew MacDonald 2012). Dentro del comentario IV.Metodología gráfica
41
GLOSARIO DE TERMINOS Y FUENTES DOCUMENTALES
Glosario de Términos Blog: “La palabra blog es una abreviación de web log (diario web) que tiene sentido por que son una clase de diarios: pensamientos regulares, fechados, como un cruce entre una entrada de un diario y una en un foro de discusión” (Matthew MacDonald 2012) Básicamente un blog posee todas las características aplicadas a una sitio web, pero este tiene la regularidad de actualizarse diariamente, publicando así opiniones personales, o artículos relevantes para una empresa. CSS: Del ingles Cascading Style Sheets, acompaña al documento codificado de HTML con la finalidad de alterar su estilo gráfico. “Una hoja de estilo es un documento lleno de reglas de formato. Los navegadores las leen y las aplican cuando muestran páginas web” (Matthew MacDonald 2012) Criptografía: Arte de escribir con clave secreta o de un modo enigmático. Diccionario RAE (2001) Domino de Internet: Es un nombre asociado a una sitio web con el fin de traducir las direcciones IP p a r a q ue se an f ác i l e s de recordar, por ejemplo www.vectorlibre.com. Dirección IP: Es una serie de números que permite a un computador ubicar otro computador dentro de la red de Internet. Hacker: Según Jonas Lowgren (2004) es “ 1. Persona que disfruta explorando los detalles de los sistemas programables y cómo expandir sus capacidades... 2. Persona que programa entusiastamente (incluso obsesivamente) o que disfruta programar antes de limitarse a teorizar sobre la programación. 3. Una persona capaz de apreciar el valor de una hakeada. 4. Una persona que es diestra programando a gran velocidad. 5. Una experto en un programa en particular, o alguien que trabaja frecuentemente con él o haciéndole modificaciones... 6. Un experto o entusiasta de cualquier tipo. 7. Alguien quien disfruta con el desafío intelectual de superar o evitar creativamente las limitaciones. 8. (con valor des p e c t i v o ) Glosario de terminos
43
Un merodeador malicioso que trata de descubrir información valiosa revisando sitios privados. El término correcto para esta acepción es craker.” Ideograma: Imagen convencional o símbolo que representa un ser o una idea, pero no palabras o frases fijas que los signifiquen. Diccionario RAE (2001) HTML: Del ingles HyperText Markup Language, es un lenguaje informático que codifica un documento con la finalidad de crear páginas web. Píxel: Es la menor unidad de medida que está conformado una imagen digital. Software: Según Miguel Vidal (2000) es “un plan de funcionamiento escrito mediante algún lenguaje de programación, el software se hace funcionar en ordenadores, que temporalmente se convierten en esa máquina para que el programa sirve de plan. El software permite poner en relación al ser humano y a la máquina y también a las máquinas entre sí.” Spam: Correo basura o mensaje basura a los mensajes no solicitados, no deseados o de remitente no conocido (correo anónimo), habitualmente de tipo publicitario, generalmente enviados en grandes cantidades (incluso masivas) que perjudican de alguna o varias maneras al receptor. La acción de enviar dichos mensajes se denomina spamming. (Wikipedia 2013) Memoria RAM: Es un dispositivo eléctrico de un computador encargado de almacenar los programas y los datos procesados por los mismos.
44
Glosario de terminos
Fuentes Documentales Libro completo Eccher, Clint. (2011) Diseño Web Profesional. Madrid. Anaya Multimedia. Gradin, Carlos. (2004) :(){ :|:& };: Internet, Hackers y Software Libre. Argentina. Editorial Fantasma Samara, Timothy. (2006) Diseñar con y sin retícula. Barcelona, España. Editorial Gustavo Gili, SL. Stallman, Richard. (2004) Software libre para una sociedad libre. Madrid. Queimada Gráficas. MacDonald, Matthew. (2012) Creación y Diseño Web. Madrid. O´Reilly Media, Inc. Wiedemann, Julius (2005) Web Design: Flash Sites. Italia. Taschen. Wiedemann, Julius (2005) Web Design: Best Studios. Italia. Taschen. Capítulo de libro. Hillman, Curtis (2006) Diseño de página web corporativa. En D. Millman, (Ed.), Los principios básicos del diseño gráfico (pp 218-234) Barcelona, España. Editorial Blume. Material de Clases. Carballo, Yusneyi (2009) Introducción a la programación. Material de clases para el curso de programación del Centro de Enseñanza Asistida por Computador CENEAC, Caracas. Lowgren, Jonas. (2004) Cultura(s) hacker. Material de clases para la Escuela de Artes y Comunicación de Malmo, Suecia.
Fuentes documentales
45
Tesis de grado Gonzalez, S. (2012) Diseño de un sitio web interactivo fundamentado en la historia del Diseño Gráfico Venezolano, a través de personajes emblemáticos. Tesis de grado para optar al Titulo de Licenciado en Diseño Gráfico. Escuela de Diseño Gráfico, Universidad José María Vargas, Caracas, Venezuela. Medios electrónicos en Internet Libro electrónico Goás, Joaquín Herrera (2011) Curso práctico de Inkscape: Logo a logo. [Disponible en línea] Consultado el 3 de frebrero del 2013 En: http://joaclintistgud.wordpress.com/2011/04/14/inkscape-logo-a-logo-2%C2%AA-edicion. Páginas Web Free Software Foundation (2013) Gnu General Public License Version 3, 29 June 2007. Consultado el 15 de abril del 2013. En: http://www.gnu.org/licenses/gpl.txt Nielsen, Jakob (2012). Introducción a la Usabilidad. Consultado el 7 de marzo del 2013. En: http://www.nngroup.com/articles/usability-101-introduction-to-usability/ Vidal, Miguel. (2000). Cooperación sin mando: una introducción al software libre. Consultado el 27 de enero del 2013. En: http:// www.sindominio.net Wikipedia (2013) Dominio de Internet. Consultado el 1ro de febrero del 2013. En: http://es.wikipedia.org/wiki/Dominio_de_Internet Wikipedia (2013) Inkscape. Consultado el 9 de febrero del 2013. En: http://es.wikipedia.org/wiki/Inkscape
46 Fuentes documentales
Artículos de revistas en versión electrónica Brown, Paul. (2005) El porqué de las cosas [Versión Electrónica]. Linux Magazine, 6, 3. Brown, Paul. (2005) ¿Hay Alguien ahí? [Versión Electrónica]. Linux Magazine, 10, 3. Brown, Paul. (2012) Mentiras: Casos de uso [Versión Electrónica]. Linux Magazine, 79, 4. Kreussel, Peter. (2005) Gráficos vectoriales con Inkscape: El pincel electrónico [Versión Electrónica]. Linux Magazine, 9, 78-80. Ramirez, Juan Miguel (2006) Examinamos la última versión de Inkscape: Diseña Libremente [Versión Electrónica]. Linux Magazine, 19, 26-28.
Fuentes documentales
47