SlideShare a Scribd company logo
INFORME INDIVIDUAL EXAMEN
Integrante: Jefferson Paúl Cuenca Tenecela
SEMESTRE:
TERCERO
PARALELO: C
TEMA:
Operadores lógicos
OBJETIVO:
 Realizar lautilización deoperadoreslógicos y mejoramientodel usodel lenguaje deprogramación “PHP”
 Reconocer el uso de variablespara el desarrollo del programa en “PHP”.
 Aprender a utilizar el nuevo lenguaje de programación de “PHP”.
RESULTADOS DE APRENDIZAJE
 La mejor comprensión del uso de lenguaje PHP
 Manipulación del servidor “XAMPP”
 Utilización de los operadores lógicos
ACTIVIDADES:
- Realizar una página web que contenga información comerciante, así como también debe contene
asistente virtual
Parala página seutilizamos las siguientes líneas decódigos
Realicé un html para estructurar mipágina
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<link rel="stylesheet" href="css/LOGIN2.css">
<link rel="stylesheet" href="css/cabecera.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.m
</head>
<body>
<form action="validar.php" method="post">
<h1 class="animate animated animate backInRight"> INGRESE SUS DATOS</h1>
<p>Ingrese su Nick <input type="text" placeholder="Nick" name="usuario"></p>
<p>Ingrese su Contraseña <input type="password" placeholder="Contraseña" name="contraseña"></p>
<input type="submit" value="Ir al sitio web">
</form>
</body>
</html>
Utilicé la siguiente línea de código para validar mi información con un login
<?php
$name=$_POST["usuario"];
$pass=$_POST["contraseña"];
if(!isset($name) && !isset($pass))
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE FILOSOFÍA, LETRAS Y CIENCIAS DE LA EDUCACIÓN
CARRERA DE LA PEDAGOGÍA DE LAS CIENCIAS EXPERIMENTALES
DE LA INFORMÁTICA
{
?>
<html>
<form method="post">
<input type="text" name="name">
<input type="password" name="contra">
</form>
</html>
<?php
}
else if($name=="Gonzalo" && $pass=="12345")
{
header("location:Admin.php");
}
else if($name=="Milton" && $pass=="0546")
{
header("location:Admin.php");
}
?>
<?php
include ("index.html");
?>
<h1 class="bad"> DATOS INCORRECTOS </h1>
<?php
?>
Utilicé la siguiente línea de código para validar mi estilo, recalco que está en css
* {
padding: 0;
margin: 0;
font-family: century gothic;
text-align: center;
}
form {
padding: 50px 20px;
background-color: #72bbe6a6;
margin: calc(25% + 100px);
margin-top: 70px;
padding-top: 28px;
margin-bottom: 30px
}
h1 {
text-align: center;
padding: 12px;
color: rgb(0, 0, 0)
}
input {
width: calc(100% - 20px);
padding: 9px;
margin: auto;
margin-top: 12px;
font-size: 16px
}
input[type='submit']{
background-color: rgb(94, 238, 243);
color: rgb(0, 0, 0);
width: calc(80% - 20px);
margin: 0 10%;
margin-top: 22px;
border: none;
}
.ok {
text-align: center;
width: 100%;
padding: 12px;
background-color: rgb(42, 253, 0);
color: rgb(255, 255, 255)
}
.bad {
text-align: center;
width: 100%;
padding: 12px;
background-color: rgb(116, 115, 218);
color: rgb(0, 0, 0)
}
.off{
text-align: center;
width: 100%;
padding: 12px;
background-color: rgb(0, 0, 0);
color: #fff
}
body{
background-image:url(../IMG/TOP5.gif);
width: 100%;
height:100%vh;
background-size : cover;
color:white;
}
.mensaje{
width: 100%;
max-width: 350px;
margin: auto;
margin-top: 20px;
text-align: left;
padding: 6px;
color: red;
}
h6 {
text-align: center;
padding: 12px;
color: rgb(206, 203, 203);
line-height: 20px;
}
.gabo{
padding: 50px 20px;
background-color: #2caccca6;
margin: calc(25% + 100px);
margin-top: 70px;
padding-top: 28px;
margin-bottom: 30px;
line-height: 20px;
}
header{
width: 100%;
color: rgb(74, 228, 228);
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
background-color: rgba(54, 184, 235, 0.3);
}
header h1{
margin-left: 5px;
align-items: center;
width: calc(20% - 100px);
font-family: montez;
font-size: 55px;
}
header a{
margin-right: 30px;
text-align: center;
text-decoration: none;
color: rgb(245, 0, 0);
font-size: 25px;
transition: all ease 300ms;
}
.login-box{
background-image :url(../IM G/logogae.png);
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
CAPTURAS DEL PROGRAMA
SI INGRESO INCORRECTAMENTE ME SALTA LO SIGUIENTE:
Al ingresar bien me saltará a mi pagina inicial
En el diseño de mi página utilice las siguientes líneas de código en php para su
estructura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inicio</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<div class="wrapp">
<div class="logo">
<a href="#"><img src="https://skin-
us.cdn.prod.wmgecom.com/skin/frontend/wmi/theme1234/images/logo.svg" width
="80" height="50"alt="TOP"></a>
</div>
<nav>
<ul>
<li><a href="index.htm l">Login</a></li>
<li><a href="https://www.youtube.com/channel/UCBQZwaN
PFfJ1gZ1fLZpAEGw">Youtube </a></li>
<li><a href="https://www.instagram .com/twentyonepilot
s/?hl=es-la">Instagram</a></li>
<li><a href="https://www.facebook.com/twentyonepilots
">Facebook </a></li>
</ul>
</nav>
</div>
</header>
<section class="main">
<div class="wrapp">
<div class="mensaje">
<font face="Courier New"> <h1>Bienvenido a nuestra Tienda Onl
ine </h1> </font>
</div>
<center>
<div class="widget1">
<ul>
<h1>HOODIE </h1>
<img class="widget1" src="https://d2cstorage-
a.akamaihd.net/atl/21pilots/livestream/m3efirufheiuvhdousfvhdfv.png" width
="250" height="250" />
<aside>
<h4> PRECIO: $34</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget2">
<ul>
<h1>CAMISETA</h1>
<img class="widget2" src="https://d2cstorage-
a.akamaihd.net/atl/21pilots/livestream/m1fuehfiehffhehohveihv.png" width="
250" height="250" />
<aside>
<h4> PRECIO: $20</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget3">
<ul>
<h1>ACCESORIO</h1>
<img class="widget3" src="https://d2cstorage-
a.akamaihd.net/atl/21pilots/livestream/Merch-
27.png"width="250" height="250" />
<aside>
<h4> PRECIO: $25</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget4">
<ul>
<h1>TASA </h1>
<img class="widget1" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/0/4/042821_top-
productim ages_mug_3.png"width="250" height="250" />
<aside>
<h4> PRECIO: $22</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget5">
<ul>
<h1>VINYL</h1>
<img class="widget2" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/m/e/merch-28.png"width="250" height="250" />
<aside>
<h4> PRECIO: $22</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget6">
<ul>
<h1>CASSETTE</h1>
<img class="widget3" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/m/e/merch-33.png"width="250" height="250" />
<aside>
<h4> PRECIO: $20</h4>
</aside>
</ul>
</div>
</center>
</div>
</section>
<footer>
<div class="wrapp">
<p> <font face= TIMESNEWROM AN color= BLACK size=7>
ERA TRECH
</font></p>
</div>
</footer>
<div class="body2">
<center>
<div class="widget7">
<ul>
<h1>VYNIL</h1>
<img class="widget7" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/1/1/1100x1100 -
bundle9_7.png"width="250" height="250" />
<div class="precio">
<h4> PRECIO: $34</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget8">
<ul>
<h1>DISCO </h1>
<img class="widget8" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/1/1/1100x1100 -
bundle10_1_1.png"width="250" height="250" />
<div class="precio">
<h4> PRECIO: $24</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget9">
<ul>
<h1>BANDERA</h1>
<img class="widget9" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/2/1/21circleslashflag.png"width="250" height="
250" />
<div class="precio">
<h4> PRECIO: $14</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget10">
<ul>
<h1>GORRA</h1>
<img class="widget10" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/1/1/1100x1100 -
yellowhat_1.png"width="250" height="250" />
<div class="precio">
<h4> PRECIO: $24</h4>
</div>
</ul>
</div>
</center>
<center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=RED> <font face= TIMESNEWROMAN color= BL
ACK size=7>
BLURRYFACE
</font>
</MARQUEE>
<br>
<center>
<div class="widget11">
<ul>
<h1>VINYL</h1>
<img class="widget11" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/t/o/top_webstore_banners_blurryfacevinyl_produ
ctimg_1100x1100.jpg"width="250" height="250" />
<div class="precio2">
<h4> PRECIO: $24</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget12">
<ul>
<h1>GORRA</h1>
<img class="widget12" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/t/w/twentyonepilots_redbeanie.jpg"width="250"
height="250" />
<div class="precio2">
<h4> PRECIO: $20</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget13">
<ul>
<h1>FUNKO</h1>
<img class="widget13" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/5/7/57442_poprocks-twentyonepilots-
2pk_stressedoutgw-glam-web_1_small.png"width="250" height="250" />
<div class="precio2">
<h4> PRECIO: $35</h4>
</div>
<center>
</ul>
</div>
</center>
<div class="widget14">
<ul>
<h1>HOODIE</h1>
<img class="widget14" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/t/o/top_newsprint.jpg"width="250" height="250"
/>
<div class="precio2">
<h4> PRECIO: $40</h4>
</div>
</ul>
</div>
</center>
* {
-webkit-box-sizing: border-box;
<center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color=
BLACK size=7>
GRACIAS POR PREFERIR NUESTRA TIENDA
</font>
</MARQUEE>
<br>
</div>
<script src="https://www.gstatic.com/dialogflow-
console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
intent="WELCOM E"
chat-title="TY"
agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b"
language-code="es"
></df-messenger>
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #F690F3;
--df-messenger-chat-background-color: #90CDF6;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</body>
</html>
Y el estilo de mi página tiene el siguiente css
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0px;
padding:0px;
}
body {
background-image:url(../TOP4.gif);
background-size: 1400px 800px;
width: 100%;
height: 100px;
color:#333;
font-fam ily:Arial, helvetica, sans-serif;
}
.body2 {
background-image:url(../por2.gif);
background-size: 1350px 700px;
width: 100%;
height: 800px;
color:#333;
font-fam ily:Arial, helvetica, sans-serif;
}
a {
text-decoration: none;
color:#F24C27;
}
.wrapp {
max-width: 5000px;
width:80%;
margin:auto;
overflow: hidden;
}
header {
width: 100%;
height: 83px;
padding:20px 0;
background: rgb(136, 196, 211);
overflow: hidden;
}
.logo {
width: 70px;
float: left;
}
.logo img {
width:100%;
vertical-align: top;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
margin:2px 5px;
}
nav ul li a {
display: block;
background: #f2f2f2;
color: #037E8C;
padding:10px 20px;
text-decoration: none;
border-radius:3px;
transition:all 300ms ease;
}
nav ul li a:hover {
color: #fff;
background: #020202;
}
.mensaje {
background:#3ba7af;
background-image:url(../scaled.png);
background-size: 250px 100px;
padding:20px;
color:rgb(0, 0, 0);
margin:20px 0;
border-radius:5px;
}
.articulo {
float: left;
width: 35%;
padding:0px 20px 20px 0px;
color:#fff;
}
aside {
background:#fc5cee;
color:rgb(0, 0, 0);
}
.precio {
background:#fcf15c;
color:rgb(0, 0, 0);
}
.precio2 {
background:#f53c3c;
color:rgb(255, 255, 255);
}
.widget1 ul {
float: left;
margin:2px 5px;
width: 33%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget2 ul {
float: left;
width: 33%;
padding:0px 20px 20px 0px;
background:#02fa6900;
color:rgb(255, 255, 255);
}
.widget3 ul {
float: left;
width: 33%;
padding:0px 20px 20px 0px;
background:#fd000000;
color:rgb(255, 255, 255);
}
.widget4 ul {
float: right;
margin:2px 5px;
width: 33%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget5 ul {
float: left;
width: 33%;
padding:0px 20px 20px 0px;
background:#02fa6900;
color:rgb(255, 255, 255);
}
.widget6 ul {
float: left;
width: 33%;
padding:0px 20px 20px 0px;
background:#fd000000;
color:rgb(255, 255, 255);
}
.widget7 ul {
float: left;
margin:2px 29px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget8 ul {
float: left;
margin:2px 3px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget9 ul {
float: left;
margin:2px 3px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget10 ul {
float: left;
margin:2px 3px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget11 ul {
float: left;
margin:2px 29px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
.widget12 ul {
float: left;
margin:2px 3px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}.widget13 ul {
float: left;
margin:2px 3px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}.widget14 ul {
float: left;
margin:2px 3px;
width: 23%;
padding:0px 20px 20px 0px;
background:#220ce900;
color:rgb(255, 255, 255);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inicio</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<body>
<button onclick="location.href='http://127.0.0.1/Ejecicios/PAGINA%20WEB%2
0SAI/LOGIN/Admin.php'">Necesitar ir al inicio, pulsa aquí</button>
</body>
<center>
<a href="#"><img src="https://skin-
us.cdn.prod.wmgecom.com/skin/frontend/wmi/theme1234/images/logo.svg" width
="80" height="50"alt="TOP"></a>
<div class="mensaje">
<font face="Courier New"> <h1>Bienvenido a nuestra Tienda Onl
ine </h1> </font>
Para dar una información de mi página utilicé lo siguiente que de igual forma está
en php
.widget ul {
margin-left:20px;
}
.widget ul li {
margin:10px 0;
width: 100%;
}
.widget ul li a {
color:rgb(0, 0, 0);
}
.widget ul li a:hover {
text-decoration: underline;
}
footer {
width: 100%;
background:rgb(238, 241, 24);
padding:0px 0;
color:rgb(0, 0, 0);
}
footer p {
text-align:center;
}
</center>
</div>
</div>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color=
BLACK size=5>
Sobre Scaled and Icy
</font>
</MARQUEE>
<center>
<p> <font face="Courier New"> <h4>La tienda Scaled an Icy es una idea de
negocio que surge como respuesta a la necesidad del consumidor
que demanda una moda extranjera centrada al estilo de una banda de Altern
ativo denominada como Twenty One pilos.El punto de este tipo de
negocio es darle al cliente un solo lugar donde pueda adquirir todo lo qu
e necesite para una moda alterna . Por ello es que el inventario
planea cubrir ropa tanto para hombre como para mujer; así como un estilo
único y escensial.</h4> </font> </p>
</center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color=
BLACK size=5>
Mísión
</font>
</MARQUEE>
<center>
<p> <font face="Courier New"> <h4>Proveer de una línea de ropa y accesori
os orientales con productos de importación</h4> </font> </p>
</center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color=
BLACK size=5>
Visión
</font>
</MARQUEE>
<center>
<p> <font face="Courier New"> <h4>Ser la tienda de renombre en estilo alt
erno, a manera de que el consumidor acuda a nosotros por la
diversidad de ropa, accesorios y asesoría en moda de este tipo.</h4> </fo
nt> </p>
</center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color=
BLACK size=5>
Nuestros productos
</font>
</MARQUEE>
<center>
<div class="widget1">
<ul>
<h1>HOODIE </h1>
<img class="widget1" src="https://d2cstorage-
a.akamaihd.net/atl/21pilots/livestream/m3efirufheiuvhdousfvhdfv.png" width
="250" height="250" />
<aside>
<h4> PRECIO: $34</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget2">
<ul>
<h1>CAMISETA</h1>
<img class="widget2" src="https://d2cstorage-
a.akamaihd.net/atl/21pilots/livestream/m1fuehfiehffhehohveihv.png" width="
250" height="250" />
<aside>
<h4> PRECIO: $20</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget3">
<ul>
<h1>ACCESORIO</h1>
<img class="widget3" src="https://d2cstorage-
a.akamaihd.net/atl/21pilots/livestream/Merch-
27.png"width="250" height="250" />
<aside>
<h4> PRECIO: $25</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget4">
<ul>
<h1>TASA </h1>
<img class="widget1" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/0/4/042821_top-
productim ages_mug_3.png"width="250" height="250" />
<aside>
<h4> PRECIO: $22</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget5">
<ul>
<h1>VINYL</h1>
<img class="widget2" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/m/e/merch-28.png"width="250" height="250" />
<aside>
<h4> PRECIO: $22</h4>
</aside>
</ul>
</div>
</center>
<center>
<div class="widget6">
<ul>
<h1>CASSETTE</h1>
<img class="widget3" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/m/e/merch-33.png"width="250" height="250" />
<aside>
<h4> PRECIO: $20</h4>
</aside>
</ul>
</div>
</center>
<center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=YELLOW> <font face= TIMESNEWROMAN color=
BLACK size=7>
ERA TRECH
</font>
</MARQUEE>
<br>
<center>
<div class="body2">
<center>
<div class="widget7">
<ul>
<h1>VYNIL</h1>
<img class="widget7" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/1/1/1100x1100 -
bundle9_7.png"width="250" height="250" />
<div class="precio">
<h4> PRECIO: $34</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget8">
<ul>
<h1>CD </h1>
<img class="widget8" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/1/1/1100x1100 -
bundle10_1_1.png"width="250" height="250" />
<div class="precio">
<h4> PRECIO: $24</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget9">
<ul>
<h1>BANDERA</h1>
<img class="widget9" src="https://m edia-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/2/1/21circleslashflag.png"width="250" height="
250" />
<div class="precio">
<h4> PRECIO: $14</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget10">
<ul>
<h1>GORRA</h1>
<img class="widget10" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/1/1/1100x1100 -
yellowhat_1.png"width="250" height="250" />
<div class="precio">
<h4> PRECIO: $24</h4>
</div>
</ul>
</div>
</center>
<center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=RED> <font face= TIMESNEWROMAN color= BL
ACK size=7>
BLURRYFACE
</font>
</MARQUEE>
<br>
<center>
<div class="widget11">
<ul>
<h1>VINYL</h1>
<img class="widget11" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/t/o/top_webstore_banners_blurryfacevinyl_produ
ctimg_1100x1100.jpg"width="250" height="250" />
<div class="precio2">
<h4> PRECIO: $24</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget12">
<ul>
<h1>GORRA</h1>
<img class="widget12" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/t/w/twentyonepilots_redbeanie.jpg"width="250"
height="250" />
<div class="precio2">
<h4> PRECIO: $20</h4>
</div>
</ul>
</div>
</center>
<center>
<div class="widget13">
<ul>
<h1>FUNKO</h1>
<img class="widget13" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/5/7/57442_poprocks-twentyonepilots-
2pk_stressedoutgw-glam-web_1_small.png"width="250" height="250" />
<div class="precio2">
<h4> PRECIO: $35</h4>
</div>
<center>
</ul>
</div>
</center>
<div class="widget14">
<ul>
<h1>HOODIE</h1>
<img class="widget14" src="https://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/t/o/top_newsprint.jpg"width="250" height="250"
/>
<div class="precio2">
<h4> PRECIO: $40</h4>
</div>
</ul>
</div>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color=
BLACK size=7>
GRACIAS POR PREFERIR NUESTRA TIENDA
</font>
</MARQUEE>
<br>
</div>
<script src="https://www.gstatic.com/dialogflow-
console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
intent="WELCOM E"
chat-title="TY"
agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b"
language-code="es"
></df-messenger>
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #F690F3;
--df-messenger-chat-background-color: #90CDF6;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</body>
</html>
Para cerrar cree un Sistema que contenga las compras
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inicio</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<body>
<button onclick="location.href='http://127.0.0.1/Ejecicios/PAGINA%20WEB%2
0SAI/LOGIN/Admin.php'">Necesitar ir al inicio, pulsa aquí</button>
</body>
<center>
<a href="#"><img src="https://skin-
us.cdn.prod.wm gecom.com/skin/frontend/wmi/them e1234/images/logo.svg" width
="80" height="50"alt="TOP"></a>
<body background="/TOP.gif">
<div class="mensaje">
<font face="Courier New"> <h1>TUS COMPRAS </h1> </font>
</center>
</div>
</div>
<center>
<font face="Courier New"> <h1>PARA AGREGAR AL CARRITO PULSA A
QUÍÍ </h1> </font>
<body>
<button onclick="location.href='http://127.0.0.1/Ejecicios/PAGINA%20WEB%2
0SAI/LOGIN/Admin.php'">+1</button>
</body>
</center>
</div>
</div>
<script src="https://www.gstatic.com/dialogflow-
console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
intent="WELCOM E"
chat-title="TY"
agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b"
language-code="es"
></df-messenger>
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
Las capturas de mi programa ingresando en DIALOGFLOW
Al pulsa en nuestra página me salta la información
--df-messenger-button-titlebar-color: #F690F3;
--df-messenger-chat-background-color: #90CDF6;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</body>
</html>
Al digitar lo que quiero me salta la imagen, precio y si quiero comprarlo
Si quiero comprarlo doy click en + y se compra
Para el DIALOGFLOW utilicé los siguientes intentos, mi chatbot corresponde al
nombre de TY
Chatbot convertido compressed (1)-comprimido (3)-convertido

More Related Content

More from paulcuenca9

Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5
paulcuenca9
 
Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4
paulcuenca9
 
Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3
paulcuenca9
 
Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2
paulcuenca9
 
Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1
paulcuenca9
 
Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)
paulcuenca9
 
Vector
VectorVector
Vector
paulcuenca9
 
15
1515
14
1414
Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13
paulcuenca9
 
Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12
paulcuenca9
 
Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11
paulcuenca9
 
12
1212
Jefferson cuenca trabajos_individuales#10
Jefferson cuenca trabajos_individuales#10Jefferson cuenca trabajos_individuales#10
Jefferson cuenca trabajos_individuales#10
paulcuenca9
 
Jefferson cuenca trabajos_individuales#9
Jefferson cuenca trabajos_individuales#9Jefferson cuenca trabajos_individuales#9
Jefferson cuenca trabajos_individuales#9
paulcuenca9
 
Jefferson cuenca trabajos_individuales#8
Jefferson cuenca trabajos_individuales#8Jefferson cuenca trabajos_individuales#8
Jefferson cuenca trabajos_individuales#8
paulcuenca9
 
Jefferson cuenca trabajos_individuales#7
Jefferson cuenca trabajos_individuales#7Jefferson cuenca trabajos_individuales#7
Jefferson cuenca trabajos_individuales#7
paulcuenca9
 
Jefferson cuenca trabajos_individuales#6
Jefferson cuenca trabajos_individuales#6Jefferson cuenca trabajos_individuales#6
Jefferson cuenca trabajos_individuales#6
paulcuenca9
 

More from paulcuenca9 (20)

Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5
 
Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4
 
Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3
 
Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2
 
Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1
 
Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)
 
Vector
VectorVector
Vector
 
15
1515
15
 
14
1414
14
 
Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13
 
Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12
 
Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11
 
13
1313
13
 
12
1212
12
 
Jefferson cuenca trabajos_individuales#10
Jefferson cuenca trabajos_individuales#10Jefferson cuenca trabajos_individuales#10
Jefferson cuenca trabajos_individuales#10
 
Jefferson cuenca trabajos_individuales#9
Jefferson cuenca trabajos_individuales#9Jefferson cuenca trabajos_individuales#9
Jefferson cuenca trabajos_individuales#9
 
Jefferson cuenca trabajos_individuales#8
Jefferson cuenca trabajos_individuales#8Jefferson cuenca trabajos_individuales#8
Jefferson cuenca trabajos_individuales#8
 
Jefferson cuenca trabajos_individuales#7
Jefferson cuenca trabajos_individuales#7Jefferson cuenca trabajos_individuales#7
Jefferson cuenca trabajos_individuales#7
 
Jefferson cuenca trabajos_individuales#6
Jefferson cuenca trabajos_individuales#6Jefferson cuenca trabajos_individuales#6
Jefferson cuenca trabajos_individuales#6
 
09
0909
09
 

Chatbot convertido compressed (1)-comprimido (3)-convertido

  • 1. INFORME INDIVIDUAL EXAMEN Integrante: Jefferson Paúl Cuenca Tenecela SEMESTRE: TERCERO PARALELO: C TEMA: Operadores lógicos OBJETIVO:  Realizar lautilización deoperadoreslógicos y mejoramientodel usodel lenguaje deprogramación “PHP”  Reconocer el uso de variablespara el desarrollo del programa en “PHP”.  Aprender a utilizar el nuevo lenguaje de programación de “PHP”. RESULTADOS DE APRENDIZAJE  La mejor comprensión del uso de lenguaje PHP  Manipulación del servidor “XAMPP”  Utilización de los operadores lógicos ACTIVIDADES: - Realizar una página web que contenga información comerciante, así como también debe contene asistente virtual Parala página seutilizamos las siguientes líneas decódigos Realicé un html para estructurar mipágina <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>login</title> <link rel="stylesheet" href="css/LOGIN2.css"> <link rel="stylesheet" href="css/cabecera.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.m </head> <body> <form action="validar.php" method="post"> <h1 class="animate animated animate backInRight"> INGRESE SUS DATOS</h1> <p>Ingrese su Nick <input type="text" placeholder="Nick" name="usuario"></p> <p>Ingrese su Contraseña <input type="password" placeholder="Contraseña" name="contraseña"></p> <input type="submit" value="Ir al sitio web"> </form> </body> </html> Utilicé la siguiente línea de código para validar mi información con un login <?php $name=$_POST["usuario"]; $pass=$_POST["contraseña"]; if(!isset($name) && !isset($pass)) UNIVERSIDAD CENTRAL DEL ECUADOR FACULTAD DE FILOSOFÍA, LETRAS Y CIENCIAS DE LA EDUCACIÓN CARRERA DE LA PEDAGOGÍA DE LAS CIENCIAS EXPERIMENTALES DE LA INFORMÁTICA
  • 2. { ?> <html> <form method="post"> <input type="text" name="name"> <input type="password" name="contra"> </form> </html> <?php } else if($name=="Gonzalo" && $pass=="12345") { header("location:Admin.php"); } else if($name=="Milton" && $pass=="0546") { header("location:Admin.php"); } ?> <?php include ("index.html"); ?> <h1 class="bad"> DATOS INCORRECTOS </h1> <?php ?> Utilicé la siguiente línea de código para validar mi estilo, recalco que está en css * { padding: 0; margin: 0; font-family: century gothic; text-align: center; } form { padding: 50px 20px; background-color: #72bbe6a6; margin: calc(25% + 100px); margin-top: 70px; padding-top: 28px; margin-bottom: 30px } h1 { text-align: center; padding: 12px;
  • 3. color: rgb(0, 0, 0) } input { width: calc(100% - 20px); padding: 9px; margin: auto; margin-top: 12px; font-size: 16px } input[type='submit']{ background-color: rgb(94, 238, 243); color: rgb(0, 0, 0); width: calc(80% - 20px); margin: 0 10%; margin-top: 22px; border: none; } .ok { text-align: center; width: 100%; padding: 12px; background-color: rgb(42, 253, 0); color: rgb(255, 255, 255) } .bad { text-align: center; width: 100%; padding: 12px; background-color: rgb(116, 115, 218); color: rgb(0, 0, 0) } .off{ text-align: center; width: 100%; padding: 12px; background-color: rgb(0, 0, 0); color: #fff } body{ background-image:url(../IMG/TOP5.gif); width: 100%; height:100%vh; background-size : cover; color:white; } .mensaje{
  • 4. width: 100%; max-width: 350px; margin: auto; margin-top: 20px; text-align: left; padding: 6px; color: red; } h6 { text-align: center; padding: 12px; color: rgb(206, 203, 203); line-height: 20px; } .gabo{ padding: 50px 20px; background-color: #2caccca6; margin: calc(25% + 100px); margin-top: 70px; padding-top: 28px; margin-bottom: 30px; line-height: 20px; } header{ width: 100%; color: rgb(74, 228, 228); display: flex; flex-wrap: wrap; align-items: center; align-content: space-between; background-color: rgba(54, 184, 235, 0.3); } header h1{ margin-left: 5px; align-items: center; width: calc(20% - 100px); font-family: montez; font-size: 55px; } header a{ margin-right: 30px; text-align: center; text-decoration: none; color: rgb(245, 0, 0); font-size: 25px; transition: all ease 300ms; } .login-box{ background-image :url(../IM G/logogae.png); width: 100px; height: 100px; border-radius: 50%; position: absolute;
  • 5. top: -50px; left: calc(50% - 50px); } CAPTURAS DEL PROGRAMA SI INGRESO INCORRECTAMENTE ME SALTA LO SIGUIENTE: Al ingresar bien me saltará a mi pagina inicial
  • 6. En el diseño de mi página utilice las siguientes líneas de código en php para su estructura
  • 7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inicio</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <header> <div class="wrapp"> <div class="logo"> <a href="#"><img src="https://skin- us.cdn.prod.wmgecom.com/skin/frontend/wmi/theme1234/images/logo.svg" width ="80" height="50"alt="TOP"></a> </div> <nav> <ul> <li><a href="index.htm l">Login</a></li> <li><a href="https://www.youtube.com/channel/UCBQZwaN PFfJ1gZ1fLZpAEGw">Youtube </a></li> <li><a href="https://www.instagram .com/twentyonepilot s/?hl=es-la">Instagram</a></li> <li><a href="https://www.facebook.com/twentyonepilots ">Facebook </a></li> </ul> </nav> </div> </header> <section class="main"> <div class="wrapp"> <div class="mensaje"> <font face="Courier New"> <h1>Bienvenido a nuestra Tienda Onl ine </h1> </font> </div> <center> <div class="widget1"> <ul> <h1>HOODIE </h1>
  • 8. <img class="widget1" src="https://d2cstorage- a.akamaihd.net/atl/21pilots/livestream/m3efirufheiuvhdousfvhdfv.png" width ="250" height="250" /> <aside> <h4> PRECIO: $34</h4> </aside> </ul> </div> </center> <center> <div class="widget2"> <ul> <h1>CAMISETA</h1> <img class="widget2" src="https://d2cstorage- a.akamaihd.net/atl/21pilots/livestream/m1fuehfiehffhehohveihv.png" width=" 250" height="250" /> <aside> <h4> PRECIO: $20</h4> </aside> </ul> </div> </center> <center> <div class="widget3"> <ul> <h1>ACCESORIO</h1> <img class="widget3" src="https://d2cstorage- a.akamaihd.net/atl/21pilots/livestream/Merch- 27.png"width="250" height="250" /> <aside> <h4> PRECIO: $25</h4> </aside> </ul> </div> </center> <center> <div class="widget4"> <ul>
  • 9. <h1>TASA </h1> <img class="widget1" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/0/4/042821_top- productim ages_mug_3.png"width="250" height="250" /> <aside> <h4> PRECIO: $22</h4> </aside> </ul> </div> </center> <center> <div class="widget5"> <ul> <h1>VINYL</h1> <img class="widget2" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/m/e/merch-28.png"width="250" height="250" /> <aside> <h4> PRECIO: $22</h4> </aside> </ul> </div> </center> <center> <div class="widget6"> <ul> <h1>CASSETTE</h1> <img class="widget3" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/m/e/merch-33.png"width="250" height="250" /> <aside> <h4> PRECIO: $20</h4> </aside> </ul> </div> </center>
  • 10. </div> </section> <footer> <div class="wrapp"> <p> <font face= TIMESNEWROM AN color= BLACK size=7> ERA TRECH </font></p> </div> </footer> <div class="body2"> <center> <div class="widget7"> <ul> <h1>VYNIL</h1> <img class="widget7" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/1/1/1100x1100 - bundle9_7.png"width="250" height="250" /> <div class="precio"> <h4> PRECIO: $34</h4> </div> </ul> </div> </center> <center> <div class="widget8"> <ul> <h1>DISCO </h1> <img class="widget8" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/1/1/1100x1100 - bundle10_1_1.png"width="250" height="250" /> <div class="precio"> <h4> PRECIO: $24</h4> </div> </ul> </div>
  • 11. </center> <center> <div class="widget9"> <ul> <h1>BANDERA</h1> <img class="widget9" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/2/1/21circleslashflag.png"width="250" height=" 250" /> <div class="precio"> <h4> PRECIO: $14</h4> </div> </ul> </div> </center> <center> <div class="widget10"> <ul> <h1>GORRA</h1> <img class="widget10" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/1/1/1100x1100 - yellowhat_1.png"width="250" height="250" /> <div class="precio"> <h4> PRECIO: $24</h4> </div> </ul> </div> </center> <center> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=RED> <font face= TIMESNEWROMAN color= BL ACK size=7> BLURRYFACE </font> </MARQUEE> <br> <center> <div class="widget11"> <ul> <h1>VINYL</h1> <img class="widget11" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
  • 12. ab33525d08d6e5fb8d27136e95/t/o/top_webstore_banners_blurryfacevinyl_produ ctimg_1100x1100.jpg"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $24</h4> </div> </ul> </div> </center> <center> <div class="widget12"> <ul> <h1>GORRA</h1> <img class="widget12" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/t/w/twentyonepilots_redbeanie.jpg"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $20</h4> </div> </ul> </div> </center> <center> <div class="widget13"> <ul> <h1>FUNKO</h1> <img class="widget13" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/5/7/57442_poprocks-twentyonepilots- 2pk_stressedoutgw-glam-web_1_small.png"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $35</h4> </div> <center> </ul> </div> </center> <div class="widget14"> <ul> <h1>HOODIE</h1> <img class="widget14" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/t/o/top_newsprint.jpg"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $40</h4> </div> </ul> </div> </center>
  • 13. * { -webkit-box-sizing: border-box; <center> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color= BLACK size=7> GRACIAS POR PREFERIR NUESTRA TIENDA </font> </MARQUEE> <br> </div> <script src="https://www.gstatic.com/dialogflow- console/fast/messenger/bootstrap.js?v=1"></script> <df-messenger intent="WELCOM E" chat-title="TY" agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b" language-code="es" ></df-messenger> <style> df-messenger { --df-messenger-bot-message: #878fac; --df-messenger-button-titlebar-color: #F690F3; --df-messenger-chat-background-color: #90CDF6; --df-messenger-font-color: white; --df-messenger-send-icon: #878fac; --df-messenger-user-message: #479b3d; } </style> </body> </html> Y el estilo de mi página tiene el siguiente css
  • 14. -moz-box-sizing: border-box; box-sizing: border-box; margin:0px; padding:0px; } body { background-image:url(../TOP4.gif); background-size: 1400px 800px; width: 100%; height: 100px; color:#333; font-fam ily:Arial, helvetica, sans-serif; } .body2 { background-image:url(../por2.gif); background-size: 1350px 700px; width: 100%; height: 800px; color:#333; font-fam ily:Arial, helvetica, sans-serif; } a { text-decoration: none; color:#F24C27; } .wrapp { max-width: 5000px; width:80%; margin:auto; overflow: hidden; } header { width: 100%; height: 83px; padding:20px 0; background: rgb(136, 196, 211); overflow: hidden; } .logo { width: 70px; float: left;
  • 15. } .logo img { width:100%; vertical-align: top; } nav { float: right; } nav ul li { display: inline-block; margin:2px 5px; } nav ul li a { display: block; background: #f2f2f2; color: #037E8C; padding:10px 20px; text-decoration: none; border-radius:3px; transition:all 300ms ease; } nav ul li a:hover { color: #fff; background: #020202; } .mensaje { background:#3ba7af; background-image:url(../scaled.png); background-size: 250px 100px; padding:20px; color:rgb(0, 0, 0); margin:20px 0; border-radius:5px; } .articulo { float: left; width: 35%; padding:0px 20px 20px 0px; color:#fff; }
  • 16. aside { background:#fc5cee; color:rgb(0, 0, 0); } .precio { background:#fcf15c; color:rgb(0, 0, 0); } .precio2 { background:#f53c3c; color:rgb(255, 255, 255); } .widget1 ul { float: left; margin:2px 5px; width: 33%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); } .widget2 ul { float: left; width: 33%; padding:0px 20px 20px 0px; background:#02fa6900; color:rgb(255, 255, 255); } .widget3 ul { float: left; width: 33%; padding:0px 20px 20px 0px; background:#fd000000; color:rgb(255, 255, 255); } .widget4 ul { float: right; margin:2px 5px; width: 33%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); }
  • 17. .widget5 ul { float: left; width: 33%; padding:0px 20px 20px 0px; background:#02fa6900; color:rgb(255, 255, 255); } .widget6 ul { float: left; width: 33%; padding:0px 20px 20px 0px; background:#fd000000; color:rgb(255, 255, 255); } .widget7 ul { float: left; margin:2px 29px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); } .widget8 ul { float: left; margin:2px 3px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); } .widget9 ul { float: left; margin:2px 3px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); } .widget10 ul {
  • 18. float: left; margin:2px 3px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); } .widget11 ul { float: left; margin:2px 29px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); } .widget12 ul { float: left; margin:2px 3px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); }.widget13 ul { float: left; margin:2px 3px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); }.widget14 ul { float: left; margin:2px 3px; width: 23%; padding:0px 20px 20px 0px; background:#220ce900; color:rgb(255, 255, 255); }
  • 19. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inicio</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <body> <button onclick="location.href='http://127.0.0.1/Ejecicios/PAGINA%20WEB%2 0SAI/LOGIN/Admin.php'">Necesitar ir al inicio, pulsa aquí</button> </body> <center> <a href="#"><img src="https://skin- us.cdn.prod.wmgecom.com/skin/frontend/wmi/theme1234/images/logo.svg" width ="80" height="50"alt="TOP"></a> <div class="mensaje"> <font face="Courier New"> <h1>Bienvenido a nuestra Tienda Onl ine </h1> </font> Para dar una información de mi página utilicé lo siguiente que de igual forma está en php .widget ul { margin-left:20px; } .widget ul li { margin:10px 0; width: 100%; } .widget ul li a { color:rgb(0, 0, 0); } .widget ul li a:hover { text-decoration: underline; } footer { width: 100%; background:rgb(238, 241, 24); padding:0px 0; color:rgb(0, 0, 0); } footer p { text-align:center; }
  • 20. </center> </div> </div> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color= BLACK size=5> Sobre Scaled and Icy </font> </MARQUEE> <center> <p> <font face="Courier New"> <h4>La tienda Scaled an Icy es una idea de negocio que surge como respuesta a la necesidad del consumidor que demanda una moda extranjera centrada al estilo de una banda de Altern ativo denominada como Twenty One pilos.El punto de este tipo de negocio es darle al cliente un solo lugar donde pueda adquirir todo lo qu e necesite para una moda alterna . Por ello es que el inventario planea cubrir ropa tanto para hombre como para mujer; así como un estilo único y escensial.</h4> </font> </p> </center> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color= BLACK size=5> Mísión </font> </MARQUEE> <center> <p> <font face="Courier New"> <h4>Proveer de una línea de ropa y accesori os orientales con productos de importación</h4> </font> </p> </center> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color= BLACK size=5> Visión </font> </MARQUEE> <center> <p> <font face="Courier New"> <h4>Ser la tienda de renombre en estilo alt erno, a manera de que el consumidor acuda a nosotros por la diversidad de ropa, accesorios y asesoría en moda de este tipo.</h4> </fo nt> </p> </center> <body bgcolor="#8DD6C0">
  • 21. <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color= BLACK size=5> Nuestros productos </font> </MARQUEE> <center> <div class="widget1"> <ul> <h1>HOODIE </h1> <img class="widget1" src="https://d2cstorage- a.akamaihd.net/atl/21pilots/livestream/m3efirufheiuvhdousfvhdfv.png" width ="250" height="250" /> <aside> <h4> PRECIO: $34</h4> </aside> </ul> </div> </center> <center> <div class="widget2"> <ul> <h1>CAMISETA</h1> <img class="widget2" src="https://d2cstorage- a.akamaihd.net/atl/21pilots/livestream/m1fuehfiehffhehohveihv.png" width=" 250" height="250" /> <aside> <h4> PRECIO: $20</h4> </aside> </ul> </div> </center> <center> <div class="widget3"> <ul> <h1>ACCESORIO</h1> <img class="widget3" src="https://d2cstorage- a.akamaihd.net/atl/21pilots/livestream/Merch- 27.png"width="250" height="250" /> <aside> <h4> PRECIO: $25</h4>
  • 22. </aside> </ul> </div> </center> <center> <div class="widget4"> <ul> <h1>TASA </h1> <img class="widget1" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/0/4/042821_top- productim ages_mug_3.png"width="250" height="250" /> <aside> <h4> PRECIO: $22</h4> </aside> </ul> </div> </center> <center> <div class="widget5"> <ul> <h1>VINYL</h1> <img class="widget2" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/m/e/merch-28.png"width="250" height="250" /> <aside> <h4> PRECIO: $22</h4> </aside> </ul> </div> </center> <center> <div class="widget6"> <ul> <h1>CASSETTE</h1>
  • 23. <img class="widget3" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/m/e/merch-33.png"width="250" height="250" /> <aside> <h4> PRECIO: $20</h4> </aside> </ul> </div> </center> <center> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=YELLOW> <font face= TIMESNEWROMAN color= BLACK size=7> ERA TRECH </font> </MARQUEE> <br> <center> <div class="body2"> <center> <div class="widget7"> <ul> <h1>VYNIL</h1> <img class="widget7" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/1/1/1100x1100 - bundle9_7.png"width="250" height="250" /> <div class="precio"> <h4> PRECIO: $34</h4> </div> </ul> </div> </center> <center>
  • 24. <div class="widget8"> <ul> <h1>CD </h1> <img class="widget8" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/1/1/1100x1100 - bundle10_1_1.png"width="250" height="250" /> <div class="precio"> <h4> PRECIO: $24</h4> </div> </ul> </div> </center> <center> <div class="widget9"> <ul> <h1>BANDERA</h1> <img class="widget9" src="https://m edia- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/2/1/21circleslashflag.png"width="250" height=" 250" /> <div class="precio"> <h4> PRECIO: $14</h4> </div> </ul> </div> </center> <center> <div class="widget10"> <ul> <h1>GORRA</h1> <img class="widget10" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/1/1/1100x1100 - yellowhat_1.png"width="250" height="250" /> <div class="precio"> <h4> PRECIO: $24</h4> </div> </ul> </div> </center> <center> <body bgcolor="#8DD6C0">
  • 25. <MARQUEE WIDTH=100% BGCOLOR=RED> <font face= TIMESNEWROMAN color= BL ACK size=7> BLURRYFACE </font> </MARQUEE> <br> <center> <div class="widget11"> <ul> <h1>VINYL</h1> <img class="widget11" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/t/o/top_webstore_banners_blurryfacevinyl_produ ctimg_1100x1100.jpg"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $24</h4> </div> </ul> </div> </center> <center> <div class="widget12"> <ul> <h1>GORRA</h1> <img class="widget12" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/t/w/twentyonepilots_redbeanie.jpg"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $20</h4> </div> </ul> </div> </center> <center> <div class="widget13"> <ul> <h1>FUNKO</h1> <img class="widget13" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/5/7/57442_poprocks-twentyonepilots- 2pk_stressedoutgw-glam-web_1_small.png"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $35</h4> </div> <center> </ul> </div> </center> <div class="widget14">
  • 26. <ul> <h1>HOODIE</h1> <img class="widget14" src="https://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/t/o/top_newsprint.jpg"width="250" height="250" /> <div class="precio2"> <h4> PRECIO: $40</h4> </div> </ul> </div> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROM AN color= BLACK size=7> GRACIAS POR PREFERIR NUESTRA TIENDA </font> </MARQUEE> <br> </div> <script src="https://www.gstatic.com/dialogflow- console/fast/messenger/bootstrap.js?v=1"></script> <df-messenger intent="WELCOM E" chat-title="TY" agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b" language-code="es" ></df-messenger> <style> df-messenger { --df-messenger-bot-message: #878fac; --df-messenger-button-titlebar-color: #F690F3; --df-messenger-chat-background-color: #90CDF6; --df-messenger-font-color: white; --df-messenger-send-icon: #878fac; --df-messenger-user-message: #479b3d; } </style> </body> </html> Para cerrar cree un Sistema que contenga las compras
  • 27. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inicio</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <body> <button onclick="location.href='http://127.0.0.1/Ejecicios/PAGINA%20WEB%2 0SAI/LOGIN/Admin.php'">Necesitar ir al inicio, pulsa aquí</button> </body> <center> <a href="#"><img src="https://skin- us.cdn.prod.wm gecom.com/skin/frontend/wmi/them e1234/images/logo.svg" width ="80" height="50"alt="TOP"></a> <body background="/TOP.gif"> <div class="mensaje"> <font face="Courier New"> <h1>TUS COMPRAS </h1> </font> </center> </div> </div> <center> <font face="Courier New"> <h1>PARA AGREGAR AL CARRITO PULSA A QUÍÍ </h1> </font> <body> <button onclick="location.href='http://127.0.0.1/Ejecicios/PAGINA%20WEB%2 0SAI/LOGIN/Admin.php'">+1</button> </body> </center> </div> </div> <script src="https://www.gstatic.com/dialogflow- console/fast/messenger/bootstrap.js?v=1"></script> <df-messenger intent="WELCOM E" chat-title="TY" agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b" language-code="es" ></df-messenger> <style> df-messenger { --df-messenger-bot-message: #878fac;
  • 28. Las capturas de mi programa ingresando en DIALOGFLOW Al pulsa en nuestra página me salta la información --df-messenger-button-titlebar-color: #F690F3; --df-messenger-chat-background-color: #90CDF6; --df-messenger-font-color: white; --df-messenger-send-icon: #878fac; --df-messenger-user-message: #479b3d; } </style> </body> </html>
  • 29. Al digitar lo que quiero me salta la imagen, precio y si quiero comprarlo
  • 30. Si quiero comprarlo doy click en + y se compra Para el DIALOGFLOW utilicé los siguientes intentos, mi chatbot corresponde al nombre de TY