Portada interior Mismo formato para estuche y CD. (hacer cambios respectivos según sea el caso,ejem, nombres alumas, fechas, etc) UNIVERSIDAD DON BOSCO VICERRECTORÍA DE ESTUDIOS DE POSTGRADO (Arial 12, bold, MAYUSCULAS) TRABAJO DE GRADUACIÓN RESPONSABILIDAD ÉTICA DEL DISEÑO GRÁFICO EN LA PUBLICIDAD: CASO MD (Nombre del TG) PARA OPTAR AL GRADO DE MAESTRO DISEÑO GRÁFICO ASESOR: DOCTOR JOSÉ HUMBERTO FLORES PRESENTADO POR: SUSANA MARGARITA MARTÍNEZ MONGE Antiguo Cuscatlán, La Libertad, El Salvador, Centroamérica. Marzo de 2009 UNIVERSIDAD DON BOSCO VICERRECTORÍA DE POST GRADO TRABAJO DE GRADUCIÓN PORTAFOLIO WEB PARA OPTAR AL GRADO DE MAESTRA EN DISEÑO GRÁFICO ASESOR MAESTRO RICARDO CASTELLÓN PRESENTADO POR LIC. ROXANA MARIA RIVAS CASCO Antiguo Cuscatlán, La Libertad, San Salvador, Centroamérica Septiembre 2011 INDICE INTRODUCCIÓN 1 ANTECEDENTES 2 OBJETIVOS 3 MARCO TEÓRICO 4 MISIÓN, VISIÓN, AUDIENCIA META 14 METODO DE DISEÑO PARA EL DESARROLLO DEL PORTAFOLIO 15 - ETAPA DE DIVERGENCIA 15 METODOLOGÍA DE LA INVESTIGACION TECNICA LLUVIA DE IDEAS 15 MODELO DEL ESCARABAJO 16 INVESTIGACIÓN Y CONCEPTUALIZACIÓN POR IMÁGENES 17 FOTOGRAFÍAS DE CAMPO 18 INVESTIGACIÓN POR INTERNET 19 PORTAFOLIO WEB BAJO EL CONCEPTO “ABRAZO” 20 - ETAPA DE TRANSFORMACIÓN 20 BOCETOS DEL PROTOTIPO 20 PRIMER PROTOTIPO 24 CONCLUSIONES DEL PRIMER PROTOTIPO 27 - ETAPA DE CONVERGENCIA 28 ESTRUCTURA DEL PORTAFOLIO WEB 28 ARBOL DE CONTENIDOS 29 DEFINICIÓN DE LOS SISTEMAS DE NAVEGACIÓN 29 PANTALLAS 32 IMAGEN CORPORATIVA 35 UTILIZACIÓN DE ELEMENTOS FOTOGRÁFICOS 37 INGIENERIA DE NOMBRE 38 NOMBRE DE PROYECTOS DEL PORTAFOLIO 39 CONCLUSIONES 40 BIBLIOGRAFIA 41 ANEXOS 42 1 INTRODUCCIÓN El presente trabajo de graduación tiene como objetivo servir de sustento para el desarrollo de portafolios web, ejemplificando el desarrollo del Portafolio web “Ochirox- Portafolio, Abrazo” hecho por Roxana María Rivas Casco, de esta manera se expondrá los proyectos realizados en la Maestría de Diseño Gráfico desarrollados en los años 2009-2010. La muestra consta de 13 proyectos con el único objetivo de evidenciar los conocimientos adquiridos en el Máster de Diseño Gráfico Web y Multimedia Se expone la Metodología utilizada para la elaboración del concepto y diseño del mismo, dejando detallada la metodología de diseño utilizado para la conceptualización de este portafolio. Se presentará y justificará la distribución jerárquica y diagramación utilizada para el Portafolio Web, además de explicar cada punto o trabajo expuesto en el portafolio. El portafolio tiene como dirección URL: http://www.ochirox.com o http://www.ochirox.com /portafolio en donde se puede encontrar todo lo que se desarrolla en este documento. Ochirox es la firma de la diseñadora, que ha venido siendo construida a través del tiempo, y es en esta ocasión que se quiere presentar una edición especial del portafolio, por eso el nombre de “Ochirox- Portafolio, Abrazo” 2 ANTECEDENTES El dominio www.ochirox.com nace en el año 2008, el cual fue desarrollado el primer Sitio web que mostraba el primer portafolio de diseño gráfico de manera empírica. NACIMIENTO DEL NOMBRE, Todo empezó con el correo electrónico: ochirox@hotmail.com hecho en el 2001, logrando la aceptación de personas, usuario y contactos con el nickname1, que simplificaba el nombre de la diseñadora siendo así una palabra agradable, corta y fácil de pronunciar. El diseño web para el sitio y dominio www.ochirox.com ha sido modificado 4 veces, Siendo estos sitios desarrollado en lenguaje html2 y la 3ra. Modificación fue transformado para un blog en wordpress.org, la 4ta modificación fue el prototipo de la actual y final propuesta. 1 Nickname (anglicismo o alias en español) .(Del lat. alĭas).1. m. Apodo o sobrenombre. (Real Academia Española, Segunda Edición. http://buscon.rae.es/draeI/SrvltConsulta?TIPO_BUS=3&LEMA=alias). Alias. El vocablo alias proviene del latín[1] y equivale al término español "otro". Está relacionado con la frase alia nomine cognitu, que significa 'conocido por otro nombre como'.Otra acepción de la palabra se refiere específicamente a un nombre falso, empleado para encubrir la personalidad de una persona. Un alias por otro lado, puede acompañar o reemplazar el nombre de una persona por fines estéticos, afectivos, o de otro tipo. Puede aplicarse genéricamente a un nombre de pila propio, o ser particular de una persona.En informática también se utilizan alias para identificar a la persona que está accediendo mediante un ordenador a Internet, identificando así a éstos más prácticamente que a través del número de dirección IP, aunque en estos casos normalmente se utiliza el anglicismo nick (nickname en inglés). 2 HTML: Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web) mailto:ochirox@hotmail.com http://buscon.rae.es/draeI/SrvltConsulta?TIPO_BUS=3&LEMA=alias http://es.wikipedia.org/wiki/Lat%C3%ADn http://es.wikipedia.org/wiki/Lat%C3%ADn http://es.wikipedia.org/wiki/Inform%C3%A1tica http://es.wikipedia.org/wiki/Ordenador http://es.wikipedia.org/wiki/Internet http://es.wikipedia.org/wiki/Direcci%C3%B3n_IP http://es.wikipedia.org/wiki/Anglicismo http://es.wikipedia.org/wiki/Idioma_ingl%C3%A9s http://www.monografias.com/trabajos13/libapren/libapren.shtml http://www.monografias.com/trabajos32/accesibilidad-world-wide-web/accesibilidad-world-wide-web.shtml 3 OBJETIVOS EN GENERAL 1) Evidenciar los conocimientos adquiridos en la “Maestría de Diseño Gráfico Web y Multimedia” a través del diseño de una página web como medio para promocionar servicios profesionales de calidad, creatividad e innovación bajo el nombre “Ochirox - Portafolio, Abrazo 2011”. 2) Desarrollar mediante el proceso de diseño el concepto del Portafolio, utilizando métodos de investigación y metodología de diseño. 3) Consolidar los conocimientos y principios adquiridos para la creación de Sitios Web en la “Maestría de Diseño Gráfico Web y Multimedia” con la utilización de lenguaje HTML. OBJETIVOS ESPECIFICOS 1) Desarrollar un portafolio de trabajos y proyectos realizados en la Maestría de Diseño Gráfico Web y Multimedia”. 2) Generar una serie de pasos para la creación de conceptos en portafolios Web 3) Potenciar el manejo y uso de la herramienta a través de procesos creativos expuesto por CHRISTOPHER JONES que desarrolla: Divergencia, Transformación y Convergencia. 4 MARCO TEÓRICO METODOLOGÍA DE DISEÑO PROPUESTA POR CHRISTOPHER JONES 3 Si bien este autor no ha desarrollado propiamente un método. Pues su obra más conocida es más bien una antología, sus ideas sobre la necesidad de un método han dado un lenguaje ya común en el medio del diseño. En particular los conceptos sobre el diseñador como "caja negra" o como "caja transparente". En el caso de la caja negra se considera que el diseñador es capaz de producir resultados en los que confía y que a menudo tienen éxito. Más no es capaz de explicar cómo llegó a tal resultado. Las características de este modo de diseñar son: 1. El diseño final está conformado por las entradas (inputs) más recientes procedentes del problema, así como por otras entradas que proceden de experiencias anteriores. 2. Su producción se ve acelerada mediante el relajamiento durante cierto periodo de las inhibiciones a la creatividad. 3. La capacidad para poder producir resultados relevantes depende de la disponibilidad de tiempo suficiente para que el diseñador asimile y manipule imágenes que representen la estructura del problema. 4. A lo largo de esta manipulación. Repentinamente se percibe una nueva manera de estructurar el problema de tal manera que se resuelven los conflictos. 5. El control consiente de las distintas maneras en que se estructura un problema. Incrementa a posibilidades de obtener buenos resultados. Por lo que se refiere a los métodos de caja transparente, sus características son las siguientes: 3 Jones, John Christopher.1982 Métodos de diseño; versión castellana de María Luisa López Sardá y Esteve Riambau i Saurí. 5 1. Objetivos. Variables y criterios de evaluación son claramente fijados de antemano. 2. El análisis del problema debe ser completado antes de iniciar la búsqueda de soluciones. 3. La evaluación es fundamentalmente verbal y lógica (en lugar de experimental). 4. Las estrategias se establecen de antemano. 5. Por lo general las estrategias son lineales e incluyen ciclos de retroalimentación. Se puede afirmar que tanto el método de caja negra como el de caja transparente tienen como resultado ampliar el espacio de búsqueda de la solución al problema de diseño. Con la caja negra se logra eliminar las restricciones al proceso creativo y estimular la producción de resultados más diversificados. En la caja transparente el proceso se abre para incluir varias posibilidades. Siendo las ideas repentinas del diseñador tan sólo un caso particular. Según Jones, "la debilidad fundamental de ambos enfoques es que el diseñador genera un universo de alternativas desconocidas que resulta demasiado extenso para explorar con el lento proceso del pensamiento consiente" Para resolver este problema es necesario dividir el esfuerzo de diseño en dos partes: a) Una fase que lleva a cabo la búsqueda de un diseño adecuado. b) Otra fase que controla y evalúa el sistema de búsqueda (control estratégico) 6 De acuerdo con este autor, esta estrategia permite a cada miembro del equipo de diseño comprobar el grado en que las proposiciones proyectuales son adecuadas. Para esto es necesario crear un metalenguaje que sea suficientemente genérico para poder describir las relaciones entre una determinada estrategia y la situación de diseño. A través de la evaluación con este metalenguaje se puede construir un modelo que preverá los resultados probables de las distintas estrategias alternativas y así se podrá optar por la más prometedora. EL MODELO ESCARABAJO4 Este modelo fue propuesto por el Maestro Fidel Chávez Pérez, en su calidad de profesor en el Instituto Tecnológico de Estudios Superiores de Monterrey. De manera similar que el modelo indagatorio, sea parte del establecimiento de previo del tema a desarrollar, expresado, ya sea por una palabra, o un enunciado, que constituye el núcleo generador de las ideas o aspectos relacionados directamente con la idea central. El calificativo de escarabajo establece una analogía con la labor de escarbar y hurgar, que para el caso del desarrollo de un tema, se escarba y se profundiza no en la tierra como el escarabajo, si no en el pensamiento de quien escribe y en las fuentes de información. A partir de la definición de una idea central, de sus aspectos y relaciones donde se circunscribe, es posible definir un esquema de desarrollo, que permita establecer el índice de los temas y subtemas del texto. Este modelo es de gran utilidad para la elaboración de diversos tipos de textos, desde los más simples hasta los de mayor complejidad. En el campo de la investigación, es una herramienta importante para la elaboración de monografías, tesis, informes, ensayos y artículos. El modelo escarabajo considera las siguientes fases: 4 Arriaga Linares Angel, López Hurtado. Sergio México 2000. Comunicación profesional,Comunicación escrita. Instituto Politécnico Nacional Unidad Profesional Interdisciplinaria de Ingeniería Ciencias Sociales y Administrativas. Centro Universitario Grupo Sol. Plantel Cuauhtemoc. México, Distrito Federal. http://www.monografias.com/trabajos11/conge/conge.shtml http://www.monografias.com/trabajos27/profesor-novel/profesor-novel.shtml http://www.monografias.com/trabajos15/origen-tierra/origen-tierra.shtml http://www.monografias.com/trabajos14/genesispensamto/genesispensamto.shtml http://www.monografias.com/trabajos4/costo/costo.shtml http://www.monografias.com/trabajos54/la-investigacion/la-investigacion.shtml http://www.monografias.com/trabajos/tesisgrado/tesisgrado.shtml http://www.monografias.com/trabajos14/informeauditoria/informeauditoria.shtml http://www.monografias.com/trabajos13/libapren/libapren2.shtml#TRECE http://www.monografias.com/trabajos14/historiaingenieria/historiaingenieria.shtml http://www.monografias.com/trabajos11/concient/concient.shtml 7  La palabra en el esquema simplificado.  Bloques semánticos.  Selección, jerarquización y discriminación.  Enfoque de acuerdo con uno o varios puntos de vista.  Características del punto de vista.  Redacción del texto.  Titulo. En la primera fase se identifican los campos semánticos de la palabra o enunciado a desarrollar, a partir de la técnica de lluvia de ideas. Ejemplo: Este proceso de búsqueda está basado en la asociación de ideas, además de sencillo, es muy rápido. Cuando escuchamos o leemos una palabra con atención, es casi inevitable que, de manera inmediata, el cerebro empiece a buscar vínculos de significado, considerando los elementos internos (la significación personal) y externos (la significación social) de la palabra, así como los conocimientos que se tienen al respecto, a partir del aprendizaje, la información y la cultura. Estos tres contextos constituyen el campo de significación donde se generan los conceptos asociados a la idea central que se pretende desarrollar. Dependiendo de la complejidad del tema, las ideas asociadas serán representadas, ya sea con una sola palabra. Una vez que se han definido las palabras o enunciados relacionados con el tema a desarrollar, se ordenan para establecer bloques semánticos. Esto es, se forman grupos con las palabras pertenecientes a un sistema de relación específico. BRAINSTORMING O FLUJO DE IDEAS O LLUVIA DE IDEAS Este es sin duda el método creativo más conocido. Pero es tan famoso como mal conocido, ya que se han realizado tantas traducciones que casi parece imposible saber si nos referimos a lo mismo. Las más comunes son las lluvia de ideas, torbellinos de ideas, tormenta de ideas, http://www.monografias.com/trabajos28/nociones-fundamentales-discriminacion/nociones-fundamentales-discriminacion.shtml http://www.monografias.com/trabajos14/administ-procesos/administ-procesos.shtml#PROCE http://www.monografias.com/trabajos14/deficitsuperavit/deficitsuperavit.shtml http://www.monografias.com/trabajos13/acerca/acerca.shtml http://www.monografias.com/trabajos5/teap/teap.shtml http://www.monografias.com/trabajos13/quentend/quentend.shtml#INTRO http://www.monografias.com/trabajos11/grupo/grupo.shtml http://www.monografias.com/trabajos11/teosis/teosis.shtml 8 desencadenamiento de ideas, movilización verbal, bombardeo de ideas, sacudidas de cerebros, promoción de ideas, tormenta cerebral, de desencadenamiento de ideas, avalancha de ideas, tempestad en el cerebro y tempestad de ideas. Comenzó en el ámbito de las empresas, aplicándose a temas tan variados como la productividad, la necesidad de encontrar nuevas ideas y soluciones para los productos del mercado, encontrar nuevos métodos que desarrollen el pensamiento creativo...a todos los niveles. Pero pronto se extiende al ámbito académico para crear cursos específicos que desarrollen la creatividad, promoviendo la introducción de los principios creativos, preconizando una enseñanza más creativa en cualquier materia Principios y supuestos teóricos Aplazar el juicio y no realizar críticas, hasta que no agoten las ideas, ya que actuaría como un inhibidor. Se ha de crear una atmósfera de trabajo en la que nadie se sienta amenazado. Cuantas más ideas se sugieren, mejores resultados se conseguirán: “la cantidad produce la calidad”. Las mejores ideas aparecen tarde en el periodo de producción de ideas, será más fácil que encontremos las soluciones y tendremos más variedad sobre la que elegir. La producción de ideas en grupos puede ser más efectiva que la individual El asociacionismo: se pone en juego la imaginación y la memoria de forma que una idea encadena y trae a otra. Las leyes que contribuyen a asociar las ideas son: a) Semejanza: con analogías, metáforas... b) Oposición: nos da ideas que conectan dos polos opuestos mediante la antítesis, la ironía... 5 Tampoco debemos olvidar que durante las sesiones, las ideas de una persona, serán asociadas de manera distinta por cada miembro, y hará que aparezcan otras por contacto. 9 QUE ES EL HTML5 El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer. También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página. 5 Masanti Luis Alejandro, Diseño WEB,Ciudad de Buenos Aires, Ñ Ediciones.Abril de 2000-Fascículo 01 Páginas 1 a 9 http://www.monografias.com/trabajos13/libapren/libapren.shtml http://www.monografias.com/trabajos32/accesibilidad-world-wide-web/accesibilidad-world-wide-web.shtml http://www.monografias.com/trabajos11/contrest/contrest.shtml http://www.monografias.com/trabajos10/teca/teca.shtml http://www.monografias.com/Computacion/Programacion/ http://www.monografias.com/trabajos10/visual/visual.shtml http://www.monografias.com/trabajos5/sisope/sisope.shtml http://www.monografias.com/trabajos11/teosis/teosis.shtml http://www.monografias.com/trabajos15/ms-windows/ms-windows.shtml http://www.monografias.com/trabajos36/sistema-unix/sistema-unix.shtml http://www.monografias.com/trabajos7/offi/offi.shtml http://www.monografias.com/trabajos12/guiaword/guiaword.shtml http://www.monografias.com/trabajos13/quienbill/quienbill.shtml http://www.monografias.com/trabajos13/diseprod/diseprod.shtml 10 Orígenes del HTML 1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language, origen del HTML.1989. Tim Berners-Lee, a la sazón en el Centro Europeo de Investigaciones Nucleares presenta su artículo Information Management: A Proposal dedicándose de lleno al desarrollo de un sistema que permitiera el acceso en línea de manera uniforme a la información disponible en muchos recursos distintos, y que pudiese funcionar en máquinas que conectadas por redes basadas en TCP/IP. 1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup Language), que más tarde se llamará nivel 0; soporta encabezados, listas y anclas. Se crea el nombre World Wide Web. 1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y sólo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso público de World Wide Web el 17 de mayo (http://info.cern.ch). 1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el lenguaje, llamada HTML 1.0, agregando a la definición original atributos para modificar el estilo físico del texto. Se distribuye Viola, primer visor gráfico de Web y disponible sólo para X.11. 1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de Kansas, si bien lee sólo texto. Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno gráfico que se hace disponible para computadoras personales, lo que lo hace inmediatamente popular. A fines de año, comienzan a aparecer los primeros artículos sobre WWW en diarios y revistas de circulación masiva. Tim Berners-Lee utiliza el trabajo del año anterior de Connolly para presentar el borrador de la primera norma (RFC -Recommendation for Comments) de HTML para Internet. 1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con mayores prestaciones para HTML, Hyper-G, que no tiene gran éxito. Cello, primer visor de HTML que no requiere TCP/IP http://www.monografias.com/trabajos14/dificultades-iso/dificultades-iso.shtml http://www.monografias.com/trabajos11/norma/norma.shtml http://www.monografias.com/trabajos12/desorgan/desorgan.shtml http://www.monografias.com/trabajos4/refrec/refrec.shtml http://www.monografias.com/trabajos6/auti/auti.shtml http://www.monografias.com/Computacion/Redes/ http://www.monografias.com/trabajos5/datint/datint.shtml#pro http://www.monografias.com/trabajos11/wind/wind2.shtml http://www.monografias.com/trabajos13/admuniv/admuniv.shtml http://www.monografias.com/trabajos/fintrabajo/fintrabajo.shtml http://www.monografias.com/trabajos12/rete/rete.shtml http://www.monografias.com/trabajos11/sercli/sercli.shtml http://www.monografias.com/trabajos15/cumplimiento-defectuoso/cumplimiento-defectuoso.shtml#INCUMPL http://www.monografias.com/trabajos15/llave-exito/llave-exito.shtml http://www.monografias.com/trabajos/protocolotcpip/protocolotcpip.shtml 11 presentado por la Escuela de Leyes de la Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World Wide Web, Netscape (también conocido como Mozilla), que tiene una amplia aceptación entre los usuarios, pero que soporta elementos de programación que equivalen a una degeneración del HTML (tamaños de letra, fondos). Se define un equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que permite moverse dentro de los ambientes definidos. En este mismo año se realizan la Primera y Segunda conferencias internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization. 1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas. Microsoft produce su primer visor de Internet, el cual también utiliza elementos de HTML degenerados. Una nueva versión de Netscape, Navigator 2.0, agrega soporte de encuadres. Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de programación, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacífico en Wagga-Wagga. 1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la modelación en tres dimensiones, VRML 3.0, que permite interactuar con los objetos definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt. 1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio, aparece la versión 4.0, experimental. 1998. HTML 4.0. http://www.monografias.com/trabajos13/artcomu/artcomu.shtml http://www.monografias.com/trabajos4/leyes/leyes.shtml http://www.monografias.com/trabajos10/disfo/disfo.shtml http://www.monografias.com/trabajos14/dinamica-grupos/dinamica-grupos.shtml http://www.monografias.com/trabajos/adolmodin/adolmodin.shtml http://www.monografias.com/trabajos6/laerac/laerac.shtml http://www.monografias.com/trabajos7/orat/orat.shtml http://www.monografias.com/trabajos14/asia/asia.shtml 12 4. Creación de páginas web con lenguaje HTML Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o Adobe Dreamweaver CS5. Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. A continuación les mostraremos las etiquetas más comunes que deben aprenderse para hacer una página Web. Estructura de los documentos de HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta , que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos cabeza y cuerpo. La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento . En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden: Ejemplo: <HTML> <HEAD> <TITLE> Título de mi página de Internet

Primera pagina

http://www.monografias.com/trabajos5/laweb/laweb.shtml http://www.monografias.com/Computacion/Programacion/ http://www.monografias.com/trabajos7/html/html.shtml http://www.monografias.com/trabajos7/arch/arch.shtml http://www.monografias.com/Computacion/Programacion/ http://www.monografias.com/trabajos15/todorov/todorov.shtml#INTRO http://www.monografias.com/trabajos3/color/color.shtml 13 Esta es mi primera pagina, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaremos en condiciones de hacer cosas mas interesantes.

Aquí va un segundo párrafo. Para escribir títulos se usa la etiqueta en donde x es un número. Ejemplo:

Titulo principal

Titulo secundario

Titulo terciario

Titulo cuarto nivel

Titulo quinto
Titulo sexto
Quedaría de la siguiente manera: Titulo principal Titulo secundario Titulo terciario Titulo cuarto nivel Titulo quinto Titulo sexto PORTAFOLIO DE DISEÑO WEB Un portafolio en Diseño Gráfico no es más que la muestra de todos los trabajos que se han realizado, desde el primero al último, de esta forma se muestra al posible nuevo cliente o Jefe la calidad y variedad de diseños. En diseño web el portafolio generalmente es una galería de imágenes que muestra una miniatura de los sitios web diseñados para otras empresas.6 6 http://www.photoshopytutoriales.com/que-es-un-portafolio-en-diseno-grafico/ http://www.monografias.com/trabajos13/libapren/libapren.shtml http://www.photoshopytutoriales.com/tag/portafolio/ http://www.photoshopytutoriales.com/tag/diseno/ 14 MISIÓN Presentar la mejor muestra de diseño gráfico en soporte web, de la diseñadora Roxana María Rivas Casco. VISIÓN Posicionar Ochirox en web como una solución de diseño gráfico, en donde se logre compartir con la audiencia meta un mensaje de conlleve la esencia de la diseñadora. DEFINICIÓN DE LA AUDIENCIA Audiencia: Empresas medianas y pequeñas situadas en San Salvador, en busca de soluciones de diseño gráfico, web y Multimedia, con un ingreso mensual entre $ 4,000 y $5,000 en ganancias brutas 15 METODO DE DISEÑO PARA EL DESARROLLO DEL PORTAFOLIO ETAPA DE DIVERGENCIA METODOLOGÍA DE LA INVESTIGACION TÉCNICA LLUVIA DE IDEAS Para la búsqueda del concepto se desarrollo una Lluvia de ideas, seleccionando como tema principal “Portafolio, ochirox”. Se estipuló un minuto para la primera lluvia de ideas y 30 segundos para la segunda lluvia de ideas. De ambas lluvias de ideas se seleccionaron 2 palabras “mundo y abrazar”. IMAGEN 1 Imagen del desarrollo de la técnica “Lluvia de ideas” 16 MODELO DEL ESCARABAJO El modelo del Escarabajo se desarrollo con la palabra Abrazar y tomando en cuenta, mundo para alimentar el concepto. El modelo se diseño con 3 Niveles de ramificación y las palabras seleccionadas fueron: Idea Central Variable Abrazo Lugar Abrazo Foto Abrazo Demostrar IMAGEN 2 Imagen del desarrollo del Modelo. IMAGEN 3 Imagen del desarrollo del Modelo Completo. 17 INVESTIGACIÓN Y CONCEPTUALIZACIÓN POR IMÁGENES Investigación exhaustiva de imágenes en Internet7 que denotaban la palabra abrazo, estas fueron 15 fotografías para alimentar el concepto, con el fin de crear conjuntos par la conceptualización de la palabra abrazo. Todas las palabras sirvieron para orientar como comunicar el concepto. 7 http://www.google.com.sv/imghp?hl=es&tab=wi http://www.deviantart.com/ http://www.gettyimages.es/ http://www.google.com.sv/imghp?hl=es&tab=wi http://www.deviantart.com/ 18 FOTOGRAFÍAS DE CAMPO Se hizo una investigación de campo al Centro Histórico de San Salvador, para poder enriquecer el concepto y mostrar aptitudes de comunicación a través de imágenes y plasmarlas en el Portafolio. Se seleccionó el Centro Histórico de San Salvador, con el fin de representar el valor que tiene para nuestro país, a través de lugares que reflejaron la pasión y entrega en determinados tiempos y épocas. Las fotografías fueron tomadas con una cámara fotográfica CANON EOS XSi. 19 INVESTIGACIÓN POR INTERNET (VER ANEXO 2) Investigación por internet a 25 personas entre las edades de 20 – 30 años con las, siguientes preguntas: Recurrencia de respuestas y resultados de las preguntas. RESULTADOS 1- Al escuchar la palabra abrazo, en ¿qué piensas? Apertura, pareja enamorada, familia, amor, amistad, sincero, noviazgo, calidez, compresión, felicidad, seguridad, sonrisas, apoyo, confort. 2- ¿Cómo describirías un abrazo? Suave, firme, intimidad, mucho cariño envolver, abarcar, cercanía, momentos, ternura, completo, apretar el cuerpo, sentimientos. 3- ¿Cuánto tiempo puede durar un abrazo? Interminables, el tiempo que sea necesario, 20 segundos, 30 segundos, 2 minutos, todo el tiempo. PORTAFOLIO WEB BAJO EL CONCEPTO “ABRAZO” El objetivo de este concepto es poder tocar situaciones o problemáticas sociales en base a soluciones creativas y vivenciales de la diseñadora al mismo tiempo mostrar el trabajo de diseño gráfico elaborado. Gracias a herramientas de codificación se podrán cambiar las fotografías y su concepto para motivar a alguna acción social en cualquier momento que se quiera cambiar la edición. 20 Se creará un nuevo link al momento de tener otro segundo concepto donde se comente sobre la anterior edición. Con el fin de generar en la percepción del usuario, la actividad en el sitio web. CONCEPTO “Un abrazo siempre nos hace sentir bien, Es un saludo, una muestra de cariño, muestra cercanía y calidez. Ochirox muestra su diseño con un abrazo porque TODOS necesitamos un abrazo” El diseño a realizar para este sitio en su mayoría será fotográfico. Fotografías que comuniquen el concepto, que se quiere expresar, (Estas pueden cambiar mensualmente siempre y cuando alimenten el concepto). ETAPA DE TRANSFORMACIÓN BOCETOS DEL PROTOTIPO El concepto adquirido para el Portafolio Abrazo, fue seleccionado, en el año 2010 por el método Lluvia de Ideas y selección de variables, de esta manera se iniciaron creando los primeros bocetos para crear la interacción con el usuario, así mismo, se creó un prototipo para ver la funcionabilidad del sitio web. Se puede observar los bocetos de las pantallas para la creación del primer prototipo, y ver la funcionabilidad y navegación. IMAGEN 4 index.html 21 IMAGEN 5 Introducción y explicación al concepto. IMAGEN 6 Menú principal. IMAGEN 7 Sobre ochirox.com 22 IMAGEN 8 Presentación del Portafolio, Diseño de Editoriales. IMAGEN 9 Presentación del Portafolio, Diseño Multimedia. IMAGEN 10 Presentación del Portafolio Web y Multimedia 23 IMAGEN 11 Página que mostraría la creación de proyectos. IMAGEN 12 Página que mostraría la creación de proyectos. IMAGEN 13 Propuesta de blog, para colocación de imágenes. 24 PRIMER PROTOTIPO El primero prototipo fue diseñado, con el objetivo de ver si la navegabilidad era compatible con el usuario, también se consideró si el mensaje quedaba claro o conocer cual era la percepción del usuario, Se presentará a continuación los diseños de pantalla seleccionados para el prototipo, basados en los bocetos realizados en la sección anterior. INTRO Se inicia con una fotografía, la cual comunica sobre quien se está refiriendo el sitio web. Se presenta el Logotipo con un precarga en flash, colocando dos links que llevarán al sitio web ya sea en español o inglés. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) CONCEPTO Esta página presenta el concepto del sitio web en imágenes, este elemento es creado por medio de flash. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) 25 HOME La página Home contiene el menú donde se direcciona a otras páginas creando una navegabilidad dentro del sitio web. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) OCHIROX, EDICIÓN HUG. En esta página se comenta el concepto que se ha utilizado para el sitio web. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) PORTAFOLIO Desglose de trabajos realizados por Ochirox en la Maestría de Diseño Gráfico Web y Multimedia. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) 26 SONRISAS En esta sección se presenta la producción de materiales de clientes o trabajos fuera de Maestría y como ha sido el proceso de producción de los proyectos. BLOG Blog dentro del sitio web, en el que se actualizan status, links de diseño, fotos que muestren alguna actividad diaria, etc. LLAMARME Teléfonos de contacto para contactarse, dentro de este también se colocará un link que hable acerca de la diseñadora. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) 27 FREE HUGS Página que explica un poco sobre la temática del sitio web. (Todos los fondos serán líquidos, adaptándose en cada monitor sin importar sus medidas) CONCLUSIONES DEL PRIMER PROTOTIPO El prototipo estuvo expuesto durante 4 meses en la web, teniendo como resultado: La idea es innovadora para un sitio web, un diseño inusual, con un concepto fuerte y que nadie se imaginaba que había un portafolio dentro, para ello se sugirió por parte de personas expertas en el tema y por la prueba piloto consultando a 22 personas ( Entre ellas Maestros de Maestría: Danny Barrantes8 y Ligia Carvallo9) sobre la experiencia de navegación dentro del sitio web se tuvieron las siguientes conclusiones para mejora del prototipo: Utilizar imágenes propias, cambiar el sistema de menú principal vertical a un sistema horizontal de navegación, colocar más proyectos multimedia. Se tomó la decisión de suprimir la explicación de la temática del sitio. También se decidió crear un enfoque más abstracto y no fotos que comunicarán literalmente la palabra Abrazo creando más delicadeza y elegancia. Se decidió rediseñar el logotipo y hacerlo tipográfico. 8 Maestro de Aplicaciones Web: Maestría en Diseño Grafico y Multimedia UDB. (Costa Rica) 9 Maestra de Proyecto Web: Maestría en Diseño Gráfico y Multimedia UDB. (Miami Estados Unidos) 28 ETAPA DE CONVERGENCIA ESTRUCTURA DEL PORTAFOLIO WEB DIAGRAMACIÓN DEL SITIO WEB Para explicar sobre el diseño del sitio web, es necesario mencionar que el portafolio ochirox.com se centrará en mostrar imágenes del concepto, hablar sobre él y la presentación del portafolio. El tono que las fotografías poseen es un estilo vanguardista no cayendo en lo exagerado o lo surrealista. Las imágenes o backgrounds se adecuarán según el tamaño del monitor en el que sea visto el sitio web. El sitio web posee 3 estructuras o retículas que distribuyen la información. En las imágenes siguientes, entenderemos la distribución del texto a través de los rectángulos grises más oscuros y los rectángulos claros como backgrounds ó imágenes de fondo. IMAGEN 14 29 IMAGEN 15 IMAGEN 16 ÁRBOL DE CONTENIDOS SISTEMA DE NAVEGACIÓN SEGÚN ARBOL DE CONTENIDOS ochirox.com/ index.html Inicio de la web con una introducción hecha en flash, donde se presenta los siguientes links: abrazo y sobre ochirox portafolio. 30 ochirox.com/ intro.html Página que explica el concepto Abrazo, con la fotografía al fondo llamada La Libertad tipográfica, esta página me conduce a menú principal. ochirox.com/ menu.html Esta página contiene el menú principal que es: - abrazos cortos: Trabajos Editoriales e Imagen Corporativa ochirox.com/portafolio/asiplastic.html - abrazos largos: Trabajos Multimedia ochirox.com/portafolio2/index.html Blog. Fotografía diaria. ochirox.tumblr.com Contactarme. ochirox/llamarme.html. DEFINICIÓN DE LOS SISTEMAS DE NAVEGACIÓN Textual: El sitio web estará esquematizado para que el usuario pueda navegar de manera clara entre los menús, estos estarán bien indicados sobre la personalidad o el papel que estos jueguen. Contextual: La presentación de la información será de acuerdo al concepto que se ha creado para el sitio web. Visible: El sistema de navegación será visible, accesible al usuario, indicando botones según su significado. 31 Navegabilidad: Contará con una página de inicio que presente el logotipo Ochirox, posteriormente se pasara a una pequeña sala donde hable sobre el concepto del sitio web. Ochirox- Portafolio, abrazo Después de ambas presentaciones se pasará al menú principal en donde se podrá navegar en las secciones. 1) Abrazos Cortos 2) Abrazos Largos 3) Blog 4) Contacto Consistente: El contenido será enriquecido mensualmente o diariamente en el blog con vivencias y experiencias, evidenciando el trabajo que realiza Ochirox. Uniforme: El contenido contendrá términos uniformes adecuados a lo que se esté presentando según ítems. 32 PANTALLAS A continuación se presenta el diseño final del proyecto, con las modificaciones e imágenes que enriquecen el concepto “abrazo”, según el orden de estructura y la retícula seleccionada para cada página del Portafolio. Pantalla Inicial (Precarga Flash e Introducción) Preámbulo (Explicación del concepto) 33 Pantalla del Menu principal Botonera (Abrazos Cortos, Abrazos Largos, Blog y Contacto) Pantalla del Portafolio Editoriales (Abrazos Cortos) Menú a lado izquierdo y despliegue del proyecto lado derecho. Pantalla del Portafolio Multimedia (Abrazos Largos) Menú a lado izquierdo y despliegue del proyecto lado derecho. 34 Contacto (Pantalla del formulario de contacto así como el menú principal que brinda navegabilidad en el sitio) Blog. Fotos diarias 35 IMAGEN CORPORATIVA DEL SITIO WEB TIPOGRAFÍAS: Presentación de cada tipografía utilizada en el Portafolio ochirox abrazo. La utilización de esta tipografía es para darle un toque hecho a mano. La tipografía entra en la familia de las fuentes Caligráficas 36 37 UTILIZACIÓN DE ELEMENTOS FOTOGRÁFICOS Dentro del Sitio web desarrollado se ven en 4 páginas, fotografías de comunicación que a continuación se explican: OCHIROX, Fotografía artística de inicio, fue tomada en una sección de fotos en RAF, en el Taller de Foto Estudio. Representa una parte no completa de la diseñadora de manera artística. Fotografía encontrada en la URL http://www.ochirox.com/ LA LIBERTAD TIPOGRÁFICA, Fotografía tomada del rotulo luminoso del Cine Libertad, es un lugar famoso por su película “Cinema Libertad”. Siempre dentro de un desorden hay un momento de libertad de pensamientos y que define el proceso de diseñar. Fotografía encontrada en la URL: http://www.ochirox.com/intro.html LA LUCHA DE GERARDO BARRIOS, Fotografía utilizada en el menú principal del Portafolio Web: Representa la fuerza la lucha y el dinamismo que tuvo este personaje y como a tráves de su compromiso con el país logro dejar huella en el centro de nuestra Capital. Siendo así el precursor de promover el café en la economía y convertirlo en una fuerza económica para nuestro país. Fotografía encontrada en la URL: http://www.ochirox.com/menu.html 38 TELÉFONO Y GRAFITI, En la parte de contacto se colocó la foto de teléfonos públicos con el fin de representar acciones y realidades no aceptadas en nuestro país, asemejando la manera de cómo comunicarnos y como el grafiti que es un medio de comunicación en grupos apartados de nuestra Sociedad. Fotografía encontrada en la URL: http://www.ochirox.com/llamarme.html INGIENERÍA DE NOMBRE El menú posee ciertos nombres referente al concepto, los cuales son: Se les proporciono el nombre “abrazos cortos” por el hecho que su elaboración es más manual (fase de investigación y bocetos) para luego digitalizar y presentación posterior. Se coloca el nombre de abrazos largos ya que lleva una etapa de producción a parte de pasar la fase de investigación manual para luego diseñar, producir y luego presentar mediante un medio de comunicación. El blog posee el mismo estilo minimalista que los portafolios, hecho con el objetivo de expresar alguna idea referente a lo que hace la marca y mostrar fotos diarias o semanales que dejen un mensaje con el mismo todo del sitio web. En esta página estará colocado el script para envío de contacto de la persona que desea contactarse para pedir algún servicio, o lo que necesite. 39 PROYECTOS PRESENTADOS EN EL PORTAFOLIO Abrazos cortos/asiplastic.html 1. ASIPLASTIC (Imagen Corporativa) 2. Hestia diosa griega (Editorial y conceptualización) 3. Body Impact Gym (Imagen Corporativa) 4. Eco Recicla 2010 (Imagen Corporativa) 5. A tapear! (Imagen Corporativa) 6. Bitácora tipográfica (Editorial y conceptualización) 7. Vivevirtual Colombia (Imagen Corporativa) Abrazos largos/index.html 1. Conceptualizando en Web: Borges: Inspirado en Borges y yo. (Analogía personal.) Mark Amerika: Investigación de Mark Amerika 2. Stop motion con plastilina las 3 R’s 3. El cuento del cuento que conto 4. Diseño web cristianos latinos.com (cliente propio) 5. Diseño web, diferentes empresas. (cliente propio) 6. Proyecto Multimedia “Los Plásticos hablan” 40 CONCLUSIONES Muchas veces el crear un portafolio de diseño grafico no es tarea fácil, es por lo que se cree necesario seguir una serie de pasos que ayuden a guiar la el camino a desarrollar y el proceso a seguir para obtener resultados favorables. Es necesario alimentar nuestros procesos de diseño o creativo con imágenes, figuras, formas, pensamiento, lectura para realizar obtener diferentes opciones de diseño al producto final. Al finalizar este proyecto se fortaleció los conocimientos web adquiridos asi como evidenciar las herramientas aprendidas a lo largo de los dos años de estudios realizados en la Maestría de Diseño Gráfico Web y Multimedia” 41 BIBLIOGRAFÍA LIBROS  Jones, John Christopher. Métodos de diseño, versión castellana de María Luisa López Sardá y Esteve Riambau i Saurí. 1982  Arriaga Linares Angel, López Hurtado. Sergio Comunicación profesional, Comunicación escrita. Instituto Politécnico Nacional Unidad Profesional Interdisciplinaria de Ingeniería Ciencias Sociales y Administrativas. Centro Universitario Grupo Sol. Plantel Cuauhtemoc. México, Distrito Federal, México 2000.  Masanti Luis Alejandro, Diseño WEB, Ediciones. Abril de 2000-Fascículo 01 Páginas 1 a 9, Ciudad de Buenos Aires, Unidad Profesional Interdisciplinaria de Ingeniería Ciencias Sociales y Administrativas. Centro Universitario Grupo Sol. Plantel Cuauhtemoc.México, Distrito Federal.  Peter Block 30 minutos-- Para hacer brainstorming y generar ideas geniales Ediciones Granica S.A., 1998 - 77 páginas. INTERNET  (Real Academia Española, Segunda Edición. http://buscon.rae.es/draeI/SrvltConsulta?TIPO_BUS=3&LEMA=alias).  Concepto de Alias, http://es.wikipedia.org/wiki/Wikipedia:Portada http://www.monografias.com/trabajos14/historiaingenieria/historiaingenieria.shtml http://www.monografias.com/trabajos11/concient/concient.shtml http://www.monografias.com/trabajos13/diseprod/diseprod.shtml http://www.monografias.com/trabajos14/historiaingenieria/historiaingenieria.shtml http://www.monografias.com/trabajos11/concient/concient.shtml http://buscon.rae.es/draeI/SrvltConsulta?TIPO_BUS=3&LEMA=alias 42 ANEXOS 43 ANEXO 1 FASE DE ANALISIS 1 Cuestionario Cuestionario para el cliente Entrevistada: Roxana Rivas Casco. Identificación del público objetivo -¿Cuál es el mensaje principal que pretende transmitir a los visitantes de este sitio web? El mensaje principal es el portafolio como Ochirox también crear una conexión con los clientes, no basta solo con diseñar y entregar el producto, es interesante conocer a quien se le trabaja y crear relaciones personales, aun no tengo un local físico pero necesito posicionarme. Por el momento ya tengo un nivel de posicionamiento con mis conocidos, clientes, ex clientes, entre otros como ochirox.com -Confeccione una lista de los objetivos secundarios. Crear un sitio web acogedor -¿Qué beneficios obtendrá la empresa con esta página? Reconocimiento como diseñadora, crear en los que visiten mi pagina una opción para valorar mi trabajo. -¿Cuál es el público objetivo? Personas jóvenes adultas entre 23 años de edad en adelante. Empresas en busca de soluciones de diseño. -¿Quiénes son sus principales competidores? Diseñadores gráficos independientes que presenten sus trabajos y ofrezcan servicios en internet. Definición del sitio web -¿Cómo le gustaría que la gente describiera su página? Por ejemplo, divertida, seria, moderna, etc. Divertida, moderna, fresca, con un gran mensaje, calida etc. -¿El nuevo sitio debe reforzar o cambiar la percepción que sus clientes tienen de su empresa? Si, necesito impulsar el rediseño de mi marca personal y también el concepto a generar es de creatividad. -¿Prevé alguna razón por la que le pueda resultar difícil transmitir la imagen deseada? No 44 -¿Hay aspectos de su imagen corporativa y del material de marketing existente que deben recogerse en el sitio? (Nota: recomiende que el material de marketing conserve cierta uniformidad y elementos comunes en todos los medios). Ochirox tiene libertad total para diseñar. -Elabore un listado de varios sitios web de la competencia que, en su opinión, funcionan bien y explique por qué. http://www.emilkozak.com Me gusta mucho su línea gráfica, el orden y simpleza -¿Hay aspectos del sitio web de la competencia que le gusten o disgusten especialmente? La manera de expresar sus proyectos a través de fotografías. Contenido del sitio web -¿Usará material ya existente en el nuevo sitio web? En caso afirmativo, ¿está disponible? ¿En qué formato? Por ejemplo, en documentos Word, PDF, JPEG, etc. Facilite todos los detalles posibles y describa el tipo o la extensión de los documentos y archivos. Se realizara el desarrollo del logotipo ochirox, y el concepto HUG.(ABRAZO) Fotografías tomadas por mí, bancos de imágenes, Flickr, entre otros pero editadas por mí. -¿Tiene alguna idea para la organización de los contenidos? Si, se realizaran bocetos por cada pantalla además de presentar su ramificación en su árbol de contenidos Detalles técnicos -¿Qué plataformas y navegadores usa su público objetivo potencial? Internet Explorer, Firefox, Safari (Mac) etc. -¿Deberá incorporar el sitio web una base de datos? no los servicios de hosting: GoDaddy, y dominio también, y se lo utilizo a través de Filezilla un FTP Estrategias de marketing -¿Tiene algún plan para promocionar o desarrollar el sitio web? En caso afirmativo, descríbalos. Activarlo en la presentación de mi portafolio que presentare como trabajo de graduación para la maestría -¿Cómo pretende dar a conocer el sitio web en su propia empresa? Colocarlo en Redes sociales, blogs, entre otros. Datos administrativos -¿Cómo quiere que se actualice el sitio web? Roxana Rivas Casco -Indique los datos de contacto de aquellas personas responsables del desarrollo del sitio web: Roxana Rivas Casco y el nombre de los encargados de dar el visto bueno final: Liga Carballo y 45 Ricardo Barahona, Docente de la Materia Diseño web y asesor de portafolio respectivamente. -¿Cuál debería ser la fecha de lanzamiento del sitio web? Julio 2011 -¿Ha registrado ya un nombre de dominio? si 46 ANEXO 2 1) Al escuchar la palabra abrazo, en ¿qué piensas? Respuesta Recurrencia Apertura 2 Pareja 1 Enamorados 1 Familia 2 Amor 2 Amistad 3 Sinceridad 4 Apoyo 5 Seguridad 1 sonrisas 1 Noviazgo 1 Calidez 1 Compresión 1 Total 25 Esta pregunta fue realizada con el objetivo de conocer el significado de la palabra abrazo para los encuestados, vemos que la palabra apoyo es la que tiene mayor recurrencia, y luego le sigue la palabra sinceridad, Palabras claves que alimentaron el concepto del portafolio. 47 2) ¿Cómo describirías un abrazo? Respuesta Recurrencia Suave 2 Firme 1 Intimidad 1 Envolver 2 Abarcar 6 Mucho cariño 3 Sentimientos 2 Apretar 5 Cercanía 3 Total 25 Para tangibilizar más la idea se creó esta pregunta y brindó más información sobre la descripción de la palabra abrazo, se observa que la palabra con mayor recurrencia es Abarcar y luego le sigue la palabra apretar siguiendo con cercanía. 48 3) ¿Cuánto tiempo puede durar un abrazo? Respuesta Recurrencia Interminables 7 El tiempo necesario 1 20 segundos 4 30 segundos 5 2 minutos 3 N/A 5 Total 25 El resultado de esta pregunta sobre la duración de un abrazo es interminable siguiendo con 30 Segundos.