Developer

Correo Electrónico

Contraseña

Recuérdame

Login Olvidaste tu contraseña?

echo 'Hola Mundo con PHP 7';
< ?="Bienvenido a PHP"? >
echo "< ul>"
."< li>GTA< /li>"
."< li>Fifa< /li>"
."< li>Mario Bros< /li>"
."";
echo '< p>Esta es toda'.' - '.'lista de juegos < /p>';
$variable = "Hola php";
$verdadero = true;
$numero1= 35;
$numero2= 35.8;
// Cambiar tipo de dato
$numero = (int)$_GET['numero'];
define('nombre', 'Adrian Lisciotti');
echo '< h1>'.nombre.'< /h1>';
echo 'Suma: '.($numero1+$numero2);
$numero1++;
++$numero1;
== igual === identico != diferente <> diferente !== no identico < menor que > mayor que <= menor o igual que >= mayor o igual que
&& AND
|| OR
! NOT
and, or
echo $_SERVER['SERVER_ADDR']; me saca la direccion ip
echo $_SERVER['SERVER_NAME']; me saca el nombre de dominio
echo $_SERVER['SERVER_SOFTWARE'];
echo $_SERVER['HTTP_USER_AGENT'];
echo $_SERVER['REMOTE_ADDR']; la ip de mi cliente si accedo a su pc
if($dia == 1){
echo "lunes";
}elseif($dia == 2){
echo "martes";
}else{
echo "Es finde";
}
// SWITCH
$dia = 1;
switch ($dia){
case 1:
echo "lunes";
break;
case 2:
echo "martes";
break;
default:
echo "es fin de semana";
}
// GOTO
goto ejecuta_aqui;//salta el codigo
if($edad_oficial >= $edad1 && $edad_oficial <= $edad2){
echo "esta en edad de trabajar";
}else{
echo "no puede trabajar";
}
ejecuta_aqui:
echo "Me he saltado el condicional";
$numero = 0;
while($numero <= 100){
echo $numero;
$numero++;
}
$edad = 17;
$contador = 1;
do{
echo "Tienes acceso al local privado $contador
"; $contador++;
}while($edad >= 18 && $contador <= 10);
for($i = 0; $i <= 100; $i++){
$resultado += $i;
echo "$resultado";
}
function getNombre($nombre){
$texto = "El nombre es: $nombre";
return $texto;
}
predefinidas
var_dump($nombre);
echo date('d-m-Y');
echo time();
echo "Raiz cuadrada de 10: ".sqrt(10);
echo "Número aleatorio entre 10 y 40: ".rand(10,40);
echo "Número pi: ".pi();
echo "Redondear: ".round(7.891234, 1);
echo gettype($nombre);
if(is_string($nombre)){
if(!is_float($nombre)){
if(isset($nombre)){
var_dump(trim($frase)); limpia espacios
if(empty(trim($texto))){ si esta vacia
include 'includes/cabecera.php';
$cantantes = ['2pac', 'Drake', 'Jennifer Lopez', 'Alfredo'];
$peliculas = array('Batman', 'Spiderman', 'El señor de los anillos'); $numeros = [1,2,5,8,3,4];
sort($numeros); // Ordenar
echo sizeof($cantantes); // Contar numero de elementos
// Array asociativo
$personas = array(
'nombre' => 'Adrian',
'apellidos' => 'Lisciotti',
'web' => 'adrianweb.live'
);
echo $personas['apellidos'];
for($i = 0; $i < count($peliculas); $i++){
echo "< li>".$peliculas[$i]."< /li>";
}
foreach ($cantantes as $cantante) {
echo "< li>".$cantante."< /li>";
}
// Arrays multidimensionales
$contactos = array(
array(
'nombre' => 'Antonio',
'email' => '[email protected]'
),
array(
'nombre' => 'Luis',
'email' => '[email protected]'
),
array(
'nombre' => 'Salvador',
'email' => '[email protected]'
)
);
foreach ($contactos as $key => $contacto) {
var_dump($contacto['nombre']);
}
// Iniciar la sesión
session_start();
// Variable de sesión
$_SESSION['variable_persistente'] = "HOLA SOY UNA SESION ACTIVA";
// Cierro la sesión
session_destroy();
// Cookie básica
setcookie("micookie", "valor de mi galleta");
// Cookie con expiración
setcookie("unyear", "valor de mi cookie de 365 dias", time()+(60*60*24*365));
header('Location:ver_cookies.php');
//boorar cookies
if($_COOKIE['micookie']){
unset($_COOKIE['micookie']);
setcookie('micookie','',time()-100);
}
< ?php $error = 'faltan_valores';
if(!empty($_POST['nombre']) && !empty($_POST['apellidos']) &&
!empty($_POST['edad']) && !empty($_POST['email']) && !empty($_POST['pass'])){
$error = 'ok';
$nombre = $_POST['nombre'];
$apellidos = $_POST['apellidos'];
$edad = (int) $_POST['edad'];
$email = $_POST['email'];
$pass = $_POST['pass'];
if(!is_string($nombre) || preg_match("/[0-9]/", $nombre)){
$error = 'nombre';
}
if(!is_string($apellidos) || preg_match("/[0-9]/", $apellidos)){
$error = 'apellidos';
}
if(!is_int($edad) || !filter_var($edad, FILTER_VALIDATE_INT)){//filter_var le digo q me valide la edad como FILTER_VALIDATE_INT entero
$error = 'edad';
}
if(!is_string($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)){
$error = 'email';
}
if(empty($pass) || strlen($pass)<5){
$error = 'password';
}
}else{
$error = 'faltan_valores';
}
if($error != 'ok'){
header("Location:index.php?error=$error");
}
?>
< /head>
< body>
< ?php if($error == 'ok'): ?>
< h1>Datos validados correctamente
< p>< ?=$nombre?>
< p>< ?=$apellidos?>
< p>< ?=$edad?>
< p>< ?=$email?>< /p>
< ?php endif; ?>
< /body>
< /html>
// Abrir archivo $archivo = fopen("fichero_texto.txt", "f");//fichero_texto el nombre a+ el modo en q voy a abrir
$archivo = fopen("fichero_texto.txt", "a+");//fichero_texto el nombre a+ el modo en q voy a abrir
// Leer contenido
while(!feof($archivo)){//feof recorre todas las lineas del archivo
$contenido = fgets($archivo);//fgets muestra el archivo
echo $contenido."< br/>"; }
// Escribir
fwrite($archivo, "***Soy un texto metido desde php***");
// Cerrar archivo
fclose($archivo);
// Copiar
//copy('fichero_texto.txt', 'fichero_copiado.txt') or die("Error al copiar");copy es copiar el fichero o sea crea un nuevo fichero con el mismo contenido or die si no pudo me muestre el mensaje de error
// Renombrar
//rename('fichero_copiado.txt', 'archivito_recopiadito.txt');rename le cambia el nombre al fichero
// Eliminar
//unlink('archivito_recopiadito.txt') or die('Error al borrar');//unlink elimina el fichero or die si ay un error muestra el mensaje
//DIRECTORIOS
< ?php
if(!is_dir('mi_carpeta')){//!is_dir si no existe la carpeta
mkdir('mi_carpeta', 0777) or die('No se puede crear la carpeta');//mkdir crea el directorio mi_carpeta es el nombre 0777 son los permisos or die si falla muestra el mensaje
}else{
echo "Ya existe la carpeta";
}
// rmdir('mi_carpeta');rmdir borra la carpeta
echo "< hr> < h1>Contenido carpeta< /h1>";
if($gestor = opendir('./mi_carpeta')){//opendir abre la carpeta estoy ingresando la carpeta en la variable
while(false !== ($archivo = readdir($gestor))){//mientras q false sea distinto a leer (readdir es leer) o sea mientras q haya archivos
if($archivo != '.' && $archivo != '..'){//si el archivo es distinto a . y a .. lo muestre
echo $archivo."< br/>";
}
}
}
//EN EL INDEX
< form action="upload.php" method="POST" enctype="multipart/form-data">
< input type="file" name="archivo" />
< input type="submit" value="Enviar" />

Listado de imagenes
< ?php
$gestor = opendir('./images');//opendir abro el directorio
if($gestor)://si es true
while(($image = readdir($gestor)) !== false)://si mientras leer el archivo es diferente a false significa q hay
if($image != '.' && $image != '..')://si el archivo es diferente a . y a ..
echo "< img src='images/$image' width='200px'/>< br/>";//muestro la imagen
endif;
endwhile;
endif;
?>
< /body>
//EN EL UPLOAD.PHP
< ?php
$archivo = $_FILES['archivo'];//ingreso la imagen a la variable
$nombre = $archivo['name'];//nombre de la imagen
$tipo = $archivo['type'];//el tipo de la imagen
if($tipo == "image/jpg" || $tipo == "image/jpeg" || $tipo == "image/png" || $tipo == "image/gif"){//si el tipo es de tal extencion
if(!is_dir('images')){//si no existe el directorio
mkdir('images', 0777);//lo creo 0777 todos los permisos posibles
}
move_uploaded_file($archivo['tmp_name'], 'images/'.$nombre);//move_uploaded_file coge la imagen q esta en un archivo temporal y muevelo donde quieras. $archivo['tmp_name'] archivo temporal
//images/ direccion donde lo guardo $nombre es el nombre q quiero q tenga la imagen
header("Refresh: 5; URL=index.php");//esto me redirige a index despues de 5 segundos
echo "Imagen subida correctamente";
}else{
header("Refresh: 5; URL=index.php");//esto me redirige a index despues de 5 segundos
echo "Sube una imagen con un formato correcto, por favor...";
}

para entrar a mysql desde xampp en la consola de comandos (hacerlo en cmd) posicionarse en xampp/mysql/bin y poner este comando

mysql -u root -h localhost -p

STATUS; muestra informacion de mysql (poner primero este comando)
SHOW DATABASES; muestra las bases de datos
CREATE DATABASE NOMBRRE_DE_DB; crea una base de datos
DROP DATABASE NOMBRRE_DE_DB; borra la base de datos
USE NOMBRRE_DE_DB; posicinarse en la base de datos para poder crear tablas borrarlas etc..
si colocamos esto te creA la tabla=
CREATE TABLE usuarios (
id int(11),
nombre varchar(100),
apellido varchar(255),
email varchar(100),
password varchar(255)
);
SHOW TABLES; muestra las TABLAS
desc usuarios; describe la tabla usuarios
drop table usuarios; borra la tabla usuarios
hacer click en la casita o sea inicio y poner cuentas de usuario agregar un nuevo usuario
completo poniendo nombre de usuario servidor local seguro contraseña otorgar todos los privilegios, privilegios globales selecciono todo si me tira error voy a la consola de comandos posicionarse en xammp/mysql/bin y pongo=

mysql -u root -h localhost -p

CLAVE FORANIA ES UN CAMPO Q SE VA GUARDAR ALGO DE OTRA TABLA COMO POR EJEMPLO EN TABLA USUARIO EL ID_CATEGORIA SE VA A GUARDAR EL ID DE LA CATEGORIA CREATE TABLE usuarios (
id int(11) auto_increment not null, /*auto_increment se puede usuar cuando hay una primary key not null quiere decir q siempre tiene q haber un dato ahi*/
nombre varchar(100) default 'hola q tal', /*default q por defecto va tener hola q tal*/
apellido varchar(255) null, /*null que sea nulo*/
email varchar(100),
password varchar(255),
CONSTRAINT pk_usuarios PRIMARY KEY(id) /*LE INDICO LA CLAVE PRYMARIA SE PONE TODOO ESTO*/
);

otro ejemplo

CREATE TABLE usuarios(
id int(255) auto_increment not null,
nombre varchar(100) not null,
apellidos varchar(100) not null,
email varchar(255) not null,
password varchar(255) not null,
fecha date not null,
CONSTRAINT pk_usuarios PRIMARY KEY(id),
CONSTRAINT uq_email UNIQUE(email)/*QUE EL EMAIL NO PUEDE SER REPETIDO*/
)ENGINE=InnoDb;
CREATE TABLE categorias(
id int(255) auto_increment not null,
nombre varchar(100),
CONSTRAINT pk_categorias PRIMARY KEY(id)
)ENGINE=InnoDb;/*LE ESTAMOS INDICANDO EL MOTOR DE ALMACENAR A MYSQL Y HACE Q FUNCIONE LA RELACION PERFECTAMENTE O SEA MEJORA EL RENDIMIENTO DE LOS INSER UPDATE */
CREATE TABLE entradas(
id int(255) auto_increment not null,
usuario_id int(255) not null,
categoria_id int(255) not null,
titulo varchar(255) not null,
descripcion MEDIUMTEXT, /*AGUANTA MUCHO MAS CARACTERES QUE VARCHAR */
fecha date not null,
CONSTRAINT pk_entradas PRIMARY KEY(id), /*CONSTRAINT SIGNIFICA RSTRICCION*/
CONSTRAINT fk_entrada_usuario FOREIGN KEY(usuario_id) REFERENCES usuarios(id),/*ESTOY INDICANDO LA RELACION
CONSTRAINT RESTRICCION CON fk_entrada_categoria DE NOMBRE FOREIGN KEY EL CAMPO AJENO QUE HACE REFERENCIA REFERENCES O SEA Q LO SACO DE usuarios(id*/
CONSTRAINT fk_entrada_categoria FOREIGN KEY(categoria_id) REFERENCES categorias(id) ON DELETE NO ACTION /*ON DELETE CASCADE SIGNIFICA QUE CUANDO SE BORRE EL ID DE CATEGORIAS DE ESTA TABLA ENTRADAS
TAMBIEN SE BORRE EL REGISTRO CON EL CUAL ESTA RELACIONADA ON DELETE SET NULL Q CUANDO SE BORRE SE PONGA EN NULL ON DELETE SET DEFAULT Q SE PONGA EN DEFAULT CUANDO SE BORRE
NO ACTION Q NO HAGA NADA*/
)ENGINE=InnoDb;
# RENOMBRAR UNA TABLA #
ALTER TABLE usuarios RENAME TO usuarios_renom;
# CAMBIAR NOMBRE DE UNA COLUMNA #
ALTER TABLE usuarios_renom CHANGE apellidos apellido varchar(100) null;
# MODIFICAR COLUMNA SIN CAMBIAR NOMBRE o sea cambiar la restrincion si es chart esas cosas#
ALTER TABLE usuarios_renom MODIFY apellido char(40) not null;
# AÑADIR COLUMNA #
ALTER TABLE usuarios_renom ADD website varchar(100) null;
# AÑADIR RESTRICCIÓN A COLUMNA para que el campo sea unico#
ALTER TABLE usuarios_renom ADD CONSTRAINT uq_email UNIQUE(email);
# BORRAR UNA COLUMNA #
ALTER TABLE usuarios_renom DROP website;
#BORRAR REGISTROS#
DELETE FROM usuarios WHERE email = '[email protected]';
#INSERTAR NUEVOS REGISTROS#
INSERT INTO usuarios VALUES(null, 'Víctor', 'Apellidos', '[email protected]', '1234', '2019-05-01');
#INSERTAR FILAS SOLO CON CIERTAS COLUMNAS#
INSERT INTO usuarios(email, password) VALUES('[email protected]', 'admin');
CREATE DATABASE IF not EXISTS concesionario;
use concesionario;
create TABLE coches(
id int(10) auto_increment not null,
modelo varchar(255) not null,
marca varchar(50),
precio int(20) not null,
stock int(10) not null,
CONSTRAINT pk_coches PRIMARY KEY(id)
)ENGINE=InnoDB;
create TABLE GRUPOS(
id int(10) auto_increment not null,
nombre varchar(20) not null,
ciudad varchar(20),
CONSTRAINT pk_grupos PRIMARY key(id)
)ENGINE=InnoDB;
CREATE table vendedores(
id int(10) auto_increment not null,
grupo_id int(10) not null,
jefe int(20),
nombre varchar(20) not null,
apellido varchar(20) not null,
cargo varchar(20) not null,
fecha date,
sueldo int(20),
comision float(10,2),
CONSTRAINT pk_vendedores PRIMARY KEY(id),
CONSTRAINT fk_vendedor_grupo FOREIGN KEY(grupo_id),
CONSTRAINT fk_vendedor_jefe FOREIGN KEY(jefe),
)ENGINE=InnoDB;
/*
3. Incrementar el precio de los coches en un dos poriciento.
*/
UPDATE coches set precio = precio*1.05;
/*
5. Mostrar todos los vendedores con su nombre y el numero de dias que llevan
en el concesionario.
*/
DATEDIFF(CURDATE(), fecha)
/*
6. Visualizar el nombre y los apellidos de los vendedores en una misma columna,
su fecha de registro y el dia de la semana en la que se registraron.
*/DAYNAME(fecha)
11. Visualizar todos los cargos y el numero de vendedores que hay en cada cargo
*/
SELECT cargo ,COUNT(id) from vendedores GROUP BY cargo;
/*
13. Sacar la media de sueldos (mostrarlo en entero) entre todos los vendedores por grupo y q me muestre el nombre del grupo y la ciudad
*/
SELECT CEIL(AVG(v.sueldo)) as 'media salarial', g.nombre , g.ciudad from vendedores v
INNER JOIN grupos g on g.id = v.grupo_id
GROUP BY grupo_id;
/*
14. Visualizar las unidades totales vendidas de cada coche a cada cliente.
Mostrando el nombre del coche, nombre de cliente y la suma de unidades.
*/
SELECT c.modelo as 'modelo', cl.nombre as 'nombre',e.cantidad as 'unidad' from encargos e
INNER JOIN coches c on c.id = e.coche_id
INNER JOIN clientes cl on cl.id = e.cliente_id;
/*
15. Mostrar los nombres de los clientes que más encargos han hecho y mostrar cuantos hicieron maximo 2 clientes
*/
SELECT cl.nombre, count(e.id) from encargos e
INNER JOIN clientes cl on cl.id = e.cliente_id
GROUP by e.cliente_id ORDER by 2 DESC limit 2;/*si pongo un numero 2 en este caso despues del ORDER BY significa q tomo el campo e.id despues del selec*/
/*
16. Obtener listado de clientes atendidos por el vendedor 'David Lopez'
*/
select * from clientes WHERE vendedor_id in /*aca pondria un = y todo bien pero pongo IN para q me devuelva multiples resultados ya q david lopez pueden haber muchos*/
(select id from vendedores WHERE nombre = 'David' and apellidos = 'Lopez');/*me saca un id del vendedor y lo comparo con vendedor_id*/
/*
17. Obtener listado con los encargos realizados por el cliente 'Fruteria Antonia Inc'
*/
SELECT * from encargos e
INNER JOIN clientes c on c.id = e.cliente_id /*porqe voy a usar tabla clientes */
WHERE e.cliente_id in /*IN es como el igual pero me saca multiples resultados*/
(select id from clientes WHERE nombre = 'Fruteria Antonia Inc');/*esto me saca el id del cliente para comparar con e.cliente_id*/
/*
18. Listar los clientes que han hecho algun encargo del coche "Mercedes Ranchera"
*/
SELECT * FROM clientes WHERE id IN
(SELECT cliente_id FROM encargos WHERE coche_id
IN (SELECT id FROM coches WHERE modelo LIKE '%Mercedes Ranchera%'));
/*
19. Obtener los vendedores con 2 o más clientes.
*/
select nombre from vendedores WHERE id IN
(SELECT vendedor_id from clientes GROUP by vendedor_id HAVING count(id) >= 2);/*los agrupa para contarlos por cada fila del vendedor_id cuenta id */

Aprendiendo jQuery con Adrian Lisciotti WEB

• Ir a Google
• Ir a Facebook

Ejercicios de jQuery

Practicando con selectores

Quiero ser un parrafo verde

Soy un parrafo blanco

< !DOCTYPE HTML>
< html lang="es">
< head>
< meta charset="utf-8">
< title>Aprendiendo jQuery< /title>
< script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">< /script>-->
< script type="text/javascript" src="js/jquery-3.5.1.min.js">//cargo la libreria de jquery
< script type="text/javascript" src="js/01-selectores.js">
< !--LE AGREGO UNOS ESTILOS A LAS CLASES-->
< style>
.zebra{
border: 5px dashed black;
}
.grande{
font-size: 30px;
}
.margen-superior{
display:block;
margin-top:45px;
}
.resaltado{
border-bottom: 2px solid green;
}
< /style>
< /head>
< body>
< h1>Aprendiendo jQuery con Víctor Robles WEB< /h1>
< ul>
< li>< a href="https://www.google.com" title="Google">Ir a Google< /a>< /li>
< li>< a href="https://www.facebook.com" title="Facebook">Ir a Facebook< /a>< /li>
< /ul>
< p id="rojo" class="sin_borde">Ejercicios de jQuery< /p>
< p id="amarillo" class="zebra">Practicando con selectores< /p>
< p id="verde" class="sin_borde">Quiero ser un parrafo verde< /p>
< p class="zebra">Soy un parrafo blanco< /p>
< div id="caja">
< p>Hola soy una caja< p>
< ul>
< li>Elemento 1< /li>
< li id="elemento2">Elemento 2< /li>
< /ul>
< span class="resaltado">Soy un span< /span>
< /div>
< /body>
< /html>

'use strict'
//ESTE EVENTO ES PARA QUE PUEDA PONER EL SCRIP Q CARGA TODO ESTO AL PRINCIPIO DEL BODY
window.addEventListener('load', () =>{
$(document).ready(function(){//$(document) el dolar me dice q voy a trabajar con jquery y (document) es el SELECTOR (hay mas selectores) carga toda la pagina script .ready metodo de jquery es un evento q tiene una funcion de kalbak
console.log('esta todo listo');
});
// Selector de ID
var rojo = $("#rojo").css("background","red") //$("#rojo") selecciono el id .css("background","red") le cambio los estilos
.css("color", "white");
console.log(rojo);
$("#amarillo").css("background","yellow")
.css("color","green");
$("#verde").css("background","green")
.css("color","white");
// Selectores de clases
var mi_clase = $('.zebra').css("padding","5px");//le pongo estilos
$('.sin_borde').click(function(){ //$('.sin_borde') selecciono la clase .click evento click con funcion de kalbak
console.log("Click dado!!");
$(this).addClass('zebra'); //$(this) se refiere al elemento q yo le alla echo clik .addClass le agrego la clase en este caso ('zebra')
// y va tener todas sus propiedades tengo q hacer click claro-_- ojo solo agrega los estylos q puse por defecto en el html
//los nuevos no estos no var mi_clase = $('.zebra').css("padding","5px");
});
// Selectores de etiqueta
var parrafos = $('p').css("cursor", "pointer");//le ponemos este estylo q cuando pasemos por ensima sea una manito
parrafos.click(function(){
var that = $(this);//$(this) este this se refiere a el elemento en donde se hizo click en este caso es elemento p
if(!that.hasClass('grande')){//hasClass lo q hace es buscar si tiene la clase en este caso grande entonces si no la tiene entra al if
that.addClass('grande');//le agrego la clase
}else{
that.removeClass('grande');//le quito la clase
}
});
// Selectores de atributo
$('[title="Google"]').css('background', '#ccc'); //$('[title="Google"]') seleccioname todos los elementos cuyo title se google
$('[title="Facebook"]').css('background', 'blue');
// Otros
$('p, a').addClass('margen-superior'); //$('p, a') a todos estos elementos le agrego esta clase .addClass('margen-superior')
var busqueda = $("#elemento2").parent().parent().find('.resaltado');//parent() va para atras find me busca tal clase ..se usa mas q nada si hay un arbol grande y no la encuentro
console.log(busqueda);
//fin de load
});

Aprendiendo jQuery con Adrian Lisciotti WEB - Eventos

< !DOCTYPE HTML>
< html lang="es">
< head>
< meta charset="utf-8">
< title>Aprendiendo jQuery< /title>
< script type="text/javascript" src="js/jquery-3.5.1.min.js">< /script>
< script type="text/javascript" src="js/02-eventos.js">< /script>
< style>
#caja{
width: 250px;
height: 250px;
border: 2px solid black;
background: yellow;
transition: 300ms all;
}
/*#caja:hover{
background: red;
cursor:pointer;
}*/
input{
padding: 10px;
width: 300px;
font-size: 20px;
}
#datos{
border: 4px dashed black;
padding: 10px;
width: 250px;
height: 50px;
margin-top: 10px;
display: none;
}
/* hago de este div un redondel*/
#sigueme{
width: 25px;
height: 25px;
position: absolute;
display: block;
background: yellow;
opacity: 0.5;
border: 3px solid black;
border-radius: 999px;
}
< /style>
< /head>
< body>
< h1>Aprendiendo jQuery con Víctor Robles WEB - Eventos< /h1>
< div id="sigueme">< /div>
< form>
< input type="text" id="nombre" />
< /form>
< div id="datos">
< br>
< div id="caja">
Soy una caja
< /div>
< /body>
< /html>

$(document).ready(function(){
// MouseOver y MouseOut/
/*var caja = $("#caja");//el id caja
caja.mouseover(function(){//mouseover cuando toco con el mouse
$(this).css("background","red");//$(this) hace referencia al elemento caja
});
caja.mouseout(function(){//cuando dejo de tocar con el mouse mouseout
$(this).css("background","green");
});*/
//LO MISMO PERO CODIGO MAS OPTIMO
var caja = $("#caja");//el id caja
function cambiaRojo(){
$(this).css("background","red");
}
function cambiaVerde(){
$(this).css("background","green");
}
// Hover
caja.hover(cambiaRojo, cambiaVerde);//this hace referencia al elemento caja hover este evento hace q cuando toco con el mouse me muestra la primer funcion
//y cuando dejo de tocar la segunda funcionllamo a las funciones
// Click, Doble click
//si hago click hace esto
caja.click(function(){
$(this).css("background", "blue")
.css("color", "white");
});
//si hago doble click hace esto
caja.dblclick(function(){//
$(this).css("background", "pink")
.css("color", "yellow");
});
// Focus y blur
var nombre = $("#nombre");
var datos = $("#datos");
nombre.focus(function(){//cuando me pongo en la caja
$(this).css("border", "2px solid green");
});
nombre.blur(function(){//para cuando salgo del fucus del input
$(this).css("border", "1px solid #ccc");
datos.text($(this).val()).show();//datos.text un elemento typo text .val() saco el dato del input el value show muestra el elemento $(this)
});
// Mousedown y mouseup
datos.mousedown(function(){//mousedown cuando se este presionando el raton
$(this).css("border-color", "gray");
});
datos.mouseup(function(){//mouseup cuando dejo de apretar el raton
$(this).css("border-color", "black");
});
// Mousemove
$(document).mousemove(function(){//evento movimiento del raton
$('body').css("cursor","none");//oculto el cursor el raton
$("#sigueme").css("left", event.clientX)//event.clientXme dice en que cordenadas estoy de el raton left en este caso el div va a segir horizontalmente
.css("top", event.clientY);//top vertical
});
});

Aprendiendo jQuery con Adrian Lisciotti WEB - Más metodos / Textos

Añadir nuevos enlaces

Añadir

< title>Aprendiendo jQuery< /title>
< /head>
< body>
< h4>Aprendiendo jQuery con Adrian Lisciotti WEB - Más metodos / Textos< /h4>
< h5>Añadir nuevos enlaces< /h5>
< input type="texto" id="add_link" /> < button id="add_button" disabled="disabled">Añadir< /button>
< ul id="menu3">
< li>< a href="https://google.es">< /a>< /li>
< li>< a href="https://facebook.com">< /a>< /li>
< li>< a href="https://twitter.com">< /a>< /li>
< li>< a href="https://victorroblesweb.es">< /a>< /li>
< /ul>


< script>
$(document).ready(function(){//ready es un evento q tiene una funcion de kalback
reloadLinks();//llamo la funcion para tener los enlaces por defecto q agrege en el html
$('#add_button')//selecciono este id
.removeAttr('disabled')//removeAttr borro el atributo q en este caso esta en el boton ...disabled es el atributo a borrar
.click(function(){//en el evento click o sea cuando toco el boton
$('#menu3').prepend('

');//selecciono el id menu y prepend añade al principio en el menu y con
//$("#add_link").val() seleciono el id del input y el value q esta en el input
//PREPEND lo mete al principio APPEND al final BEFORE antes y fuera de la lista
$("#add_link").val('');//#add_link selecciono el id del input y .val('') lo pongo en vacio
reloadLinks();//llamo la funcion para volver a cargar los enlaces junto con el q agrego con el input
});
});
function reloadLinks(){
$('#menu3 li a').each(function(index){//$('a') selecciono el elemento 'a' each es un bucle con funcion de kalback y index parametro q tiene el indice en este caso voy a recorrer el elemento a
var that = $(this);//guardo this en la variable (this se refiere al elemento en cuestion)
var enlace = that.attr("href");//attr para poder seleccionar el href lo q hay ahi
that.attr('target','_blank');//attr('target','_blank') le estoy creando un atributo y su valor that. a la etiqueta 'a' q sirve para q cuando le de click al enlace me lo abra en pestaña nueva
that.text(enlace);//funcion text que es para meter el enlace como texto incrusto el enlace en that q es el elemento a
});
}
< /script>

Aprendiendo jQuery con adrianweb.live - Efectos

Mostrar Ocultar Abrir Animame!!




< h3>Aprendiendo jQuery con adrianweb.live - Efectos < br>< br> < button id="mostrar"> Mostrar < /button> < button id="ocultar"> Ocultar < /button> < button id="todoenuno"> Abrir < /button> < button id="animar"> Animame!! < /button> < br>< br> < div id="caja"> Master en JavaScript < /div>
< script>
$(document).ready(function() {
var caja = $("#caja");
$("#mostrar").hide(); //hide este meodo oculta
$("#mostrar").click(function() { //en el evento click del boton mostrar
$(this).hide(); //hide oculta el boton
$("#ocultar").show(); //show muestro ..puedo poner show('fast') q da una velocidad de recogido o show('normal')
caja.slideDown('slow'); //slideDown va en el boton de mostrar oculta y desoculta la caja con un efecto de arriba abajo
//fadeIn('slow')fadeIn este metodo se usa para el boton de mostrar hace un efecto de fundido y 'slow' para q sea un toqe mas lento y agradable
//fadeOut('slow')fadeOut este metodo Se usa para el boton de ocultar hace un efecto de fundido y 'slow' para q sea un toqe mas lento y agradable
//fadeTo('slow', 0.8) este en el boton de mostrar juego con la opasidad como q lo deja medio transparente
//fadeTo('slow', 0.2) este en el boton de ocultar
});
$("#ocultar").click(function() { //en el evento click del boton ocultar
$(this).hide(); //lo escondo al boton
$("#mostrar").show(); //lo muestro
caja.slideUp('slow', function() { //slideUp va en el boton de ocultar oculta y desoculta la caja con un efecto de ABAJO ARRIBA
console.log("Cartel ocultado"); //esto lo pongo en una funcion de kalback para q lo muestre resien despues de ocultar la caja
});
});
$("#todoenuno").click(function() {
caja.slideToggle('fast'); //slideToggle esta funcion hace aparece y desaparece la caja en este caso es como tener las dos funciones en una
//tambien esta el Toggle ,fadeToggle q tienen otros efectos
}); $("#animar").click(function() { //cuando hago el click en el boton animame
caja.animate({ //animate este metodo me permite hacer animaciones a nivel de css LAS {} SON PORQE ESTO VA A ESTAR EN UN JSON
marginLeft: '500px', //le doy un margen a la izquierda entoces la caja se mueve hacia la derecha
fontSize: '40px', //le aumenta el tamaño de la letra
height: '110px' //le doy altura
}, 'slow') //'slow' para q sea un toqe mas lento y agradable
.animate({
borderRadius: '900px', //lo redondeo a la caja
marginTop: '80px' //le da un margen arriba para q baje la caja
}, 'slow')
.animate({
borderRadius: '0px', //le quito el borde redondeado
marginLeft: '0px' //y el margen para q regrese
}, 'slow')
.animate({
borderRadius: '100px',
marginTop: '0px'
}, 'slow')
.animate({
marginLeft: '500px',
fontSize: '40px',
height: '110px'
}, 'slow');
});
});
< /script>

Aprendiendo jQuery con adrianweb.live - AJAX

Nombre: Web:

< !DOCTYPE HTML>
< html lang="es">
< head>
< meta charset="utf-8">
< title>Aprendiendo jQuery< /title>
< script type="text/javascript" src="js/05-ajax.js">< /script>
< style>
#datos5 {
border: 2px solid green;
width: 100px;
height: 100px;
overflow: scroll;
}
< /style>

< body>
< h5>Aprendiendo jQuery con adrianweb.live - AJAX< /h5>
< form action="https://reqres.in/api/users" method="POST" id="formulario5">
Nombre: < input type="text" name="name" /> Web: < input type="text" name="web" />
< input type="submit" value="Registrar" />< br>
< /form>
< br/>
< div id="datos5">< /div>
< script type="text/javascript" src="js/jquery-3.5.1.min.js">< /script>

< script type="text/javascript" src="js/05-ajax.js">< /script>
< /body>
< /html>
< script>
$(document).ready(function() {
// Load
// $("#datos").load("https://reqres.in/");//load esto es una peticion ajax q hace q se meta toda la pagina en este div...(se mete solo el html)
// Get y Post
$.get("https://reqres.in/api/users", { page: 2 }, function(response) { //$.get es una peticion ajax y la pagina viene por get ,{page: 2} asi se ponen los parametros y {} porqe es un json
//response es el parametro de la funcion kalback en el se guardan los datos del enlace
response.data.forEach((element, index) => { //response.data. es donde estan los usuarios hago el foreach
$("#datos5").append("

" + element.first_name + " " + element.last_name + "

"); //append guardo el nombre y apellido en el div datos
});
});
//post
$("#formulario5").submit(function(e) { //#formulario selecciono el formulario .submit es el evento y le meto al parametro e el evento ..o sea capturo el evento
e.preventDefault(); //preventDefault hace q no me redirija a la pagina de action q tiene el formulario
var usuario = {
name: $('input[name="name"]').val(), //recojo el input
web: $('input[name="web"]').val()
};
/*$.post($(this).attr("action"), usuario, function(response){//$.post peticion ajax ..this hace referencia a esto .attr("action") q attr me permite elegir atributos es la accion del formulario o sea el enlace
//usuario es el parametro q tiene los datos de la variable usuario donde se colocan en response el parametro del kalback
console.log(response);
}).done(function(){//.done Capturar cuando la petición a tenido éxito y ha terminado
alert("Usuario añadido correctamente");
});*/
//ESTA ES LA MEJOR FORMA
$.ajax({ //$.ajax metodo para usar ajax {} porqe es un json
type: 'POST', //el tipo de peticion q voy a hacer
url: $(this).attr("action"), //le indico la url q voy a enviar
data: usuario, //los datos q voy a enviar
beforeSend: function() { //beforeSend este metodo hace q antes de q se envien los datos etc.. haga una accion
console.log("Enviando usuario...");
},
success: function(response) { //success en el caso de q todo vaya correcto
console.log(response);
},
error: function() { //error si hay algun error
console.log("A ocurrido un error");
},
timeout: 1000 //los segundos q quiero q tarde
});
return false; //para q tampoco me redirija para q no haga la accion por defecto de redirigirme al action cuando clickeo el submit
});
});
< /script>

Aprendiendo jQuery - adrianweb.live - jQuery UI

---

Tooltip

Mis datos Identificarse Amigos

---

Cuadros de dialogo

Lanzame

---

Calendario

---

Pestañas

---

Mostrar

• GTA 5
• Need For Speed
• Crash Bandicoot
• Super Mario
• Galaxian

< !DOCTYPE HTML>
< html lang="es">
< head>
< meta charset="utf-8">
< title>Aprendiendo jQuery-ui< /title>
< style>
.elemento6{
width: 300px;
height: 200px;
border: 4px solid black;
background: lightblue;
margin: 20px;
float:left;
}
.lista-seleccionable li{
width: 80%;
padding: 20px;
border: 1px solid #ccc;
list-style: none;/*le quita los puntitos q vienen por defecto*/
cursor:pointer;
}
ul .ui-selecting {background: black;}/*esto es propio de la libreria ui para q cambie el color los elementos de la lista*/
ul .ui-selected {background: #ccc;}
#elemento-movido6{
width: 100px;
height: 100px;
border: 4px solid red;
}
#area{
width: 300px;
height: 300px;
border: 4px solid green;
}
.elemento6{
background: pink;
float: none;
display: none;
}
< /style>
< body>
< h5>Aprendiendo jQuery - adrianweb.live - jQuery UI< /h5>
< hr/>
< h3>Tooltip< /h3>
< a href="#" class="too" title="Acceder a la seccion de mis datos de esta web">Mis datos< /a>
< a href="#" class="too" title="Logueate en esta web">Identificarse< /a>
< a href="#" class="too" title="Ver todos mis amigos">Amigos< /a>
< hr/>
< h3>Cuadros de dialogo< /h3>
< button id="lanzar-popup">Lanzame< /button>
< div id="popup" title="¿Estas seguro?" style="display:none">
< p>
Si continuas en el curso aprenderas mucho de javascript inevitablemente
< /p>
< /div>
< hr/>
< h3>Calendario< /h3>
< input type="text" id="calendario" />
< hr/>
< h3>Pestañas< /h3>
< div id="pestanas">
< ul>
< li>< a href="#tabs-1">Pestaña 1< /a>< /li>
< li>< a href="#tabs-2">Pestaña 2< /a>< /li>
< li>< a href="#tabs-3">Pestaña 3< /a>< /li>
< /ul>
< div id="tabs-1">
Hola soy la primera pestaña
< /div>
< div id="tabs-2">
Hola soy la segunda pestaña
< /div>
< div id="tabs-3">
Hola soy la TERCERA pestaña
< /div>
< /div>
< hr/>
< button id="mostrar6">Mostrar< /button>
< div class="caja-efectos elemento6">
< /div>
< div id="elemento-movido6">< /div>
< br>
< div id="area">
< /div>
< ul class="lista-seleccionable">
< li>GTA 5< /li>
< li>Need For Speed< /li>
< li>Crash Bandicoot< /li>
< li>Super Mario< /li>
< li>Galaxian< /li>
< /ul>
< div class="elemento6">
Hola, soy un elemento de la web 1
< /div>
< div class="elemento6">
Hola, soy un elemento de la web 2
< /div>
< div class="elemento6">
Hola, soy un elemento de la web 3
< /div>
< /body>
< /html>
< script>
$(document).ready(function(){
// Mover elemento por la pagina
$(".elemento6").draggable();//draggable CON ESTE metodo muevo este elemento
// Redimensionar
$(".elemento6").resizable();//resizable redimensiona o sea agranda y achica el elemento
// Seleccionar y ordenar elementos
//$(".lista-seleccionable").selectable();//selectable este metodo cambia de locor cuando haces click a un elemento de la lista
//$(".lista-seleccionable").sortable();//sortable me permite seleccionar los elementos y arrastrarlos cambiandolos
$(".lista-seleccionable").sortable({//puedo con una funcion de kalback hacer esto
update: function(event, ui){
console.log("ha cambiado la lista");
}
});
// Drop
$("#elemento-movido6").draggable();//draggable va ser el elemento q se puede mover para q pueda poner encima del otro elemento
$("#area").droppable({//droppable es para el elemento q no se va a mover donde se suelta el otro elemento
drop: function(){//drop detecta cuando un elemento se solto ahi
console.log("Has soltado algo dentro de el area");
}
});
// Efectos hay mas en la documntacion
$("#mostrar6").click(function(){
//$(".caja-efectos").toggle("fade");//toggle metodo para lanzar efectos ("fade") el tipo de efecto como q aparece rapido
//$(".caja-efectos").toggle("fadeToggle");//aparece mas suave
//$(".caja-efectos").toggle("explode");//es como q se desrma y se arma
//$(".caja-efectos").effect("explode");//como q se desarma
//$(".caja-efectos").toggle("blind");//sale y se guarda por debajo
//$(".caja-efectos").toggle("slide");//como q sale del costado izquierdo
//$(".caja-efectos").toggle("drop");//como q sale por el costado de derecha a izquierda
//$(".caja-efectos").toggle("fold");
//$(".caja-efectos").toggle("puff");
//$(".caja-efectos").toggle("scale");//se va abriendo
//$(".caja-efectos").toggle("shake");//mueve lo hace temblar
$(".caja-efectos").toggle("shake", 4000);//4000 velocidad puedo ponerle slow de velocidad y otras velocidades y con numero como lo esta
});
// Tooltip por internet hay mas
//$(document).tooltip();//cuando paso el mouse por un enlace o lo q tenga un title abre un cuadro y muestra lo q dice en el title $(".too").tooltip();
// Dialog
$("#lanzar-popup").click(function(){//cuando toco el boton lanza el evento click con tal funcion de kalback
$("#popup").dialog();//dialog este metodo me tira una ventana con lo q dice tal div y saca el display none para q se vea
})
// Datepicker por internet ay mas
$("#calendario").datepicker();//este metodo me muestra un calendario

// Tabs
$("#pestanas").tabs();//al tener en el html los li y sus href con determinados nombres de una lista tabs este metodo me muestra un cuadro
//q me muestra los li q cuando lo toco me muestra
//contenido de un div con id del mismo nombre
});
// Redimensionar
/*$(".elemento").resizable();
// Seleccionar y ordenar elementos
//$(".lista-seleccionable").selectable();
$(".lista-seleccionable").sortable({
update: function(event, ui){
console.log("ha cambiado la lista");
}
});
// Drop
$("#elemento-movido").draggable();
$("#area").droppable({
drop: function(){
console.log("Has soltado algo dentro de el area");
}
});
// Efectos
$("#mostrar").click(function(){
$(".caja-efectos").toggle("shake", 4000);
});
// Tooltip
$(document).tooltip();
// Dialog
$("#lanzar-popup").click(function(){
$("#popup").dialog();
})
// Datepicker
$("#calendario").datepicker();
// Tabs
$("#pestanas").tabs();*/
< /script>

/*
###### SELECTORES ######
*/
/* selector universal */
*{
font-family: Verdana, Tahoma, Geneva sans-serif;
}
/* selector de etiqueta */
h1{
background: red;
color: white;/*color a la letra*/
padding: 10px;/*para q se separe de los bordes*/
}
a{
font-size: 18px;/*tamaño de letra*/
color: green;/*color a la letra*/
text-decoration: none;/*le quita la linea a los enlaces*/
}
footer a{
color: red;/*color a la letra*/
}
/* selector de id identificador */
#descripcion,
#titulo
{
border: 5px solid black;
padding: 15px;/*para q se separe de los bordes*/
}
#titulo{
background: blue;
border: 2px dashed white;
}
/* selector de clase */
.parrafo{
font-style: italic;
/*text-decoration: underline;*/
font-weight: bold;/*el grosor de la letra*/
}
.parrafo1 , .parrafo3{
background-color: green;
color: white;/*color a la letra*/
padding: 10px;
}
.parrafo3 {
background-color: orange;
color: black;/*color a la letra*/
}
/* selector de atributo */
#usuario form {
border: 5px solid blue;
margin-top: 15px;
margin-bottom: 15px;/*le da el espacio entre los elementos y el margen*/
padding: 20px;/*para q se separe de los bordes*/
}
#usuario form *{
display: block;/*cada elemento va a estar en una linea para el solo*/
}
input[type="text"]{
margin-bottom: 15px;/*le da el espacio entre cada elemento*/
padding: 10px;/*el alto de la caja del input*/
width: 300px;/*el ancho del input*/
}
input[type="submit"]{
background: green;/*el color del input*/
color: white;/*el color de la letra*/
padding: 15px;/*el alto de la caja del input*/
font-size: 15px;/*tamaño de letra*/
text-transform: uppercase;/*transforma en mayuscula al texto*/
border: 1px solid black;/*cambia el borde a color negro*/
cursor: pointer;/*cuando pasa el mouse se transforma en una manito*/
}
/*selector hijo*/
#menu > li > a{/* del menu despues de li despues del otro ul a los a*/
font-size: 18px;
color: red;/*color a la letra*/
text-decoration: none;/*le quita la linea a los enlaces*/
}
/*prioridad*/
/* css le da prioridad al ultimo pero si por ejemplo se pone un id css le da prioridad al id premia a lo mas especifico*/
/*pero si le pongo !important vale sobre todo*/
#saludo h1{
background: brown;
}
h1{
background: purple !important;
}
/*importar una fuente de https://fonts.google.com una vez hayamos descargado el zip lo colocamos en nuestro proyecto y aca
ponemos esto @font-face q es una propiedad de css3*/
@font-face {
font-family: MonserratFuenteCustom;/*colocamos el nombre de la fuente inventado por mi */
src: url(../fonts/Montserrat/Montserrat-Regular.ttf);/*colocamos la direccion donde esta la fuente*/
}
@font-face {
font-family: MansalvaFuenteCustom;/*colocamos el nombre de la fuente inventado por mi */
src: url(../fonts/Mansalva/Mansalva-Regular.ttf);/*colocamos la direccion donde esta la fuente*/
}
h1{
font-family: Arial,Helvetica,sans-serif;
font-style: italic;/*como quiero q sea la letra italic en curciva en este caso*/
font-family: 'Mansalva', cursive;/*la fuente es de https://fonts.google.com este es un ejemplo cuando no descargo la fuente el link esta en el head del index para llamarla desde la pagina*/
text-transform: uppercase;/*transforma en mayuscula al texto*/
font-size: 45px;
/*Colores*/
/* ACA LOS PODEMOS ENCONTRAR https://www.w3schools.com/cssref/css_colors.asp*/
/*Colores del sistema*/
color:mediumpurple;
/*color: transparent;/*transparente*/
/*Colores hexadecimales*/
color: #000000;/*negro*/
/*color: #cccccc;/*gris claro*/
/*color: #ffffff;/*blanco*/
/*color: #eeeeee;/*gris clarito*/
/*Colores RGB (la mezcla de 3 colores)*/
/* para generar un color de estos ir a https://www.css3maker.com/css-3-rgba.html
copiar el codigo el primero background-color: rgba(166, 96, 97, 0.6); y sacarle el background- y el ultimo parametro 0.6 y la a */
color: rgb(188, 255, 80);
/*Colores RGBA (la mezcla de 3 colores y poner una opacidad)*/
color: rgba(188, 255, 80, 0.8);
}
h3
{
font-family: MonserratFuenteCustom, "Comic Sans MS";/*aca ponemos el nombre de la fuente creada con @font-face y si no va agarra "Comic Sans MS"*/
font-size: 30px;/*tamaño de letra*/
font-weight: lighter;/*el grosor de la letra*/
color: olive;
}
p{
font-family: MansalvaFuenteCustom, sans-serif;
font-size: 18px;
font-weight: bold;/*el grosor de la letra*/
}
body{
background-color:#ccc;
background-image: url(../img/fondo1.jpg);
background-repeat: repeat;/*me repite q es el q esta por defecto
background-repeat: no-repeat me muestra una vez despues esta
background-repeat: repeat-y; es en vertical y x en horizontal*/
/*background-size: 100%; /*me extiende la imagen al 100 esta sirve mas q nada para
imagenes grandes por ejemplo buscate una de paisajes en google*/
background-size: 100% 100%;/*me adapta la imagen a la pantalla */
color: white;/*texto blanco*/
background-position: left bottom;/*q me posicione el background a la izqierda y al booton
o sea a la izqierda y abajo*/
background-attachment: fixed;/*el texto se mueve pero la imagen no*/
text-align: justify;/*me pone de forma recta alineada el texto*/
text-indent: 15px;/*me da una separacion y un salto de linea entre texto y texto */
word-spacing: 10px;/*me separa entre palabra y palabra*/
letter-spacing: 5px;/*me separa entre letra y letra*/
}
#caja{
border: 5px solid black;/*anchura del borde el tipo y el color*/
padding: 10px;/*para q se separe de los bordes*/
background-color: rgb(94, 131, 212);/*me pone el fondo de cierto color*/
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
text-align: center;
line-height: 20px;/*modifica la altura entre linea y linea */
text-transform: uppercase;/*transforma en mayuscula al txto*/
text-decoration: line-through;/*tacha lel texto*/
text-decoration: underline;/*me subrraya*/
}
/*buscar fondos en el buscador de google pattern background*/
h2{
color: rgb(13, 13, 59);
background: white;
background-image: url(../img/patron3.jpg);
border: 5px solid red;
}
* {
/*asterisco es para toda la pagina*/
margin: 0px;
/* margin para q no haya espacios*/
padding: 0px;
/*padding para q se separe de los bordes*/
}
body {
/*para q se separe de los bordes de todo el body*/
padding: 40px;
}
#cajas {
/*un ancho maximo de pantalla*/
max-width: 1035px;
/*borde tamaño tipo y color*/
border: 1px solid black;
}
.caja {
/*se comporta como una caja*/
display: block;
/*anchura*/
width: 250px;
/*altura*/
height: 250px;
background-color: lightblue;
/*borde tamaño tipo y color*/
border: 10px solid red;
/*separa el margen de arriba*/
margin-top: 15px;
/*le da el espacio entre los elementos y el margen de la parte de abajo*/
margin-bottom: 15px;
/*le da un margen hacia la izquierda*/
margin-left: 25px;
/*para q se separe de los bordes un margen interno por todas partes*/
padding: 20px;
/*le da un espacio de la parte de abajo de las cajas*/
padding-bottom: 34px;
/*FLOTAR LAS CAJAS O SEA MOVERLAS con float q se debe aplicar cuando el display es en block*/
/*las cajas se moveran a la izquierda*/
float: left;
/*las cajas se moveran a la derecha*/
/*float: right;*/
/*las cajas se quedan por defecto*/
/*float: none;*/
}
.caja p {
/*el grosor de la letra*/
font-weight: bold;
/*centra el texto*/
text-align: center;
/*tamaño de letra*/
font-size: 20px;
/*le estamos dando fuente*/
font-family: Arial, Helvetica, sans-serif;
/*modifica la altura entre linea y linea */
line-height: 250px;
}
.clearfix {
/*las cajas se quedan por defecto*/
float: none;
/*limpia todos los flotados*/
clear: both;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
ul li {
font-size: 20px;
}
/*pseudoclase me va a poner todo esto en la primera de la lista*/
ul li:first-child {
/*color de la letra*/
color: purple;
/*una fuente mas negrita*/
font-weight: bold;
}
/*me deja elejir el elemento q quiero poniendo el numero*/
ul li:nth-child(2) {
/*color de la letra*/
color: orangered;
/*una fuente mas negrita*/
font-weight: bold;
}
/*ultimo elemento*/

ul li:last-child {
/*color de la letra*/
color: gray;
/*una fuente mas negrita*/
font-weight: bold;
}
#mi-enlace {
font-size: 30px;
color: gray;
}
/*me pone al enlace ese color si no la vicite ala pagina*/
#mi-enlace:link {
color: red;
}
/*me pone al enlace ese color si ya visite la pagina*/
#mi-enlace:visited {
color: orangered;
}
/*cuando paso con el raton me lo pone blue*/
#mi-enlace:hover {
color: blue;
}
/*q mientras presiono el enlace me haga estos cambios*/
#mi-enlace:active {
color: green;
/*fuente*/
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
input[type="text"] {
margin-top: 20px;
padding: 10px;
}
/*cuando toco en el input me hace estos cambios*/
input[type="text"]:focus {
border: 4px dashed red;
}
#boton {
/*para q se comorte como bloke o sea se comporta como una caja*/
display: block;
padding: 20px;
background-color: green;
color: white;
width: 200px;
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: bold;
text-decoration: none;
border: 2px solid rgb(2, 70, 2);
/*LA TRANSICION HACE Q TARDE 3 SEGUNDOS EN HACER LOS CAMBIOS
all significa a todo el elemento*/
/*transition: all 3s;*/
/*TAMBIEN MILISEGUNDOS SERIA MAS RAPIDO*/
transition: all 500ms;
/*aca solo los cambios al borde*/
transition: border 500ms;
/*aca cambian las propiedades cuando yo quiera por separado*/
transition: border 500ms, background 3s, border-radius 1s;
}
#boton:hover {
border-radius: 15px;
background: orangered;
border: 5px solid red;
}
#caja {
margin-top: 25px;
width: 250px;
height: 250px;
background: lightseagreen;
color: white;
border: 5px solid black;
font-size: 20px;
text-align: center;
/*lo aline en vertical*/
line-height: 200px;
/*aplico la animacion*/
animation-name: desplazamiento;
/*el tiempo de la animacion*/
animation-duration: 10s;
/*si la quiero hacer infinita o no*/
animation-iteration-count: infinite;
/*hay muchos pero en este caso q vaya a la misma velocidad*/
animation-timing-function: linear;
}

/*PARA HACER UNA ANIMACION PRIMERO DEFINO LOS @keyframes*/
/*MANERA CORTA*/
/*1 le pongo nombre desplazamiento */
/*2 le pongo como empieza y como termina con form y to*/
/*
@keyframes desplazamiento// {
from //{
margin-left: 0px;
}
to {
margin-left: 1200px;
}
}
*/
/*MANERA COMPLETA*/
/*lo desplazo lado a lado a la caja*/
@keyframes desplazamiento {
0% {
margin-left: 0px;
}
50% {
margin-left: 1090px;
}
100% {
margin-left: 0px;
}
}
/*aca la hago rotar*/
@keyframes desplazamiento {
0% {
margin-left: 0px;
transform: rotate(0deg);
}
50% {
margin-left: 1090px;
transform: rotate(370deg);
}
100% {
margin-left: 0px;
transform: rotate(0deg);
}
}
/*la hago rotar y se va convirtiendo en pelota*/
@keyframes desplazamiento {
0% {
margin-left: 0px;
transform: rotate(0deg);
}
50% {
margin-left: 1090px;
transform: rotate(370deg);
border-radius: 999px;
}
100% {
margin-left: 0px;
transform: rotate(0deg);
}
}
/*la hago rotar y se va convirtiendo en pelota y cambia de color y cambia el borde*/
@keyframes desplazamiento {
0% {
margin-left: 0px;
transform: rotate(0deg);
}
50% {
margin-left: 1090px;
transform: rotate(370deg);
border-radius: 999px;
}
75% {
background: red;
}
77% {
border: 10px dashed blue;
}
100% {
margin-left: 0px;
transform: rotate(0deg);
}
}
@media(max-width: 880px) {
}