memoria de estadia profesional empresa: clima y
Post on 16-Oct-2021
6 Views
Preview:
TRANSCRIPT
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
top related