Documente Academic
Documente Profesional
Documente Cultură
Programación Web
Prof. Estela Romero Fuentes
1
Conclusión ........................................................................................................................................... 1
Anexo 1................................................................................................................................................ 1
2
Introducción
3
Introducción a las Aplicaciones Web
Las aplicaciones Web han revolucionado la forma de utilizar internet, aumentando
el contenido de las páginas con texto estático (texto que no evoluciona, sino que
permanecen como es) a un contenido rico e interactivo, por lo tanto, escalable.
Aplicación Web en Servicio: Estas páginas implementan el punto final del servicio
web.
Arquitectura de 3 capas:
4
Arquitectura Orientada a Servicios (SOA): Esta basado en el diseño de servicios
de que reflejan las actividades del negocio en le mundo real, estas actividades
hacen parte de los procesos del negocio de la compañía.
Accesibilidad:
Criterios.
5
Maquetación del proyecto
(Ver Anexo 1)
Este es el index de nuestra pagina donde mostramos lo que es nuestra barra de menú, en donde
teneos las diferentes opciones de navegabilidad de la página, donde en la parte derecha al final de
la barra de menú, se encuentra nuestro carrito de compras y nuestra sección para cerrar sesión.
Después en ñla parte inferior a nuestra barra de navegación encontramos nuestro Slider, en el cual
mostrar en este caso en particular 4 imágenes que se deslizaran y llavaran al usuario a diferentes
partes de la pagina, donde, además, se muestras los botones de navegación para la interactividad
con el usuario, el botón de play / stop, y paginación siguiente.
Después de nuestro slide, encontramos nuestra sección de registro y por último nuestro pie de
pagina o footer, dodne tenemos nuestras redes sociales, información de la compañía y nuestra
ubicación y contacto.
Después nuestra segunda pagina es los productos de pizza donde tenenemos como fijo nuestra
barra de navegación y nuestro pie de pagina, lo único diferente que cambia a lo demás es nuestra
muestra de productos, donde tenemos la tabla de muestra y con implementación de php, validamos
si hay un sesión y si la hay mostramos el agregar al carrito o no, y así por consiguiente en las demás
de combos y adicionales.
6
Ilustración 2 Sección Pizzas
7
Ilustración 4 Sección Adicionales
En esta sección del carrito de compras tenemos todo lo que es lo que el usuario agrego al carrito,
según la sesión que este inicioada, en donde, tenemos como muestra y fijo, el footer y la barra de
menú, además, ahora mostramos lo que e la imagen de nuestro producto, descripción y precio.
8
HTML Y CSS
HTML: Es un lenguaje de programación que se utiliza para el desarrollo de páginas
de internet. Se trata de las siglas que corresponden a Hyper Text Markup Language,
es decir, Lenguaje de Marcas de Hipertexto.
CSS: (Hojas de Estilo en Cascada) Es una tecnología que nos permite crear páginas
web de una manera más exacta, gracias a las CSS somos mucho más dueños de
los resultados finales de la página, pudiendo hacer muchas cosas que no se podían
hacer utilizando solamente HTML.
Con CSS podemos especificar estilos como tamaño, fuentes color, espacios.
Formas de Estilo
Directamente a la marca
En el head de la pagina
Archivo Externo o independiente
Estructura Básica
<html>
<head><title></title></head>
<body>
</body>
</html>
Etiqueta <br>
Etiqueta <p>
Etiqueta <h1>
9
Etiqueta <hr>
Unificación de Celdas
En algunas ocasiones puede ser necesario unificar dos o mas celdas en una sola
que pasará a ocupar el lugar de aquellas afectadas.
Etiquetas Body
Selectores
Una regla de CSS esta formada por un selector y declarador, una misma regla se
puede declarar a todos y un mismo selector se puede aplicar en varios.
Selector Universal
Aplica el estilo a los elementos que coinciden con el selector (se aplica en todos los
elementos)
Selector descendente
10
Selecciona los elementos que se encuentran dentro de otros elementos. Un
elemento es descendente de otro cuando se encuentran entre las etiquetas de
apertura y cierre.
Selector de Clase
Selector de ID
Imagen de fondo (background image): imagen que se muestra por detrás del
contenido y el espacio de relleno
Color de fondo (background color): Color que se muestra detrás del contenido
en el espacio de relleno.
Margen (margin): Separación opcional existente entre la caja y el resto de las cajas
adyacentes.
11
Código HTML
Barra de Navegación
<header> inigualables, siempre con la firmeza y
<nav class="menu"> seguridad de que nuestros clientes son lo
Footer Contacto</h1>
<footer> <div class="row2">
<div class="contenertodo"> <img
<div class="pie"> src="imagenes/iconos/home.png">
<div class="columna1"> <label>Boulevar Lázaro
<h1>Más Información de la Cárdenas #512, Col. Centro, La Piedad,
compañia</h1> Michoacán, México.</label></div>
<p>Pizza Delight degustando a <div class="row2">
miles de familias con su pizza única y sabor
12
<img play: {
src="imagenes/iconos/telefono.png"> active: true,
<label>352-103-91-
// [boolean] Generate the play
04</label></div> and stop buttons.
<div class="row2"> // You cannot use your own
<img buttons. Sorry.
src="imagenes/iconos/correo.png"> effect: "slide",
<label>ContactoPizzaAmigo@pizzadelight.co
// [string] Can be either "slide"
m</label></div> or "fade".
</div> interval: 3000,
1
<?php <li><label>Confirme
if(isset($_SESSION['id_usuario'])){ ?> Correo:</label> <input type="email"
name="valcorreo" id="valcorreo"
<center><h1>Las Mejores Pizzas required></li>
para Degustar</h1></center>
<li><label>Correo:</label> </section>
<input type="email" name="correo"
id="correo" required></li>
Combos Contenido
<section> <tr>
<img <td>
src="imagenes/pizza2a9sarten.jpg" <p>CRUJI</p><img
width="90%" height="35%" style="margin-left: width="100%" src="imagenes/cruji.png">
3%;"> <ul>
<input type="hidden"
<table class="listado"> name="idprodu">
<form action="php/agregar.php"
name="formu" method="post">
2
<li>Nuestra masa estrella onclick="combogrande()" value="Agregar al
crujiente y deliciosa, al pedirla aquí, llevate Carrito"></input> <?php } ?>
gratis un refresco 1.5L</li> </td>
<p class="precio2">$290</p> <td>
</ul> <p>Orilla Rellena de
<?php Queso</p><img width="100%"
if(isset($_SESSION['id_usuario'])){ ?> src="imagenes/orilla de queso.png">
<input type="submit" <ul>
class="button" name="agregar" <li>Tu Pizza a tu manera,
onclick="combocruji()" value="Agregar al prueba esta deliciosa combinación, de la
Carrito"></input> <?php } ?> riquisima orilla de queso acompañado del
</td> mejor sabor, una pizza</li>
<td> <p class="precio2">$180</p>
<p>Cajeta Bit Gratis + Pizza </ul>
Grande</p><img <?php
width="100%"src="imagenes/pizza2a9sarten. if(isset($_SESSION['id_usuario'])){ ?>
jpg"> <input type="submit"
<ul> class="button" name="agregar"
<li>Cajeta Bit GRATIS en la onclick="comboOrilla()" value="Agregar al
compra de pizza Grande</li> Carrito"></input> <?php } ?>
<p class="precio2">$280</p> </td>
</ul> </tr>
<?php <tr width="100%">
if(isset($_SESSION['id_usuario'])){ ?> <td colspan="2">
<input type="submit" <p>Cajeta Bit gratis + Pizza
class="button" name="agregar" Grande</p><img width="70%"
onclick="combocajeta()" value="Agregar al src="imagenes/pizza2a9.jpg" >
Carrito"></input> <?php } ?> <ul>
</td> <li>Cajeta Bit GRATIS en la
</tr> compra de Pizza Grande</li>
<tr> <p class="precio2">$190</p>
<td> </ul>
<p>Pizza Grande + <br>
Papotas</p><img width="100%" <?php
src="imagenes/originalpapas.png"> if(isset($_SESSION['id_usuario'])){ ?>
<ul> <input type="submit"
<li>La deolicios pizza de class="button" name="agregar"
Pepperoni Original + unas papotas, las onclick="comboCavara()" value="Agregar al
ideales para acompañar este manjar POR Carrito"></input> <?php } ?>
SOLO $129 PESOS</li> </td>
<p class="precio2">$129</p> </tr>
</ul> </form>
<?php </table>
if(isset($_SESSION['id_usuario'])){ ?> </section>
<input type="submit"
class="button" name="agregar"
Dentro de los combos, lo único que fue implementado ademas de lo que ya tenemos
o sabmos que el la barra de navgacion y nuestro footer, es la tabla de contenido de
nuestros productos, donde únicamente se muestra fijamente cada uno de ellos con
su descripción, nombre, precio y descriptivo nombre.
1
Adicionales Contenido
<img src="imagenes/canelabit.jpg" <p>Canela Bit</p><img
width="50%" height="35%" style="margin-left: width="100%" src="imagenes/canelabit.jpg">
24%;"> <ul>
<table class="listado"> <li>Panecitos espolvoreados
<form action="php/agregar.php" con canela y azúcar</li>
name="formu" method="post"> <p class="precio2">$90</p>
<tr><td colspan="2" style="font-size: </ul>
40px; color: <input type="hidden"
red;"><strong>ENTRADAS</strong></td></tr name="cajetabi" />
> <?php
<tr> if(isset($_SESSION['id_usuario'])){ ?>
<td> <input type="submit"
<p>Papotas</p><img class="button" name="agregar"
width="100%" src="imagenes/papas.jpg"> onclick="canela()" value="Agregar al
<ul> Carrito"></input> <?php } ?>
<input type="hidden" </td>
name="idprodu"> <td>
<li>Ricos gajos de papa con <p>Cajeta Bit</p><img
un espolvoreado picosito</li> width="100%" src="imagenes/cajetabit.jpg">
<p class="precio2">$60</p> <ul>
</ul> <li>Deliciosos panecitos
<?php cubiertos de cajeta y glass</li>
if(isset($_SESSION['id_usuario'])){ ?> <p class="precio2">$90</p>
<input type="submit" </ul>
class="button" name="agregar" <input type="hidden"
onclick="papotas()" value="Agregar al name="cajetabit" value="0" />
Carrito"></input> <?php } ?> <?php
</td> if(isset($_SESSION['id_usuario'])){ ?>
<td> <input type="submit"
<p>Alitas</p><img class="button" name="agregar"
width="100%"src="imagenes/alitas.jpg"> onclick="cajeta()" value="Agregar al
<ul> Carrito"></input> <?php } ?>
<li>Deliciosas alitas </td>
horneadas con salsa Mango Habanero</li> </tr>
<p class="precio2">$100</p> <tr width="100%">
</ul> <td colspan="2">
<?php <p>Bebidas</p><img
if(isset($_SESSION['id_usuario'])){ ?> width="70%" src="imagenes/chescos.jpg">
<input type="submit" <ul>
class="button" name="agregar" <li>Pepsi</li>
onclick="alitas()" value="Agregar al <li>Manzanita Sol</li>
Carrito"></input> <?php } ?> <li>Mirinda</li>
</td> <li>7up</li>
</tr> <li>Liptón</li>
<tr><td colspan="2" style="font-size: <li>Agua Natural</li>
40px; color: <li>Be Light Jamaica</li>
red;"><strong>POSTRES</strong></td></tr> <span>Elija Refresco:
<tr> </span>
<td> <select name="chescos"
class="listado2">
1
<option value="Pepsi">Pepsi</option> <br>
<option value="Manzanita Sol">Manzanita <?php
Sol</option> if(isset($_SESSION['id_usuario'])){ ?>
<option value="Mirinda">Mirinda</option> <input type="submit"
<option value="7up">7up</option> class="button" name="agregar"
<option value="Lipton">lipton</option> onclick="refresco()" value="Agregar al
<option value="Agua Natural">Agua Carrito"></input> <?php } ?>
Natural</option> </td>
<option value="Be Light Jamaica">Be Light </tr>
Jamaica</option> </form>
</select> </table>
<p class="precio2">$25</p> </section>
</ul>
Prosiguiendo de esta manera se muestra lo mismo, en nuestra sección de
adicionales, pizzas y combos, tienen como tal la barra de navegación, el respectivo
footer y como tal la muestra de los contenidos, en donde es mostrado que, si tiene
una sesión iniciada, se muestre el botón de agregar carrito y si hay sesión ue omita
el mostrado de los botones de agregar carrito.
1
Pizzas Contenido
<section> <li>Jamón</li>
<img src="imagenes/slides/original.jpg" <li>Finas Hierbas</li>
width="90%" height="35%" style="margin-left: <li class="precio">$230</li>
3%;"> </ul>
<table class="listado"> <?php
<form action="php/agregar.php" if(isset($_SESSION['id_usuario'])){ ?>
name="formu" method="post"> <input type="submit"
<tr> class="button" name="agregar"
<td> onclick="frias()" value="Agregar al
<p>Pepperoni Special</p><img Carrito"></input> <?php } ?>
src="imagenes/pepperoni.jpg"> </td>
<ul> <td>
<li>Pepperoni</li> <p>4 Quesos Extreme</p><img
<li>Champiñones</li> src="imagenes/4quesos.jpg">
<li>Extra Queso</li> <ul>
<li class="precio">$130</li> <li>Queso Mozzarrella</li>
</ul> <li>Queso Crema</li>
<input type="hidden" <li>Queso Cheddar</li>
name="idprodu"> <li>Queso Parmesano</li>
<?php <li class="precio">$290</li>
if(isset($_SESSION['id_usuario'])){ ?> </ul>
<input type="submit" <?php
class="button" name="agregar" if(isset($_SESSION['id_usuario'])){ ?>
onclick="pepe()" value="Agregar al <input type="submit"
Carrito"></input> <?php } ?> class="button" name="agregar"
</td> onclick="quesos()" value="Agregar al
<td> Carrito"></input> <?php } ?>
<p>Hawaiana s/Coco</p><img </td>
src="imagenes/Hawaiana.jpg"> </tr>
<ul> <tr>
<li>Jamón</li> <td>
<li>Piña</li> <p>Honolulu</p><img
<li>Extra Queso</li> src="imagenes/Honolulu.jpg">
<li class="precio">$140</li> <ul>
</ul> <li>Jamón</li>
<?php <li>Tocino</li>
if(isset($_SESSION['id_usuario'])){ ?> <li>Piña</li>
<input type="submit" <li>Jalapeño</li>
class="button" name="agregar" <li class="precio">$270</li>
onclick="hawa()" value="Agregar al </ul>
Carrito"></input> <?php } ?> <?php
</td> if(isset($_SESSION['id_usuario'])){ ?>
</tr> <input type="submit"
<tr> class="button" name="agregar"
<td> onclick="hono()" value="Agregar al
<p>Carnes Frias</p><img Carrito"></input> <?php } ?>
src="imagenes/carnesfrias.jpg"> </td>
<ul> <td>
<li>Salami</li> <p>Mexicana BB</p><img
<li>Pepperoni</li> src="imagenes/mexicana.jpg">
1
<ul> </tr>
<li>Chorizo</li> <tr>
<li>Carne Molida</li> <td colspan="2" style="font-size:
<li>Jalapeño</li> 30px;"> Deluxe</td>
<li>Cebolla</li> </tr>
<li class="precio">$280</li> <tr>
</ul> <td>
<?php <p>King's Delight</p><img
if(isset($_SESSION['id_usuario'])){ ?> src="imagenes/rich.jpg">
<input type="submit" <ul>
class="button" name="agregar" <li>Pepperoni</li>
onclick="mexi()" value="Agregar al <li>Carne Molida</li>
Carrito"></input> <?php } ?> <li>Jamón</li>
</td> <li>Chorizo</li>
</tr> <li>Pimiento</li>
<tr> <li>Cebolla</li>
<td> <li>Champiñones</li>
<p>Veggie friendly</p><img <li>Aceitunas</li>
src="imagenes/vegetales.jpg"> <li>Extra Queso</li>
<ul> <li class="precio">$400</li>
<li>Pimiento</li> </ul>
<li>Champiñones</li> <?php
<li>Aceitunas</li> if(isset($_SESSION['id_usuario'])){ ?>
<li>Cebolla</li> <input type="submit"
<li class="precio">$240</li> class="button" name="agregar"
</ul> onclick="rey()" value="Agregar al
<?php Carrito"></input> <?php } ?>
if(isset($_SESSION['id_usuario'])){ ?> </td>
<input type="submit" <td>
class="button" name="agregar" <p>Delight Deluxe</p><img
onclick="veggie()" value="Agregar al src="imagenes/suprema.jpg">
Carrito"></input> <?php } ?> <ul>
</td> <li>Pepperoni</li>
<td> <li>Carne Molida</li>
<p>Chicken-Little</p><img <li>Champiñones</li>
src="imagenes/pollopinia.jpg"> <li>Pimiento</li>
<ul> <li>Cebolla</li>
<li>Pollo</li> <li class="precio">$350</li>
<li>Tocino</li> </ul>
<li>Piña</li> <?php
<li>Salsa Mango if(isset($_SESSION['id_usuario'])){ ?>
Habanero</li> <input type="submit"
<li class="precio">$310</li> class="button" name="agregar"
</ul> onclick="deli()" value="Agregar al
<?php Carrito"></input> <?php } ?>
if(isset($_SESSION['id_usuario'])){ ?> </td>
<input type="submit" </tr>
class="button" name="agregar" </form>
onclick="pollo()" value="Agregar al </table>
Carrito"></input> <?php } ?> </section>
</td>
1
Código CSS
Estilo Carrito
table tr td{ font-family: "Arial Narrow";
font-size: 23px; color: white;
border-bottom: 1px solid; }
border-right: 1px solid; .button:hover{
} background: white;
.button{ color: black;
padding: 12px; border-bottom-color: red;
background: #5b97ff; border-color: blue;
font-size: 20px; cursor: pointer;
border-radius: 30px; }
De esta manera, aquí se implementa nuestro estilo del carrito, donde le damos
formato a lo que es el botón de eliminar en este caso y el seccionamiento de la tabla,
la función del botón únicamente cuando se hace un posicionaiento del puntero y
cuando el putnero esta fuera de él.
Estilo Footer
footer{ display: flex;
width: 100%; font-size: 16px;
background: #000005;
color: aliceblue; }
} .row img{
.contenertodo { margin-top: 12px;
width: 100%; width: 36px;
max-width: 100%; height: 36px;
margin: auto; }
padding: 40px; .row label{
} margin-top: 10px;
.pie { margin-left: 20px;
display: flex; }
justify-content: space-between; columna3{
} max-width: 20%;
.columna1{ }
max-width: 50%; .row2 {
text-align: justify; margin-top: 20px;
} display: flex;
.contenertodo h1{ }
font-size: 20px; .row2 img{
} width: 36px;
.columna1 p{ height: 36px;
font-size: 16px; }
margin-top: 20px; .row2 label{
max-width: 50%;
} font-size: 16px;
.columna2 { }
max-width: 30%px; .pie2{
} display: flex;
.row{ justify-content: space-between;
margin: 20px 0px 0px 0px; padding: 0px 30px;
1
font-size: 14px; .pie{
width: 100%; flex-wrap: wrap;
background: #00002d; }
} .columna2, .columna3{
.tec{ margin-top: 40px;
font-weight: bold; }
} }
@media screen and (max-width: 1100px){
Estilo Menu
*{ position: relative; }
margin: 0; width: 100%; .menu ul li ul:before {
padding: 0; height: 54px; content: '';
font-family: "Arial", sans- } width: 0;
serif; .menu ul { height: 0;
box-sizing: border-box; border-right: 10px solid
} display: flex; transparent;
body{ margin: auto; border-left: 10px solid
} #600000;
background-image: border-bottom: 8px solid
url("../imagenes/fondo.png" .menu li { white;
); list-style: none; position: absolute;
font-size: 25px; padding: 15px 20px; margin-top: -8px;
} } margin-left: 20px;
.icono { }
margin-left: auto; .menu li:hover {
} background: #f48200; .menu ul li ul li{
section { margin-bottom: 12px; position: relative;
font-size: 35px; transform: rotateY(0deg)
margin-left: 30px; font-family: fantasy; scale(1);
padding-bottom: 100px; color: white; }
} cursor: pointer; .menu ul li ul li ul li:hover >
a{ transition: all 300ms; ul {
text-decoration: none; } transform: rotateY(0deg)
color: aliceblue; scale(1);
} .menu ul li ul { }
.logo{ *display: none;
margin-top: -6px; flex-direction: column; .menu ul li ul li ul {
margin-right: 45px; position: absolute; left: 8.3em;
} background: #420000; width:220px;
header { margin-top: 15px; top: -15px;
background: #e54800; transform: background: #1f0404;
font-size: 18px; rotateY(240deg) scale(0); }
width: 100%; transition: all 1s;
height: 53px; box-shadow: 1px 1px .menu ul li ul li ul:before {
color: aliceblue; 10px 0px black; position: absolute;
font-family: "Arial Black", } border-bottom: 8px solid;
"sans-serif"; .menu ul li:hover > ul { margin-top: 18px;
} transform: rotateY(0deg) margin-left: -10px;
.menu { scale(1); transform: rotate(-
z-index: 100; transition: all 0.5s; 90deg);
1
} .contenido li:hover{ @media screen and (max-
.contenido a{ transition: 1s; width: 800px){
color: #000000; .icono{
} background:rgba(0,0,0,0); margin-left: 0;
.contenido li { color: #3a7999; }
background: rgba( 5, 59, box-shadow: inset 0 0 0 }
255, 0.300); 1px #3a7999;
color: black; } Estilo Productos
}
.listado { font-family: "Juice ITC"; .button {
border: 1px solid #000; background: #7c1d03; background: red;
margin: 0 auto; font-size: 30px; color: aliceblue;
width: 70%; color: aliceblue; font-size: 23px;
} } font-family: cursive;
.precio{ border-radius: 30px;
float: right; td ul li { width: 50%;
color: #930000; margin-left: 12px; padding: 13px;
font-size: 40px; font-size: 23px; transition: all 0.5s;
margin-top: -80px; list-style: none; }
margin-right: 50px; text-align: left;
} } .button:hover {
.precio2{ span{ cursor: pointer;
font-family:fantasy; font-size: 23px; background: white;
background: #003d8e; color:#007a0e; transition: all 0.5;
} } border-color: blue;
.listado2{ color: black;
td { padding: 2; }
border: 1px solid; font-size: 20px; @media screen and (max-
text-align: center; margin-top: 20px; width: 1100px){
} margin-bottom: 20px; .button{
} font-size: 14px;
td p { }
Estilo SlideShow
.main { background:#e03b text-
width:100%; 00; decoration:none;
max-width: 1000px; list-style:none; }
margin: 20px auto; overflow:hidden;
} } .slidesjs-pagination li
input{ a:hover {
.slides { padding: 5px; background:
} #a80000;
width: 100%; }
} .slidesjs-pagination li {
float:left; .slides .active {
.slides img { } background:
width:100%; #1d00ff;
height: 100%; .slidesjs-pagination li a { }
} display:block;
padding:10px 20px; .slidesjs-navigation{
.slidesjs-pagination { color:#fff; background:#000;
color:#fff;
1
text- tbody td:before { }
decoration:none; content: attr(data- tr:nth-of-type(2n) {
display:inline-block; th); background-color:
padding:12px 20px; display: block; inherit;
float:right; text-align:center; }
} } tr td:first-child {
.slidesjs-navigation:hover{ background: #f0f0f0;
background: #a80000; @media screen and (max- font-weight:bold;
} width: 450px){ font-size: 20px;
td { td { }
margin: 12px auto; margin: 12px 70; tbody td {
} } display: block;
td label { td label {
}
width: 400%; width: 30%; tbody td:before {
float: left; float: left; content: attr(data-
} } th);
tr td:first-child { table { display: block;
width:100%; text-align:center;
font-weight:bold; } }
font-size: 28px; thead { }
} display: none;
1
Programación del lado del Cliente
JavaScript
Es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas
que luego son insertados en una pagina web y en programas más grandes,
orientados a objetos mucho más complejos.
Ciclo condicional if: Es aquella que evalúa las necesidades más simples,
evalúa una condición que determina si esta es verdadera o falsa,
dependiendo de la resultante actuara de una u otra manera
Condicional if/else: La palabra else que podríamos definir como en caso
contrario, la cual nos permite tener dos bloques de código
Múltiples Condiciones: Las cuales evalúan y si no cumple, procede a
evaluar otra hasta encontrar lo que corresponda a un bloque de código.
Arreglos
Una estructura típica en todos los lenguajes es el Array, que es como una variable
donde podemos introducir varios valores, en lugar de solamente uno como ocurre
con las variables normales.
Los arrays nos permiten guardar varias variables y acceder a ellas de manera
independiente, es como tener una variable con distintos compartimentos donde
podemos introducir datos distintos. Para ello utilizamos un índice que nos permite
especificar el compartimiento o posición a la que nos estamos refiriendo.
Funciones
1
Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra
vez las mismas instrucciones. Un script para una tienda de comercio electrónico por
ejemplo, tiene que calcular el precio total de los productos varias veces, para añadir
los impuestos y los gastos de envío.
Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado
el código fuente de la aplicación, ya que:
2
Uso de Javascript y DOM en el Proyecto
Programación Footer
$(document).ready(function()){
if($("body").height() < $(window).height()){
$("footer").css({"position":"absolute","bottom":"0"});
}
}
Estas líneas de código únicamente nos dan la funcioanlidad de al estar listo nuestro
documento, que la posición de nuestro footer este al final.
Programación Registro Validación
function validar(){
var valcorreo, valcontra, correo, contra;
contra = $(“#contra”).val();
valcontra = $(“#valcontra”).val();
correo = $(“#correo”).val();
valcorreo = $(“#valcorreo”).val();
if(valcorreo ¡= correo){
alert(“Los Correos no coinciden”);
return false;
}
if(contra ¡= valcontra){
alert(“Las contraseñas no coinciden”);
return false;
}
}
En estas líneas de código lo único que hacemos es validar que los correos y las
octraseñas coincidan esto para la seguridad de lo que ingresa el usuario y
prevención de errores del mismo.
Utilización de Librerías JQuery
3
function quesos(){ }
alert("Se agrego al function deli(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 15;
carrito"); }
document.formu.idprodu.va function papotas(){
lue = 4; document.formu.idprodu.va alert("Se agrego al
} lue = 10; carrito");
function hono(){ }
alert("Se agrego al function combocajeta(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 16;
carrito"); }
document.formu.idprodu.va function alitas(){
lue = 5; document.formu.idprodu.va alert("Se agrego al
} lue = 11; carrito");
function mexi(){ }
alert("Se agrego al function combogrande(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 17;
carrito"); }
document.formu.idprodu.va function canela(){
lue = 6; document.formu.idprodu.va alert("Se agrego al
} lue = 12; carrito");
function veggie(){ }
alert("Se agrego al function combocruji(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 18;
carrito"); }
document.formu.idprodu.va function cajeta(){
lue = 7; document.formu.idprodu.va alert("Se agrego al
} lue = 13; carrito");
function pollo(){ }
alert("Se agrego al function comboOrilla(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 19;
carrito"); }
document.formu.idprodu.va function refresco(){
lue = 8; document.formu.idprodu.va alert("Se agrego al
} lue = 14; carrito");
function rey(){ }
alert("Se agrego al function comboCavara(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 20;
carrito"); }
document.formu.idprodu.va
lue = 9;
Dentro dee cada una de las secciones de pizza, combos y adicionales, se agrega
un input escondido, esto para que cuando el usuario accione el botón de agregar
carrito se mande el id de nuestro producto posicionado de manera fija.
1
Programación Slider
1
}); activeSlideImage.css({
left:''
activeSlideImage.css({ });
left:0 slideshow.find('.pagination').trigger('check');
}); slideshow.data('wait',false);
if(auto){
timeout=setTimeout(function(){
TweenMax.set(newSlideElements,{y:20,force slideshowNext(slideshow,false,true);
3D:true}); },slideshowDuration);
TweenMax.to(activeSlideImage,1,{ slideshow.data('timeout',timeout);
left:activeSlideImageLeft, }
ease:Power3.easeInOut }); } }
}); function
slideshowNext(slideshow,previous,auto){
TweenMax.to(newSlide,1,{ var slides=slideshow.find('.slide');
width:slideshow.width(), var activeSlide=slides.filter('.is-active');
ease:Power3.easeInOut var newSlide=null;
}); if(previous){
newSlide=activeSlide.prev('.slide');
TweenMax.to(newSlideImage,1,{ if(newSlide.length === 0) {
right:newSlideImageToRight, newSlide=slides.last();
left:newSlideImageToLeft, }
ease:Power3.easeInOut } else {
}); newSlide=activeSlide.next('.slide');
if(newSlide.length==0)
newSlide=slides.filter('.slide').first();
TweenMax.staggerFromTo(newSlideElement }
s,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3 slideshowSwitch(slideshow,newSlide.index(),
.easeOut,force3D:true,delay:0.6},0.1,function( auto);
){ }
newSlide.addClass('is- function homeSlideshowParallax(){
active').removeClass('is-new'); var scrollTop=$(window).scrollTop();
activeSlide.removeClass('is-active'); if(scrollTop>windowHeight) return;
newSlide.css({ var inner=slideshow.find('.slideshow-inner');
display:'', var newHeight=windowHeight-(scrollTop/2);
width:'', var newTop=scrollTop*0.8;
left:'', inner.css({
zIndex:'' transform:'translateY('+newTop+'px)',height:n
}); ewHeight
newSlideImage.css({ });
width:'', }
right:'',
left:'' $(document).ready(function() {
}); $('.slide').addClass('is-loaded');
newSlideContent.css({
width:'', $('.slideshow .arrows
left:'' .arrow').on('click',function(){
});
newSlideElements.css({ slideshowNext($(this).closest('.slideshow'),$(t
opacity:'', his).hasClass('prev'));
transform:'' });
});
1
$('.slideshow .pagination $('.slideshow').each(function(){
.item').on('click',function(){ var slideshow=$(this);
var images=slideshow.find('.image').not('.is-
slideshowSwitch($(this).closest('.slideshow'), loaded');
$(this).index()); images.on('loaded',function(){
}); var image=$(this);
var slide=image.closest('.slide');
$('.slideshow slide.addClass('is-loaded');
.pagination').on('check',function(){ });
var slideshow=$(this).closest('.slideshow'); */
var pages=$(this).find('.item'); var timeout=setTimeout(function(){
var index=slideshow.find('.slides .is- slideshowNext(slideshow,false,true);
active').index(); },slideshowDuration);
pages.removeClass('is-active'); slideshow.data('timeout',timeout);
pages.eq(index).addClass('is-active'); });
}); if($('.main-content .slideshow').length > 1) {
/* Lazyloading $(window).on('scroll',homeSlideshowParallax)
2
Programación del lado del Servidor
PHP
Operadores
Un operador nos permite realizar una operación entre uno más valores. El operador
toma esos valores de entrada y los relaciona entre sí, realizando una operación y
aplicando otro valor como resultado
Funciones
Las funciones son rutinas creadas por el programador para realizar procesos que
se repetirán o se usarán más de una vez. Las funciones pueden ser n-paramétricas
(con n ≥ 0), y estos parámetros pueden ser de entrada, de salida o de entrada y
salida
Sentencias de Control
If & else
Nos permite comparar 2 variables para que se cumpla una condición que ejecuta
un fragmento de código u otro dependiendo si la condición inicial se cumple o no.
While
Es una sentencia que nos permite ejecutar un fragmento de código mientras una
variable se mantenga de la misma forma si esta condición cambia el ciclo dejara de
repetirse.
Do while
Esta sentencia es casi lo omiso que el while solo que en el while puede o no
ejecutarse el fragmento de código y en esta sentencia se ejecuta por lo menos una
vez.
For
1
Esta sentencia nos permite repetir un fragmento de código un numero definido de
veces.
Switch
Esta sentencia nos permite comparar una variable con diferentes resultados así que
dependiendo de el resultado de la condición ejecutara un fragmento de código u
otro.
Modelo Relacional de la BD
Registro de Usuario
<?php }
$mysql=new mysqli("localhost", "root" ,"" $data2= $mysql->query("select idcliente from
,"pizzeria"); cliente order by idcliente desc limit 1");
if($mysql-> connect_error){ $pos =$data2->fetch_array();
die("Error en la conexión"); if($pos['idciente']==$x){
} $mysql->query("insert into cliente
$info = $mysql->query("select idcliente values(null,'$_REQUEST[nombre]','$_REQU
from cliente"); EST[apellido]','$_REQUEST[correo]','$_REQ
$x=1; UEST[contra]')") or die($mysql-> error);
while ($reg = $info->fetch_array()) { }
while($x<=$info->num_rows){ else{
if($reg['idcliente']!=$x){ $mysql->query("insert into cliente
break; values($x,'$_REQUEST[nombre]','$_REQUE
} ST[apellido]','$_REQUEST[correo]','$_REQU
echo $x; EST[contra]')") or die($mysql-> error);
$x++; }
} $mysql-> close();
?>
2
Como es sabido en todas al menos de las que vamos a implementar dentro de PHP
lo que es nuestra conexión a la base de datos, para poder manipular lo que es cada
una de las consultas, inserciones y borrado de la misma, siendo el caso que en
estas líneas de código, ponemos la inserción en cliente o lo que es, nuestros
usuarios.
Login
<?php correo = '$usuario' AND password =
$mysql=new mysqli("localhost", "root" ,"" '$password'";
,"pizzeria"); $result=$mysql->query($sql);
if($mysql-> connect_error){ $rows = $result->num_rows;
die("Error en la conexión");
} if($rows > 0) {
$row = $result-
session_start(); >fetch_assoc();
if(isset($_SESSION["id_usuario"])){ $_SESSION['id_usuario'] =
header("Location: $row['idcliente'];
../index.php"); header("location:
} ../index.php");
} else {
if(!empty($_POST))
{ header("location: ../usuario.php");
$usuario = echo '<script
mysqli_real_escape_string($mysql,$_POST[' type="text/javascript">
usuario']); alert("Usuario
$password = o contraseña incorrectos");
mysqli_real_escape_string($mysql,$_POST[' </script>';
contra']); }
$error = ''; }
?>
$sql = "SELECT idcliente,
correo , password FROM cliente WHERE
Dentro del login lo que hacemos es la validación de que este dentro de la base de
datos el usuario que ingresamos.
1
Cerrar Sesión
<?php
session_start();
session_unset();
session_destroy();
header("location: ../index.php");
?>
De igual manera cerramos de la forma, en que, recuperamos la sesión, vaciamos la
misma y la destruimos y después de todo esto nos manda al index o pagina de
inicio.
Agregar en el Carrito
<?php if($_REQUEST['idprodu'] >=11 &&
$mysql=new mysqli("localhost", "root" ,"" $_REQUEST['idprodu']<=15){header("locatio
,"pizzeria"); n: ../combos.php");
if($mysql-> connect_error){ }
die("Error en la conexión"); if($_REQUEST['idprodu'] >=16 &&
} $_REQUEST['idprodu']<=20){header("locatio
session_start(); n: ../adicional.php");
$info = $mysql->query("select idventa }
from ventas"); ?>
$x=1; Al hacer la eliminación puede que
while ($reg = $info->fetch_array()) { queden campos vacios debido a que
while($x<=$info->num_rows){
if($reg['idventa']!=$x){
en nuestra base de datos tenemos un
break; auto incremento, debido a esto es
} necesario hacer la comprobación de
echo $x; campos vacios, de ser que haya
$x++; alguno dentro del arreglo, lo
}}
$data2= $mysql->query("select
agregamos en esa posición vacía y de
idventa from ventas order by idventa desc no ser asi, mandamos un dato nulo
limit 1"); para que siga en incremento y
$pos =$data2->fetch_array(); tengamos todo en orden dentro de la
if($pos['idventa']==$x){ Base de Datos.
$mysql->query("insert into ventas
values(null,$_SESSION[id_usuario],$_REQU
EST[idprodu])") or die($mysql-> error);
}
else{
$mysql->query("insert into ventas
values($x,$_SESSION[id_usuario],$_REQUE
ST[idprodu])") or die($mysql-> error);
}
$mysql-> close();
if($_REQUEST['idprodu'] >=1 &&
$_REQUEST['idprodu']<=10){header("locatio
n: ../pizzas.php");
}
1
Conclusión
El desarrollo de páginas web, para una empresa es muy importante, ya que gracias
a esto se hace una proyección de publicidad de su producto, debido al crecimiento
del internet como medio de información es muy importante que una empresa se
adapte a las nuevas tecnologías y en este caso, dar paso a que se implemente un
carrito de compras, sobre todo para la comodidad del usuario.
1
Anexo 1