Informe de Sabor Catracho

1
C.E.M.G TECNOLOGICO DE ADMINISTRACION DE EMPRESAS
INTAE
Asignatura: Diseño Web
Docente: Jun Carlos Cruz
Trabajo: Pagina web de comidas típicas de Honduras
Nombre del Proyecto: Sabor Catracho
Integrantes: Josue Miguel Cruz Juanez

Nayeli Cristel Ramírez Ardón
Grado: 12avo BTP en Informática
Sección: “B”
Jornada: Matutina
Año: 2023
2
Índice
Introducción......................................................3
“SABOR CATRACHO”......................................4
Elaborado Por:..................................................4
Marco Teórico....................................................4
Paleta de Colores.............................................5
Marco Metodológico..........................................6
Para Hacer el Menú................................................6
Para las tablas.........................................................9
Para el Footer.......................................................11
Presupuesto....................................................13
Conclusiones..................................................15
Glosario de Términos......................................16
Bibliografía....................................................20
Anexos............................................................21
3
Introducción
La página web va dirigida a una empresa llamada “Sabor

Catracho”, la cual consiste en la venta de comidas típicas
de Honduras, con el fin de dar a conocer grandes platillos
de la gastronomía Hondureña, con variación de postres,
desayunos, almuerzos y sopas, estaremos dando la
información más importante; como el precio, forma de
pagar, y el nombre del platillo, su página tendrá Menú,
Visión, página principal, formulario de pago, presentación
de los platillos, Carrusel de imágenes , Galería de
imágenes , Footer , y un espacio para Ayuda al cliente
etc.
¿Cuáles serían los diferentes platillos típicos de Honduras?

° Las Baleadas
° Pollo Chuco
° Rosquilla en miel
° Sopa de res
° Pescado
4
° Tamalitos entre una gran variedad de platillos
“SABOR CATRACHO”
Elaborado Por: Josue Miguel Cruz Juanez

Nayeli Cristel Ramírez Ardón
Marco Teórico
La Página está centrada y se trata de un restaurante de Comida
Hondureña, usamos tablas para hacer una especie de catálogo,
En cada una de las páginas damos a enseñar a nuestros clientes
Cada uno de nuestro platillo como en el Desayuno, Almuerzo,
Platillo Fuerte, Sopas, Postre, Bebidas, Combo, y Descuentos.
En Sabor Catracho queremos destacar y ser un restaurante de
Confianza para con el público con los platos culinarios más
Tradicionales de nuestra bella Honduras dando a ver su cultura
Y nuevos platillos utilizamos colores similares a los de la
Bandera Nacional un Azul Turquesa y un Blanco junto con un
Azul marino:
5
Paleta de Colores
6
Marco Metodológico
En nuestra página usamos los lenguajes de
programación de HTML y CSS, y utilizamos Visual
Code como programa de lectura de código a
continuación los códigos más importantes que
usamos:
Para Hacer el Menú

.container {
display: flex;
justify-content: space-between;
}
.nav-menu {
background-color: white;
width: 200px;
padding: 10px;
color: black;
position: absolute;
z-index: 1;
}
.nav-menu ul {
padding: 0;
list-style: none;
}
.nav-menu li {
position: relative;
}
.nav-menu a {
display: block;
padding: 10px;
color: black;
text-decoration: none
7
Codificación en CSS
}
.nav-menu ul ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #3678E9;
}
.nav-menu ul li:hover>ul {
display: inherit;
}
.nav-menu ul li {
border-bottom: 1px solid black;
}
.nav-menu ul li:hover {
background-color: white;
}
.nav-menu ul li a:hover {
color: black;
}
.button {
background-color: #3678E9;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
8
Codificación en HTML:
Usamos un menú desplegable que usamos la
etiqueta <li> para darle un orden al Sub Menú,
agregándole hyperlinks para pasar a los siguientes
menús.
<body>
<div class="menu-wrapper">
<ul class="principal-menu">
<ul class="principal-menu">
<li><a href="NuestroSabor.html">Nuestro Menú </a>
<ul class="sub-menu">
<li><a href="desayuno.html">Desayunos</a></li>
<li><a href="almuerzo.html">Almuerzo</a></li>
<li><a href="sopa.html">Sopas</a></li>
<li><a href="bebida.html">Bebidas</a></li>
<li><a href="postre.html">Postres</a></li>
</ul>
</li>
<li><a href="#">Aún Más </a>
<ul class="sub-menu">
<li><a href="combos.html">Combos</a></li>
<li><a href="descuento.html">Descuentos</a></li>
<li><a href="galeria.html">Lo Más Popular </a></li>
</ul>
</li>
</ul>
</div>
</div>
9
Para las tablas

table {
margin: 0 auto;
background: White;
border-collapse: collapse;
width: 200px;
}
table,
th,
td {
border: 1px solid black;
}
Codificación en HTML:
Usamos <table>, <tr>, <td>, para crear las tablas que nos
servirán para hace una especie de Menú, y en el código
de CSS, definimos el color de los bordes de la tabla como
sus márgenes y en ellas agregamos imágenes, nombre
del producto, precio, y botón de ver y otro de comprar.
<div class="table">
<table>
<tr>
<td>
<img src="imsH/b1.jpg" width="250" height="350"><br>
<h2>
<center>
<p><font color="black"> <hr>Baleadas con <br>
Aguacate y Huevo <br><br><u>Precio: 60.00Lps</u> <br> <hr><center>
<br>
<a href="desayuno.html" class="button">Ver
más</a>
10
</font> <p></center></h2>
</td>
<td>
<img src="imsH/pes1.jpg" width="250" height="350"><br>
<h2>
<center>
<p><font color="black"> <hr> Pescado Frito
<br>con Tomate <br><br><u>Precio: 250.00Lps</u><br> <hr><center>
<br>
<a href="almuerzo.html" class="button">Ver
más</a>
</td>
<td>
<img src="imsH/mon1.jpg" width="250" height="350"><br>
<h2>
<center>
<p><font color="black"> <hr>Sopa de <br>
Mondongo <br><br><u>Precio: 200.00Lps</u><br> <hr> <br>
<a href="sopa.html" class="button">Ver más</a>
</td>
<td>
<img src="imsH/h1.jpg" width="250" height="350"><br>
<h2>
<center>
<p><font color="black"><hr> Agua de <br>
Horchata <br><br><u>Precio: 60.00 Lps</u><br><hr><center><br>
<a href="bebida.html" class="button">Ver más</a>
</td>
<td>
<img src="imsH/arroz.jpg" width="250" height="350"><br>
<h2>
<center>
<p><font color="black"><hr> Arroz con <br> leche
<br><br><u>Precio: 25.00 Lps</u><br><hr><center><br>
<a href="postre.html" class="button">Ver más</a>
</td>
</tr>
11
Para el Footer
<style>
/* Para el footer */
.footer {
background-color: #00bce4;
padding: 35px;
}
.footer-row {
display: flex;
flex-wrap: wrap;
}
.footer-links {
width: 25%;
padding: 0 15px;
}
.footer-links h4 {
font-size: 20px;
color: white;
margin-bottom: 25px;
font-weight: 500;
border-bottom: 2px solid aliceblue;
padding-bottom: 10px;
display: inline-block;
}
.footer-links ul li a {
font-size: 18px;
text-decoration: none;
color: antiquewhite;
display: block;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.footer-links ul li a:hover {
color: white;
padding-left: 6px;
}
.container4 {
12
display: flex;
justify-content: center;
}
.image {
width: 110px;
height: 90px;
margin: 0 10px;
}
</style>
Codificación en HTML
Agregamos imágenes de las redes sociales para que el usuario
al darle click se dirija a ellas, también un formulario de Ayuda al
cliente, Misión, Visión y Valores y Derechos de Autor.
<div class="footer-links">
<h4>Síguenos en Nuestras Redes</h4>
<div class="container4">
<a href="https://www.instagram.com/"><img
src="imsH/cii.png" class="image" high="60" width="60"></a>
<a href="https://es-la.facebook.com/"><img
src="imsH/cf.png" class="image" high="45" width="45"></a>
<a href="https://web.whatsapp.com/"><img
src="imsH/cw.png" class="image" high="45" width="45"></a>
</div>
</div>
</div>
</div><br><br>
<h5>Derechos Reservados Sabor © Catracho 2023</h5>
</footer>
13
Presupuesto
1. Dominio y Alojamiento:
 Registro de dominio: 360 - 1,200 lempiras al
año.
 Alojamiento web: 2,400 - 7,200 lempiras al año.
2. Desarrollo y Diseño Web:
 Costos de desarrollo web: 24,000 - 120,000
lempiras o más para un sitio web personalizado.
3. Costos del CMS:
 Costos del CMS: 1,200 - 4,800 lempiras.
4. Diseño y Gráficos:
 Costos de diseño gráfico: 12,000 - 48,000
lempiras.
5. Contenido y Fotografía:
 Costos de redacción de contenido y fotografía:
12,000 - 48,000 lempiras.
6. Optimización SEO:
 Costos de SEO: 12,000 - 24,000 lempiras o más.
14
7. Marketing y Redes Sociales:

 Presupuesto mensual para marketing y
publicidad: 2,400 - 12,000 lempiras o más,
dependiendo de tus objetivos.
8. Mantenimiento y Actualización:
 Costos de mantenimiento anual: 12,000 - 24,000
lempiras o más.
9. Gastos Adicionales:
 Otros gastos adicionales: Variable, dependiendo
de las necesidades específicas.
15
Conclusiones
En conclusión, la página web "Sabor Catracho" representa una
emocionante oportunidad para promover la auténtica cocina
hondureña y compartir la riqueza cultural y gastronómica de Honduras
con una audiencia global. Al trazar un marco teórico y metodológico
sólido, y considerando cuidadosamente los costos asociados, puedes
crear un recurso en línea que destaque la autenticidad de la comida
hondureña. Aquí hay algunos puntos clave:
1. Cultura Culinaria Hondureña: La página "Sabor Catracho" tiene el
potencial de convertirse en una plataforma que resalte la
diversidad y autenticidad de la cocina hondureña, preservando las
tradiciones culinarias y compartiéndolas con el mundo.
2. Identidad de Marca y Valores: La misión y visión de "Sabor
Catracho" deben reflejar la pasión por la gastronomía hondureña
y el compromiso con la autenticidad, creando una identidad de
marca sólida.
3. Contenido y Promoción: La calidad y autenticidad del contenido,
junto con una estrategia de marketing efectiva, serán clave para
atraer a una audiencia interesada en la cocina hondureña y su
cultura.
4. Presupuesto: Planificar y gestionar cuidadosamente el
presupuesto es esencial para asegurarte de que el proyecto sea
sostenible y exitoso.
5. Mantenimiento Continuo: La actualización constante del
contenido y la atención a las tendencias culinarias y tecnológicas
son esenciales para mantener la relevancia y el éxito a largo plazo
de la página.
16
Glosario de Términos
1. Alojamiento: es un servicio que almacena su sitio web
o aplicación web y lo hace fácilmente accesible a través
de diferentes dispositivos como el escritorio, el móvil y las
tabletas.
2. Catalogo: el conjunto de asientos de los documentos de
una colección, ordenados según unas normas.
3. Carrusel de imágenes: nos permite mostrar una
sucesión de imágenes que se irán mostrando una tras
otra a las que podremos añadir un título, un subtítulo y un
enlace si queremos.
4. Code: es una organización sin fines de lucro, dedicada
a expandir el acceso a Ciencias de la Computación
5. Contenido: es la información contenida en los medios
de comunicación.
6. CSS: Siglas de "Cascading Style Sheets". Un lenguaje
de marcado utilizado para aplicar estilos y diseño a
páginas web.
7. Cultura Culinaria: es la conexión entre la tradición y el
deleite de la cocina
8. Desarrollo: conjunto de actividades informáticas
dedicadas al proceso de creación, diseño, despliegue y
compatibilidad de software.
17
9. Diseño: método de diseño que utiliza una combinación

de algoritmos y parámetros para resolver problemas de
diseño con procesamiento informático avanzado
10. Dominio web: es el nombre único que recibe un sitio
web en Internet.
11. Etiqueta: Las etiquetas HTML son fragmentos de
código que nos permiten crear elementos HTML
12. Formulario: consta de un conjunto de campos de
datos solicitados por un determinado programa, los cuales
se almacenarán para su procesamiento y posterior uso
13. Footer: es la parte inferior de una página web, en la
que se incluye una serie de elementos que pueden
resultar de interés para el usuario que navega por ella
14. Fuentes: colección de líneas de texto, escritas en un
lenguaje de programación, que guían el proceso de
ejecución de un programa.
15. Galería de imágenes: Una galería de imágenes es un
recurso muy útil cuando necesitas mostrar una serie de
fotos en una página o artículo de tu sitio web. Te permite
agruparlas y mostrarlas de una forma más profesional.
16. Gráficos: es el nombre dado a cualquier imagen
generada por una computadora.
17. Gestión: es el proceso de gestión de iniciativas
interdependientes a largo plazo en consonancia con los
objetivos de tu empresa.
18
18. Href: Un atributo en HTML que especifica la dirección

URL de un enlace.
19. HTML: Siglas de "HyperText Markup Language". El
lenguaje estándar utilizado para crear páginas web.
20. Hyperlinks: Un hipervínculo o hiperenlace es
un elemento de un documento electrónico que hace
referencia a otro recurso, por ejemplo, a otro punto dentro
del mismo o de otro documento.
21. Marca: es una identificación comercial primordial o el
conjunto de varios identificadores con los que se relaciona
y ofrece un producto o servicio en el mercado
22. Marketing: sirve para establecer una guía clara y
detallada de las acciones y estrategias que una empresa
debe llevar a cabo para alcanzar sus objetivos de
marketing y obtener una ventaja competitiva en el
mercado.
23. Márgenes: un margen es el área entre el contenido
principal de una página y los bordes de la misma.
24. Mantenimiento: Conjunto de operaciones y cuidados
necesarios para que instalaciones, edificios, industrias,
etc., puedan seguir funcionando adecuadamente.
25. Menú: un grupo de opciones clasificadas, las cuales
permiten el acceso a las operaciones que las aplicaciones
realizan.
19
26. Misión: definir las especificaciones técnicas

necesarias para el uso de un programa
27. Optimización SEO: Se trata del proceso de mejorar un
sitio para que los buscadores puedan comprenderlo
mejor.
28. Producto: es aquello que se fabrica y se destina
al mercado para satisfacer una demanda.
29Valores: tipo de dato es la clasificación de un dato
según sus características. Puede tratarse de una cadena,
de un texto, de números, etc., y un valor es cualquier
clase de dato que se halle dentro de un tipo de dato.
30. Visión: Acción y efecto de percibir algo con los ojos a
través de la luz que, reflejada en los objetos, impacta en
ellos
20
Bibliografía
Carlos Hugo Garcia .P. (17 de Julio de 2020). Carlos Hugo Garcia .P. Obtenido de
Carlos Hugo Garcia .P: https://youtu.be/JIjbeQhPJfg?si=h_LeVtbTJAessamS
FalconMasters. (26 de Febrero de 2012). FalconMasters. Obtenido de

FalconMasters: https://youtu.be/oZa2Ut8u2S0?si=IrdyXw-uO_KtrmUe
Kiko Palomo. (6 de Marzo de 2016). Kiko Palomo . Obtenido de Kiko Palomo:

https://youtu.be/SjVFCsBPzWU?si=Jf7QpS8arcW3E4Yi
Kiko Palomo. (2021 de Enero de 2019). Kiko Palomo. Obtenido de Kiko Palomo :
https://youtu.be/JZK8sTyf3KM?si=tr5cxK_SeuPWn22T
21
Anexos
22
23

Informe de Sabor Catracho

Cargado por

Copyright:

Formatos disponibles

Informe de Sabor Catracho

Cargado por

Información del documento

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

Informe de Sabor Catracho

Cargado por

Copyright:

Formatos disponibles

1

C.E.M.G TECNOLOGICO DE ADMINISTRACION DE EMPRESAS

Asignatura: Diseño Web

Docente: Jun Carlos Cruz

Trabajo: Pagina web de comidas típicas de Honduras

Nombre del Proyecto: Sabor Catracho

Integrantes: Josue Miguel Cruz Juanez

Grado: 12avo BTP en Informática

La página web va dirigida a una empresa llamada “Sabor

¿Cuáles serían los diferentes platillos típicos de Honduras?

° Tamalitos entre una gran variedad de platillos

Elaborado Por: Josue Miguel Cruz Juanez

Para Hacer el Menú

Para las tablas

7. Marketing y Redes Sociales:

9. Diseño: método de diseño que utiliza una combinación

18. Href: Un atributo en HTML que especifica la dirección

26. Misión: definir las especificaciones técnicas

FalconMasters. (26 de Febrero de 2012). FalconMasters. Obtenido de

Kiko Palomo. (6 de Marzo de 2016). Kiko Palomo . Obtenido de Kiko Palomo:

También podría gustarte