Página 1

MEMORIA DE ESTADIA PROFESIONAL

EMPRESA: CLIMA Y CONSTRUCCION S.A DE C.V.

PROYECTO:

REDISEÑO DE PAGINA WEB

PRESENTAN:

ESPINOZA SORIANO JOSÉ JUAN

MATA GUZMÁN LUIS ENRIQUE

PARA OBTENER EL TITULO DE:

TÉCNICO SUPERIOR UNIVERSITARIO EN DESARROLLO

DE NEGOCIOS ÁREA MERCADOTECNIA

Asesor académica: Silvia Jiménez Gutiérrez

Asesor empresarial: Ing. Agustin Lazcano Montaño

SEXAGÉSIMA TERCERA GENERACIÓN

Página 2

Página 3

Página 4

AGRADECIMIENTOS

Y

DEDICATORIAS

Quiero agradecer y de la misma manera dedicar este trabajo a mis

padres y hermanos, ya que sin su valioso apoyo esto no hubiera sido

posible, a ti Mamá que con tus oraciones, y sabíos consejos me han

guiado siempre hacia delante, me apoyaste, creístes en mi y estuviste

en las buenas y en las malas. A ti Papá, por la confianza que siempre

me brindaste tus consejos, a mi hermana por el apoyo moral que que

me brindo en el logro de un importante objetivo de mi vida.

En gran parte quiero agradecerle a mi profesora y asesora Silvia

Gutiérrez Jiménez por aceptarme, ya que sin ella no ubiera concluido

en esta etapa en mi carrera al apoyarme, enseñarme parte de su

sabiduría y experiencia, en este tiempo de la estadía.

A todos mis profesores de la UTN por tenerme paciencia al enseñarme

y darme consejos para tener una buena superación personal.

Le agradesco a mi asesor empresarial Agustín Lazcano Montaño por

brindarme todo este apoyo y parte de su sabiduría.

JOSÉ JUAN ESPINOZA SORIANO

Página 5

AGRADECIMIENTOS

Y

DEDICATORIAS

Primero que nada quiero agradecerle a Dios el que me haya permitido

llegar hasta esta estapa de mi vida.

Quiero agradecer y de la misma manera dedicar este trabajo a mis

padres y hermanos, ya que sin su valioso apoyo esto no hubiera sido

posible, a ti Mamá que con tus oraciones y sabios consejos me han

guiado siempre hacia delante, a ti Papá, por tu confianza que siempre

me brindaste y a ustedes Hermanos por el apoyo moral que brindaron

en el logro de un importante objetivo de mi vida.

Le agradezco a todos mis amigos que desde el primer cuatrimestre me

apoyaron, creyeron en mi y estuvieron en las buenas y en las malas, a

todos los que se quedaron en el camino y los que realizaron su sueño

de terminar su carrera, a todos mis profesores de la UTN por tenerme

paciencia al enseñarme y darme consejos para tener una buena

superación personal.

Le agradezco a mi profesora y tutora Silvia Gutiérrez Jiménez por

aceptarme, apoyarme y enseñarme parte de su sabiduría, cosas

nuevas de mi carrera en este tiempo de la estadía.

En gran parte quiero agradecer a mi asesor empresarial Agustin

Lazcano Montaño por brindarme todo este apoyo y parte de su

sabiduría.

LUIS ENRIQUE MATA GUZMAN

Página 6

INDICE

RESUMEN I

ABSTRACT II

INTRODUCCION 1

CAPÍTULO I 2

1. Antecedentes de la empresa 3

1.1 Introducción 3

1.2 Giro 3

1.3 Filosofía 4

1.3.1 Misión: 4

1.3.2 Visión 4

1.4 Organigrama 5

1.4.1 Descripción de las áreas 6

1.5 Datos de la empresa 7

CAPÍTULO II 8

2. Antecedentes del proyecto 9

2.1 Planteamiento del Problema 9

2.2 Objetivo del proyecto 9

2.3 Objetivo general 9

2.4 Objetivos específicos 9

2.5 Justificación

CAPÍTULO III 10

3. Marco teórico 11

3.1 Mezcla de comunicaciones de marketing 12

3.2 Marketing masivo 12

3.3 Entorno de la comunicación 12

3.4 Marketing directo 13

3.5 Formas de marketing directo 13

3.5.1 Esquema de las formas del marketing directo 13

3.6 Marketing por correo directo 14

3.7 Marketing por catálogo 15

3.8 Marketing por teléfono 15

3.9 Marketing por televisión de respuesta directa 16

Página 7

3.10 Marketing en quiosco 16

3.11 Marketing en línea 16

3.12 Marketing e internet 17

3.13 Áreas del marketing en línea 17

3.14 Comercio de la empresa al consumidor 17

3.15 Comercio entre negocios 18

3.16 Comercio entre consumidores 18

3.17 Comercio del consumidor a la empresa 18

3.18 Establecimiento de una presencia de marketing en línea 19

3.19 Colocación de anuncios y promociones en línea 20

3.20 Usos del correo electrónico 21

3.21 Correo no deseado 21

3.22 Logotipo 21

3.22.1 Colores para los logotipos 22

3.23 Psicología de colores 22

3.24 Tipografía 23

3.25 Páginas web 24

3.26 Pruebas de diseño y contenidos 25

3.26.1 Pruebas de funcionalidades y operación 26

3.26.2 Pruebas de carga 26

3.26.3 Pruebas de seguridad 26

3.26.4 Manejo de DNS 26

3.26.5 Protección de estructura interna del sitio web 27

3.26.6 Pruebas de respaldo 27

3.27 Hostingers 27

3.28 Diseño 27

3.29 Navegador 27

3.30 Http (hypertext transfer protocol) 28

3.31 URL (universal resource locator) 28

3.32 Encabezado 28

3.33 Banner 29

3.34 Exploración del sitio (menú) 30

3.35 Columnas de exploración 31

3.36 Área de contenido 31

3.37 Hipervínculos 32

3.38 Hojas de estilo 33

3.39 Pie de página 33

3.40 Html (hypertext markup language) 33

3.41 Archivo html 34

Página 8

3.42 Pixel 34

3.43 Adobe master collection cs6 35

3.44 Adobe Dreamweaver 35

3.45 Adobe flash professional 36

3.46 Adobe illustrator 36

3.47 Adobe fireworks 36

CAPÍTULO IV 37

4. Metodología 38

4.1 Metodología 39

4.2 Conocimiento de la empresa 40

4.2.1 Imagen 40

4.2.2 Productos 40

4.2.2.1 Aire acondicionado 41

4.2.2.2. Equipos de extración 41

4.2.2.3 Paneles solares 41

4.3 Objetivo de la página web 42

4.4 Target 42

4.5 Rediseño del logotipo 42

4.5.1. Propuesta número (1) 42

4.5.2 Propuesta número (2) 43

4.5.3 Propuesta número (3) 44

4.5.4 Propuesta número (4) 44

4.5.5 Propuesta número (5) 45

4.6 Mapa del sitio 46

4.6.1 Elaboración del menú (botones del sitio) 47

4.7 Elementos de los sistemas de navegación 47

4.8 Templates (bocetos) 51 4.9 Diseño de plantilla de inicio 52

4.9.1 Propuesta número (1) 56

4.9.2 Propuesta número (2) 56

4.9.3 Elección de témplate 57

4.10 Diseño del sitio 57

4.11 Boceto 58

4.12 Pagina principal (botón inicio) 58

4.12.1 Presentación final del botón de inicio 59

4.13 Botón (aire acondicionado) 60

4.13.1. Presentación final del botón de airea condicionado 61

4.14 Botón (mantenimiento) 64

Página 9

4.14.1 Presentación final del botón de mantenimiento 65

4.15 Botón (paneles solares) 66

4.15.1 Presentación final del botón paneles solares 67

4.16 Botón (extracción) 68

4.16.1 Presentación final del botón de extracción 69

4.17 Botón (contacto) 70

4.17.1 Mapa de google 71

4.17.2 Presentación final del botón contacto 71

4.18. Diseño web y estándares 74

4.19 Diseño de banner 75

4.20 Liberación 76

4.20.1 Cómo y qué probar 80

4.21. Publicación de la página web 80

4.22. Hosting 81

Conclusiónes 82

Recomendaciones 83

Glosario 84

Bibliografía 86

Página 1

RESUMEN

Una página Web es una vía de comunicación entre una empresa, los

clientes y los proveedores, por lo tanto es una herramienta que hay que

saber usar y explotar, para sacarle el mejor provecho en función de las

necesidades comunicacionales de la empresa.

Personalizado un sitio web, con ilustraciones atractivas, texto y con las

últimas características de programación, darán una gran oportunidad de

generar nuevos negocios o de distribuir información.

Este proyecto fue desarrollado para “Clima y energía renovable S.A

de C.V.”. con el fin de facilitar información y caracteristicas de la

empresa a sus clientes actuales y clientes potenciales, por esa razón se

rediseño la pagina web y también se elaboro un catálogo electrónico de

los productos que maneja.

Para lograr que una página sea exitosa, se debe tratar de hacerla llegar

a la mayor cantidad de personas posibles, y para ello, debe ser

desarrollada utilizando criterios de diseño que sean compatibles en

todas las plataformas, bien sean sistemas bajo Windows, Macintosh,

HTL, PHP o UNIX.

Es indispensable que los visitantes potenciales sean capaces de

encontrarla. Para ello, hay que registrar la página en algunos de los

principales Índices de Búsqueda en Internet.

Página 2

ABSTRACT

A Web page is a means of communication among a company,

customers and suppliers. Therefore, it is a tool that everybody must be

able to use and exploit. In order to get thebest bene fits on the

communicative needs of the company..

An with attractive website with the latest programming features, will give

you, a great opportunity not only to generate new business but also to

distribute information.

This project was carried out for "Climate and Renewable Energy SA de

CV". in order to provide information of the company to its customers

Thas`t why the website was redesigned and an electronic catalog of was

elaborated.

To make a page to be successful it has to be known by as many people

as possible, and for this, it should be developed using design criteria

that are consistent across all platforms, that is, systems under Windows,

Macintosh, HTL , PHP or UNIX.

It is essential that potential visitors will be able to findit. So we must

register the page in some of the major indices Internet Search.

Página 3

INTRODUCCIÓN

Este documento cuenta con cuatro capítulos que describen la

información necesaria para la creación y alojamiento de un sitio web, ya

que es el medio de comunicación mas utilizado en la actualidad, con

fines comerciales o sociales, el proyecto se presenta de la siguiente

forma:

Capítulo I Antecedentes de la empresa: contiene información de la

empresa, como el giro, estructura organizacional (organigrama) y

filosofía.

Capítulo II Antecedentes del proyecto: se desarrollo el planteamiento

del problema, los objetivos y la justificación de la empresa.

Capítulo III Marco Teórico: se puede observar el conjunto de teorías

con las que se apoyó y dan sustento al desarrollo del proyecto,

herramientas que han sido utilizadas para la realización del mismo.

Capitulo IV Metodología: se describe paso a paso el desarrollo de

cada una de las plantillas o elementos que conforman la página web,

dando un seguimiento a lo más innovador, para que sea de lo más

actual en sitios web. La página web de “Clima y energía renovable

S.A de C.V.” fue rediseña.

Página 4

CAPÍTULO

I

Página 5

1. ANTECEDENTES DE LA EMPRESA

1.1 INTRODUCCIÓN

La empresa a decidido cambiar de razón social y el nombre que se le

esta asignando es Climer S.A de C.V.

Es una microempresa, creada por el único propietario Agustin Lazcano

Montaño, ingeniero industrial, con una gran capacidad de trabajo y

visión, con una habilidad comercial ha generado exitosas ventas, lo cual

impulsa el crecimiento de la empresa, el negocio se ha sustentado

desde el año 2005 hasta la actualidad. Generando empleos, así como

un trato directo con sus clientes, ha utilizado algunos medios de

comunicación, en la cual los clientes actuales y pótenciales, pueden

consultar la variedad de equipos de aire acondicionado que trabaja e

instalación de estos, además de limpieza de ductos.

1.2 GIRO

Se dedica a:

Aire acondicionado

Aire Industrial

Aire en casas particulares

Mantenimiento corporativo

Instalaciónes hidráulicas

sanitarias Electricidad alta y baja tensión

Obra civil

Proyectos de instalación de energía fotovoltaica Proyectos ejecutivos

Página 6

1.3 FILOSOFÍA

Nuestra filosofía corporativa está orientada hacia el consumidor; en la

aportación de excelencia de nuestros productos y servicios; en los

continuos esfuerzos para actuar en cada problemática, investigar y

desarrollar proyectos con perspectivas a largo plazo, con el compromiso

para cuidar a los consumidores proporcionándoles un mejor servicio

post venta, fomentando el crecimiento positivo a través de la

diversificación.

1.3.1 MISIÓN:

Ofrecer la mejor alternativa en climatización de espacios en un

ambiente ya sea residencial, comercial o industrial, usando equipos y

herramientas de calidad y el grupo de personal técnico calificado que

tenemos para cada proyecto.

1.3.2 VISIÓN:

Consolidar nuestro liderazgo a nivel nacional e introducirnos al

mercado, ofreciendo productos con calidad de exportación.

Página 7

1.4 ORGANIGRAMA

Director General

Departamento de

Administracion

Departamento de

Finanzas

Departamento de

Mercadotecnia

Departamento de

Proyectos

Dirección de

Obras

Página 8

1.4.1 DESCRIPCIÓN DE LAS ÁREAS:

Departamento de Administración

Es la persona encargada de la ejecución del plan de desarrollo,

controlando la organización de los empleados, proporcionando la

dirección de los servicios que se van a realizar. También analiza los

distintos planes y proyectos a futuro.

Departamento de Finanzas

Es el departamento más importante, en cual se toman las decisiones

que pueden afectar a la empresa. Donde se otorgan los recursos

financieros para algún proyecto, y si es conveniente para la empresa

invertir.

Departamento de Mercadotecnia

Identifica el medio de comunicación adecuado para realizar la

publicidad más apropiada en los servicios y productos de la empresa, lo

cual puede crear las oportunidades para nuevos clientes y tener más

ventas.

Departamento de Proyectos

Se encarga de la planeación y definición de los proyectos a desarrollar

a corto y largo plazo.

Dirección de Obra Se encarga del proceso de elaboración o

instalación de equipos fuera de la empresa

Página 9

1.5 DATOS DE LA EMPRESA

Climer S. A. de C.V

Telefonos: nextel 10417938, ID 52*51007*4 ó 52*51007*5

Dirección: Av. Yucatan No.20 Int. 603, Col. Roma. 06700 Del.

Cuauhtemoc, México D.F.

Ubicación:

Página 10

CAPÍTULO

II

Página 11

2. ANTECEDENTES DEL PROYECTO

2.1 PLANTEAMIENTO DEL PROBLEMA

Las páginas web se han convertido en un medio de comunicación para

la información más potente de toda la historia, sus continuas

actualizaciones, los temas que se desarrollan, permiten informarse de

manera rápida y confiable sobre una amplia gama de productos,

servicios y organizaciones a nivel local.

La pagina web de la empresa actualmente, no contiene elementos

importantes como son, un catalogo de productos, un logotipo innovador

y original, la tipografía del nombre y la incorporación de nuevos

productos. Se recopilara la información necesaria para llevar a cabo

esta actividad, logrando identificar a la empresa con un estilo original.

2.2 OBJETIVO DEL PROYECTO

Es importante rediseñar la Páginas Web de Clima y energia renovable

S.A. de C.V, por que será su herramienta de promoción, y su imagen,

además mostrara sus productos y servicios, y toda la información,

características y datos generales de la empresa.

2.3 OBJETIVO GENERAL

Actualizar, renovar y restructurar la página web de Clima y energia

renovable S.A. de C.V., esto permitira un mejor servicio al cliente, ya

que así podrá ver lo que ofrece la empresa y a la vez podrá darse a

conocer.

2.4 OBJETIVOS ESPECIFICOS

Diseñar el logotipo de la empresa.

Elaborar un catálogo de productos.

Rediseñar la pagina web

Página 12

2.5 JUSTIFICACIÓN:

Este proyecto se realizo con el fin de crear una imagen única, con un

aspecto innovador, exitoso, confiable y original de la empresa por medio

del internet, así los clientes podrán consultar en cualquier momento la

información actualizada de sus productos o servicios, ya que en la

actualidad toda empresa utiliza las páginas web, porque este es un

medio eficaz y competitivo. Es como una carta de presentación que se

ofrece a los clientes, y evita gastos innecesarios como la impresion de

catálogos.

Página 13

CAPÍTULO

III

Página 14

3. MARCO TEÓRICO

3.1 MEZCLA DE COMUNICACIONES DE MARKETING

Consiste en la combinación especifica de herramientas de publicidad,

promoción de ventas, relaciones publicas, ventas personales y

marketing directo que la empresa utiliza para alcanzar sus objetivos de

publicidad y marketing.

Implica identificar al publico meta y desarrollar un programa

promocional bien coordinado para despertar en el la respuesta

deseada, es común que las comunicaciones se concentren en superar

problemas urgentes de percepción, imagen o preferencia en el mercado

meta.

Publicidad: Cualquier forma pagada de representación y promoción no

personal acerca de ideas, bienes o servicios por un patrocinio.

Relaciones publicas: establecimiento de buenas relaciones con los

diversos públicos de una compañía mediante la obtención de publicidad

favorable, la creación de una buena imagen corporativa y el manejo o

bloqueo de rumores, relatos o sucesos desfavorables.

3.2 MARKETING MASIVO

Vender productos muy estandarizados a grandes cantidades de

clientes. Para ello, las empresas han desarrollado técnicas de

publicidad en los medios masivos de comunicación muy eficaces, para

apoyar sus estrategias de marketing.

Página 15

3.3 ENTORNO DE LA COMUNICACIÓN

A medida que se fragmentan los mercados, se están desarrollando

cada vez más programas de marketing dirigidos. Diseñados para

cultivar relaciones mas estrechas con los clientes en micromercados

definidos.

Las grandes mejoras en la tecnología de la información ayuda a seguir

mas de cerca las necesidades de los clientes, se cuenta con más

información que nunca, acerca de los consumidores tanto a nivel

individual como para el hogar, estas tambien proporcionan nuevos

métodos de comunicación para llegar a los segmentos de clientes más

pequeños mediante mensajes más personalizados.

3.4 MARKETING DIRECTO

Consiste en conexiones directas con consumidores cuidadosamente

elegidos, a menudo basados en una interacción personal. Con ayuda

de bases de datos detalladas, las compañías adaptan sus ofertas y

comunicaciones de marketing, a las necesidades de segmentación

estrechamente definidos o incluso de compradores individuales. Más

allá de construir la marca y establecer relaciones, los mercadólogos

directos buscan una respuesta directa, inmediata y medible por parte de

los consumidores.

3.5 FORMAS DE MARKETING DIRECTO

Incluyen las ventas personales, el marketing por correo directo, el

marketing por catálogo, el marketing por teléfono, el marketing por

televisión de respuesta directa (DRTV), el marketing en quioscos, las

nuevas tecnologías digitales de marketing directo y el marketing en

línea.

Página 16

3.5.1 ESQUEMA DE LAS FORMAS DEL MARKETING DIRECTO

Clientes

actuales

y

pontenciales

Marketing

por

catalogo

Marketing por

televisión

de respuesta

directa

Ventas

en persona

Nuevas

tecnologías

digitales

Marketing por

correo directo

Telemarketing Marketing en

quioscos

Marketing en

línea

Página 17

3.6 MARKETING POR CORREO DIRECTO

Consiste en enviar una oferta, anuncio, recordatorio u otro material a

una persona por medio de una dirección física o virtual específica. Con

el uso de listas de correo muy selectas, los mercadólogos directos

envían millones de piezas de correo cada año, como cartas, catálogos,

anuncios, folletos, muestras.

Por mucho el correo directo es el medio más grande para el marketing

directo, es adecuado para una comunicación directa y personalizada, ya

que permite una gran selectividad del mercado meta, puede

personalizarse, es flexible y sus resultados son fáciles de medir.

3.7 MARKETING POR CATÁLGO

Los avances tecnológicos, junto con el surgimiento del marketing uno a

uno, personalizado, han provocado grandes cambios en el marketing

por catálogo. Con la estampida hacia el internet, un número cada vez

mayor de catálogos son electrónicos.

Ha surgido una variedad de nuevos catálogos que solo existen en la

web y la mayor parte de los diseñadores de catálogos impresos han

añadido catálogos por internet a su mezcla de marketing.

Los catálogos en la web eliminan los costos de impresión y de envío ,

mientras que en un catálogo impreso el espacio está limitado, los

catálogos en línea pueden ofrecer una cantidad casi ilimitada de

mercancía.

Por último los catálogos en línea facilitan el comercio en tiempo real, es

posible añadir o eliminar productos y seis características según se

necesite, y los precios se pueden ajustar al instante para adaptarse a la

demanda.

Página 18

3.8 MARKETING POR TELÉFONO

Implica usar teléfono para vender directamente a los consumidores y

clientes de negocios. El telemarketing que se diseña y dirige de manera

apropiada ofrece muchos beneficios, entre los que destacan, compras

más cómodas y una mayor información acerca de los productos y

servicios.

Sin embargo, el gran crecimiento que ha tenido en los últimos años el

marketing por teléfono hacia afuera no solicitado, ha molestado a

muchos consumidores, quienes se quejan de las llamadas telefónicas

no deseadas que reciben casi a diario.

3.9 MARKETING POR TELEVISIÓN DE RESPUESTA DIRECTA

DRTV puede adoptar dos formas principales.

La primera es la publicidad televisiva de respuesta directa, los

vendedores directos transmiten anuncios por televisión generalmente

de 60 a 120 segundos de duración, que describen de modo convincente

un producto y ofrecen un número telefónico sin costo o un sitio web

para hacer los pedidos. Los televidentes a menudo encuentran

programas publicitarios de 30 minutos o más, llamados infomerciales,

de un solo producto.

La segunda son los canales de compra en casa, otra forma de

marketing por televisión de respuestas directas, son programas de

televisión o canales dedicados a la venta de bienes y servicios, algunos

canales de compras en casa transmiten las 24 horas del día.

3.10 MARKETING EN QUIOSCO

En contraste con las máquinas expendedoras que entregan productos,

en tiendas, aeropuertos, hoteles, campus universitarios y otros lugares.

En la actualidad, existen quioscos en todas partes, desde hoteles de

autoservicio y aparatos para registrase en las líneas aéreas, hasta

aparatos para hacer pedidos adentro de las tiendas que les permiten

solicitar mercancías que no se venden en ese local.

Página 19

3.11 MARKETING EN LÍNEA

Es la forma de marketing directo con mayor crecimiento. El uso

extendido de internet esta teniendo un gran impacto tanto en los

compradores como en los mercadólogos que los atienden. En esta

sección examinaremos los cambios que están teniendo lugar en la

estrategia y en la práctica del marketing para aprovechar las

tecnologías actuales de internet.

3.12 MARKETING E INTERNET

Gran parte de los negocios en el mundo en la actualidad se realizan a

través de redes digitales que conectan a las personas y a las

compañías. Internet, un inmenso sistema público de redes de

computadoras, conecta a usuarios de todos los tipos en todo el mundo

entre si y representa un depósito increíblemente grande de información.

Internet a cambiado mucho los conceptos que tiene los consumidores

de convivencia, velocidad, precio, información de productos y servicios.

Como resultado, a los mercadologos les ha proporcionado una forma

completamente nueva de crear valor para los clientes y establecer

relaciones entre ellos.

3.13 ÁREAS DEL MARKETING EN LÍNEA

Son las cuatro áreas principales del marketing en línea, que incluyen el

comercio de la empresa al consumidor (B2C), el comercio entre

negocios (B2B), el comercio entre consumidores (C2C) y el comercio

del cliente a la empresa (C2B).

Página 20

3.14 COMERCIO DE LA EMPRESA AL CONSUMIDOR

Las ventas en línea de bienes y servicios a los consumidores finales. En

la actualidad, los consumidores pueden comprar casi cualquier cosa por

internet, desde ropa, artículos de cocina y boletos de aerolíneas, hasta

computadoras y automóviles.

Los compradores en línea difieren de los consumidores tradicionales

fuera de internet de los métodos de compra que utilizan y en sus

respuestas al marketing. En el proceso de intercambio de internet, los

clientes inician y controlan el contacto. El marketing tradicional se dirige

a un público hasta cierto punto pasivo, en contraste con el marketing en

línea, requiere de nuevos métodos.

3.15 COMERCIO ENTRE NEGOCIOS

Los mercadólogos entre negocios utilizan sitios web, el correo

electrónico, catálogos de productos en línea, redes comerciales en línea

y otros recursos del internet para contactar nuevos clientes de

negocios, atender a los ya existentes de manera eficaz, y para lograr

compras más productivas y mejores precios.

La mayoría de los comerciantes entre negocios ahora ofrecen

información de productos, compras para los clientes y servicios de

apoyo al consumidor en línea. El simple hecho de vender sus productos

y servicios en línea, las compañías pueden utilizar la web para

establecer relaciones más sólidas con importantes clientes de

negocios.

3.16 COMERCIO ENTRE CONSUMIDORES

La comunicación en internet entre las partes interesadas en una gran

variedad de productos y asuntos. En algunos casos, internet constituye

un medio excelente para que los consumidores compren e intercambien

entre sí bienes o información.

En otros casos, el comercio entre consumidores implica intercambio de

información a través de foros de información que atraen a grupos

específicos con interéses especiales.

Página 21

3.17 COMERCIO DEL CONSUMIDOR A LA EMPRESA

Gracias al internet, los consumidores de hoy se comunican con mayor

facilidad con las organizaciones. La mayoría de las empresas ahora

invitan a los clientes actuales y potenciales enviar sugerencias y

preguntas a través de sus sitios web.

Los consumidores pueden buscar vendedores en internet, conocer sus

ofertas, iniciar compras y dar retroalimentación. Con el uso de la web,

los consumidores incluso dirigen sus transacciones con los negocios y

no a la inversa.

3.18 ESTABLECIMIENTO DE UNA PRESENCIA DE MARKETING

EN LINEA

De una forma u otra, la mayoría de las compañías tiene una presencia

en linea, y llevan a cabo el marketing en alguna de las posibilidades que

se presente, creando un sitio web, colocando anuncios y promociones

en linea, creando o participando en las redes sociales o utilizando el

correo electrónico.

Para la mayoría de las empresas, el primer paso para realizar marketing

electrónico consiste en crear un sitio web. Sin embargo, además de

establecer un sitio, los comerciantes deben diseñar un sitio atractivo y

encontrar formas para que los consumidores permanezcan y que lo

visiten con frecuencia. Los sitios web varían mucho respecto a su

propósito y a su contenido.

CORPORATIVO (DE MARCA)

Estos sitios están diseñados para lograr la disposición de los

consumidores, obtener su retroalimentación y complementar

otros canales de ventas, más que para vender los productos de

la compañía de manera directa.

Por lo general ofrecen una amplia variedad de información y

otras características, en un esfuerzo de responder las preguntas

de los clientes, establecer relaciones más cercanas con ellos y

generar un entusiasmo por la compañía o la marca.

Página 22

MARKETING (LINEA)

Estos sitios les permiten a los consumidores participar en una

interacción que los acerca a una compra directa a otro resultado

de marketing. El sitio ofrece una gran cantidad de información útil

y aplicaciones interactivas de venta, incluyendo descripciones

detalladas.

Crear un sitio web es una cosa, lograr que la gente lo visite es otra.

Para atraer a los visitantes, las compañías promocionan en forma activa

sus sitios web con publicidad impresa y de radio o televisión fuera del

internet, y mediante anuncios y vínculos en otros sitios.

Sin embargo los usuarios actuales de internet abandonan con rapidez

cualquier sitio web que no les sirve, la clave consiste en crear valores y

entusiasmo suficiente para lograr que los consumidores que entran al

sitio se queden.

Publicar anuncios o

promociones en

linea

Uso del

markentig en

linea

Crear redes

sociales en linea Uso del correo

electronico

Creación de un

sitio web

Página 23

3.19 COLOCACIÓN DE ANUNCIOS Y PROMOCIONES EN LÍNEA

A medida que los consumidores pasan cada vez mas tiempo en

internet, las compañías están invirtiendo sus recursos de marketing en:

La publicidad en línea

Se ha convertido en un medio de comunicación importante. Las

principales formas de publicidad en linea incluyen los mensajes

relacionados con la búsqueda, los desplegados y los anuncios

clasificados.

Marketing viral

Implica crear un sitio, un video, un correo electrónico, un mensaje

para teléfono celular, publicidad u otro evento de marketing que sea

tan contagioso que los clientes deseen pasarlos a sus amigos.

Debido a que los clientes transmiten el mensaje o la promoción a los

demás, el marketing viral resulta muy económico.

3.20 USOS DEL CORREO ELECTRÓNICO

Es una importante herramienta de marketing en línea con un gran

crecimiento. Cuando se utilizan de forma adecuada, el correo

electrónico es un medio decisivo para el marketing directo, la mayoría

de los grandes mercadólogos lo utilizan de forma habitual y con gran

éxito, sin embargo el creciente uso del marketing por correo electrónico

también tiene su lado oscuro.

3.21 CORREO NO DESEADO

Mensajes comerciales por correo electrónico que saturan nuestras

bandejas de entrada. Para resolver estos problemas, la mayoría de los

mercadólogos honestos ahora practican el marketing por correo

electrónico basado en la autorización, y solo envían anuncios a los

clientes que los aceptan.

Página 24

3.22 LOGOTIPO

El logotipo sirve para crear una primera impresión positiva, para que los

consumidores te identifiquen, es la necesidad de respaldar el producto

o el servicio. La creación de un símbolo compuesto por todos los

valores, letras, símbolos, abreviaturas, etc, representativo puede

convertirse en una herramienta invaluable, puede lograr que un

logotipo se vuelva un icónico inolvidable con una composición

tipográfica que las personas identifiquen y asocien rápidamente con la

empresa.

Este deberá estar presente ya sea en cartas membretadas, facturas, tarjetas personales, publicidades, etc. Su empleo se puede extender a uniformes, embalajes, etiquetado de productos y anuncios de prensa.

Las organizaciones comunican y distinguen sus productos o servicios gracias al logotipo; otorgándole beneficios tanto a los propietarios como a los consumidores; para algunos le está dando un valor agregado a sus productos y servicios, mientras que a otros les indica calidad o valor. Características de un logotipo

Icónicos agrupados.

Mensaje breve y que correspondiente ala empresa.

Los gráficos son en diferentes formas y colores para darle una

identidad.

3.22.1 COLORES PARA LOS LOGOTIPOS

Está comprobado que los colores de un logotipo influyen considerablemente en las personas y de diversas maneras según la pertenencia cultural, la edad, el género y el hábitat, entro otros factores. Para esto es considerable:

Utilisar pocos colores en el diseño del logo.

Los colores que se elijan deben resaltar las formas del logo.

Deben combinarse de manera tal que llamen la atención del público.

Una buena combinación puede ser la de un color vibrante con un color no vibrante, ya que los contrastes son una excelente manera de provocar un gran impacto visual.

Los colores elegidos deben tener una combinación agradable y confortable, Seleccionando los colores adecuados, de acuerdo a la personalidad de la empresa.

Página 25

3.23 PSICOLOGÍA DE COLORES

Azul: Genera una sensación de confianza, seguridad, dignidad, honestidad y autoridad.

Azul claro: Produce un efecto de calma, paz, limpieza y frescura.

Blanco: el color blanco está culturalmente vinculado a la pureza, la elegancia, la vitalidad, la confianza y la delicadeza. Despierta una sensación de calma, paz y energía.

Negro: Implica seriedad, formalidad, elegancia, autoridad y distinción.

Amarillo: Este color está vinculado al brillo del sol, a la luz y al calor. También se asocia al optimismo y al descubrimiento.

Verde: Se vincula con la naturaleza, con la salud, la tranquilidad, la frescura y el movimiento.

Rojo: Se relaciona con la agresividad, la fuerza, la vitalidad, la espontaneidad, la pasión y la valentía.

Naranja: Este color genera una sensación de calidez, alegría, energía, diversión, riesgo y exuberancia.

Rosa: Expresa inocencia, suavidad, calidez. Púrpura: Los colores en la gama del violeta y del púrpura se relacionan con la sofisticación, la espiritualidad, el misterio, el lujo y la nobleza.

Página 26

3.24 TIPOGRAFIÁ

En los casos de logos basados sólo en texto, las formas de las letras también son fundamentales. Cuando la palabra (el nombre de la marca o su forma abreviada) se articula con un ícono, la fuente suele seguir el mismo sentido que la imagen. La tipografía se elige para generar un contraste. Un ejemplo claro es Puma, expresan solidez y el ícono movimiento.

A través de la tipografía, el cuerpo, el estilo, la inclinación y el color se debe representar la esencia de una compañía. Es importante mantener siempre la legibilidad en todos los tamaños.

Climer

Climer

Climer

Página 27

3.25 PAGINAS WEB

Una página web o página electrónica, es un documento o información

electrónica capaz de contener texto, sonido, vídeo, programas, enlaces,

imágenes, y muchas otras cosas, que puede ser accedida mediante

un navegador. Esta información se encuentra generalmente en

formato HTML o XHTML, y puede proporcionar acceso a otras páginas

web mediante enlaces.

Las páginas web frecuentemente también incluyen otros recursos,

como ser hojas de estilo en cascada (guiones), imágenes

digitales, aplicaciones embebidas para así permitir interactividad, entre

otros.

Las páginas web pueden estar almacenadas en un equipo local o

un servidor web remoto. El servidor web puede restringir el acceso

únicamente a redes privadas, por ejemplo, en una intranet corporativa.

El acceso a las páginas web es realizado mediante una transferencia

desde servidores, utilizando el protocolo de transferencia de

hipertexto (HTTP).

El contenido de la página puede ser predeterminado como páginas web

estáticas o generado al momento de visualizarla o solicitarla a un

servidor de páginas dinámicas. Las páginas dinámicas que se generan

al momento de la visualización, se especifican a través de

algún lenguaje interpretado, generalmente JavaScript, y la aplicación

encargada de visualizar el contenido, es la que realmente debe

generarlo. Las páginas dinámicas que se generan, al ser solicitadas,

son creadas por una aplicación en el servidor web que alberga las

mismas.

Respecto a la estructura de las páginas web, algunos organismos,

suelen establecer directivas con la intención de normalizar el diseño,

para así facilitar y simplificar la visualización e interpretación del

contenido. Una página web es en esencia una tarjeta de presentación

digital, ya sea para empresas, organizaciones, o personas, así como

una tarjeta de presentación de ideas, de informaciones y de teorías.

Así mismo, la nueva tendencia orienta a que las páginas web no sean

sólo atractivas para los internautas, sino también preparadas para los

buscadores a través del código fuente.

Página 28

Es importante considerar que cada página web al realizarla consta de

una serie de pasos, es necesario dividirla en cinco áreas que son:

Pruebas de diseño y contenidos

Pruebas de funcionalidades y operación

Pruebas de carga

Pruebas de seguridad

Pruebas de respaldo

3.26 PRUEBAS DE DISEÑO Y CONTENIDOS

Las actividades de esta etapa consisten en hacer revisiones precisas de

la información más importante que se desea agregar acerca de la

empresa, ya sea de los productos o servicios.

3.26.1 PRUEBAS DE FUNCIONALIDADES Y OPERACIÓN

Se refiere a hacer chequeos respecto a las funcionalidades y

aplicaciones que ofrece la página web, ya sea de aplicaciones simples

como formularios, hasta más complejas.

3.26.2 PRUEBAS DE CARGA

Es la capacidad máxima que tiene un servidor web (hardware y

software), para atender a un conjunto de usuarios de manera

simultánea, por ello las actividades de esta etapa tienen relación, de tal

manera que el funcionamiento que tendrá el servidor del sitio web

fucione cuando este en plena operación.

3.26.3 PRUEBAS DE SEGURIDAD

Las actividades que se pueden realizar para hacer las pruebas de

seguridad son diversas y se orientan a varios ámbitos como:

Manejo de DNS

Protección de estructura interna del sitio web

Canales seguros

Protección de programas

Hostingers.

Página 29

3.26.4 MANEJO DE DNS

Es un sistema que se asocia la información con el dominio, es cuando

se introduce una ruta URL en nuestro navegador de internet. Cuando se

introduce esta ruta, dicha información es enviada a un servidor DNS y

lo que hace es determinar en qué lugar se encuentra alojada la página

web y es conectada.

3.26.5 PROTECCIÓN DE ESTRUCTURA INTERNA DEL SITIO WEB

Los datos registrados a través de los formularios proporcionados en el

sitio web son recabados con la finalidad de facilitar la prestación de

información y servicios.

3.26.6 PRUEBAS DE RESPALDO

Es copiar el contenido completo, (datos, programación, imágenes, etc.)

a un medio que sea seguro y que permita la recuperación rápida y

eficaz.

3.27 HOSTINGERS

Para la pagina web los principales tipos de alojamientos son.

Compartido Servidor virtual privado Servidor dedicado Housing

3.28 DISEÑO

El diseño web, es la planificación de páginas o sitios del internet, se le

considera dentro del diseño multimedio e involucra la utilización de

diversos elementos, así como programas especializados y

conocimiento de protocolos de red.

Esto es una actividad de gran importancia en nuestros tiempos, ya que

gracias a internet cualquiera tiene acceso a la información en esta, y

otorga a sus propietarios la mayor publicidad conocida.

Página 30

3.29 NAVEGADOR

Es el programa que se utiliza para acceder a los contenidos de Internet.

Debe ser capaz de comunicarse con un servidor y comprender el

lenguaje de todas las herramientas que manejan la información de

Web. Los navegadores más populares son Internet Explorer, Mozilla

Firefox, NetScape, Opera, Safari, etc.

3.30 HTTP (HYPERTEXT TRANSFER PROTOCOL)

Es el protocolo de comunicación utilizado para transmitir las peticiones

y archivos a través de Internet entre el servidor y el navegador. El

protocolo http:// se indica en el inicio de la dirección. Si no se teclea

este prefijo, el navegador lo añade de forma automática.

3.31 URL (UNIVERSAL RESOURCE LOCATOR)

Es la dirección donde se encuentra un recurso en Internet. Ejemplo:

http://www.google.es. Si no se indica página html, el servidor enviará la

página índice (index) o bien por defecto (default). Durante la navegación

por Internet.

El usuario, situado en el equipo cliente, teclea la URL en la

casilla dirección del navegador y pulsa la tecla <enter>.

La petición se dirige a los servidores DNS que traducen esta

URL a una dirección IP. Por ejemplo: www.cnice.mec.es ->

195.53.123.85. Es posible situar en el navegador esta dirección

aunque resulte más complicada e ininteligible.

La petición llega al servidor que tiene esa IP.

El servidor devuelve la página solicitada.

El archivo HTML y los multimedia referenciados se almacenan en

la carpeta caché del navegador (disco duro del equipo cliente).

Cuando se han descargado estos activos entonces el usuario

visualiza la página y todos sus elementos.

Página 31

3.32 ENCABEZADO

De todas las partes de la estructura del diseño web, el encabezado es

la que mayor tendencia tiene a repetirse entre páginas de un mismo

sitio. Aún cuando el sitio tenga grandes diferencias en estructura y

contenido entre sus páginas,

El encabezado ocupa todo el ancho de la página en la parte superior

de la misma. A la izquierda del encabezado suele ubicarse

el logotipo del sitio, que ocupa un área importante dentro del mismo,

aunque suelen haber diferencias importantes de un sitio a otro. Esta

imagen debe tener un enlace a la página principal del sitio.

Desde el final del logotipo, ocupando el centro y la zona derecha

del encabezado, frecuentemente se sitúan una serie de franjas de

diferentes grosores. En la parte superior, se encuentran

algunos enlaces generales de la página, como acceso a usuarios

registrados, registros de usuarios nuevos, acceso a perfiles, salidas,

etc., así como ayudas y buscadores internos. La zona más ancha

generalmente se encuentra ocupada por el título de la página, nombre

de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar los links de

navegación y las etiquetas de navegación, uno de los elementos más

importantes a la hora de ayudar a los usuarios a encontrar las páginas

componentes del sitio web. Dependiendo de la complejidad del sitio,

puede encontrarse solo uno de estos sistemas de navegación o los dos;

por ejemplo, cuando el sitio está dividido en secciones, uno de ellos

está destinado a estas divisiones, mientras que el otro sirve para

navegar dentro de cada sección, aunque pueden emplearse otros

métodos de clasificación de los contenidos y por consiguiente, otros

métodos de organizar la navegación interna.

Página 32

3.33 BANNER

Un banner ( banderola) es un formato publicitario en Internet. Esta

forma de publicidad online consiste en incluir una pieza

publicitaria dentro de una página web. Prácticamente en la totalidad de

los casos, su objetivo es atraer tráfico hacia el sitio web del anunciante

que paga por su inclusión.

Los banners se crean con imágenes (GIF, JPEG o PNG), o con

animaciones creadas a partir de tecnologías como Java, Adobe

Shockwave y, fundamentalmente, Flash. Están diseñados con la

intención de llamar la atención, resaltar notorios y comunicar el mensaje

deseado. Por lo tanto, estos banners no necesariamente mantienen la

línea gráfica del sitio.

Cualquier sitio web es susceptible de incluir toda clase de banners y

otros formatos publicitarios, aunque en la mayoría de los casos, son los

sitios con contenidos de mayor interés o con grandes volúmenes de

tráfico los que atraen las mayores inversiones de los anunciantes.

Los banner originalmente se crearon para dirigir público entre distintos

sitios web; pero, por su bajo CTR, muchas compañías lo usan como

publicidad equivalente a una valla publicitaria común, pero en este caso

en un sitio web.

En vez de mostrar banners con solamente referencia sobre un servicio

o artículo, se coloca la imagen de la página web o compañía objetivo.

Dado que la mayoría de los usuarios los miran aunque no hagan clic,

estos banners tienen bastante impacto y se utilizan como una

herramienta de marketing. Un caso típico de esta orientación

de banners en la página principal de yahoo, donde sus banners suelen

ser muy vistosos por su gran cantidad de animaciones.

Página 33

3.34 EXPLORACIÓN DEL SITIO (MENU)

Es la instalación de un buscador interno. También es aquí donde los

usuarios buscan este tipo de elementos, ya que convencionalmente

donde la mayoría de los que ingresan a la pagina los ubican por las

acciones y enlaces que proporcionan, aunque en algunos casos, puede

encontrarse en la parte superior de alguna de las columnas laterales.

3.35 COLUMNAS DE EXPLORACION

El cuerpo principal de una página web, en el diseño moderno se le

encuentra dividido. Una de estas divisiones, consiste una o

dos columnas de exploración. Este tipo de columnas, se le emplea para

ubicar algunos elementos importantes de la página, como enlaces

externos,navegación interna, publicidad, informaciones adicionales y

contenidos secundarios.

Cuando se emplea una única columna, es indistinto para los usuarios,

de acuerdo a estudios sobre el comportamiento de usuarios de sitios

web, ya que su ubicación no plantea dificultad alguna.

En el caso de que el diseño requiera el empleo de dos columnas,

pueden ubicarse una a cada lado del cuerpo principal de la página o

ambas a uno de los lados, siendo también indiferente en este caso si se

ubican a la derecha o a la izquierda del contenido principal.

Los usuarios, dado el uso continuo de estos elementos para esta

función, suelen buscar la información de contacto en este tipo de

columnas, por lo que resulta uno de los mejores lugares para ubicar los

datos de contacto

Página 34

3.36 ÁREA DE CONTENIDO

Esta zona del diseño de la página, es la que menos reglas tiene

respecto de su diseño, ya que el hecho de que en ella se encuentren

los contenidos principales de la página, el diseño depende en gran

medida de los mismos, sobre todo en lo que respecta al tipo de

contenidos, la cantidad, la disposición que se desea emplear, etc. Sin

embargo, hay que considerar algunas reglas importantes.

En la parte superior de esta área se debe emplazar el título entre

etiquetas, ya que este título tiene las palabras clave que los usuarios

luego emplearán en sus búsquedas y será de gran importancia para

que los buscadores indexen la página en forma correcta. Además, los

usuarios buscarán en este punto el título de lo que se expone, siendo

de extrema importancia que el mismo sepa a qué contenidos está

accediendo.

En caso de que los contenidos sean muchos y haya que hacer

desplazamientos importantes hacia abajo, es de mucha utilidad colocar

al final del área algún tipo de salto al inicio, para evitar que el usuario

deba realizar grandes desplazamientos.

En el caso de que se empleen varias páginas para albergar contenidos

relacionados, tanto al inicio de la página como al final de la misma es de

gran utilidad colocar un navegador de páginas (del tipo Página anterior

1 – 2 – 3 … Página siguiente) para que la navegabilidad entre ellas sea

sencilla.

Página 35

3.37 HIPERVÍNCULOS

Es una conexión desde una página del World Wide Web a otra

ubicación. Normalmente, los exploradores de Web subrayan los

hipervínculos de texto y lo muestran en un determinado color. Los

hipervínculos de imágenes son invisibles. No obstante, los usuarios

saben cuándo el puntero está sobre un hipervínculo porque cambia su

apariencia, normalmente a una mano que señala algo.

El destino del hipervínculo suele ser otra página Web, pero también

puede ser una dirección de correo electrónico, un programa, un archivo

(imagen, sonido, video, comprimido, texto).

Cuando un usuario hace clic en un hipervínculo con una página, el

explorador de Web obtiene la página desde el servidor correcto y la

presenta. Cuando un usuario hace clic en un hipervínculo con otro tipo

de archivo, el explorador de Web obtiene el archivo del servidor y lo

abre en un programa asociado.

3.38 HOJAS DE ESTILO

Son conjuntos de instrucciones, en forma de anexos, que se asocian a

los archivos de texto y ocupan los aspectos de formato y de

presentación de los contenidos: tipo, fuente y tamaño de letras,

alineación y posicionamiento del texto, colores y fondos, etc. Las hojas

de estilo permiten liberar la composición del texto de los aspectos

visuales y favorecen que se estructure y anote mediante códigos que

permiten un tratamiento más eficaz de los contenidos.

El uso adecuado de las hojas de estilo es uno de los aspectos clave de

la edición digital. Las hojas de estilo son una herramienta de gran

utilidad de los programas de tratamiento de textos, como Microsoft

Word. Asimismo, constituyen una parte esencial de los lenguajes de

marcas para edición digital.

3.39 PIE DE PÁGINA

Finalmente, debajo de todas las secciones, se coloca una faja

horizontal en cuyo interior se colocan algunos elementos importantes,

como el autor, acceso a diversas políticas del sitio y asuntos legales,

datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.

Página 36

3.40 HTML (HYPERTEXT MARKUP LANGUAGE)

Es el lenguaje en el que se diseñan las páginas que se visualizan a

través del navegador. Este lenguaje se basa en etiquetas (instrucciones

que le dicen al navegador como deben mostrarse) y atributos

(parámetros que dan valor a la etiqueta). Una página HTML contiene

texto con un cierto formato y referencias a archivos externos que

contienen imágenes, sonidos, animaciones, etc.

3.41 ARCHIVO HTML

El lenguaje HTML se utiliza para definir un documento que se

visualizará a través del navegador. Este documento se guarda en un

archivo con extensión .htm ó .html

Básicamente los documentos escritos en HTML constan de texto y

etiquetas. Las etiquetas permiten definir el formato del texto, el título

que mostrará en la barra de título del navegador, los elementos

multimedia que aparecerán incrustados en el documento pero que se

almacenan en archivos externos, etc.

Todo documento HTML tiene la siguiente estructura: cabecera y cuerpo

del documento. Las tres etiquetas que describen su estructura general

son:

<html>: indica que se inicia el documento.

<head>: incluye el título de la página (<title>) que se muestra en

la barra de título del navegador.

<body>: contiene la información visible.

Página 37

3.42 PIXEL

Ampliando lo suficiente una imagen digital (zoom) en la pantalla de

una computadora, pueden observarse los píxeles que componen la

imagen. Los píxeles son los puntos de color (siendo la escala de grises

una gama de color monocromática). Las imágenes se forman como una

sucesión de píxeles.

La sucesión marca la coherencia de la información presentada, siendo

su conjunto una matriz coherente de información para el uso digital. El

área donde se proyectan estas matrices suele ser rectangular. La

representación del píxel en pantalla, al punto de ser accesible a la vista

por unidad, forma un área homogénea en cuanto a la variación del color

y densidad por pulgada, siendo esta variación nula, y definiendo cada

punto en base a la densidad, en lo referente al área.

3.43 ADOBE MASTER COLLECTION CS6

Adobe CS es una suite de distintas aplicaciones en forma de talleres y

estudios dotados de herramientas y funciones altamente profesionales

creada y producida por Adobe Systems y que están dirigidas a la

publicación impresa, publicación web, postproducción de video y

dispositivos móviles.

Adobe Creative Suite nace del exitoso intento de la casa Adobe de unir

todos sus programas profesionales, los cuales antes solo podían

adquirirse individualmente en diferentes conjuntos de utilidades

profesionales que se adecúen al tipo de usuario. Esta ingeniosa unión

de sus productos en conjuntos ha dado muy buenos resultados para

Adobe en los últimos años, no obstante, la compañía sigue vendiendo

sus productos también individualmente.

La aplicación de Adobe Creative Suite se ve, más notoriamente, en

agencias publicitarias y editoriales de muy alto y reconocido prestigio.

En abril de 2013, fue sucedido por Adobe Creative Cloud.

Página 38

3.44 ADOBE DREAMWEAVER

Es una aplicación en forma de estudio (basada en la forma de estudio

de Adobe Flash) que está destinada a la construcción, diseño y edición

de sitios, vídeos y aplicaciones Web basados en estándares. Creado

inicialmente por Macromedia(actualmente producido por Adobe

Systems) es uno de los programas más utilizados en el sector del

diseño y la programación web, por sus funcionalidades, su integración

con otras herramientas como Adobe Flash y, recientemente, por su

soporte de los estándares del World Wide Web Consortium.

3.45 ADOBE FLASH PROFESSIONAL

Se trata de una aplicación de creación y manipulación de gráficos

vectoriales con posibilidades de manejo de código mediante, Flash es

un estudio de animación que trabaja sobre "fotogramas" y está

destinado a la producción y entrega de contenido interactivo para

diferentes audiencias de todo el mundo sin importar la plataforma. Se

usa sobre animaciones publicitarias, reproducción de vídeos

( YouTube).

Los archivos reproducibles de Adobe Flash, que tienen generalmente

la extensión de archivo SWF, pueden aparecer en una página web para

ser vistos en un navegador web, o pueden ser reproducidos

independientemente por un reproductor Flash. Los archivos de Flash

aparecen muy a menudo como animaciones en sitios web multimedia.

Son también ampliamente utilizados como anuncios en la web.

3.46 ADOBE ILLUSTRATOR

Es un editor de gráficos vectoriales en forma de taller de arte que

trabaja sobre un tablero de dibujo, conocido como mesa de trabajo y

está destinado a la creación artística de dibujo y pintura para ilustración

(ilustración como rama del arte digital aplicado a la ilustración técnica o

el diseño gráfico, entre otros.

Tiene como función única y primordial la creación de material gráfico-

ilustrativo altamente profesional basándose para ello en la producción

de objetos matemáticos denominados vectores. La extensión de sus

archivos es .AI (Adobe Illustrator).

Página 39

3.47 ADOBE FIREWORKS

Es un editor de gráficos vectoriales y mapas de bits, el programa tiene

la capacidad de integrarse con otros productos de Adobe tales como

el Dreamweaver o el Flash.

Página 40

CAPÍTULO

IV

Página 41

4. METODOLOGÍA

Diseño del

logotipo

Rediseño de la

página Web

Diseño del

catálogo

Nombre de la empresa

Recopilación de información

de la empresa

Diseño de imágenes

Estructura del logotipo

Percepción de colores

Programas de adobe

utilizados (Photoshop e

illustrator)

Información y

características de la

empresa

Objetivo de la página

web

Target

Mapa de sitio

Templates (bocetos)

Elección de template

Diseño del sitio web

Liberación

Hosting

Características de los

productos

Imágenes

Programas de adobe

utilizados (flash player y

Dreamweaver)

Funcionamiento en el

navegador

Página 42

4.1 METODOLOGIA

Para este proyecto, lo primero que se hizo fue desarrollar cada

uno de los elementos que forman parte del sitio web, se

presentan a continuación:

1) Diseño del logotipo: se rediseño para que fuera un logotipo

único, original para la empresa y presentable, dando una

perspectiva diferente con los colores y en la imágenes que se

utilizaron, con un nombre sencillo y fácil de recordar.

2) Rediseño de la página web: se rediseño la Páginas Web de

Climer porque, será su herramienta de promoción, y su

imagen, además mostrara sus productos, servicios,

características y la información necesaria de la empresa.

3) Diseño del catálogo: se diseñó un catálogo electrónico para

que los clientes actuales y potenciales puedan tener

conocimiento de lo que ofrece la empresa, ya que el catálogo

anterior no proporcionaba las características necesarias.

4.2 CONOCIMIENTO DE LA EMPRESA

Para desarrollar la página web de “Clima y energía renovable S.A. de

C.V.”, se inicio con la recopilación de la información actual del sitio

web que tiene la empresa, se pretende rescatar lo más indispensable, y

de esa manera iniciar el diseño de la misma.

4.2.1 IMAGEN

La mayor prioridad de Clima y energía renovable S.A. de C.V. es dar

el mejor trato a sus clientes con la responsabilidad dentro y fuera de la

empresa, ofreciendo lo más innovador en equipos de aire

acondicionado, extracción y ahora con su nueva incorporación de

productos en paneles solares, los mantenimientos que ofrece dan

excelentes resultados y tener como base la contribución en mejorar su

calidad.

Página 43

4.2.2 PRODUCTOS

Los productos que ofrece y a los cuales realiza los manetnimientos, son

los siguientes:

4.2.2.1 AIRE ACONDICIONADO

Los equipos de aire acondicionado que maneja la empresa son para las

industrias y casas particulares, como los que se mencionan a

continuación

Tipos de equipos:

Equipo Mini Split Equipos de velocidad variable Equipos divididos Unidad Fan- coil Unidad paquete Unidad Manejadora Equipos Evaporativos Equipos Chillers Portátiles

4.2.2.2. EQUIPOS DE EXTRACIÓN

Es un sistema de ventilación para industrias y residencias, con grandes capacidades, ahorrativos de energia y precios accesibles, para estos productos se presentan a soler y palau, ya que son de excelente calidad. Los productos que maneja son:

Extractor de baño

Ventilador centrifugado

Extractor axial

Enfriador evaporativo

Extrarto alabe

Extractor de tejado

Página 44

4.2.2.3 PANELES SOLARES:

Se ofrecen los mejores equipos innovadores en tecnología, la

oportunidad de obtener energía útil, su aprovechamiento tiene menores

impactos ambientales que el de las fuentes convencionales y poseen el

potencial para satisfacer todas las necesidades. Los tipos de paneles

que usa son:

Casas de Campo

Sistema Solar para servicio de una residencia y sistema de bombeo en pozo profundo aislado.

Alumbrado Público

Sistemas de Alumbrado público de todo tipo

Proveedor Científico

Sistema Solar interconectado con respaldo en banco de baterías.

4.3 OBJETIVO DE LA PÁGINA WEB

Actualizar, renovar y dar una perspectiva original a la página web de

Clima y energía renovable S.A. de C.V., ya que un sitio web actúa

como un vendedor para la empresa y representa la forma más directa

de llegar a los consumidores e interactuar con ellos.

4.4 TARGET

El mercado meta de Clima y energía renovable S.A. de C.V. va

dirigido a viviendas particulares y todas las industrias, es decir, para

familias o corporativos, que deseen tener un ambiente fresco para las

temporadas de altas temperaturas.

4.5 REDISEÑO DEL LOGOTIPO

El logotipo que se utiliza actualmente en la empresa se rediseñara; ya

que no cumple con el propósito de ser funcional y efectivo, la imagen

que quiere dar la empresa es que sea innovador y original, y que

pueda identifique rápidamente con los productos o servicios

Página 45

Logo actual de la empresa

Para llevar a cabo el cambio se presentaron 5 propuestas, las que se mencionan a continuación:

4.5.1. PROPUESTA NÚMERO (1)

Este logotipo se hizo de manera que no perdiera el mismo estilo que tenía antes, es por eso que se dejó el planeta, que da a entender el medio ambiente, el nombre fue modificado y abreviado a “Climer” dentro de una nube.

Se le cambio el diseño del planeta agregándole una sombra de color amarillo y alrededor triángulos naranjas, tratando de combinar el sol y el planeta a la vez, el tipo de letra que se utilizo fue; magneto de un tamaño de fuente de 50 en la letra (c) y un tamaño de 20 para (Climer), y se aplicó un fondo color verde degradado con blanco.

Página 46

4.5.2 PROPUESTA NÚMERO (2)

Este logotipo se diseño de una manera muy diferente al original, porque es mas creativo, y representa un panel solar, ya que es, a lo que se dedica la empresa.

Esta formado por un sol amarillo a la mitad, por la mitad de abajo se coloco un panel solar con lineas blancas y el fondo azul, dentro de el panel se inserto el nombre de la empresa, con el tipo de letra magneto (climer) en un tamaño de (50) con un color blanco y con un fondo

degradado en verde con blanco.

4.5.3 PROPUESTA NÚMERO (3)

Se diseñó este logotipo más formal y sencillo, pero con una buena presentación para la empresa, para que sea más fácil de identificar.

En esta propuesta se le cambio al logotipo el color de la letra por un azul, ya que es un color que produce paz, limpieza y frescura. En la letra (c) se colocó una hélice de un ventilador y en un extremo un panel solar de color azul, y en la parte inferior el nombre completó de la empresa en color verde, se decidió este color porque se relaciona con la naturaleza, salud, frescura y movimiento, de acuerdo con la empresa.

4.5.4

Página 47

PROPUESTA NÚMERO (4)

En este logotipo no se hicieron muchos cambios, con respecto al anterior, pero se quitó en la letra (c) la hélice, por lo que se dejó el mismo tipo de letra, y en la letra (i) se puso un ventilador adornando el punto de la letra y se cambió a un color naranja claro que proporciona alegría, energía, diversión, riesgo y exuberancia.

El panel solar también fue cambiado a color naranja, el nombre de la empresa se siguió considerando en color verde.

Página 48

4.5.5 PROPUESTA NÚMERO (5)

El logotipo que se presenta a continuación, fué el elegido por la

empresa, ya que se distingue entre los anteriores, por lo cual es el que

representara a “Clima y energía renovable S.A. de C.V.”

El diseño del logo se hizo más formal, ejecutivo y presentable, por lo

que el nombre Climer se consideró en un color azul, porque es muy

adecuado para presentar productos relacionados con la limpieza

(personal, hogar o industrial), para promocionar productos de alta

tecnología, al contrario de los colores emocionalmente calientes como

rojo, naranja y amarillo; el azul es un color frío ligado a la inteligencia y

la consciencia. En el punto de la letra (i) se modificó y se colocó un

copo de nieve que, consiste en la precipitación de

pequeños cristales de hielo, dando un diseño diferente.

Posteriormente al lado derecho del nombre, se colocó un panel solar en

color naranja dándole alegría y que se asocia con el sol brillante.

En la parte inferior se colocó el nombre completo de “Clima y energía renovable S.A de C.V”, en un color verde asociado a la naturaleza, es ideal para promocionar productos del aire o productos ecológicos.

Página 49

4.6 MAPA DEL SITIO

En este punto se explica cómo planificar y organizar el proyecto

del desarrollo del sitio web, ya que se recibieron ideas y

sugerencias respecto del sitio que se va construir.

Una vez con toda la información recolectada, se hará un mapa

de sitio donde se le incluirá todo el contenido de la página.

4.6.1 ELABORACIÓN DEL MENÚ (BOTONES DEL SITIO)

1. Para el desarrollo del menú se utilizara el programa Adobe Flash

cs6, es el adecuado para darle las acciones necesarias a cada

botón.

2. Una vez en Flash, hay un menú en la parte superior, como son archivo, edición, ver, insertar, modificar, texto, comandos, control, depurar, ventana, ayuda, en la parte izquierda se encuentra la barra de herramientas. Como se muestra a continuación:

INICIO

AIRE

ACONDICIONAD

O

MANTENIMIENTO PANELES EXTRACCIÓN CONTACTO

Página 50

3. Se tiene que dar las medidas de acuerdo a la página como son

en altura y anchura, sobre el lienzo de trabajo se dibujara un

rectangulo de color verde sólido.

Página 51

4. Se utiliza la opción de herramienta de texto, para designar el

nombre a los botones, el tipo de letra es Arial Rounded MT Bold,

el tamaño de letra 18 pt, en color negro, todos estos cuadros de

textos se alinearan.

5. Con ayuda de herramienta de línea se dividirá el rectángulo,

seleccionando la proporción del cuadro dividido y el texto, se le

dará la función de botón.

Página 52

6. Se le da doble clic para entrar a la función del botón, una vez

dentro se le agregan tres fotogramas más, se muestran en la

parte superior el aumento de fotogramas tales como sobre,

Presionar y zona, en el fotograma sobre se elige el texto y se

cambia el color ha blanco, cuando el cursor pase por encima de

las letras están cambiaran del color negro a blanco.

7. Después de darles la función a cada botón se presiona “control +

enter”, se podrá ver las acciones que genera cada boton.

Página 53

4.7 ELEMENTOS DE LOS SISTEMAS DE NAVEGACIÓN

Entre los elementos más relevantes que conforman el sistema de

navegación se cuentan los siguientes:

Menú general: siempre presente en todo el sitio, permite el

acceso a cada una de las áreas del sitio.

Pie de página: en la parte inferior de la página, ubica el nombre

de la empresa, teléfonos, dirección física y del correo electrónico.

Rutas de acceso: listado que apare en la parte superior de cada

página y que muestra el contenido, cada una de ellas debe de

tener un enlace, para acceder al área de la cual depende.

Botón home: para ir a la portada

Botón mapa del sitio: para ver el mapa del sitio web

Botón contacto: para contactar al encargado de la empresa

Botón productos: listado de los productos o servicios con los

cuales cuenta la empresa

Página 54

4.8 TEMPLATES (BOCETOS) Permite el desarrollo de sitios web de acuerdo a los comportamientos

que se desean, se caracteriza por la estructura dentro de ciertas

actividades en los diseños, de forma que todos o parte de estos son

definidos, sin la necesidad de tener que utilizar códigos, como se

presenta acontinuacion:

1. Para el desarrollo de la página se utilizará el programa

Macromedia, ya que es el adecuado para este tipo de diseño.

2. Una vez entrado en Dreamweaver, hay una serie de pestañas

en la parte superior, como son: Común, Disposición, Texto, Tablas, Marcos, Formularios, Plantillas, Caracteres, Media, Head, Script y aplicaciones, se le dará clic en disposición.

Página 55

3. Una vez hecho clic en la pestaña de disposición se encontrarán con dos opciones, una en dibujar tabla de disposición y la otra en dibujar celdas de disposición. Se trazara un cuadro con el lienzo blanco. Esta tabla tiene sus bordes de color verde, las medidas de estas tablas son de 1,348 pixeles de ancho y 919 pixeles de alto, ya que estas son las medidas prolongadas para que la página quede bien en la pantalla al verla.

4. Después de hacer la tabla de disposición, hacer clic en

Dibujar celdas de disposición, con esta opción se

divide la tabla de disposición en cuantas partes se

deseen. Se traza un cuadrado dentro de la tabla de

disposición.

Página 56

5. Después de haber distribuidos bien las celdas dentro de la tabla de disposición, clic en Común, y luego clic dentro de las celdas para poder empezar a trabajar, dentro se puede escribir el texto que se desee.

6. En la pestaña de común en la parte superior hay una serie de herramientas para trabajar, entre ellas estan flash, Fireworks, introducir imágenes de sustitución etc.

Página 57

7. Para introducir una imagen se selecciona la celda en la que se

dese introducir, luego se oprime la opción de la imagen, y se

selecciona, con esto se mostrara dentro de la celda.

Página 58

4.9 DISEÑO DE PLANTILLA DE INICIO

Para llevar a cabo el desarrollo de la plantilla de la página se realizaron

dos diseños diferentes, los que se presentan a continuación:

4.9.1 PROPUESTA NÚMERO (1)

En este diseño de la página web, se muestra la plantilla en un color

azul, ya que el color fue en combinación con el logotipo, también cuenta

con el logo de “climer” y los botones de opción principales que son:

inicio, equipos, extracción, paneles solares, mantenimiento y contacto.

Página 59

4.9.2 PROPUESTA NÚMERO (2)

Esta plantilla de la página web es igual que la anterior, excepto en el

color que fue cambiado a verde con un degradado blanco, manteniendo

el logo y los mismos botones de opción.

4.9.3 ELECCION DE TEMPLATE

Después de haber presentado las dos propuestas, se consideró la número dos. En color verde, porque esta asociado con la naturaleza, ideal para promocionar productos del aire o productos ecológicos y tiene una resolución mayor que hace que se vea muy bien en la pantalla.

Página 60

4.10 DISEÑO DEL SITIO

Lo primero que se hizo fue un boceto de la página, para así armar el

diseño de inicio, con cuadros, color y tablas, para la estructura se

presentó una propuesta:

4.11 BOCETO

El diseño de la estructura se consideró en color verde con el degradado

blanco, en el encabezado los botones de opción en verde con los datos

de la empresa, además se instaló un carrusel de imágenes acerca de lo

que es “Climer”, en la parte superior se colocó el contenido central con

la información y al lado derecho se instaló otro cuadro con

características de la empresa.

Página 61

4.12 PAGINA PRINCIPAL (BOTÓN INICIO)

1. Para la plantilla de inicio el fondo sera en color verde degradado,

el encabezado esta conformado por el nuevo logitipo de la

empresa, el eslogan con colores solidos (azul, anaranjado,

verde), y en la parte inferior la ubicación y los teléfonos.

2. La barra de menu es de color verde, cuando se le da sobre las

celdas cambian a color blanco y las letras color verde.

3. El banner tiene tres imágenes cambian automaticamente, a

cada imagen se reforzo con slogan de la misma forma del

encabezado.

4. En el centro tres cuadros con informacion de la empresa acerca

de la empresa, los mantenimientos y paneles solares, contiene

un pie de pagina con enlaces a you tube, G-mail, Facebook y

Google maps.

Página 62

4.12.1 PRESENTACIÓN FINAL DEL BOTÓN DE INICIO

Página 63

4.13 BOTÓN (AIRE ACONDICIONADO)

Esta plantilla proporciona un catálogo de productos de los equipos de

aire acondicionado.

1. Se limpiaran las imágenes a utilizar con ayuda de Fireworks, en

cuanto a los productos y la información que irán en el centro de

la plantilla, se dibujara un cuadro con 550 px de ancho y, 400 px

de alto, tendrá un color degradado en color azul, se utilizara el

mismo cuadro pero más pequeño, con el fin de resaltar las

características de los productos . Este cuadro se utilizara para

cada producto.

2. Una vez guardadas todas la imágenes, se abrirá el programa

Dreamweabers, en esta plantilla se utilizara la misma estructura

básica (color de fondo, encabezado, menú y pie de página), en

los lados se dibujaran cuadros donde se incorporaran las

imágenes de los productos (las medidas varían para cada

cuadro), en el centro se dibujara un cuadro de 550 px de ancho

y 400 px de alto.

3. De lado derecho se encuentran los archivos, se arrastraran las

imágenes a cada cuadro que se les ha asignado, ya que el orden

no importa para cada imagen, así como en el centro y a cada

una se le tiene que nombrar.

Página 64

4. En la parte superior hay dos cuadros de textos, estos cuadros

dan a conocer los productos que maneja la empresa, para sus

clientes.

5. Se selecciona la primera imagen, aparecerá una barra en la

parte superior, en la opción “ventana” se desplegaran algunas

funciones, se da clic en “comportamientos”, se selecciona

“intercambiar imagen”, esto abrirá un cuadro de acciones.

Página 65

6. En el cuadro de acciones se selecciona la imagen por la cual se

quiere cambiar, se le da clic en “examinar” automáticamente

abrirá los archivos donde se encuentran las imágenes con el

cuadro de color y las características, se seleccionan y se da la

opción aceptar. Esta función se realiza en cada imagen.

Página 66

4.13.1.PRESENTACION FINAL DEL BOTÓN DE

AIREA CONDICIONADO

Página 67

4.14 BOTÓN (MANTENIMIENTO)

Considerando el mismo diseño en color verde de la página principal

(inicio), cabe destacar que en esta parte solo tiene la función de

informar del mantenimiento, y la estructura de la plantilla es la siguiente:

1. En la parte superior, se colocó un rectángulo con información de

lo importante que es el mantenimiento para Clima y energía

renovable, para que los clientes tengan conciencia de lo

necesario de utilizar este servicio.

2. Después se incorporaron las imágenes del personal capacitado

para el mantenimiento.

3. Posteriormente en la parte inferior se aplicaron dos rectángulos,

los cuales son los tipos de mantenimientos que maneja la

empresa, los cuales son el preventivo y el correctivo.

Página 68

4.14.1 PRESENTACION FINAL DEL BOTÓN DE MANTENIMIENTO

Página 69

4.15 BOTÓN (PANELES SOLARES)

1. Antes de iniciar con el diseño de la página se creó un archivo en

PDF, donde se da a conocer la información del producto.

2. Para el diseño de los cuadros y las imágenes, el programa a

utilizar es Fireworks, se dibujó un cuadro sin relleno, con el

contorno de color naranja claro, con 885 px de ancho y 165 px

de altura,

3. Dentro del cuadro con solo el contorno, se agregó la imagen con

196 px de ancho y 116 px de alto, el cuadro de texto es relleno

sólido de color naranja claro, sin contorno, con 157 px de ancho

y 27 px de alto.

Página 70

4.15.1 PRESENTACION FINAL DEL BOTÓN PANELES SOLARES

Página 71

4.16 BOTÓN (EXTRACCIÓN)

1. Para el diseño de esta platilla los programas a utilizar son

Fireworks y Dreamweaver, con las imágenes y la información de

las características de cada producto, estos datos se mostraran

en un archivo de PDF.

2. En Fireworks se limpiaran las imágenes a utilizar, con las

medidas en pixeles, se dibujara un cuadro a cada imagen sin

color de relleno y solo el contorno, el color del contorno será en

azul, para nombrar a cada producto las palabras serán en color

verde y azul.

3. Para Dreamweaver a cada imagen se le agregara un cuadro

interactivo, este cuadro se encuentra en la parte inferior

izquierda, a esta zona se le da la función de vincularla con los

archivos de PDF.

Página 72

4.16.1 PRESENTACION FINAL DEL BOTÓN DE EXTRACCIÓN

Página 73

4.17 BOTÓN (CONTACTO)

Tiene el mismo diseño de la plantilla de inicio, con la diferencia de la

dirección, formulario y un mapa de google maps, para tener una mejor

ubicación de la empresa.

4.17.1 MAPA DE GOOGLE

1. El mapa proporciona la aplicación de google maps, en su barra

se escribe la dirección de las oficinas de “Climer” y

automáticamente da la dirección, este mapa puede acercarce o

alejarse.

2. En la parte inferior derecha aparece un símbolo de engrane, se

da clic y abre un menú, establece dos opciones de compartir e

insertar mapa, se le da clic a la opción de insertar mapa,

enseguida sale un código que se utilizara para Dreamweaver.

3. Se proporciona un URl, el código se pega en un cuadro que es

dibujado en la plantilla de contacto, las características que se

muestran en la página de google se podrán establecer en la

plantilla.

Página 74

4. Abajo del mapa se coloco un formulario con los siguientes

requisitos: Nombre, Telefono, E-mail y Mensaje, para esto se

dibujo un cuadro, dentro del cuadro se incorporo la opción de

formulario, se colocaron etiquetas y botones (enviar y borrar).

5. Para la validación del formulario se selecciona el botón de enviar,

se da clic en ventana, de ventana se selecciona comando, se da

clic en validar formulario, aparecerá una barra de herramientas,

en la parte de arriba aparece nombre, teléfono, E-mail y

mensaje, a las primeras tres se da el valor como obligatorio.

6. Al seleccionar nombre se da como aceptar “cualquier cosa”, en

teléfono se da aceptar como “numero”, en E-mail “correo”, y se le

da clic en aceptar.

Página 75

7. Eso es en la parte de diseño, ahora en el código se tiene que

cambiar “The following error ocurred” por “ al enviar se

presentaron errores”, para que al haber un error aparesca en

español.

Página 76

4.17.2 PRESENTACION FINAL DEL BOTÓN CONTACTO

Página 77

4.18. DISEÑO WEB Y ESTÁNDARES

En la página Web se incorporan elementos gráficos, colores y

multimedia, se deben seguir normas muy concretas para evitar que su

peso afecte el desempeño de la página cuando sea solicitada, ya que

se necesitan algunas herramientas para asegurar el funcionamiento de

estas:

El peso de las imágenes: se debe bajar al máximo posible

el peso de las imágenes, cuando esto no sea posible

hacerlo por su tamaño, se debe reducir el número de

colores disponibles y la resolución (72 dpi es la norma).

Elegir el formato adecuado: Normalmente una imagen con

colores (como un icono) tendrá un peso menor, si se

guarda en GIF respecto de si es guardada en JPG.

Ubicación de imágenes: se recomienda usar una sola

carpeta para almacenar las imágenes repetidas, tales

como los iconos y otros elementos gráficos que son

utilizados en diferentes partes de la página.

Los dibujos, fotos, iconos, botones deben tener una

medida (ancho y altura), para que el programa pueda

dejar reservado el espacio para el contenido antes de que

se realice su despliegue visual.

Página 78

4.19 DISEÑO DE BANNER

1. Se diseñaron las imágenes que conformaran el banner, el

programa utilizado es Adobe Fireworks, con una medida de 890

px de ancho y 280 px de alto.

2. Se diseñaron tres imágenes distintas, con un cuadro de texto

para reforzar las imágenes, utilizando colores que combinan con

el fondo, algunas imágenes se tendrán que aclarar o suavizar.

Página 79

3. Para la animación se utilizó el programa Wow slider, este

programa permite crear diferentes animaciones, con una forma

rápida y sencilla.

4. Una vez abierto el programa Wow slider se le da clic en el

símbolo de mas (anima pac), esta acción te abrirá las carpetas

donde tienes guardadas tus imágenes, y se seleccionan las tres

imágenes.

5. Después de haber agregado las tres imágenes se le da clic en

publish, en el botón de imágenes se dan las diferentes opciones

para darle la animación, como primer paso se selecciona alguna

de las plantillas que proporcionan, como el marco negro, con

los botones de adelante y atrás en blanco y pie de página, etc.

Página 80

6. Se le da clic en imagen, en esta opción se da la medida del

banner (890 px de ancho y 280 px de altura).

7. En transition effect tiene las diferentes efectos para el banner

como blinsd, basic linear, cube, domino, etc.

8. El botón publish indicara en que carpeta se desea guardar y

como se llamara el navegador, esto proporcionara dos carpetas

en automático

9. Se abrirá el banner y la plantilla donde se desea incorporar el

banner, para esto se utilizo Dreamweaver.

Página 81

10. En la plantilla del banner, se da clic en el código, se copiara y

después se pegara dentro del cuadro que se ha dibujado en la

página.

11. Después de haber pegado el código se guardaran los cambios

realizados y se abrirá el navegador para ver la página ya con el

banner incorporado.

Página 82

4.20 LIBERACIÓN

En esta etapa se revisan los pasos que se deben dar al terminar el

desarrollo de una página Web y efectuar su presentación, incluyendo

criterios técnicos y hacer pruebas sobre el sitio, para dar a conocer a

los clientes el trabajo realizado.

Una vez que la página se ha construido, es necesario hacerla pasar

por una serie de pruebas antes de entrar a usar la página. Mediante las

pruebas, se medirá su reacción frente a diversas acciones que

realizarán los usuarios desde sus páginas. Entre otros aspectos será

necesario probar el desempeño computacional de la plataforma

tecnológica usada; seguridad ante intentos de ataque y exactitud;

corrección de su contenido y su despliegue en los diferentes programas

visualizadores, entre otros aspectos.

Cuando la página tiene algunos errores, es bueno apuntarlos para

saber qué es lo que sucede y a sí corregirlos, con una guía de apoyo

que se utilizó y en forma ordenada.

4.20.1 CÓMO Y QUÉ PROBAR

Con el fin de probar las diferentes capacidades de la página Web, es

necesario contar con estas dos pruebas que son:

Pruebas de Interfaces y Contenidos

Pruebas de Funcionalidades y Operación

a) Pruebas de Interfaces y Contenidos

Las actividades de esta etapa consisten en hacer revisiones

precisas de la forma en que se despliegan las páginas y ver si

cumplen con el funcionamiento en estos temas.

b) Pruebas de Funcionalidades y Operación

Las actividades de esta etapa se refieren a hacer chequeos

completos respecto de las funcionalidades y aplicaciones que

ofrece el sitio, ya sean de aplicaciones simples como formularios,

hasta más complejas.

Página 83

4.21. PUBLICACIÓN DE LA PAGINA WEB

La estructura de diseño que se le va a dar a la página web, será en

base al sitio web con el que ya cuenta la empresa. En esta etapa, se

verificará que ya estén puestas en marcha correcciones y ajustes

finales.

Se debe hacer que todo funcione, la prueba de todos los links, revisar el

correcto funcionamiento de todos los elementos multimedia y el

funcionamiento de formularios, e-mail, buscadores, etc.

La metodología que se propone para desarrollar la página web

contempla el seguimiento de los siguientes puntos:

Hosting

Planificación inicial del sitio

Diseño web y estándares

Puesta en marcha del sitio web

4.22. HOSTING

Esta aplicación es muy usada y fácil para subir la página web al

internet y que corra de una manera rápida.

Dreamweaver ofrece administrar los archivos desde el FTP. Para

empezar se debe tener en cuenta la dirección FTP del sitio web y las

opciones para dar acceso al usuario y una contraseña.

Se mencionaran los pasos a seguir para abrir las opciones y poder

agregar un nuevo sitio administrable a Dreamweaver: hacer click en la

ficha Site (Sitio), y hacer click posteriormente en la opción de New Site

(Nuevo sitio).

Enseguida se muestra el procedimiento visual principal de la

configuración de las propiedades:

Página 84

Se puede observar que se eligió la carpeta donde esta el sitio web, el

nombre del sitio (Este nombre se grabará solo en Dreamweaver), la

dirección URL (opcional) y la carpeta predefinida de las imágenes.

Esta configuración solo aplica a la “Información Local”.

Ejemplo visual sobre la configuración de “Información Remota”, es

decir, nuestra configuración de FTP.

Página 85

CONCLUSIONES

El uso de las promociones en las redes sociales, como facebook, you

tube o twitter son importantes por que actúan como los vendedores de

la empresa y representan la forma más directa de llegar a los

consumidores e interactuar con ellos.

Es conveniente manifestar que se logró cumplir con todos los objetivos

básicos que, se habían propuesto, debido a que se validó y se aplicó

sistemáticamente una metodología en este proyeco, que permitió

analizar los requerimientos y necesidades de la empresa.

El desarrollo del proyecto “actualización de página web” para la

empresa “Clima y energía renovable S.A de C.V”., se concluyó al

100%, cabe destacar que el módulo de la aplicación Web se entregó

en tiempo y forma.

El catálogo de productos también fue terminado para ser puesto en total

funcionalidad, y servir de apoyo a los clientes de “Clima y energía

renovable S.A de C.V.”

Finalmente con los puntos citados anteriormente se concluye que el

proyecto realizado, ha contribuido de manera muy importante a nuestra

formación profesional debido a que nos enfrentamos a muchas

barreras.

Este proyecto deja una experiencia muy agradable, y en gran parte los

nuevos conocimientos adquiridos a lo largo de toda la estadía, ya que

nos imponíamos nuevos retos a cumplir, sin importar que no

contáramos con ningún conocimiento del tema o de la aplicación.

Página 86

RECOMENDACIONES

1. Que la empresa realice promociones a través de las redes

sociales, por que esto atraerá la atención de los consumidores,

teniendo como primera opción a “Climer” sobre las demás

empresas, para tener así futuros proyectos industriales o

particulares y en el menor de los casos sus ventas podrán

aumentar.

2. Que tomen en cuenta las redes sociales, así como el Facebook,

you tube y twitter, por que son los medios por los cuales se

pueden dar a conocer las promociones, productos o servicios,

para que la empresa no dependa solamente con su pagina web.

Página 87

GLOSARIO

Base de datos: Una colección de datos organizados que se

pueden consultar.

Celda: Se refiere al tipo de modelado de datos, donde se

guardan los datos.

Correo electrónico (e-mail): mensajes personales enviados

entre usuarios para obtener acceso a información privada.

Dirección IP: Una dirección numérica compuesta de cuatro

números de 8 bits que identifica en forma única a una

computadora de una red.

GIF: Formato de Intercambio de Gráficos (Grafhics Interchange

Format); un formato de archivo para imágenes que fue elaborado

por CompuServe.

Hipervínculo: Un elemento de HTML que, cuando se hace clic

en él, permite que las personas pasen a otros documentos,

imágenes.

HTML: Lenguaje de Marcado de Hipertexto (HyperText Markup

Languaje); el lenguaje de programación de WWW.

HTTP: Protocolo de Transporte de Hipertexto (HyperText

Transport Protocol); la norma de Internet que permiten que se

combinen entre sí texto, imágenes, sonidos y vídeo en un solo

documento en Web.

Icono: Un gráfico pequeño que representa una función o acción.

Internet: Un sistema de redes formado por computadoras y

usuarios con alcance mundial.

Página 88

JPEG: (Joint Photographic Experts Group) es un formato de

compresión de imágenes, tanto en color como en escala de

grises, con alta calidad.

ONLINE: El término en línea hace referencia a un estado de

conectividad, frente al término fuera de línea que indica un

estado de desconexión.

Sitio Web: es una colección de páginas de internet relacionadas

y comunes a un dominio de Internet o subdominio en la World

Wide Web en Internet

SWF: Es un formato de archivo de gráficos vectoriales creado

por la empresa Macromedia.

UNIX: sistema operativo para computadoras. Importante en

especial para las computadoras más grandes que son usadas

como servidores de Internet.

URL: Localizador Uniforme de Recursos (Uniform Resource

Locator ); el medio para localizar una página de inicio de Web.

WWW: World Wide Web abreviaturas populares.

Página 89

BIBLIOGRAFÍA

1. “DISEÑO EN LA WEB”

Niederst, Jennifer

Editorial McGraw Hill, Marzo 1998

2. "LA PUBLICIDAD EN LA WEB"

Jim Sterne

Mexico,1998,Que.

3. “MARKETING 3.0”

Philip Kotler, Kartajaya y Setiawan

LID editorial

CIBERGRAFÍA

1. BREVE HISTORIA DE LA WORLD

WIDE WE

http://html.conclase.net/articulos/historia

2. “DISEÑO WEB”

Informática Milenium, S.A.de C.V.

http://www.informaticamilenium.com.mx/paginas/espanol/e

ninternet.htm