Diseño de Un Sitio Web

“Año de la Universalización de la
UNHEVAL
Salud”
UNIVERSIDAD
NACIONAL
FACULTAD DE INGENIERÍA INDUSTRIAL Y SISTEMAS
ESCUELA PROFESIONAL DE INGENIERÍA INDUSTRIAL
KM
Cafetería
Cafeteria y Heladeria y
Pagina
PaginaWeb
Heladería
INTEGRANTES:





Web N
Grandes Pulido Karem.
Hurtado Huamán, Suckeer.
Inga Cachique, Ramiro.
Orizano Huaqui, Milagros.
Rodríguez Paris, Natividad.
 Valentin Ramos, Eden.
DOCENTE:
Ingeniero Jhonny Piñan García
CURSO:
Sistemas y Tecnologías de la Información
Huánuco – Perú
2020
Universidad Nacional Hermilio Valdizán
Escuela Profesional de Ingeniería Industrial y Sistemas
Facultad de Ingeniería Industrial
DEDICATORIA
El presente trabajo lo dedicamos primeramente

a Dios por iluminar nuestro camino, a nuestros
padres por estar con nosotros en todo momento.
Al docente a cargo del curso por todo el apoyo

brindado y, por último, pero no menos
importante a todas las personas que nos
apoyaron y confiaron en nosotros permitiendo
así que este trabajo se realice.
2
Índice
1. Marco Conceptual...........................................................................................................6
1.1. Historia de la Web....................................................................................................6
1.1.1. La primera guerra de navegadores....................................................................7
1.1.2. La segunda guerra de navegadores...................................................................9
1.1.3. La tercera guerra de navegadores....................................................................10
1.1.4. El reinado de Google Chrome.........................................................................11
1.2. Web........................................................................................................................13
1.3. Hipertexto...............................................................................................................14
1.4. Página web.............................................................................................................15
1.5. Sitio web.................................................................................................................15
1.6. Internet....................................................................................................................15
1.6.1. Google Chrome..............................................................................................16
1.6.2. Internet Explorer.............................................................................................17
1.7. Dominio..................................................................................................................18
1.7.1. ¿Por qué el dominio es importante para los sitios web?.................................18
1.8. Hosting o Alojamiento Web..................................................................................19
1.8.1. Alojamiento o Hosting gratuito.......................................................................19
1.8.2. Alojamiento o Hosting compartido.................................................................20
3
1.8.3. Alojamiento o Hosting de imágenes...............................................................20
1.8.4. Alojamiento o Hosting revendedor (reseller)..................................................20
1.8.5. Servidores virtuales (Virtual Private Server, VPS).........................................20
1.8.6. Alojamiento web en la nube (cloud hosting)..................................................21
1.8.7. Colocación (housing)......................................................................................21
1.9. Lenguaje de programación.....................................................................................22
1.9.1. JavaScript........................................................................................................23
1.9.2. HTML.............................................................................................................24
1.9.3. CSS..................................................................................................................25
1.9.4. Servidores Web...............................................................................................26
2. Objetivos.......................................................................................................................27
2.1. Objetivo General:...................................................................................................27
2.2. Objetivos Específicos:............................................................................................27
3. Descripción de la empresa............................................................................................27
3.1. Misión.....................................................................................................................27
3.2. Visión.....................................................................................................................28
3.3. Valores de la empresa.............................................................................................28
4. Metas, resultados, efectos y propósito esperados del proyecto.....................................29
4.1. Metas......................................................................................................................29
4
4.2. Resultados..............................................................................................................29
4.3. Efectos....................................................................................................................29
4.4. Propósito.................................................................................................................29
5. Diseño de la página web...............................................................................................30
5.1. Planificación de la página web...............................................................................30
5.1.1. Página Web.....................................................................................................30
5.1.2. Visitantes, Usuarios o clientes........................................................................33
5.2. Presupuesto.............................................................................................................35
5.3. Planeación:.............................................................................................................35
5.4. Implementación......................................................................................................36
5.5. Adquisión del alquiler de hosting y dominio.........................................................49
5.6. Mantenimiento y actualización de la web..............................................................49
5
Índice de figuras
Figura 1.Inicios de la página web...........................................................................................9
Figura 2. Internet Explorer vs Netscape................................................................................11
Figura 3. Internet Explorer vs Firefox..................................................................................12
Figura 4.Google Chrome vs Internet Explorer......................................................................13
Figura 5.Reinado de Chrome................................................................................................15
Figura 6. Web........................................................................................................................16
Figura 7. Hipertexto..............................................................................................................16
Figura 8. Página Web............................................................................................................17
Figura 9. Logo de Google Chrome.......................................................................................19
Figura 10.Logo de Internet Explorer.....................................................................................19
Figura 11.Dominios de internet............................................................................................21
Figura 12. Tipos de Hostings o Alojamientos Web..............................................................23
Figura 13.Índice TIOBE de lenguajes de programación.......................................................24
Figura 14.Índice Trendyskills...............................................................................................25
Figura 15.JavaScript..............................................................................................................26
Figura 16.HTML...................................................................................................................27
Figura 17.CSS.......................................................................................................................28
Figura 18. Servidor Web.......................................................................................................28
Figura 19.Organigrama de la empresa..................................................................................30
Figura 20. Logo de la empresa..............................................................................................34
Figura 21. Eslogan de la empresa.........................................................................................34
Figura 22. Encabezado de la página Web.............................................................................39

6
Figura 23.Productos de la empresa.......................................................................................39
Figura 24.Banner de descuento.............................................................................................39
Figura 25.Comentarios de clientes........................................................................................40
Figura 26.Galería de productos.............................................................................................40
Figura 27.Barra de servicios brindados.................................................................................40
7
1. Marco Conceptual
1.1. Historia de la Web
El primer servidor de páginas web de la historia se puso en marcha en
diciembre de 1990 en el CERN (Ginebra, Suiza). El inventor de la web, el
informático inglés Tim Berners-Lee, pretendía crear un sistema que
permitiera a los investigadores del CERN compartir fácilmente la
información.
La primera versión del lenguaje de marcas inventado por Berners-Lee nunca
fue publicado como documento oficial, pero si lo hubiera sido se hubiera
llamado HTML 1.0.
Los investigadores del CERN, procedentes de todas partes el mundo,
diseminaron en sus universidades de origen el sistema creado por Berners-
Lee, puesto que se trataba de un sistema abierto y libre. En aquella época ya
existía Internet, pero su acceso estaba limitado principalmente a
Universidades y centros de investigación.
En noviembre de 1993 se publicó la versión 1.0 de Mosaic, un navegador
creado en la Universidad de Illinois por Marc Andreessen y que superaba a
todos al permitir, por ejemplo, incluir imágenes en las páginas web.
En 1994 se permitió el acceso de particulares y empresas a Internet. La web
se convirtió enseguida en el servicio más empleado para ofrecer
información, eclipsando a servicios competidores como Gopher o WAIS.
8
La web empezó a verse como una gigantesca oportunidad de negocio y Marc
Andreessen dejó la universidad para fundar Netscape, que publicaría la
versión 1.0 de su navegador en diciembre de 1994.
Para dirigir el desarrollo de la web, Berners-Lee fundó el World Wide Web
Consortium (W3C) en octubre de 1994, como lugar de encuentro de
empresas, universidades y organizaciones sin ánimo de lucro.
El W3C está organizado en grupos de trabajo (WG, Working Groups). Los
primeros grupos de trabajo que se crearon se dedicaron al HTML y a las
CSS.
Figura 1.Inicios de la página web
1.1.1. La primera guerra de navegadores
En 1995 Microsoft incluyó en Windows un navegador, Internet Explorer,
que poco a poco comenzó a ganar cuota de mercado a costa de Netscape.
Daba comienzo la llamada guerra de los navegadores.
Entre 1995 y 2000 Microsoft y Netscape compitieron a un ritmo frenético
para la época, publicando nuevas versiones cada año. Para diferenciar sus
productos, cada navegador fue incorporando nuevas etiquetas, lo que supuso
un riesgo de fragmentación de la web.

9
En esos años, el W3C también publicó recomendaciones a ritmo frenético.
Por un lado, para consensuar un HTML común para todos los navegadores.
Pero, por otro lado, proponiendo innovaciones muy importantes, como la
separación entre contenido y presentación mediante hojas de estilo (CSS).
En 1995 Brian Eitch creó para Netscape 2.0 el lenguaje de programación
JavaScript, cuyos programas se podían incluir directamente en las páginas
web para ser ejecutados por el navegador. Microsoft creó su propia variante
parcialmente incompatible. La normalización de JavaScript no la llevó a
cabo el W3C, sino la organización ECMA, que en 1997 empezó a publicar
normas para unificar y desarrollar el lenguaje.
Ante el gran número de peticiones de ampliación del HTML para incluir
nuevos campos (gráficos, fórmulas matemáticas, etc.), el W3C creó el XML,
unas reglas generales para crear nuevos lenguajes de marcas que fueran
compatibles entre sí y que se pudieran tratar con las mismas herramientas. El
problema era que el HTML no cumplía las nuevas reglas del XML y el W3C
planteó reformular el HTML de acuerdo con ellas (ese nuevo lenguaje se
llamaría XHTML).
En 1998, antes de ser comprada por el proveedor de Internet America On
Line (AOL), Netscape creó la organización Mozilla, a la que donó el código
fuente del navegador para que se publicara como software libre.
10
Figura 2. Internet Explorer vs Netscape
1.1.2. La segunda guerra de navegadores
En 2004 se creó la Fundación Mozilla, que en los primeros años se
financiaría sobre todo gracias a Google, y que reconvirtió el navegador
Mozilla en el navegador Firefox, que empezó a erosionar el dominio de
Internet Explorer.
La competencia de Firefox obligó a Microsoft a retomar el desarrollo de
Internet Explorer, cumpliendo las recomendaciones del W3C y
mejorando el interfaz, pero con la limitación de publicar nuevas
versiones coincidiendo con nuevas versiones de Windows.
En 2004 se creó también el WHATWG, un grupo formado por Mozilla,
Apple y Opera al margen del W3C, para retomar el desarrollo del HTML
que el W3C había abandonado en favor del XHTML, bajo el nombre de
HTML 5.
En 2007 el W3C reconsideró su posición y volvió a formar un grupo de
trabajo sobre HTML, que trabajaría codo con codo con el WHATWG
para publicar la recomendación HTML 5.
11
En 2009 Google publicó su propio navegador, Google Chrome, que
añadió más competencia al mercado. Chrome introdujo un nuevo modelo
de desarrollo frenético, con versiones cada dos meses (o menos).
Figura 3. Internet Explorer vs Firefox
1.1.3. La tercera guerra de navegadores
En 2011 el W3C renunció al desarrollo del XHTML y se concentró en el
HTML 5, que se consiguió publicar en 2015.
En 2011 el WHATWG abandonó por su parte el nombre de HTML 5 y
pasó a denominarlo simplemente HTML, abandonando la idea de
versiones en favor de una norma "líquida", continuamente modificada y
mejorada.
Desde 2010 Firefox adoptó el modelo de Chrome y pasó a publicar siete
o más versiones cada año, con lo que los avances llegan rápidamente a
los usuarios.
En marzo de 2013 Firefox anunció asm.js, un subconjunto de JavaScript
diseñado para facilitar la conversión de aplicaciones escritas en C/C++ a
JavaScript, para permitir su ejecución en los navegadores.
12
En 2013 Microsoft consiguió con Internet Explorer 11 cumplir de forma
correcta las antiguas recomendaciones HTML 4 y CSS 2 y admitir
lenguajes XML como SVG. Pero para sacar todo el partido a HTML 5,
Microsoft decidió crear un nuevo navegador, Edge, que seguía ligado a
las nuevas versiones de Windows 10, que se publican semestralmente.
A finales del 2013 el W3C redujo de forma drástica el desarrollo de la
Web semántica, cerrando la mayoría de los grupos de trabajo.
En estos años Google Chrome derrotó a Internet Explorer, entre otros
motivos debido al uso creciente de los teléfonos móviles (en los que
Windows no existe) y al hecho de que los usuarios de Windows 7 no
podían usar Edge.
Figura 4.Google Chrome vs Internet Explorer
1.1.4. El reinado de Google Chrome
Desde 2016, Google Chrome es el navegador dominante, pero ese
dominio no está significando estancamiento. Por ahora, tanto las normas
13
(HTML y JavaScript) como los navegadores se están desarrollando más
rápidamente que nunca.
En agosto de 2016, el W3C empezó a cerrar todos los grupos de trabajo
relacionados con el XML, un conjunto de tecnologías que se utilizan en
muchos sectores, pero cada vez menos en la web.
En marzo de 2017, Firefox y Chrome incorporaron WebAssembly, un
formato de código binario basado en JavaScript diseñado para facilitar la
conversión de aplicaciones escritas en prácticamente cualquier lenguaje
a JavaScript, para permitir su ejecución en los navegadores. El W3C
aprobó las primeras recomendaciones en diciembre de 2019.
En diciembre de 2018, Microsoft anunció que las futuras versiones de
Edge estarían basadas en Chromium, el motor de Google Chrome. La
tercera guerra de los navegadores había terminado definitivamente. La
primera versión, Edge 79, se publicó el 15 de enero de 2020.
En mayo de 2019, el W3C anunció que dejaba definitivamente el
desarrollo del HTML en manos del WHATWG. El dominio de Google
sobre la web es prácticamente absoluto.
En junio de 2019, Google presentó una versión de Google Earth en
WebAssembly.
En septiembre de 2019, Firefox anunció que a partir de 2020 publicará
nuevas versiones del navegador cada cuatro semanas.
14
Figura 5.Reinado de Chrome
1.2. Web
Web es una palabra inglesa que significa red o telaraña.
Se designa como ‘la web’ al sistema de gestión de
información más popular para la trasmisión de datos a
través de internet. La web es el diminutivo de World wide web o www cuyas
tecnologías para su funcionamiento (HTML, URL, HTTP) fueron desarrolladas
en el año 1990 por Tim Berners Lee. Para usar la web es necesario tener acceso
a internet y un navegador web, por la cual se solicita una página dinámica
llamada también página web. El navegador web como, por ejemplo, Google
Chrome, se comunica con el servidor web mediante el protocolo web o HTTP
(HyperText transfer Protocol) para entregar la petición deseada. La web usa para
la creación de sus páginas web el lenguaje HTML (HyperText markup
Language) que unificó la forma de buscar y crear información a través de
15
internet. El conjunto de páginas web asociadas se sitúan en un sitio web como lo
es, por ejemplo, YouTube.
Figura 6. Web
1.3. Hipertexto
El hipertexto, por otro lado, es un conjunto
estructurado de textos, gráficos, imágenes o sonidos
unidos entre sí por enlaces o vínculos (links) y
conexiones lógicas. Actualmente, el hipertexto está siendo reemplazado por la
hipermedia, que también es un conjunto estructurado de diversos medios (texto,
imagen, sonido), pero usados conjunta y simultáneamente (multimedia) y unidos
entre sí por enlaces y conexiones lógicas para la transmisión de información.
16
Figura 7. Hipertexto
1.4. Página web
La página web es la unidad informativa de la web, es
decir, son documentos compuestos por textos,
imágenes, audios o videos a los que se puede acceder
a través de la Word Wilde web o www empleando un navegador. Como ya se
mencionó, la información de las páginas web está generalmente en formato
HTML. Asimismo, contienen enlaces que las relacionan con otras páginas cuyos
contenidos se relacionan.
Figura 8. Página Web
1.5. Sitio web
Un sitio web es un conjunto de páginas web que se
encuentran relacionadas por el contenido y por un
dominio en internet, y que constituyen una gran red de
información.
17
1.6. Internet
Internet es una red de redes que permite la interconexión
descentralizada de computadoras a través de un conjunto
de protocolos denominado TCP/IP. Tuvo sus orígenes en
1969, cuando una agencia del Departamento de Defensa de los Estados Unidos
comenzó a buscar alternativas ante una eventual guerra atómica que pudiera
incomunicar a las personas. Tres años más tarde se realizó la primera
demostración pública del sistema ideado, gracias a que tres universidades de
California y una de Utah lograron establecer una conexión conocida como
ARPANET (Advanced Research Project Agency Network).
1.6.1. Google Chrome
Es uno de los más conocidos y más usados,
básicamente porque es el que asegura una
velocidad mayor. Saltó al escenario a principios
de 2008. Desde entonces ha conseguido pasar de una cuota de mercado del
0% al actual 25% del mes pasado. Se inicia rápidamente desde el escritorio,
carga las páginas de forma instantánea y ejecuta aplicaciones web complejas
a gran velocidad. Google le asegura financiación permanente y estar siempre
a la última en cuanto a mejoras y novedades; sin embargo, también es una de
las empresas multinacionales más influyentes y con más beneficios del
mundo, y como tal, su objetivo final es el ánimo de lucro, y no todo el
mundo se siente cómodo dejándoles sus datos, tanto personales como no
personales. A parte de esto, la ventana del navegador de Chrome es intuitiva

18
Figura 9. Logo de Google Chrome

y sencilla. Está diseñado para ofrecer una mayor seguridad en la web, al
actualizarse automáticamente para que siempre tengamos las últimas
mejoras en este campo. Si es tu navegador preferido para el PC, Google
Chrome será también el favorito para hacerlo a través de la tableta, al
presentar versiones igual de potentes tanto en Android como en iOS.
1.6.2. Internet Explorer
Explorer mantiene su amplia cuota de mercado
(alrededor del 60-65%) gracias a que fue el
primero en salir y también que viene
predeterminado en todos los PCs de Microsoft, pero no está actualmente a la
altura de los otros grandes, básicamente por la gran cantidad de fallos que
arrastra. Los distintos desarrolladores de Internet Explorer no han sabido
estar a la altura de la competencia; no obstante, parece ser que Microsoft
actualmente está poniéndose las pilas de nuevo para volver a considerar a
Explorer una prioridad en su estrategia de actuación. Hoy por hoy, Internet
Explorer no se caracteriza por su especial velocidad y es el navegador que
presenta más problemas de seguridad de todos los candidatos. Las
19
restricciones innecesarias que pone Windows a sus actualizaciones en
sistemas operativos viejos tampoco son un aliciente para optar por esta
opción.
Figura 10.Logo de Internet Explorer

1.7. Dominio
Dominio de Internet es un nombre único que identifica
a una subárea de Internet. El propósito principal de los
nombres de dominio en Internet y del sistema de
nombres de dominio (DNS), es traducir las direcciones IP de cada activo en la
red, a términos memorizables y fáciles de encontrar. Esta abstracción hace
posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a
otro en la Internet, aun cuando el cambio implique que tendrá una dirección IP
diferente. Sin la ayuda del sistema de nombres de dominio, los usuarios de
Internet tendrían que acceder a cada servicio web utilizando la dirección IP del
nodo. Además, reduciría el número de webs posibles, ya que actualmente es
habitual que una misma dirección IP sea compartida por varios dominios. En
otras palabras un dominio en Internet es el nombre exclusivo y único que se le
da a un sitio web para que cualquier internauta pueda visitarlo e identificarlo.
20
1.7.1. ¿Por qué el dominio es importante para los sitios web?
Registrar un dominio en Internet es el primer paso para tener presencia en la
web. Sin embargo, con solo un dominio no podrás publicar tu sitio web, ya
que también necesitarás un web hosting. Es importante recalcar que con la
elección y registro de tu dominio en Internet podrás crear cuentas de correos
personalizados que te permitirán proyectar profesionalismo y ganarte la
confianza de los clientes potenciales.
Figura 11.Dominios de internet
1.8. Hosting o
Alojamiento Web
El hosting es un servicio en línea que te permite
publicar un sitio o aplicación web en Internet.
Cuando te registras en un servicio de hosting, básicamente alquilas un
espacio en un servidor donde puedes almacenar todos los archivos y datos
necesarios para que tu sitio web funcione correctamente. Tu proveedor de
hosting es el responsable de mantener el servidor en funcionamiento,
protegerlo de ataques maliciosos y transferir tu contenido (texto, imágenes,
21
archivos) desde el servidor a los navegadores de tus visitantes. Existen tipos
de hosting:
1.8.1. Alojamiento o Hosting gratuito
El alojamiento gratuito es extremadamente limitado comparado con el
alojamiento de pago. Estos servicios generalmente agregan publicidad en los
sitios además de contar con recursos muy limitados (espacio en disco, tráfico
de datos, uso de CPU, etc.).
1.8.2. Alojamiento o Hosting compartido
En este tipo de servicio de alojan clientes de varios sitios en un mismo
servidor, gracias a la configuración del programa servidor web. Resulta una
alternativa muy buen para pequeñas y medianos clientes, es un servicio
económico y tiene buen rendimiento.
1.8.3. Alojamiento o Hosting de imágenes
Este tipo de hospedaje se ofrece para guardar imágenes en Internet, la
mayoría de estos servicios son gratuitos y las páginas se valen de la
publicidad colocadas en su página al subir la imagen.
1.8.4. Alojamiento o Hosting revendedor (reseller)
Este servicio de alojamiento está diseñado para grandes usuarios o personas
que venden el servicio de hospedaje a otras personas. Estos paquetes cuentan
con gran cantidad de espacio y de dominios disponibles para cada cuenta.
Así mismo estos espacios tienen un límite de capacidad de clientes y
dominios alojados y por ende exige buscar un servidor dedicado
22
1.8.5. Servidores virtuales (Virtual Private Server, VPS)
La empresa ofrece el control de una computadora aparentemente no
compartida, que se realiza mediante una máquina virtual. Así se pueden
administrar varios dominios de forma fácil y económica, además de elegir
los programas que se ejecutan en el servidor. Por ello, es el tipo de producto
recomendado para empresas de diseño y programación web.
1.8.6. Alojamiento web en la nube (cloud hosting)
El alojamiento web en la "nube" (cloud hosting) está basado en las
tecnologías más innovadoras que permiten a un gran número de máquinas
actuar como un sistema conectadas a un grupo de medios de
almacenamiento, tiene ventajas considerables sobre las soluciones de web
hosting tradicionales tal como el uso de recursos. La seguridad de un sitio
web alojado en la "nube" (cloud) está garantizada por numerosos servidores
en lugar de solamente uno. La tecnología de computación en la nube
también elimina cualquier limitación física para el crecimiento en tiempo
real y hace que la solución sea extremadamente flexible.
1.8.7. Colocación (housing)
Este servicio consiste básicamente en vender o alquilar un espacio físico de
un centro de datos para que el cliente coloque ahí su propia computadora. La
empresa le da la corriente y la conexión a Internet, pero el servidor lo elige
completamente el usuario (hasta el hardware).
23
1.9. Lenguaje de programación
Un lenguaje de programación web es un código
interpretado por un servidor usado para crear sitios
web dinámicos. Es decir, permiten incorporar
funcionalidades a los portales para que los usuarios interactúen con ellos. Los
ejemplos más comunes son las encuestas, formularios, juegos, foros, chat,
carrito de compra, por mencionar algunas.
Es importante destacar, que estos lenguajes permiten construir aplicaciones
cliente/servidor, donde un usuario solicita un servicio y el servidor se encarga de
procesar la solicitud y dar respuesta. Los lenguajes de programación orientados
a la web son bastantes y cada uno tiene su sintaxis definida por cada una de las
empresas que construye el estándar. Sin embargo, se reseñan los lenguajes más
ampliamente usados en aplicaciones web. La clasificación de los lenguajes de
programación web más usados la realizan instituciones a través de diversas
herramientas como son la cantidad de entradas en buscadores, los
requerimientos empresariales para empleo, los requerimientos de competencias
específicas, la cantidad de sitios construidos en cada uno de los lenguajes y la
24
cantidad de repositorios disponibles para cada lenguaje particular.
Figura 13.Índice TIOBE de lenguajes de programación

Tomado de http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html
Figura 14.Índice Trendyskills
Tomado de https://trendyskills.com/
1.9.1. JavaScript
JavaScript es un lenguaje interpretado basado
en scripts, es empleado para agregar elementos
dinámicos a las páginas web. Es una
tecnología que se ejecuta en el lado del cliente, es decir, en el navegador, y
este se encarga de interpretar el código. Por ello, es más simple y fácil de
entender que un lenguaje de alto nivel. Es oportuno mencionar, que cuenta
25
con mucha documentación en la web, y se acopla perfectamente con los
diversos gestores de contenidos del mercado. El programa fue creado por
Brendan Eich en la empresa Netscape Communications, y apareció bajo el
nombre LiveScript. Luego, fue relanzado con el nombre JavaScript en una
alianza con Sun Microsystem. JavaScript permite incorporar elementos
dinámicos en el sitio web, por ejemplo:
Validar y manipular componentes en un formulario.
Cambiar la apariencia de un documento HTML.
Detectar el navegador del usuario para efectos de compatibilidad.
Escribir scripts HTML dinámicos.
Manejar evento en tu página web, te explico, puedes crear botones
interactivos, ventanas emergentes, etc.
Construir cookies para almacenar y buscar información en la
computadora de un usuario.
Realizar operaciones de cálculo en general.
Crear gráficos estadísticos.
Figura 15.JavaScript
26
1.9.2. HTML
HyperText Markup Language (Lenguaje de
marcado de hipertexto), hace referencia al
lenguaje de marcado predominante para la
elaboración de páginas web que se utilizada para describir y traducir la
estructura y la información en forma de texto, así como para complementar
el texto con objetos tales como imágenes o videos. El HTML se escribe en
formas de etiquetas, rodeadas por corchetes angulares (<, >), también puede
describir la apariencia de un documento y puede incluir un script como
JavaScript.
Figura 16.HTML
1.9.3. CSS
El CSS (hojas de estilo en cascada) es un
lenguaje que define la apariencia de un
documento escrito en un lenguaje de marcado
(por ejemplo, HTML). Así, a los elementos de la página web creados con
HTML se les dará la apariencia que se desee utilizando CSS: colores,
espacios entre elementos, tipos de letra, separando de esta forma la
27
estructura de la presentación. Esta separación entre la estructura y la
presentación es muy importante, ya que permite que sólo cambiando los
CSS se modifique completamente el aspecto de una página web. Esto
posibilita, entre otras cosas, que los usuarios puedan usar hojas de estilo
personalizadas (como hojas de estilo de alto contraste o de accesibilidad).
1.9.3.1. Estándar CSS
El W3C define las especificaciones del estándar CSS. Después, los
navegadores intentan implementar esas especificaciones, para que las
páginas web se vean igual en todos ellos. Los navegadores cada vez
cumplen más y mejor el estándar CSS. Por ejemplo: Internet
Explorer 6 cumplía el estándar en sólo un 12% mientras que Internet
Explorer
9 lo cumple en un 95%. Por eso se deben maquetar las páginas web
siguiendo el estándar CSS y no las especificaciones de un navegador
determinado. También hay que procurar mantener actualizado el
navegador, ya que a medida que van cumpliendo el estándar, van
añadiendo funcionalidades que antes no tenían.
28
Figura 17.CSS
1.9.4. Servidores Web
Servidor de archivos estáticos, índices y
autoindexado.
Tolerancia a fallos.
Soporte HTTP sobre SSL.
Balance de carga.
Soporte para FastCGI con opciones de caché.
Proxy inverso con opciones de caché.
2. Objetivos Figura 18. Servidor Web
2.1. Objetivo General:
Implementar una página web para la empresa K&M&N “Heladería y Cafetería”
29
2.2. Objetivos Específicos:
Identificar los requerimientos de información para nuestra página web.
Lograr captar mayor número de clientes.
Aumentar los ingresos de la compañía
Definir el diseño de la página
3. Descripción de la empresa
Es una empresa a nivel departamental, ya que contamos con 2 sedes, una sede en la
provincia de Huánuco-Huánuco y otra en la provincia de Leoncio Prado-Tingo
María, dedicadas al rubro de alimentos, específicamente es una cafetería y heladería
que tiene como finalidad satisfacer el paladar de los consumidores brindado
productos de óptima calidad y ofreciendo a sus consumidores una amplia carta, en
la cual para la heladería tenemos un stock de las marcas “D’ONOFRIO” y
“YAMBOLY”. Para la elaboración de los productos y para los procesos de traslado
y distribución de estos se tienen en cuenta todos los protocolos de higiene
correspondientes.
3.1. Misión
Ser una empresa líder y referente en la familia, brindando bajos costos, pero sin
perder la calidad de nuestros productos, ya que tenemos a nuestro alcance
productos de mejor calidad. Logrando así la satisfacción de negocio cliente al
sector.
30
3.2. Visión
Llegar a ser una empresa reconocida a nivel departamental por su buena calidad
el buen manejo de sus productos, ofrecerles un buen servicio con mucha calidad
para que nuestro cliente se encuentre a gusto con nuestros productos. Lograr una
excelencia del personal que logrará que seamos aún más reconocidos que antes.
3.3. Valores de la empresa
Crear una cultura organizacional fuerte y sólida.
Estimular al personal para ayudar con los objetivos de la empresa.
Evitar las diferencias de opiniones entre los trabajadores. Puntualidad en
las entregas.
Generar confianza y credibilidad en clientes, proveedores, empleados.
Figura 19.Organigrama de la empresa
31
4. Metas, resultados, efectos y propósito esperados del proyecto
4.1. Metas
Con el desarrollo de este proyecto se quiere conseguir que la empresa K&M&N
“Heladería y Cafetería, cuente con una página Web que permita mejorar la
imagen de nuestra empresa, así como también permita a los usuarios tener
información clara y concisa de los productos y servicios que ofrece la empresa,
generando competitividad y eficiencia en el mercado huanuqueño.
4.2. Resultados
Contar con una página web eficiente, en términos de estructura y diseño que nos
permita alcanzar la consolidación y aceptación de la imagen del establecimiento
acorde a las necesidades y expectativas de nuestros consumidores.
4.3. Efectos
Permitir que cualquier persona tenga acceso rápido a la información de la página
web de cualquier punto de ubicación sin la necesidad de estar en el
establecimiento.
4.4. Propósito
El propósito de la pagina web es impulsar las ventas, para ello la pagina tiene
que cumplir con 2 aspectos: atraer e informar. Por medio de esos aspectos
convertir a los visitantes de nuestra pagina web en clientes potenciales y
nuestros clientes potenciales en clientes fidedignos
32
5. Diseño de la página web
El diseño de una pagina web consiste en la planificación, diseño e implementación
de sitios web. Un diseñador web tiene que ver con cómo crear y desarrollar una
página web, pero al mismo tiempo como los clientes interactúan con ella, ya que el
diseño de un sitio web dice mucho de la empresa. Lo que se busca es trasmitir un
mensaje conciso y lograr que los clientes se sientan cómodos con su uso. Se
requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de
la información y la interacción de medios como el audio, texto, imagen, enlaces y
vídeo, todo esto se considera dentro del diseño multimedia.
5.1. Planificación de la página web
5.1.1. Página Web
Para lograr éxito en la página web se ha considerado los siguientes puntos:
 El contenido mostrado tiene como finalidad satisfacer las dudas acerca
de nuestro establecimiento, logrando así tener una respuesta emocional
agradable al sitio y generando mayor tráfico de clientes.
 Al crear el sitio web tenemos que considerar que esto se un todo, esto
hace referencia a una planificación adecuada, con el uso correcto de
herramienta, para obtener un rendimiento óptimo y un fácil manejo.
Partes del proceso de diseño que se ha planteado:
a. Colores:
Para la elección de los colores hemos tenido en cuenta la variable del
de marketing, ya que de acuerdo a varios estudios realizados el color
33
tiene una influencia muy importante en la decisión de compra y el
aumento de las ventas. Es por esto que es fundamental hacer una
elección adecuada de colores para los productos, la publicidad y el
sitio web. En nuestra pagina web hemos usado tonos de una paleta en
tonos pasteles en los cuales consideramos los cálidos tonos de
naranjas en combinación con un tono purpura y blancos para que
exista la armonía entre las tonalidades mencionadas, esto se debe al
significado que este brinda. Según estudios los usuarios relacionan
las tonalidades naranjas con lo siguiente puntos de manera indirecta:
Puede reflejar emoción y entusiasmo.
Estimula la parte lógica del cerebro.
Muestra calidez y cercanía
Usado con frecuencia en los símbolos de precaución.
Puede generar ansiedad y ser considerado agresivo.
Muy efectivo en los Call to Actions (botones de llamado a la
acción) en los sitios de comercio electrónico: Adicionar al carro
de compras, suscríbete, etc.
Tiene un efecto considerable en compradores impulsivos.
b. Logotipo
Para la elaboración del logotipo hemos tenido en cuenta cinco
aspectos que son considerados importantes:
Sencillo
Fácil de recordar
34
Coherente
Perdurable en el tiempo
Credibilidad
Estos aspectos nos permitirán obtener un logotipo creíble y
consistente, logrando así que las personas se identifiquen con este y
lo asocien a un sello de garantía y calidad.
Figura 20. Logo de la empresa

c. Eslóganes
Dentro de las herramientas de marketing, el eslogan es una de las
más poderosas, pues ayuda a incrementar los niveles de recordación
en los consumidores y a diferenciarte de la competencia. En estos se
debe identificar claramente al producto o servicio, y resaltar los
beneficios que lo hacen especial, ya que la finalidad de es atrapar,
definir y sintetizar en pocas palabras la idea conceptual de nuestro
producto o servicio.
Figura 21. Eslogan de la empresa
35
 El diseño es una técnica que se basa en una serie de reglas más o menos
definidas que sirven para crear algo que resulte útil y atractivo a la vez. En
primer lugar, debemos definir cuál va a ser el objetivo de nuestro sitio web,
a quien va dirigido, cual es la meta y el propósito del mismo. A partir de esto
ya podremos tener una mejor idea de que puntos consideraremos en nuestra
página web. Para conseguir esto nos planteamos preguntas como:
¿Qué queremos lograr con la página?
¿Cuál será la finalidad de este, entretener a los visitantes o
informarlos?
¿Nuestro objetivo principal es brindarles información detallada a
través de texto o conseguir un fuerte impacto visual a través de
imágenes?
 También consideramos la creación de una página en Facebook e Instagram
para conseguir un mayor impacto visual y un mayor nivel informativo.
5.1.2. Visitantes, Usuarios o clientes
También se considera términos de usabilidad para la elaboración de la
página, la usabilidad es la capacidad del usuario no entrenado para
interactuar con un sitio web determinado. Para esto se deben evaluar, como
mínimo, seis aspectos fundamentales:
36
Aprendizaje: Sé entiende como el tiempo que tarda el usuario no
entrenado para ubicarse espacialmente en el sitio, visualizar los
campos y botones de los formularios o los llamados a actuar, la
comprensibilidad del idioma, la intuitividad asociada a la
navegación y la facilidad de navegación. A esto se le debe sumar la
fácil recordación de cada página y elemento del sitio o de la
información contenida.
Operatividad: La cual tiene que ver más con el contenido en sí
mismo. Para este criterio se evalúan parámetros como el acceso y
disponibilidad, la retro alimentación y la ayuda, las fuentes de
información y el contexto. Sí la pagina tiene mensajes de error
frecuentes tiene una posibilidad el 80% de que el usuario no regrese.
Satisfacción: Referida a parámetros de seguridad y confidencialidad
de la información del usuario.
Contenido: El control sobre lo publicado es esencial al medir la
usabilidad del sitio, por lo tanto, en el diseño se enfatiza en la
estética y la densidad del contenido. Los aspectos más relevantes a
tener en cuenta para la evaluación del contenido son la definición de
la identidad corporativa, la accesibilidad, la opción de desplegar el
contenido en cualquier navegador y la posibilidad de ajustar el
contenido a varias resoluciones de pantalla (diseño adaptativo)
(responsive)
37
Eficacia: Medir como afecta la tasa de errores en la navegación del
usuario.
Eficiencia: Para este punto es relevante hablar de dos aspectos, el
técnico que implica la velocidad de carga, el tiempo de respuesta de
los servicios o consultas y la velocidad de despliegue de contenidos.
5.2. Presupuesto
El presupuesto del proyecto productivo asciende a la suma de S/ 310.00 soles,
tal como se puede visualizar en el cuadro.
Tabla 1. Detalle del presupuesto

5.3. Planeación:
En la planeación se considero las actividades para el diseño y se repartió dichas
actividades. Consideramos el perfil técnico del proyecto y la estructura establecida
hasta lograr su publicación
38
Tabla 2. Cronograma de implementación
5.4. Implementación
En el desarrollo de la página web se consideró lo siguiente:
Un encabezado con el logo de la empresa, el número de contacto, la
dirección, las redes sociales implementadas para el proyecto. Y una barra
de menú que consta de Inicio, Nosotros, Heladería y Cafetería.
39
Figura 22. Encabezado de la página Web
En la vista de inicio contamos con:
 Nuestros productos.
Figura 23.Productos de la empresa
 Un banner de descuentos
Figura 24.Banner de descuento 40

 Comentarios de nuestros clientes
Figura 25.Comentarios de clientes

 Galería de nuestros productos con nombres y descripciones
Figura 26.Galería de productos
 Y una barra con servicios que brindamos.
41
Figura 27.Barra de servicios brindados
En la vista de nosotros contamos con:
Un banner de
la empresa
Frase de inicio
Al hacer click en cada

palabra te muestra
información de la
empresa.
Al hacer click en historia

se puede observar:
42
Al hacer click Al hacer click

en el menos: en el más:
43
Servicios ofrecidos
por la empresa.
Los iconos te aparecen

en cada personal,
llevándote a sus redes
sociales privadas.
44
El botón “Today” te lleva
al día actual
Las fechas pasan

los meses.
Los eventos programados

en el transcurso de los
meses
Te muestra
lo siguiente:
Al hacer click
en el botón:
45
Te muestra
lo siguiente:
Al hacer click
en el botón:
Te lleva al inicio
de la página.
Al hacer click
en el botón:
46
En la vista de la heladería encontramos:
Un banner con un
eslogan.
Sabor más
vendido
Botón que te dirige a

Facebook, al evento de la
inauguración.
47
Al hacer click en
“Especiales de la
casa”, te muestra lo
siguiente:
48
Al hacer click en
“Toppings”, te muestra
lo siguiente:
Al hacer click en
“Sabores”, te muestra
lo siguiente:
En la vista de la
heladería se puede
apreciar un video.
49
Preparación del café En la vista de cafetería encontramos:
El botón te lleva a la
página de Facebook,
donde explica más de
todos los productos.
50
Al hacer click en el
botón “Dúos” del
menú, te lleva a:
botón “Triples” del
menú, te lleva a:
botón “Combos” del
menú, te lleva a:
51
5.5. Adquisión del alquiler de hosting y dominio
La empresa adquirió un hosting gratuito que pertenece a 000webhost, este
hosting nos brinda las siguientes características:
300 MB de almacenamiento.
10 GB de Ancho de banda.
Hosting para 2 sitios web.
Sin publicidad.
Soporte de PHP y MySQL.
2 bases de datos MySQL, por sitio.
Autoinstalador de WordPress.
- Determinación del dominio:
Por ser una empresa comercial, de determino el dominio del comercio (.com).
Por lo cual la dirección web que se acordó para nuestro sitio es la siguiente:
www.kmnheladeriacafeteria.000webhostapp.com/
- Determinación del URL:
- https://kmnheladeriacafeteria.000webhostapp.com/cafeteria.html
5.6. Mantenimiento y actualización de la web
Esta fase del proyecto se realizará mensualmente, ingresando y actualizando la
información en las secciones a realizar las modificaciones, así mismo la
información será supervisada antes de su actualización.
52

Diseño de Un Sitio Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño de Un Sitio Web

Cargado por

Copyright:

Formatos disponibles

“Año de la Universalización de la

ESCUELA PROFESIONAL DE INGENIERÍA INDUSTRIAL

El presente trabajo lo dedicamos primeramente

Al docente a cargo del curso por todo el apoyo

1.1. Historia de la Web....................................................................................................6

1.1.1. La primera guerra de navegadores....................................................................7

1.1.2. La segunda guerra de navegadores...................................................................9

1.1.3. La tercera guerra de navegadores....................................................................10

1.1.4. El reinado de Google Chrome.........................................................................11

1.4. Página web.............................................................................................................15

1.5. Sitio web.................................................................................................................15

1.6.1. Google Chrome..............................................................................................16

1.6.2. Internet Explorer.............................................................................................17

1.7.1. ¿Por qué el dominio es importante para los sitios web?.................................18

1.8. Hosting o Alojamiento Web..................................................................................19

1.8.1. Alojamiento o Hosting gratuito.......................................................................19

1.8.2. Alojamiento o Hosting compartido.................................................................20

1.8.3. Alojamiento o Hosting de imágenes...............................................................20

1.8.4. Alojamiento o Hosting revendedor (reseller)..................................................20

1.8.5. Servidores virtuales (Virtual Private Server, VPS).........................................20

1.8.6. Alojamiento web en la nube (cloud hosting)..................................................21

1.8.7. Colocación (housing)......................................................................................21

1.9. Lenguaje de programación.....................................................................................22

1.9.4. Servidores Web...............................................................................................26

2.1. Objetivo General:...................................................................................................27

2.2. Objetivos Específicos:............................................................................................27

3.3. Valores de la empresa.............................................................................................28

4. Metas, resultados, efectos y propósito esperados del proyecto.....................................29

5. Diseño de la página web...............................................................................................30

5.1. Planificación de la página web...............................................................................30

5.1.1. Página Web.....................................................................................................30

5.1.2. Visitantes, Usuarios o clientes........................................................................33

5.5. Adquisión del alquiler de hosting y dominio.........................................................49

5.6. Mantenimiento y actualización de la web..............................................................49

Figura 2. Internet Explorer vs Netscape................................................................................11

Figura 3. Internet Explorer vs Firefox..................................................................................12

Figura 4.Google Chrome vs Internet Explorer......................................................................13

Figura 5.Reinado de Chrome................................................................................................15

Figura 8. Página Web............................................................................................................17

Figura 9. Logo de Google Chrome.......................................................................................19

Figura 10.Logo de Internet Explorer.....................................................................................19

Figura 11.Dominios de internet............................................................................................21

Figura 12. Tipos de Hostings o Alojamientos Web..............................................................23

Figura 13.Índice TIOBE de lenguajes de programación.......................................................24

Figura 14.Índice Trendyskills...............................................................................................25

Figura 18. Servidor Web.......................................................................................................28

Figura 19.Organigrama de la empresa..................................................................................30

Figura 20. Logo de la empresa..............................................................................................34

Figura 21. Eslogan de la empresa.........................................................................................34

Figura 22. Encabezado de la página Web.............................................................................39

Figura 23.Productos de la empresa.......................................................................................39

Figura 24.Banner de descuento.............................................................................................39

Figura 25.Comentarios de clientes........................................................................................40

Figura 26.Galería de productos.............................................................................................40

Figura 27.Barra de servicios brindados.................................................................................40

1.1. Historia de la Web

El primer servidor de páginas web de la historia se puso en marcha en

diciembre de 1990 en el CERN (Ginebra, Suiza). El inventor de la web, el

informático inglés Tim Berners-Lee, pretendía crear un sistema que

permitiera a los investigadores del CERN compartir fácilmente la

La primera versión del lenguaje de marcas inventado por Berners-Lee nunca

fue publicado como documento oficial, pero si lo hubiera sido se hubiera

llamado HTML 1.0.