COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GRADO UNDECIMO PLANEACION PERIÓDICA PRIMER BIMESTRE 2015 Logro Diseña los contenidos gráficos para construir un Sitio Web local, utilizando las herramientas del Software Adobe CS5. Indicadores de logro: Identifica las ventanas y herramientas básicas de algunos programas de Adobe CS5 como Fireworks, Photoshop y Flash. Planea y argumenta un proyecto microempresarial o profesional, teniendo claro el qué, para qué, para quién, cómo, cuándo y dónde, lo cual facilita el desarrollo del mismo. Construye elementos gráficos con conceptos creativos, como logo, slogan y banner utilizando las herramientas de los programas de Adobe. Utiliza las herramientas de Cs5 de manera creativa y dinámica para plasmar ideas gráficas, relacionadas con un proyecto microempresarial o profesional. Tiene una actitud de escucha, atención y aportes en la clase. Hace críticas constructivas, sugerencias y aportes con base en los trabajos de los demás compañeros. Respeta el criterio de sus compañeros y retroalimenta los procesos aplicados en la edición gráfica para la web. Contenidos: CONTENIDOS CREATIVOS PARA LA WEB 1. Publicidad de una marca: a. Planteamientos b. Objetivos, Misión, visión c. Reglas sobre el color d. Fondos e imágenes 2. Diseños gráficos a. Logo b. Slogan c. Banners animados en Flash
GUIA DE APOYO PARA EL ESTUDIANTE COLEGIO AGUSTINIANO CIUDAD SALITRE CONTENIDOS CREATIVOS PARA LA WEB OBJETIVO: Brindar al estudiante las pautas para diseña y elegir los contenidos apropiados para un sitio Web, utilizando las herramientas de Adobe Fireworks, o photoshop y flash. EMPRESA O PROYECCION PROFESIONAL. En este primer periodo puedes elegir para trabajar, la empresa que estas creando en grupo o la profesión que quieres ejercer, proyectándote como un profesional que quiere dar a conocer sus proyectos empresariales y/o de ventas de algún producto, mediante una página Web. Para el proyecto de la empresa que se está planeando en grupo, cada estudiante trabajará de manera individual en sus propuestas para posteriormente unificar una sola. 1. PUBLICIDAD DE UNA MARCA Para dar a conocer una marca, (sea el nombre de una empresa o un producto), es necesario hacer la adecuada publicidad, es decir, generar una forma de comunicación que permita informar al público sobre los beneficios de dicha marca o producto y poder comercializarlo, identificando el mercado apropiado. El concepto empresa, se refiere a una actividad económica dedicada a actividades de comercialización de bienes o servicios que satisfacen las necesidades sociales. a. Planteamientos Para comenzar se debe plantear, QUÉ, PARA QUÉ, PARA QUIEN, CÓMO, CUÁNDO, DÓNDE. Qué quiero hacer, qué quiero vender, qué quiero comercializar, etc, es decir que me motiva a crear determinada empresa. Para qué, cual es la finalidad, que quiero lograr. Para Quién, es decir el público objetivo, el Target. Es importante definir esto y delimitar lo más posible a quien dirijo mi producto o labor. Todos los géneros y edades tienen necesidades diferentes y en la medida en que se logre identificar ese público se pueden comenzar a delimitar los objetivos, alcances, metodologías, productos o servicios. Cómo, es la forma de utilizar los recursos, de buscar ayudas, financiación, capital, inversiones. De buscar los bienes materiales para la creación de la empresa o producto. Cuándo, define el momento de creación a corto, mediano o largo plazo. Dónde, permite delimitar donde es más probable y conveniente establecer la empresa o vender un producto, ya sea en la ciudad, en un pueblo, en un país, en tiendas, centros comerciales, estratos, barrios. Todo deber ser estratégico de acuerdo al servicio que se va a prestar.
Cuando se lográ dar respuestas a estas preguntas iniciales, se está listo para comenzar a identificar y proponer lo que se quiere con la empresa o producto. b. Objetivos, Misión, Visón Es necesario comenzar a identificar cual es el objetivo principal es decir aquellos propósitos alcanzables y verificables que se quiere lograr. Es el comienzo de la planeación, Se comienza con un verbo infinitivo (Diseñar, planear, definir, alcanzar, mostrar, evaluar, etc, ) Los objetivos secundarios ayudan a delimitar el objetivo principal y a proponer otros objetivos. La misión es el motivo de ser de una empresa, de acuerdo a su filosofía y creencias. Define que se quiere lograr y con qué y para quién, teniendo en cuenta los factores externos e internos y los recursos con los que se cuenta. La visión es el camino a mediano y largo plazo de la empresa, define las estrategias que se van seguir para cumplir los objetivos propuestos. La diferencia entre misión y visión, es que la misión es lo que es ahora la empresa o el proyecto y la visión lo que será, dónde se dirige. c. Reglas sobre el Color EDICION GRAFICA Mira el video, Color in motion de María Claudia Cortés, con el que podrás comprender de manera animada, la psicología de los colores. http://mariaclaudiacortes.com/ Color in motion a. El color Cada color ejerce sobre la persona que lo observa una triple acción: Impresiona, Expresa y se asocia con estados de ánimo. Los colores Afectan psicológicamente y producen ciertas sensaciones. Estas sensaciones de las que vamos a hablar corresponden a la cultura occidental, ya que en otras culturas, los mismos colores, pueden expresar sentimientos totalmente opuestos. El Rojo: Es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo, aunque también del peligro. Es el más caliente de los colores cálidos. Es el color del fuego y de la sangre, de la vitalidad y la acción, ejerce una influencia poderosa sobre el humor y los impulsos de los seres humanos, produce calor. El aspecto negativo del rojo es que puede destapar actitudes agresivas. El Anaranjado: Representa la alegría, la juventud, el calor, el verano. Comparte con el rojo algunos aspectos siendo un color ardiente y brillante. Aumenta el optimismo, la seguridad, la confianza, el equilibrio, disminuye la fatiga y estimula el sistema respiratorio. Es ideal para utilizar en lugares dónde la familia se reúne para conversar y disfrutar de la compañía.
El amarillo: En muchas culturas, es el símbolo de la omnipotencia y es el color más luminoso, más cálido, ardiente y expansivo, es el color de la luz del sol. Genera calor, provoca el buen humor y la alegría. Estimula la vista y actúa sobre el sistema nervioso. Está vinculado con la actividad mental y la inspiración creativa ya que despierta el intelecto y actúa como antifatiga. Los tonos amarillos calientes pueden calmar ciertos estados de excitación nerviosa, por eso se emplea este color en el tratamiento de la psiconeurosis. El verde: Simboliza la esperanza, la fecundidad, los bienes que han de venir, el deseo de vida eterna. Es un color sedante, hipnótico, superficial. Se le atribuyen virtudes como la de ser calmante y relajante, resultando eficaz en los casos de excitabilidad nerviosa, insomnio y fatiga, disminuyendo la presión sanguínea, baja el ritmo cardíaco, alivia neuralgias y jaquecas. Se utiliza para neutralizar los colores cálidos. El Azul: es el símbolo de la profundidad se le atribuyen efectos calmantes y se usa en ambientes que inviten al reposo. El azul es el más sobrio de los colores fríos, transmite seriedad, confianza y tranquilidad. Favorece la paciencia la amabilidad y serenidad, aunque la sobreexposición al mismo produce fatiga o depresión. También se aconseja para equilibrar el uso de los colores cálidos. El púrpura: Representa el misterio, se asocia con la intuición y la espiritualidad, influenciando emociones y humores. También es un color algo melancólico. Actúa sobre el corazón, disminuye la angustia, las fobias y el miedo. Agiliza el poder creativo. Por su elevado precio se convirtió en el color de la realeza. El blanco: Su significado es asociado con la pureza, fe, con la paz. Alegría y pulcritud. En las culturas orientales simboliza la otra vida, representa el amor divino, estimula la humildad y la imaginación creativa. El Negro: Tradicionalmente el negro se relaciona con la oscuridad, el dolor, la desesperación, la formalidad y solemnidad, la tristeza, la melancolía, la infelicidad y desventura, el enfado y la irritabilidad y puede representar lo que está escondido y velado. Es un color que también denota poder, misterio y el estilo. En nuestra cultura es también el color de la muerte y del luto, y se reserva para las misas de difuntos y el Viernes Santo. El gris: Iguala todas las cosas y no influye en los otros colores. Puede expresar elegancia, respeto, desconsuelo, aburrimiento, vejez. Es un color neutro y en cierta forma sombrío. Ayuda a enfatizar los valores espirituales e intelectuales. b. Reglas sobre el color: el éxito de un diseño web profesional El diseño de una página web se basa no sólo en la composición o en las formas, sino también en la combinación de colores. Muchos publicistas incluso indican que la asociación de los colores a una marca es tan fuerte, que una mala combinación puede llevar al fracaso. Hay que saber elegir los colores cuidadosamente, pues una visita decide en cuestión de segundos si se queda o no en la página web. Aunque no hay reglas absolutas, tener en cuenta algunas directrices puede ayudarnos a encontrar un diseño armónico. 1. IDENTIFICA EL PÚBLICO OBJETIVO DE TU PÁGINA WEB La importancia de elegir colores en base al público al que nos dirigimos radica en que la mayoría de los colores están asociados a determinados grupos; por ejemplo, cuando elegimos un regalo para un recién nacido elegimos el azul pastel si es niño o el rosa si es niña (amarillo si no sabemos qué es).
La página tiene ante todo que atraer y convencer a la visita. Es por eso que hay que seleccionar colores con los que la visita se sienta identificada. Si el público al que queremos llegar es a un público masculino, podemos utilizar colores oscuros (como grises o negros) o colores fríos (azules y verdes). El público femenino se identifica más con los colores como violeta o púrpura; mientras que el público joven se identifica más con colores planos y llamativos como el naranja o el verde. 2. ENCIENDE LAS EMOCIONES Una de las propiedades de los colores es la de transmitir sensaciones. Los colores estimulan nuestro cerebro y nos evocan tranquilidad, seguridad, confianza, pasión, misterio... Esto es muy interesante desde el punto de vista del Marketing, ya que no es necesario dar argumentos para convencer sobre las propiedades o beneficios de un producto o servicio. Pero ojo: muchas de estas asociaciones tienen un fundamento cultural. Por ejemplo, vestir de negro por ejemplo es ir de luto en nuestra sociedad, mientras que en India el color del luto es en blanco. Tenlo en cuenta en las relaciones internacionales de tu negocio. 3. QUÉ COLORES SELECCIONAR? Otro de los aspectos a la hora de escoger los colores para nuestra marca y para nuestra página web es el equilibrio. La armonía de colores y el equilibrio hace que un diseño sea más o menos efectivo. Pero qué colores tenemos que seleccionar? Por lo general, se recomiendan respetar una de estas tres reglas: a. Colores de la misma gama cromática; es decir, diferentes tonos de un mismo color. b. Colores complementarios; aquellos situados próximos en la gama cromática c. Colores opuestos: son aquellos situados justo en el lado opuesto de la gama cromática y que ayudan al contraste. Otra de las recomendaciones es no abusar de los colores: dos o tres es suficiente y siempre es bueno que haya un color predominante. 4. EFECTIVIDAD DEL COLOR: EL CONTRASTE El contraste de color se produce al combinar dos colores que no están relacionados. Esto permite por ejemplo, resaltar textos o imágenes. Combina colores claros y colores oscuros para lograr este efecto visual. 5. COMPOSICIÓN Y PESO DE COLORES
Gracias a los colores y a las formas podemos dirigir la mirada de la visita y así resaltar determinados elementos. En la composición se dice que los colores cálidos, los oscuros o tierras, pesan más que los colores fríos, claro so pesados. Busca la armonía y el equilibrio justo en el diseño de tu web. Para ello puedes seguir estas tres reglas básicas: Crea un sólo punto de impacto visual por página; es decir, un punto al que dirigir la mirada. Respeta la mirada del lector; es decir, de izquierda a derecha y de arriba abajo. Deja aire y espacios en blanco para que la mirada descanse. Tomado de: http://es.jimdo.com/2012/11/13/5-reglas-sobre-el-color-el-éxito-de-un-diseño-web-profesional/ del 25/01/2013 d. Fondos e imágenes Es importante seleccionar las imágenes adecuadas para el logo, los banner y los fondos para el portal web. Para página web, las imágenes deben ser livianas para facilitar que la pagina corra rápido, para ello puedes editarlas en Fireworks que permite tener imágenes con el peso ideal o con photoshop que te da más alternativas de edición, como el retoque. Los formatos usados son importantes. Estos son: JPG. Es el formato más usado, tiene buna calidad de imagen y es óptimo para la web PNG: Genera también buena calidad de imagen, se usa cuando la imagen tiene transparencias. GIF. Este formato solo permite imágenes animadas. La resolución ideal para una imagen que será utilizada en la web, puede ser de 72 (dpi) píxeles por pulgada. El tamaño dependerá de la necesidad. El fondo: Se refiere a un color o una imagen que se utilizan detrás de los contenidos de una Página Web. Este armoniza y puede hacer más llamativa la página. Es importante que el fondo contraste con los contenidos. Es decir, si se usa un fondo oscuro, el contenido ha de ser claro para que se visualice, y viceversa. Se pueden utilizar imágenes de fondo pero estas deben ir en marca de agua de tal forma que no obstruyan la lectura de los contenidos o quede muy pesada para la vista. La eficiencia de una página está en la velocidad a la que cargan los contenidos. Tener fondos muy pesados, hace que se demore en abrir. Por esta razón es mejor diseñar fondos pequeños y livianos que cargan a manera de mosaico en le <body> de la página, o en los <td> de las tablas. Para nuestro caso los diseñaremos en Fireworks siguiendo algunos ejemplos vistos en clase: Canvas color + imagen dibujada Cuadro color + Textura Logo difuminado Barra Degradé horizontal Barra Degradé Vertical
2. DISEÑOS GRAFICOS Para nuestro primer bimestre, haremos la creación del contenido de la página web, para ello, haremos el logo, el slogan de la empresa y los banners, estos últimos contarán con botones animados. Usaremos los programas de Adobe CS5 Que es un Sitio Web? Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Ahora un Sitio Web Local, es el conjunto de archivos y carpetas, que se encuentran en una misma carpeta raíz, de un pc. Es necesario planificar el sitio web antes de crear las páginas que va a contener. Luego se deben diseñar sus componentes y organizarlos en carpetas que permitan encontrar la información de manera ordenada. Por otra parte, un sitio Web es efectivo, cuando abre rápidamente, tiene una información acertada en cada página y su diseño es llamativo. a. Creación de Logo Logo: Se trata de una imagen distintiva, compuesta por letras e iconos que identifican a una persona, una empresa o un producto. El logo suele incluir algún símbolo que sea asociado de manera inmediata con aquello que representa. Para la creación del logo debes utilizar Fireworks, haciendo uso de las capas, de tal forma que cada una represente una parte del Logo y al final aparezcan todos los componentes. De esta forma al animar el logo en flash, tendrás cada parte separada y será más fácil y efectivo animarlo. Entre sus características están: - Simple - Concreto - Coherente - Puede tener mensajes ocultos - Calidad - Innovador - Creativo - Tener colores y formas adecuadas, de acuerdo al Grupo objetivo o Target b. Creación del Slogan Es un lema que acompaña el Logo, por lo general comienza con un verbo o imperativo (haz, come, baila, pinta, etc), invita al público a determinada acción, facilitando el consumo o acercarmiento a la marca. Este slogan debe ser corto, conciso, creativo, tener palabras concretas y fáciles de interpretar. Debe llamar la atención y procurar que sea fácil de recordar, así como ser tener frases fáciles de pronunciar en otros idiomas. Se debe evitar la metáfora, lo común o frases de cajón.
c. Creación de Banners animados Banner o cabezote Es un anuncio normalmente rectangular colocado arriba, abajo o en los lados del contenido principal de un sitio web. Pueden ser anuncios con texto, gráficos animados y sonido. La mayoría de los sitios web comerciales utiliza anuncios tipo banner. En el Banner que los estudiantes van a utilizar para el sitio Web deben tener en cuenta: a) El banner debe incluir: El Logo, Un slogan, imágenes relacionadas con el producto o empresa b) Debe estar hecho en Flash, animado y con efectos. (Recurrir a la página Flash.astalaweb.net) c) Medidas: Existen banner rectangulares horizontales con medidas de 900px de ancho por 150px de Alto, 780px ancho por 90px alto, 468px ancho por 60 px alto Banner Cuadrado: 300px ancho por 250px alto, 250px ancho por 250px alto, 200 px ancho x 200px alto. Banner rectangular vertical: 120px ancho por 600 px alto, 160px ancho por 600px alto. Para la clase Los Banners irán en la parte superior del Sitio con medidas de 1000px de ancho por 150px de Alto Se pueden crear Banner tipo propaganda, para ser insertados en los contenidos de las páginas, pues elegir la forma y las medidas. A partir del segundo periodo se utilizará el programa Dreamweaver, con el que se montará la página web final, con el contenido creativo creado previamente.
ACTIVIDADES EN CLASE 1. PROPUESTAS Elegiremos el proyecto a trabajar por cada uno de los estudiantes. Se definirá claramente el Qué, para qué, para quién, cómo, dónde y cuándo Se delimitarán los objetivos, misión y visión, los cuales se presentarán en una animación de Flash. 2. LOGO De manera individual cada estudiante comenzará el diseño del logo, con el programa Fireworks o photoshop según convenga. Se debe tener en cuenta las características del logo y el buen uso de las herramientas de diseño. 3. EXPOSICIÓN, RETROALIMENTACIÓN Y CREACIÓN DE SLOGAN Se hará la exposición de los logos. Es importante el aporte del grupo para las diferentes propuestas, de manera constructiva, argumentativa y sugerente con el fin de generar buenos diseños. Si se sugieren correcciones o cambios, es el momento de hacerlo. Se procederá a la creación del Slogan que acompañará el logo. 4. BANNER Ya con el logo y el slogan listo, continuaremos con la creación del banner, es importante el uso de la herramienta flash para animar y el uso de fireworks o photoshop para editar las imágenes que se requieran. Se puede crear más de un banner si es necesario, importante revisar las medidas que se requieran. 5. TRABJAO FINAL Se hará simulación de la página web en flash, para ello se montará el banner, el logo, el slogan y la animación. Los contenidos posteriormente adhieren a las páginas haciendo uso de DreamWeaver. CON TODOS TUS CONOCIMIENTOS, CREATIVIDAD Y DEDICACION LOGRARAS EXCELENTES PAGINAS WEB PARA TU EMPRES. MUCHO ANIMO!!!
WEBGRAFIA Color in motion http://mariaclaudiacortes.com/ http://flash.astalaweb.net/ http://www.aulaclic.es/fotografia-photoshop/index.htm http://help.adobe.com/es_es/fireworks/cs/using/ws4c25cfbb1410b0021e63e3d1152b00c ace-7ffd.html http://es.jimdo.com/2012/11/13/5-reglas-sobre-el-color-el-%c3%a9xito-de-undise%c3%b1o-web-profesional/ http://www.negociosyemprendimiento.org/2014/02/publicidad-efectiva-importancia-logo-yslogan.html Plan de marketing de una empresa http://www.gestiopolis.com/marketing-2/plan-demarketing-empresa-productos-cosmeticos.htm Empresa http://procesogestioncomercial.blogspot.com/2011/08/mision-vision-valoresslogan-y-logotipo.html Crear empresa http://www.ccb.org.co/cree-su-empresa/inicie-su-empresa/pasos-paracrear-empresa Publicidad http://www.cca.org.mx/cca/cursos/administracion/artra/comerc/recur/8.3.1/ppal_dis.htm