SlideShare a Scribd company logo
INFORME
Integrante: Farinango Morales Milton Gonzalo
SEMESTRE: TERCERO
PARALELO: C
PRÁCTICA:#2
TEMA:
Operadores lógicos
OBJETIVO:
• Realizar la utilización de operadores lógicos y mejoramiento del uso del lenguaje de programación “PHP”
• Reconocer el uso de variables para 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 contener
asistente virtual
Para la página se utilizamos las siguientes líneas de códigos
Realicé un html para estructurar mi pá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(../IMG/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.html">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://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/0/4/042821_top-
productimages_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://media-
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://media-
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= TIMESNEWROMAN 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://media-
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://media-
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>
</ul>
</div>
</center>
<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>
<center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROMAN 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="WELCOME"
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
* {
-webkit-box-sizing: border-box;
-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-family:Arial, helvetica, sans-serif;
}
.body2 {
background-image:url(../por2.gif);
background-size: 1350px 700px;
width: 100%;
height: 800px;
color:#333;
font-family: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);
}
.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;
}
Para dar una información de mi página utilicé lo siguiente que de igual forma está
en php
<!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>
</center>
</div>
</div>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROMAN 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= TIMESNEWROMAN 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= TIMESNEWROMAN 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= TIMESNEWROMAN 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://media-
us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e
ab33525d08d6e5fb8d27136e95/0/4/042821_top-
productimages_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://media-
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://media-
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://media-
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://media-
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>
</ul>
</div>
</center>
<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= TIMESNEWROMAN 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="WELCOME"
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.wmgecom.com/skin/frontend/wmi/theme1234/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="WELCOME"
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>
Las capturas de mi programa ingresando en DIALOGFLOW
Al pulsa en nuestra página me salta la información
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)

More Related Content

More from paulcuenca9

Informe grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencaInforme grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuenca
paulcuenca9
 
Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7
paulcuenca9
 
Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6
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

More from paulcuenca9 (20)

Informe grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencaInforme grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuenca
 
18
1818
18
 
017
017017
017
 
016
016016
016
 
Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7
 
Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6
 
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
 

Chatbot convertido compressed (1)-comprimido (3)

  • 1. INFORME Integrante: Farinango Morales Milton Gonzalo SEMESTRE: TERCERO PARALELO: C PRÁCTICA:#2 TEMA: Operadores lógicos OBJETIVO: • Realizar la utilización de operadores lógicos y mejoramiento del uso del lenguaje de programación “PHP” • Reconocer el uso de variables para 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 contener asistente virtual Para la página se utilizamos las siguientes líneas de códigos Realicé un html para estructurar mi pá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(../IMG/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.html">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://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/0/4/042821_top- productimages_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://media- 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://media- 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= TIMESNEWROMAN 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://media- 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://media- 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> </ul> </div> </center> <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. <center> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROMAN 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="WELCOME" 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 * { -webkit-box-sizing: border-box;
  • 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-family:Arial, helvetica, sans-serif; } .body2 { background-image:url(../por2.gif); background-size: 1350px 700px; width: 100%; height: 800px; color:#333; font-family: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. .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; } Para dar una información de mi página utilicé lo siguiente que de igual forma está en php <!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>
  • 20. </center> </div> </div> <body bgcolor="#8DD6C0"> <MARQUEE WIDTH=100% BGCOLOR=WHITE> <font face= TIMESNEWROMAN 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= TIMESNEWROMAN 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= TIMESNEWROMAN 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= TIMESNEWROMAN 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://media- us.cdn.prod.wmgecom.com/media/catalog/product/cache/173/image/600x/9df78e ab33525d08d6e5fb8d27136e95/0/4/042821_top- productimages_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://media- 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://media- 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://media- 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://media- 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> </ul> </div> </center> <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= TIMESNEWROMAN 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="WELCOME" 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.wmgecom.com/skin/frontend/wmi/theme1234/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="WELCOME" chat-title="TY" agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b" language-code="es" ></df-messenger> <style> df-messenger { --df-messenger-bot-message: #878fac;
  • 28. --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> Las capturas de mi programa ingresando en DIALOGFLOW Al pulsa en nuestra página me salta la información
  • 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