DESARROLLO WEB II - 1
Examen final de la
asignatura (EFE)
Eduardo Gajardo
Sección 1
Índice
Contenido
Documentación de la solicitud del proyecto :........................................................................................... 2
Desarrollo de proyecto:...................................................................................................................................... 4
1. Presentación de Maqueta Sitio Web:.....................................................................5
2. Presentación de versión móvil :..............................................................................11
3. Presentación de Index.html: como ejemplo de la distribución de una página. 12
4. Presentación de la estructura de servidor Glasfich y de la conexión a BD de un Servlet:
19
5. Control de versiones y backup de proyecto en GtiHub:...............................20
6. Conclusión:..................................................................................................................... 21
7. Bibliografía:.................................................................................................................... 21
2
Documentación de la solicitud del proyecto :
Actualmente un emprendedor se encuentra vendiendo sus productos (ropa, zapatillas y accesorios) en
Instagram y Facebook, lo que significa que desde que publica un producto hasta que lo vende, realiza el
proceso de manualmente. Esto quiere decir que se contacta con cada cliente de forma personal, coordina la
entrega y valida las transferencias bancarias.
Él lo contrata a usted para desarrollar su sitio web y automatizar estos procesos, publicando los productos
(con su precio, descripción y variaciones) en la web y le entrega la siguiente descripción:
- El sitio web debe ser adaptable a todas las plataformas.
- Proceso de venta:
- Cuando el cliente paga se debe crear una orden online, esta orden puede contener varios productos
(parecido a una boleta con detalle).
- El pago se efectúa por transferencia, por tanto, se debe adjuntar el número de transacción y el
nombre de la persona para validar el pago.
- No se despacha a domicilio, el cliente viene a buscar sus productos.
- Los clientes deben registrarse para comprar.
- Los clientes pueden revisar su historial de compras.
- El software debe estar completamente respaldado en GitHub
3
Desarrollo de proyecto:
Para el desarrollo de este proyecto de sitio web se utilizaron tecnologías como HTML, Bootstrap, Estilos CSS,
JavaScript, también por parte del back-end se levantó una base de datos en MYSQL donde los Servlet
implementados en un servidor de aplicaciones Glasfish en NetBeans van a consultar y a guardar datos. el trabajo
estuvo enfocado en cumplir las necesidades solicitadas del cliente para presentar una propuesta ágil, intuitiva.
Para el desarrollo de la web se comenzó por construir la estructura con HTML5, definiendo el orden de los
contenidos y posteriormente los diseños que mantendrían en sus diferentes secciones.
Para la maquetación del sitio como se menciona se trabajo con html5 y css3. La maquetación contiene la parte
básica del desarrollo de la pagina web, me refiero con esto a definir la estructura con html y la apariencia con
css.
Partí segmentando la pagina con las divisiones: head y body. Al body se dividió en cabeceras (NavBar),
contenido y el footer de la página.
Posterior a esto se dio el estilo deseado con CSS3 y JavaScript para animar los menús(NavBar), los efectos de
transición de los carousel, colores tras una acción selección para el centro de ayuda para deslizamiento,
animaciones al pasar el puntero sobre las imágenes de los hoteles.
Se considero un diseño adaptativo con el fin de que este sitio se pudiera visar desde distintos dispositivos con
una buena representación física, tanto en computadores, teléfonos, Tablet, etc.
URL del Proyecto en GitHub para su revisión ………………………………………………………………….Link
4
1. Presentación de Maqueta Siti o Web:
5
6
7
8
9
10
2. Presentación de versión móvil :
11
3. Presentación de Index.html: como ejemplo de la distribución de una página.
4. <!DOCTYPE html>
5. <html lang="en">
6. <head>
7. <meta charset="UTF-8">
8. <meta name="viewport"
9. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimum-scale=1.0">
10. <link rel="stylesheet" href="css/bootstrap.min.css">
11. <script src="js/popper.min.js"></script>
12. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
13. <link rel="stylesheet" href="css/sweetalert2.min.css">
14. <title>Web Shop</title>
15.</head>
16.<body>
17. <header>
18. <div class="container">
19. <div class="row align-items-stretch justify-content-between">
20. <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
21. <a class="navbar-brand" href="#">CARRITO DE COMPRAS</a>
22. <button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse"
23. aria-controls="navbarCollapse" aria-expanded="false" aria-
label="Toggle navigation">
24. <span class="navbar-toggler-icon"></span>
25. </button>
26. <div class="collapse navbar-collapse" id="navbarCollapse">
27. <ul class="navbar-nav mr-auto">
28. <li class="nav-item dropdown">
29. <img src="img/cart.jpeg" class="nav-link dropdown-toggle
img-fluid" height="70px"
30. width="70px" href="#" id="dropdown01" data-
toggle="dropdown" aria-haspopup="true"
31. aria-expanded="false"></img>
32. <div id="carrito" class="dropdown-menu" aria-
labelledby="navbarCollapse">
33. <table id="lista-carrito" class="table">
34. <thead>
35. <tr>
36. <th>Imagen</th>
37. <th>Nombre</th>
38. <th>Precio</th>
12
39. <th></th>
40. </tr>
41. </thead>
42. <tbody></tbody>
43. </table>
44. <a href="#" id="vaciar-carrito" class="btn btn-
primary btn-block">Vaciar Carrito</a>
45. <a href="#" id="procesar-pedido" class="btn btn-
danger btn-block">Procesar Compra</a>
46. </div>
47. </li>
48. <li class="nav-item dropdown-reg">
49. <img src="img/registrarse.png" class="nav-link dropdown-
toggle img-fluid" height="70px"
50. width="70px" href="#" id="dropdown01" data-
toggle="dropdown" aria-haspopup="true"
51. aria-expanded="false"></img>
52. <div id="Registro" class="dropdown-menu" aria-
labelledby="navbarCollapse">
53. <h2>
54. Datos para Registro
55. </h2>
56. <table id="datos-registro" class="table">
57. <thead>
58. <tr>
59. <th>Ingrese su Nombre : </th>
60. <th> <input type="text" class="form-
control reg_nombre"name="reg_nombre" id="reg_nombre"></th>
61. </tr>
62. <tr>
63. <th>Rut : </th>
64. <th> <input type="text" class="form-
control reg_rut" name="reg_rut" id="reg_rut"></th>
65. </tr>
66. <tr>
67. <th>Correo : </th>
68. <th> <input type="text" class="form-
control reg_correo" name="reg_correo" id="reg_correo"></th>
69. </tr>
70. </thead>
71. <tbody></tbody>
72. </table>
73. <a href="#" id="btn-registro" class="btn btn-danger
btn-block">Registrarse</a>
74. </div>
13
75. </li>
76. <a href="historial.html">
77. <img src="img/historial.png" class="nav-link dropdown-
toggle img-fluid" height="70px"
78. width="70px" href="historial.html" aria-
haspopup="true"
79. aria-expanded="false"></img>
80. </a>
81. </li>
82. </ul>
83. </div>
84. </nav>
85. </div>
86. </div>
87. </header>
88.
89. <main>
90. <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 my-4 mx-auto text-center">
91. <h1 class="display-4 mt-4">FRUTAS Y VERDURAS</h1>
92. <p class="lead">Lista de Productos</p>
93. </div>
94.
95. <div class="container" id="lista-productos">
96.
97. <div class="card-deck mb-3 text-center">
98.
99. <div class="card mb-4 shadow-sm">
100. <div class="card-header">
101. <h4 class="my-0 font-weight-bold">Lechuga Escarola</h4>
102. </div>
103. <div class="card-body">
104. <img src="img/lechuga.jpg" class="card-img-top">
105. <h1 class="card-title pricing-card-title precio">$ <span
class="">980</span></h1>
106.
107. <ul class="list-unstyled mt-3 mb-4">
108. <li></li>
109. <li>Rica en vitaminas y minerales</li>
110. <li>Buena fuente de calcio y Omega 3</li>
111. <li>Ideal para acompañar una ensalada</li>
112. </ul>
113. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="1">Añadir</a>
114. </div>
115. </div>
14
116.
117. <div class="card mb-4 shadow-sm">
118. <div class="card-header">
119. <h4 class="my-0 font-weight-bold">Tomate granel </h4>
120. </div>
121. <div class="card-body">
122. <img src="img/tomate.jpg" class="card-img-top">
123. <h1 class="card-title pricing-card-title precio">$ <span
class="">875</span></h1>
124.
125. <ul class="list-unstyled mt-3 mb-4">
126. <li></li>
127. <li>Tomate tienda</li>
128. <li>Versión granel</li>
129. <li>Alto poder antioxidante</li>
130. </ul>
131. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="2">Añadir</a>
132. </div>
133. </div>
134.
135. <div class="card mb-4 shadow-sm">
136. <div class="card-header">
137. <h4 class="my-0 font-weight-bold">Limon 500grs.</h4>
138. </div>
139. <div class="card-body">
140. <img src="img/limon.jpg" class="card-img-top">
141. <h1 class="card-title pricing-card-title precio">$ <span
class="">1095</span></h1>
142.
143. <ul class="list-unstyled mt-3 mb-4">
144. <li></li>
145. <li>Naturalmente delicioso</li>
146. <li>Tipo de Producto: Vegetales</li>
147. <li>Contenido: A granel</li>
148. </ul>
149. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="3">Añadir</a>
150. </div>
151. </div>
152. </div>
153. <div class="card-deck mb-3 text-center">
154. <div class="card mb-4 shadow-sm">
155. <div class="card-header">
156. <h4 class="my-0 font-weight-bold">Cebolla 500grs.</h4>
15
157. </div>
158. <div class="card-body">
159. <img src="img/cebolla.jpg" class="card-img-top">
160. <h1 class="card-title pricing-card-title precio">$ <span
class="">565</span></h1>
161. <ul class="list-unstyled mt-3 mb-4">
162. <li></li>
163. <li>Deliciosa cebolla</li>
164. <li>Tipo de Producto: Vegetales</li>
165. <li>Contenido: A granel</li>
166. </ul>
167. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="4">Añadir</a>
168. </div>
169. </div>
170.
171. <div class="card mb-4 shadow-sm">
172. <div class="card-header">
173. <h4 class="my-0 font-weight-bold">Cebollin 3 un.</h4>
174. </div>
175. <div class="card-body">
176. <img src="img/cebollin.jpg" class="card-img-top">
177. <h1 class="card-title pricing-card-title precio">$ <span
class="">619</span></h1>
178.
179. <ul class="list-unstyled mt-3 mb-4">
180. <li></li>
181. <li>Ayuda a regular los niveles de colesterol</li>
182. <li>Disminuye el colesterol malo (LDL)</li>
183. <li>Aumenta los de colesterol bueno(HDL)</li>
184. </ul>
185. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="5">Añadir</a>
186. </div>
187. </div>
188. <div class="card mb-4 shadow-sm">
189. <div class="card-header">
190. <h4 class="my-0 font-weight-bold">Perejil un.</h4>
191. </div>
192. <div class="card-body">
193. <img src="img/perejil.jpg" class="card-img-top">
194. <h1 class="card-title pricing-card-title precio">$ <span
class="">560</span></h1>
195.
196. <ul class="list-unstyled mt-3 mb-4">
16
197. <li></li>
198. <li>Tipo de Producto: Verduras</li>
199. <li>Contenido: 1 unidad</li>
200. <li>Combate efectos del envejecimiento</li>
201. </ul>
202. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="6">Añadir</a>
203. </div>
204. </div>
205.
206. </div>
207.
208. <div class="card-deck mb-3 text-center">
209.
210. <div class="card mb-4 shadow-sm">
211. <div class="card-header">
212. <h4 class="my-0 font-weight-bold">Ajo 2 un.</h4>
213. </div>
214. <div class="card-body">
215. <img src="img/ajo.jpg" class="card-img-top">
216. <h1 class="card-title pricing-card-title precio">$ <span
class="">990</span></h1>
217.
218. <ul class="list-unstyled mt-3 mb-4">
219. <li></li>
220. <li>Ideal para tus preparaciones favoritas</li>
221. <li>Frescura y calidad garantizada</li>
222. <li>Delicioso sabor</li>
223. </ul>
224. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="7">Añadir</a>
225. </div>
226. </div>
227.
228. <div class="card mb-4 shadow-sm">
229. <div class="card-header">
230. <h4 class="my-0 font-weight-bold">Zapallo italiano un.</h4>
231. </div>
232. <div class="card-body">
233. <img src="img/zapallo.jpg" class="card-img-top">
234. <h1 class="card-title pricing-card-title precio">$ <span
class="">650</span></h1>
235.
236. <ul class="list-unstyled mt-3 mb-4">
237. <li></li>
17
238. <li>Ideal para tus preparaciones favoritas</li>
239. <li>Frescura y calidad garantizada</li>
240. <li>Delicioso sabor</li>
241. </ul>
242. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="8">Añadir</a>
243. </div>
244. </div>
245.
246. <div class="card mb-4 shadow-sm">
247. <div class="card-header">
248. <h4 class="my-0 font-weight-bold">Mango granel 500grs.</h4>
249. </div>
250. <div class="card-body">
251. <img src="img/mango.jpg" class="card-img-top">
252. <h1 class="card-title pricing-card-title precio">$ <span
class="">845</span></h1>
253.
254. <ul class="list-unstyled mt-3 mb-4">
255. <li></li>
256. <li>Naturalmente delicioso, ideal para tus preparaciones
favoritas</li>
257. <li>Tipo de Producto: Frutas</li>
258. <li>Contenido: A granel</li>
259. </ul>
260. <a href="" class="btn btn-block btn-primary agregar-carrito"
data-id="9">Añadir</a>
261. </div>
262. </div>
263.
264. </div>
265.
266. </div>
267. </main>
268.
269. <script src="js/jquery-3.4.1.min.js"></script>
270. <script src="js/bootstrap.min.js"></script>
271. <script src="js/sweetalert2.min.js"></script>
272. <script src="js/carrito.js"></script>
273. <script src="js/pedido.js"></script>
274. </body>
275. </html>
18
4. Presentación de la estructura de servidor Glasfi ch y de la conexión a BD de un Servlet:
Búsqueda de registros de órdenes de compra por Rut:
Búsqueda de usuario registrado según Rut ingresado :
Registro de nuevo usuario :
Registro de Orden de compra en BD:
19
5. Control de versiones y backup de proyecto en Gti Hub:
6. Conclusión:
20
En conclusión, luego de establecer los requisitos que debía cumplir según la solicitud del cliente y del encargado
de proyecto(El Profesor), y luego de definir la estructura base que utilizaría para el sitio y sus páginas comencé
con la parte de los estilos siendo esta una de las labores de mas tiempo consumido, considero que se el sitio
web quedo bastante agradable visualmente al igual que la forma de navegación bastante intuitiva para un
usuario promedio.
Este proyecto para ir realizando pruebas lo llevé a cabo en visual code y lo fui revisando mediante una
extensión llamada Live Server.
La base de datos fue montada en MySql, y se trabajó con el gestor de base de datos WorkBench.
El servidor de aplicaciones Glasfish fue montado en NetBeans, donde también se crearon los Servlet.
7. Bibliografí a:
1. https://www.tripadvisor.cl/ ………………………………………………………………………….información
2. https://github.com/EduardoGajardoO/Examen_Final...................................... control de versiones
3. URL del Proyecto en GitHub para su revisión ………………………………………………………………….Link
21
