Categorías
Udemy

SECCIÓN 37 – Funcionalidades avanzadas del proyecto de JS

130. Slider / Galería de imágenes

Ahora buscaremos un plugin «slider» para jQuery en Google, para ver cual ponemos en nuestra galería de imágenes.

Buscando en Google, encontramos «bxslider», el cual nos servirá para nuestro propósito, crear esa galería de imágenes para nuestra web.

Para empezar, copiaremos las líneas de código que salen en la página para insertar en nuestro HTML.

Como es un plugin jQuery, primero pegaremos en el head el script que inserta este así:

<!-- jQuery -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

y a continuación, los archivos del slider:

<!-- Slider --> 
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
		<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

Para que esto funcione, deberemos añadir un div con id=»slider», y en él tantos div como sean necesarios con nuestras imágenes, de esta manera:

<!-- Slider -->
			<div id="slider">
				<div class="bxslider">
				  <div><img src="img/hojas.jpg" title="Hojas"></div>
				  <div><img src="img/rojo.jpg" title="The long and winding road"></div>
				  <div><img src="img/cielo.jpg" title="Happy trees"></div>
				</div>
			</div>

Así ya tendremos insertadas en nuestro HTML las imágenes que necesitamos para nuestro slider, aunque todavía carece totalmente de funcionalidad.

Para dotarle de esta, deberemos escribir nuestro script en el fichero main.js.

$(document).ready(function(){

	// Slider
	  $('.galeria').bxSlider({
	    mode: 'fade',
	    captions: true,
	    slideWidth: 1200,
	  });
})

Pero, por si no lo hemos hecho, deberemos insertar también nuestro archivo main.js en el head de nuestro HTML para que ejecute nuestros archivos de javascript.

<!-- Mis Scripts -->
		<script type="text/javascript" src="js/main.js"></script>

Con todo esto, si lo probamos, nuestro slider debería funcionar.

Ahora lo que queremos hacer es modificar la altura del slider, ya que por defecto es demasiado alto; lo dejaremos en 250px.

Como las clases que pone el plugin bxslider a nuestros div’s son «bx-wrapper» «bx-viewport», utilizaremos estas en nuestro CSS para darle las medidas que queremos.

.bx-wrapper, .bx-viewport {
	height: 250px !important;
}

Si queremos quitar los puntitos de paginación del slider, simplemente deberemos añadir dentro de main.js:

$(document).ready(function(){

	// Slider
	  $('.galeria').bxSlider({
	    mode: 'fade',
	    captions: true,
		slideWidth: 1200,
		pager: false
	  });
})

Aunque nosotros, finalmente, lo dejaremos en true, para que aparezcan esos tres puntitos.

131. Listado dinámico de artículos / posts

Para poder añadir dinámicamente nuestros artículos/posts, tendremos que crear un JSON con las propiedades «título», «fecha» y «cuerpo»,  y lo enviaremos a consola para ver el resultado.

// Posts
		var posts = [ 
			{
			title: 'Prueba de titulo 1',
			date: new Date(),
			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.'
		},
		{
			title: 'Prueba de titulo 2',
			date: new Date(),
			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.'
		},
		{
			title: 'Prueba de titulo 3',
			date: new Date(),
			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.'
		},
		{
			title: 'Prueba de titulo 4',
			date: new Date(),
			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.'
		},
		{
			title: 'Prueba de titulo 5',
			date: new Date(),
			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.'
		}
		]
		console.log(posts);

Para poder manejar las fechas de manera más adecuada, no como la devuelve JavaScript, utilizaremos la librería moment.js, la cual nos permitirá hacer esto de una manera más fácil y eficiente.

El código dentro del JSON para moment.js será este:

{
				title: 'Prueba de titulo 1',
				date: 'Publicado el dia ' + moment().date() + " de " + moment().format("MMMM") + " del " + moment().format("YYYY"),
				content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet malesuada erat, ac ullamcorper justo. Fusce sapien nibh, tempor fermentum mauris ac, tincidunt maximus diam. Quisque bibendum sed dui sit amet euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse quam sem, scelerisque sit amet libero nec, congue blandit dolor. Aliquam a vehicula mi. Morbi id convallis dolor. Nulla eu libero nec nulla fermentum viverra quis at magna. Quisque rutrum augue nulla, bibendum viverra sapien viverra vel. Quisque malesuada ultrices felis eu porttitor.'
			},

Ahora, para tener la estructura HTML dentro de nuestro JSON, creamos un forEach que recorrerá todo nuestro objeto e interpolando variables le meteremos los datos que tiene nuestro JSON.

posts.forEach((item, index) => {
			var post = `
				<article class="post">
					<h2>${item.title}</h2>
					<span class="date">${item.date}</span>
					<p>
						${item.content}
					</p>
					<a href="#" class="button-more">Leer más</a>
				</article>
			`;
			console.log(post)
		});

Ahora lo que nos tocará será cargar mediante jQuery y el método .append() todo este JSON dentro de nuestro div id=»posts», y para eso borraremos previamente los posts de prueba que teníamos en nuestro HTML.

$("#posts").append(post);

De esta manera habremos automatizado la creación de artículos/posts mediante un objeto/fichero JSON.

132. Cambiador de temas del sitio web

Ahora, mediante unos botones que insertaremos en nuestra página, podremos cambiar de tema nuestro sitio web.

Para hacer esto, podemos hacerlo de varias formas.

La primera, sería cambiando mediante JavaScript todos los elementos que queramos modificar: background, color de los botones, fondos, etc.

La segunda, que es la que utilizaremos, será teniendo una hoja de estilos CSS para cada color que queramos usar.

Creamos «blue.css», «green.css» y «red.css».

En el «index.html» cargaremos los estilos CSS por defecto y le añadimos un id=’theme’.

Ahora, en cada hoja de estilos, escribimos los estilos que son propios de cada hoja y borramos estos en la hoja principal styles.css.

La hoja de estilos green.css quedaría así:

body {
	background: url("../img/hojas.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/
}
#logo {
	background: #235E3D;
}
#menu ul li:hover{
	background: #235E3D;
}
.button-more{
	background: #235E3D;
}

Ahora copiamos este mismo código en las hojas «red.css» y «blue.css», pero cambiamos los colores por los que les correspondan, y cambiamos también la imagen de fondo.

Para el color azul quedaría así:

body {
	background: url("../img/cielo.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/
}
#logo {
	background: #1F87C4;
}
#menu ul li:hover{
	background: #1F87C4;
}
.button-more{
	background: #1F87C4;
}

Para el color rojo sería así:

body {
	background: url("../img/rojo.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/
}
#logo {
	background: #CA3413;
}
#menu ul li:hover{
	background: #CA3413;
}
.button-more{
	background: #CA3413;
}

La botonera para poder cambiar de «theme» queremos que se vea fuera de la estructura básica de la página, a la izquierda.

Para ello, crearemos un div con id=»selector theme», y dentro de este creamos 3 más con id’s: «to-green», «to-blue» y «to-red».

Y en «styles.css» daremos estos estilos para que nos coloque los botones donde queremos:

#selector-theme{
	position: fixed;
	top:40%;
	background: rgba(51, 51, 51, 0.5);
	width: 50px;
	height: 100px;
}

Ahora daremos estilos comunes a todos los botones:

#to-green,
#to-red,
#to-blue{
	width: 25px;
	height: 25px;
	border: 1px solid white;
	display: block;
	margin: 0px auto;
	margin-top: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}

Y ahora estilos a cada botón individualmente:

#to-green{
	background: #235E3D;
}

#to-red{
	background: #CA3413;
}

#to-blue{
	background: #1F87C4;
}

Ahora, en nuestro «main.js» escribiremos el código para que al hacer click en cada botón nos cambie de tema.

// Selector de tema
	var theme = $("#theme");

	$("#to-green").click(function(){
		theme.attr("href", "css/green.css");
	});
	
	$("#to-red").click(function(){
		theme.attr("href", "css/red.css");
	});
	
	$("#to-blue").click(function(){
		theme.attr("href", "css/blue.css");
	});

Y con esto, ya conseguiremos que cada vez que hacemos click en un botón nos cambie de tema y de colores asociados.

133. Scroll automático animado y suavizado hacia arriba

Crearemos un botón abajo en el footer para que cuando le demos mediante un efecto suavizado nos envíe al principio de la página.

Este botón los crearemos mediante jQuery.

Añadimos un ancla (enlace) en nuestro footer.

<a href="#" class="subir">Ir arriba</a>

Ahora le damos unos estilos en CSS a la clase «.subir»:

.subir{
	color: white;
	text-decoration: none;
	display: block;
	float:right;
}

Para darle animación, lo hacemos con un script de jQuery utilizando el método «animate()»:

// Scroll arriba de la web
		$('.subir').click(function(e){
		e.preventDefault(); //Elimina comportamiento por defecto del enlace

		$('html, body').animate({
			scrollTop: 0
		}, 500); // 500 ó 1/2 seg. para subir arriba. Si se cambia a uno mayor, el efecto es más visible.

		return false;
		});

Buscar Info. del método «.animate()».

134. Identificación con LocalStorage

Como el formulario ya lo hemos creado anteriormente, ahora lo único que tendremos que hacer es «introducir información en él» «guardarla en el LocalStorage».

Añadiremos en nuestro HTML en nuestro campo de texto «name» un «id=»form_name» para poder tratarlo en JavaScript.

Para ello capturamos el evento «submit» de nuestro formulario y mediante una función callback hacemos lo siguiente:

// Login falso

	$("#login form").submit(function(){ //seleccionamos el formulario "login"
		var form_name = $("#form_name").val(); // guardamos en variable el valor de #form_name

		localStorage.setItem("form_name", form_name); //insertamos en localStorage el valor de esa variable.

	});

Ahora recogemos el valor del localStorage y mediante un if comprobamos si «form_name» es null ó undefined; si no lo es insertamos el siguiente código:

var form_name = localStorage.getItem("form_name");

		if(form_name != null && form_name != "undefined"){
			//comprobamos si NO es null o undefined

			//Insertamos en el parrafo #about el siguiente HTML
			var about_parrafo = $("#about p");

			about_parrafo.html("<br><strong>Bienvenido, "+form_name+"</strong> ");
			about_parrafo.append("<a href='#' id='logout'>Cerrar sesión</a>");

			$("#login").hide(); //escondemos el form de login

			//si hacemos 'clik' en #logout vaciamos el localstorage y recargamos la página (location ???)
			$("#logout").click(function(){
				localStorage.clear();
				location.reload();
			});

		}

135. Acordeón

Crearemos una sección «Sobre Mí» en la que insertaremos un «acordeón» realizado con jQueyUI.

Creamos una nueva página HTML, «about.html».

Copiamos el contenido de «index.html» entero y cambiamos algunas cosas:

  • En el div con «id=post» lo cambiamos por «id=box», que aquí será donde irá nuestro acordeón.
  • Quitamos el script del «slider» y de «moment».
  • El contenido del HTML del div «slider» también lo podemos eliminar.
  • Cambiamos en «index.html» los links hacia la página «about.html» y «index.html», y en la de «about.html» también incluimos los mismos links.

Ahora el problema es que hay algunas cosas de JavaScript que no funcionan al haber quitado los scripts de «slider» y «moment».

Para eso Víctor crea la siguiente línea para que sólo lo cargue cuanto estemos en «index.html»:

// Slider
	if(window.location.href.indexOf('index') > -1){

Buscar Info. de qué es esto ¿?.

Pasa lo mismo con la librería de «moment», así que incluye también la misma línea en «//Posts», dentro de main.js.

Esta parte de aquí no logro entenderla. REPASARLA CON MÁS CALMA, sobre todo el tema «window.location.href.indexOf».

136. Acordeón

  • Víctor crea una nueva página, «about.html», para crear una página «Acerca de mí…».
  • Copia el HTML entero de la página anterior.
  • El div id=»post» lo cambia por div id=»box» para cargar el acordeón.
  • Los link al slider los elimina, porque aquí no hacen falta.
  • Los mismo para moment.js.
  • El div id=»slider» también lo elimina.
  • Desde index.html linkea hacia about.html.
Categorías
Udemy

SECCIÓN 36 – Maquetación y estilos del sitio web (HTML y CSS)

124. Estructura HTML

Aquí Víctor se dedica a realizar la estructura básica de nuestro HTML, los elementos que nuestra página deberá contener.

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title>Proyecto con JavaScript</title>

		<!-- Estilos CSS -->
		<link rel="stylesheet" type="text/css" href="css/green.css" />
	</head>
	<body>
		<section id="global">
			<header>
				<div id="logo">
					<h1>Proyecto JS</h1>
				</div>

				<navbar>
					<ul id="menu">
						<li><a href="#">Inicio</a></li>
						<li><a href="#">Reloj</a></li>
						<li><a href="#">Sobre mi</a></li>
						<li><a href="#">Contacto</a></li>
					</ul>
				</navbar>
			</header>

			<!-- Slider -->
			<div id="slider">
				 
			</div>

			<!-- Contenido -->
			<section id="content">
				<div id="posts">
					<article class="post">
						<h2>Título del Artículo</h2>
						<span>Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
					</article>
				</div>
				<sidebar id="sidebar">
				
				</sidebar>
			</section>
		</section>
		
		<footer>
			Master de JavaScript de Victor Robles @
		</footer>

	</body>
</html>

125. Maquetación de la cabecera

Lo primero que haremos en nuestro CSS será cargar el fondo de nuestra página a través de una imagen.

Daremos estilos también al fondo de nuestro body, al div con clase «global» y «logo».

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.clearfix {
	float: none;
	clear: both;
}
body {
	/*background: red;*/
	background: url("../img/hojas.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/

}

#global {
	width: 65%;
	margin: 0px auto;
	margin-top: 30px;
	padding: 20px;
	background: white;
	box-shadow: 0px 0px 20px gray;
}
#logo {
	font-family: "Verdana", "Arial";
	font-size: 30px;
	letter-spacing: 4px;
	line-height: 75px;
	background: #235E3D;
	color:white;
	text-align: center;
	width: 385px;
	height: 80px;
	margin-bottom: 20px;

	float: left;


}

126. Maquetación del menú (css)

Lo primero que tendremos que hacer es cambiar la etiqueta «navbar» por «nav», que es la correcta en HTML5, en nuestro «index.html».

Le asignamos un ‘id=»menu»‘, y trabajamos los estilos CSS de ella, tal que así:

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.clearfix {
	float: none;
	clear: both;
}
body {
	/*background: red;*/
	background: url("../img/hojas.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/

}

#global {
	width: 65%;
	margin: 0px auto;
	margin-top: 30px;
	padding: 20px;
	background: white;
	box-shadow: 0px 0px 20px gray;
}
#logo {
	font-family: "Verdana", "Arial";
	font-size: 28px;
	letter-spacing: 4px;
	line-height: 75px;
	background: #235E3D;
	color:white;
	text-align: center;
	width: 385px;
	height: 80px;
	margin-bottom: 20px;
	float: left;
	text-transform: uppercase;

}
#menu{
	font-family: Helvetica, Arial;
	background: #333;
	width: 100%;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#menu ul{
	line-height: 46px;
	list-style: none;
}
#menu ul li{
	height: 46px;
	display: inline-block;
	transition: all 300ms;
}
#menu ul li:hover{
	background: #235E3D;
}
#menu a{
	display: block;
	color: white;
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
}

127. Maquetar articulos

Para maquetar los «artículos» deberemos tener en cuenta que vamos a tener dos columnas, la de los «posts/artículos» propiamente dichos, y otra a su derecha, que será el «sidebar».

Por este motivo la columna de artículos no podrá ocupar el 100% de nuestra página.

El código HTML para este vídeo es:

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title>Proyecto con JavaScript</title>

		<!-- Estilos CSS -->
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
	</head>
	<body>
		<section id="global">
			<header>
				<div id="logo">
					<h1>Proyecto JS</h1>
				</div>
				<div class="clearfix">
					
				</div>
				<nav id="menu">
					<ul >
						<li><a href="#">Inicio</a></li>
						<li><a href="#">Reloj</a></li>
						<li><a href="#">Sobre mi</a></li>
						<li><a href="#">Contacto</a></li>
					</ul>
				</nav>
			</header>

			<!-- Slider -->
			<div id="slider">
				 
			</div>

			<!-- Contenido -->
			<section id="content">
				<div id="posts">
					<article class="post">
						<h2>Prueba de título</h2>
						<span class="date">Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
						<a href="#" class="button-more">Leer más</a>
					</article>
					<article class="post">
						<h2>Prueba de título</h2>
						<span class="date">Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
						<a href="#" class="button-more">Leer más</a>
					</article>
					<article class="post">
						<h2>Prueba de título</h2>
						<span class="date">Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
						<a href="#" class="button-more">Leer más</a>
					</article>
				</div>
				
				<sidebar id="sidebar">
				
				</sidebar>
				<div class="clearfix"></div>
			</section>
		</section>
		
		<footer>
			Master de JavaScript de Victor Robles @
		</footer>

	</body>
</html>

Y el código CSS para los estilos:

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.clearfix {
	float: none;
	clear: both;
}
body {
	/*background: red;*/
	background: url("../img/hojas.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/

}

#global {
	width: 65%;
	margin: 0px auto;
	margin-top: 30px;
	padding: 20px;
	background: white;
	box-shadow: 0px 0px 20px gray;
}
#logo {
	font-family: "Verdana", "Arial";
	font-size: 28px;
	letter-spacing: 4px;
	line-height: 75px;
	background: #235E3D;
	color:white;
	text-align: center;
	width: 385px;
	height: 80px;
	margin-bottom: 20px;
	float: left;
	text-transform: uppercase;

}
#menu{
	font-family: Helvetica, Arial;
	background: #333;
	width: 100%;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#menu ul{
	line-height: 46px;
	list-style: none;
}
#menu ul li{
	height: 46px;
	display: inline-block;
	transition: all 300ms;
}
#menu ul li:hover{
	background: #235E3D;
}
#menu a{
	display: block;
	color: white;
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
}
#posts{
	width: 60%;
	float: left;
	font-family: Helvetica, Arial;
}
.post{
	padding: 7px;
}
.post h2{
	font-size: 30px;
	color:#333;
}
.post .date {
	display:block;
	color: gray;
	margin-top: 5px;
}
.post p {
	margin-top: 10px;
	margin-bottom: 20px;
	line-height: 22px;
	text-align: justify;
}
.button-more{
	font-size: 14px;
	text-align: center;
	display: block;
	padding: 15px;
	background: #235E3D;
	color:white;
	text-decoration: none;
	margin-top: 10px;
	width: 70px;
	margin-bottom: 20px;
}

128. Dar estilos al sidebar o barra lateral

Ahora maquetaremos el «sidebar» de la web.

Lo primero será quitar de nuestro HTML la etiqueta «sidebar»  ya que no es correcta, y la cambiaremos por «aside».

Introduciremos todos estos elementos en nuestro «aside»:

<aside id="sidebar">
					<div id="about">
						<h4><span>¿Quién soy?</span></h4>
						<img src="img/caracol.jpg">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</aside>

Y a continuación, le daremos estilos a todo esto:

#sidebar {
	font-family: Helvetica, Arial;
	width: 31%;
	float: right;
}
#sidebar h4{
	margin-top: 50px;
	margin-bottom: 20px;
	text-align: center;
	line-height: 10px;
	color: #333;
	background: url("../img/lines.png") repeat-x;
}
#sidebar h4 span{
	background: white;
	padding: 5px;
}
#sidebar img{
	width: 100%;
}
#sidebar p{
	font-size: 15px;
	text-align: justify;
}

Ahora, añadiremos la sección de «login» a nuestro HTML:

<div id="login">
						<h4><span>Identifícate</span></h4>
						<form>
							<label for="name">
								Nombre
							</label>
							<input type="text" name="name">

							<label for="email">
								Correo
							</label>
							<input type="text" name="email">
							
							<label for="password">
								Contraseña
							</label>
							<input type="password" name="password">

							<input type="submit" value="Entrar">
						</form>
					</div>

A continuación, daremos estilo a nuestro formulario de «login»:

form input[type="text"],
form input[type="password"],
form input[type="email"] {
	padding: 5px;
	border-radius: 2px;
	border-color: 1px solid #ccc;
	width: 80%;
	margin-bottom: 10px;	
	margin-top: 5px;
}
form input[type="submit"]{
	background: #eee;
	padding: 10px;
	border: 1px solid #ccc;
	color: #333;
	cursor: pointer;
}

Finalmente, todo el código HTML del «ejercicio 128» sería este:

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title>Proyecto con JavaScript</title>

		<!-- Estilos CSS -->
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
	</head>
	<body>
		<section id="global">
			<header>
				<div id="logo">
					<h1>Proyecto JS</h1>
				</div>
				<div class="clearfix">
					
				</div>
				<nav id="menu">
					<ul >
						<li><a href="#">Inicio</a></li>
						<li><a href="#">Reloj</a></li>
						<li><a href="#">Sobre mi</a></li>
						<li><a href="#">Contacto</a></li>
					</ul>
				</nav>
			</header>

			<!-- Slider -->
			<div id="slider">
				 
			</div>

			<!-- Contenido -->
			<section id="content">
				<div id="posts">
					<article class="post">
						<h2>Prueba de título</h2>
						<span class="date">Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
						<a href="#" class="button-more">Leer más</a>
					</article>
					<article class="post">
						<h2>Prueba de título</h2>
						<span class="date">Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
						<a href="#" class="button-more">Leer más</a>
					</article>
					<article class="post">
						<h2>Prueba de título</h2>
						<span class="date">Fecha de publicación</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales dictum mauris, in volutpat purus venenatis ac. Sed tortor enim, dapibus vitae pretium quis, bibendum eget mi. Sed sodales lobortis volutpat. Etiam lobortis eget ex non rhoncus. Aenean suscipit massa nec lectus rhoncus, a tristique dolor semper.</p>
						<a href="#" class="button-more">Leer más</a>
					</article>
				</div>
				
				<aside id="sidebar">
					<div id="about">
						<h4><span>¿Quién soy?</span></h4>
						<img src="img/caracol.jpg">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<div id="login">
						<h4><span>Identifícate</span></h4>
						<form>
							<label for="name">
								Nombre
							</label>
							<input type="text" name="name">

							<label for="email">
								Correo
							</label>
							<input type="text" name="email">
							
							<label for="password">
								Contraseña
							</label>
							<input type="password" name="password">

							<input type="submit" value="Entrar">
						</form>
					</div>
				</aside>
				<div class="clearfix"></div>
			</section>
		</section>
		
		<footer>
			Master de JavaScript de Victor Robles @
		</footer>

	</body>
</html>

Y el todo el código CSS del «ejercicio 128» sería este:

* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.clearfix {
	float: none;
	clear: both;
}
body {
	/*background: red;*/
	background: url("../img/hojas.jpg");
	background-attachment: fixed; /*Para fijar el scroll*/

}

#global {
	width: 65%;
	margin: 0px auto;
	margin-top: 30px;
	padding: 25px;
	background: white;
	box-shadow: 0px 0px 20px gray;
}
#logo {
	font-family: "Verdana", "Arial";
	font-size: 28px;
	letter-spacing: 4px;
	line-height: 75px;
	background: #235E3D;
	color:white;
	text-align: center;
	width: 385px;
	height: 80px;
	margin-bottom: 20px;
	float: left;
	text-transform: uppercase;

}
#menu{
	font-family: Helvetica, Arial;
	background: #333;
	width: 100%;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#menu ul{
	line-height: 46px;
	list-style: none;
}
#menu ul li{
	height: 46px;
	display: inline-block;
	transition: all 300ms;
}
#menu ul li:hover{
	background: #235E3D;
}
#menu a{
	display: block;
	color: white;
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
}
#posts{
	width: 60%;
	float: left;
	font-family: Helvetica, Arial;
}
.post{
	padding: 7px;
}
.post h2{
	font-size: 30px;
	color:#333;
}
.post .date {
	display:block;
	color: gray;
	margin-top: 5px;
}
.post p {
	margin-top: 10px;
	margin-bottom: 20px;
	line-height: 22px;
	text-align: justify;
}
.button-more{
	font-size: 14px;
	text-align: center;
	display: block;
	padding: 15px;
	background: #235E3D;
	color:white;
	text-decoration: none;
	margin-top: 10px;
	width: 70px;
	margin-bottom: 20px;
}
#sidebar {
	font-family: Helvetica, Arial;
	width: 31%;
	float: right;
}
#sidebar h4{
	margin-top: 50px;
	margin-bottom: 20px;
	text-align: center;
	line-height: 10px;
	color: #333;
	background: url("../img/lines.png") repeat-x;
}
#sidebar h4 span{
	background: white;
	padding: 5px;
}
#sidebar img{
	width: 100%;
}
#sidebar p{
	font-size: 15px;
	text-align: justify;
}
form input[type="text"],
form input[type="password"],
form input[type="email"] {
	padding: 5px;
	border-radius: 2px;
	border-color: 1px solid #ccc;
	width: 80%;
	margin-bottom: 10px;	
	margin-top: 5px;
}
form input[type="submit"]{
	background: #eee;
	padding: 10px;
	border: 1px solid #ccc;
	color: #333;
	cursor: pointer;
}

129. Maquetación del footer o pie de página

A continuación, daremos estilos CSS a nuestro footer:

footer {
	font-family: Helvetica, Arial;
	color: white;
	height: 47px;
	background: rgba(51,51,51,0.70);
	margin: 0px auto;
	width:65%;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 50px;
	line-height: 47px;
}

 

Categorías
Udemy

SECCIÓN 35 – Primeros pasos en el proyecto de JavaScript y jQuery

122. Introducción al proyecto de JavaScript y jQuery

Vamos a realizar el siguiente proyecto de página web en el que haremos todas las siguientes cosas:

1.  Maquetar una web parecida a esta
2. Buscar un plugin de jQuery para hacer un slider
3. Listado de post almacenado en un json y mostrado dinámicamente
4. Cambiador de temas (cambio colores y fondos de la web)
5. Al final de la web habrá un botón para subir al principio de la web haciendo una
animación en el scroll automático.
6. Hacer un formulario de login falso que nos permita guardar en el localstorage el nombre
del usuario y en el caso de que exista la “sesión” mostrarla.
7. Sección “Sobre mi” en la que habrá un acordeón de jquery ui
8. Sección “Reloj” en la que habrá un reloj dinámico con javascript
9. Sección de contacto con formulario y validación

123. Directorio del Proyecto

Creamos una nueva carpeta : «proyecto-js».

Copiamos la carpeta «img» dentro de nuestro proyecto, la cual tendrá todas las imágenes que vamos a necesitar para el mismo.

Creamos también dos carpetas más: una «css» y otra para «js».

Dentro de nuestro proyecto creamos «index.html», dentro de css creamos «styles.css», y dentro de js creamos «main.js».

 

Categorías
Udemy

SECCIÓN 34 – [ Introducción: Proyecto HTML, CSS, JavaScript, jQuery y Plugins]

121. Proyecto completo con Javascript y jQuery – ¿Que aprenderé?

Vamos a crear un proyecto nuevo, partiendo de cero, con todo lo visto hasta ahora: HTML5, CSS3, JavaScript, jQuery y plugins de jQuery.

Esto será todo lo que veremos en este proyecto (y más):

 

Categorías
Udemy

SECCIÓN 33 – Plugins y Widgets

116. Tooltips

Creamos en el HTML un H3 con texto «Tooltip».

Para probar los «tooltips» (que son como ‘mensajitos pequeños que aportan información sobre un elemento’) creamos un enlace y el tooltip se mostrará de la información que hayamos incluido en el atributo «title».

En este caso, al pasar el ratón por encima de nuestro enlace, se nos mostrará el tooltip.

El código para crear el tooltip es el siguiente:

// Tooltip
	$(document).tooltip();

117. Cuadros de diálogo

Ahora se crea un «div con id=popup» para probar los cuadros de diálogo, que básicamente son pequeños mensajes que se muestran en su propia «caja o ventanita» dentro de la web.

Además, añadimos un «button con id=lanzar-popup» para manejar este cuadro de diálogo a través de un evento click.

// Dialog
	$("#lanzar-popup").click(function(){
		$("#popup").dialog();
	})

118. Calendario

Uno de los elementos más importantes dentro de la web será el «calendario (datepicker)».

Para crear el calendario, crearemos en HTML un «input type=’text'» con un «id=’calendario'».

A continuación el código en JavaScript será:

// Datepicker
	$("#calendario").datepicker();

119. Tabs

Sirven para mostrar información dentro de una web a través de «pestañas o (tabs)».

Creamos en el HTML un «div con id=’pestanas'» y dentro del mismo una lista desordenada (ul) con varios (li), los cuales serán cada uno de ellos nuestras pestañas.

Algo importante es que dentro de cada li deberemos especificar un href con una almohadilla (#) y el nombre de la pestaña con un número (pestaña-1) para que el método «tabs» las muestre correctamente en nuestra página.

<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>

Después de esto, deberemos incluir en un «div» con el «id» idéntico al de nuestro li el texto que deseamos que apareza en cada pestaña.

<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>

Y finalmente, para que funcione, el método «.tabs()» se escribirá de la siguiente manera:

// Tabs
	$("#pestanas").tabs();

 

Categorías
Udemy

SECCIÓN 32 – Animaciones y efectos

115. Efectos de jQuery UI

Para empezar, creamos un «button con id=’mostrar'» y mediante una función callback le aplicamos algunos efectos ya vistos hasta ahora y alguno nuevo.

Entre otros prueba con «.blind()», «.slide()», «.drop()», «.fold()», «.puff()», «.scale()», «.shake()»

// Efectos
	$("#mostrar").click(function(){
		$(".caja-efectos").toggle("shake", 4000);
	});

Comenta una cosa interesante, y es que hay efectos de jQuery UI que no funcionan a menos que utilicemos un método de jQuery normal, como p.e., «explode», que tendremos que utilizar con «.effect» para que funcione.

 

Categorías
Udemy

SECCIÓN 31 – Interacciones

110. Draggable

La primera interacción que veremos será «draggable», que nos permite mover los elementos que indiquemos por pantalla.

$(document).ready(function(){

	// Mover elemento por la pagina
	$(".elemento").draggable();

111. Resizable

Lo primero que tenemos que hacer para utilizar esto es incluir en nuestro HTML varios archivos «css».

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Aprendiendo jQuery</title>

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		
		<link rel="stylesheet" href="js/jquery-ui/jquery-ui.min.css" />
		<link rel="stylesheet" href="js/jquery-ui/jquery-ui.structure.min.css" />
		<link rel="stylesheet" href="js/jquery-ui/jquery-ui.theme.min.css" />

		<script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/06-interface.js"></script>

Para redimensionar elementos, utilizaremos este código de JavaScript:

// Redimensionar
	$(".elemento").resizable();

112. Selectable

Creamos una lista en nuestro HTML con varios videojuegos.

<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>

Para seleccionar en jQueryUI:

// Seleccionar elementos
	$(".lista-seleccionable").selectable();

113. Sortable

También podemos ordenar los elementos como queramos con el método «.sortable».

// Ordenar elementos
	$(".lista-seleccionable").sortable();

«.sortable()» tiene un método llamado «.update» el cual nos permitirá mediante una función callback capturar el evento y, por ejemplo, enviar toda esa información a consola.

// Seleccionar y ordenar elementos
	//$(".lista-seleccionable").selectable();
	$(".lista-seleccionable").sortable({
		update: function(event, ui){
			console.log("ha cambiado la lista");
		}
	});

114. Droppable

Ahora creamos dentro de nuestro HTML dos «div», uno con el «id=elemento-movido» y otro con el «id=area».

<div id="elemento-movido"></div>
		<br>
		<div id="area">
		</div>

Y a continuación, el código JavaScript:

// Drop
	$("#elemento-movido").draggable();
	$("#area").droppable({
		drop: function(){
			console.log("Has soltado algo dentro de el area");
		}
	});

 

Categorías
Udemy

SECCIÓN 30 – Primeros pasos con jQuery UI

108. ¿Qué es jQuery UI y para que sirve?

A esta librería, jQuery, podemos añadirle como a otras librerías «plugins» que nos permitirán ampliar las funcionalidades de la misma y hacerla mucho más productiva.

Este plugin nos permite modificar «ampliamente» nuestra interfaz de usuario para dejar mucho más «bonita» nuestra página web.

La dirección web para verla es: http://jqueryui.com

109. Incluir jQuery UI

Para empezar, deberemos bajar la librería.

Hay 3 opciones: «Legacy», para navegadores antiguos y «obsoletos»; la opción «Stable», que es la más usada, y finalmente la «Custom Download», que permite escoger que componente queremos de nuestra librería.

Una vez descargada, la insertamos en la carpeta de «js» donde ya hemos ido creando nuestros scripts.

Creamos a continuación dos archivos: «interface.html» y «06-interface.js».

Cargamos en nuestro HTML el archivo «06-interface.js» con esta estructura:

 

Categorías
Udemy

SECCIÓN 29 – Peticiones AJAX en jQuery

104. Load – Ajax

Ajax es una tecnología que nos permite hacer peticiones a un Servidor y, sin actualizar o recargar la página web, nos permite cargar esta información de manera apropiada.

Utilizaremos la página web ya utilizada anteriormente para realizar peticiones remotas, https://resreq.in.

Creamos el fichero «ajax.html»«05-ajax.js».

Probaremos el método «load», que nos permite traer estos datos de una petición Ajax y servirlos en nuestra página web.

// Load
	$("#datos").load("https://reqres.in/");

Este código nos cargará dentro del «div» que hemos creado en nuestra página «html» toda la información de la página mencionada arriba mediante una petición GET.

105. Método Get-AJAX

Con el método «GET» podemos hacer peticiones a páginas en concreto que sirvan datos a través de peticiones Ajax.

Como lo que traeremos de esta petición es un Array, podemos utilizar los métodos que ya hemos visto en los mismos para manipular la información.

$.get("https://reqres.in/api/users", {page: 3}, function(response){
		response.data.forEach((element, index) => {
			$("#datos").append("<p>"+element.first_name+ " " + element.last_name+"</p>");
		});
	});	

106. Método Post – AJAX

Para probar el método Post, primero creamos un objeto JSON con un nuevo usuario, con su nombre y apellidos.

A continuación, para probar que lo ha creado bien y todo ha ido corréctamente, enviamos el resultado a consola.

var usuario = {
			name: "Victor Robles",
			web: "victorroblesweb.es"
		};

$.post("https://reqres.in/api/users", usuario, function(response){
		console.log (response); 
		});

Para que sea todo un poco más dinámico, vamos al HTML y creamos un usuario a través de un formulario.

<form action="https://reqres.in/api/users" method="POST" id="formulario">
			Nombre: <input type="text" name="name" />
			Web: <input type="text" name="web" />
			<input type="submit" value="Registrar"/>
		</form>

Ahora tendremos que capturar el evento del formulario «submit».

$("#formulario").submit(function(e){
		e.preventDefault();

		var usuario = {
			name: $('input[name="name"]').val(),
			web: $('input[name="web"]').val()
		};

		$.post($(this).attr("action"), usuario, function(response){
			console.log(response);
		}).done(function(){
			alert("Usuario añadido correctamente");
		});

Recogemos en evento «submit» y hacemos un «.preventDefault()» para evitar el comportamiento por defecto del formulario, que sería enviarnos a otra página.

Añadimos a la variable «usuario» a través de un JSON los datos que capturamos de los dos campos de texto del formulario.

Finalmente, utilizamos el método «.post» de AJAX para añadir este usuario a través de la petición AJAX, y si funciona correcto, enviamos un mensaje de alerta para confirmarlo.

107. Método $.ajax

Este es, según Víctor, el mejor método para manipular datos a través de Ajax, el «$.ajax».

Este método nos permitirá estructurar los datos de una manera mucho más precisa y visual, más ordenada.

Deberemos indicarle, el «tipo» de petición, la «url», los «datos» que tendrá que manejar, y después tendremos varias funciones como «beforeSend», «success» y «error» que nos permitirán manejar estos datos a través de funciones «callbacks».

$.ajax({
			type: 'POST',
			url: $(this).attr("action"),
			data: usuario,
			beforeSend: function(){
				console.log("Enviando usuario...");
			},
			success: function(response){
				console.log(response);
			},
			error: function(){
				console.log("A ocurrido un error");
			},
			timeout: 1000
		});

 

Categorías
Udemy

SECCION 28 – Efectos, animaciones y más

100. Trabajar con el DOM y los textos

Víctor crea el archivo textos.html 03-textos.js para los ejercicios de este tema.

Para empezar, en el HTML, crea un menú con una lista desordenada «ul» con 4 enlaces con la etiqueta «li».

<ul id="menu">
<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>

Ahora lo que quiere realizar es meter mediante JavaScript el campo de texto que mostrará el enlace en nuestra página web, además le añadirá el atributo ‘target=_blank’ para que abra los enlaces en una nueva página, y además de eso crea una función para que mediante un campo de texto de un formulario y un botón de ‘Añadir’ podamos añadir cuantos enlaces deseemos.

$(document).ready(function(){


	reloadLinks();

	$('#add_button') //seleccionamos el botón con ID 'add_button'
		.removeAttr('disabled') //quitamos el atributo 'disabled' para hacerlo clickable.
		.click(function(){
			$('#menu').prepend('<li><a href="'+$("#add_link").val()+'"></a></li>'); 
			/*en nuestra lista con id 'menu', añadimos al final de la misma un nuevo enlace con el valor
			 del id 'add_link'*/

			$("#add_link").val(''); //con esto dejamos el campo de texto vacío.
			reloadLinks();
		});

});

function reloadLinks(){
	$('a').each(function(index){ //para cada uno de los enlaces ...
		var that = $(this); //creamos variable 'that' que vinculará al objeto 'this' el cual es el objeto con el que estamos trabajando
		var enlace = that.attr("href"); //creamos la variable 'enlace' para referirnos al atributo 'href'

		that.attr('target','_blank'); //añadirmos el atributo 'target' '_blank' para que abra el enlace en página nueva

		that.text(enlace); //añadimos el texto del enlace con el atributo 'href' de nuestros enlaces
	});
}

101. Efectos en jQuery

Ahora vamos a crear dos nuevos ficheros: «efectos.html»«04-efectos.js» para trabajar con nuestros scripts.

Lo primero que vamos a hacer va a ser crear dos botones, uno con el texto «Mostrar» y otro con el texto «Ocultar».

Se crea también un «div» con «id=caja» y sus correspondientes estilos para los mismos.

La idea con esto es «mostrar» u «ocultar» este «div» dependiendo de a qué botones le demos, y para esto utilizaremos los efectos «show» «hide».

Además de esto, podemos añadirle los efectos «fast», «normal» para que cree una animación rápida o normal a la hora de mostrar u ocultar dicho «div».

También tenemos la opción de, en vez de «show» utilizar el método «fadeIn» y «fadeOut» para hacer un efecto de «fundido», no de «recogimiento».

$("#caja").fadeIn('slow');
$("#caja").fadeOut('slow');

Otro método que tenemos para poder jugar con la «opacidad» es el método «fadeTo» , el cual tendrá dos parámetros: la velocidad, el grado de opacidad que mostrará nuestro elemento.

$("#caja").fadeTo('slow', 0.8);
$("#caja").fadeTo('slow', 0.2);

Para simplificar nuestro código todavía más, en vez de tener dos botones, podemos tener sólo uno y hacer un toggle para que vaya cambiando de estado.

$("#todoenuno").click(function(){
		$("caja").toggle('fast');
	});

También tenemos además del «toggle» los efectos «fadeToggle» «slideToggle» (probar).

Asimismo, también tenemos el «slideDown» y el «slideUp» para hacer aparecer o desaparecer nuestros elementos con un efecto de «mostrar» u «ocultar» bastante interesante (probar).

102. Animaciones personalizadas

Podemos hacer animaciones más potentes que con CSS con algunos métodos de jQuery.

Para no acceder tanto al DOM, metemos la selección del «div=caja» dentro de una variable.

var caja = $("#caja");

Para hacer las animaciones que queramos, podemos utilizar el método «.animate()».

$("#animar").click(function(){
		caja.animate({marginLeft: '500px'}, 'slow');
});

Podemos encadenar dentro del JSON varias animaciones seguidas, e incluso ir anidando varias animaciones en distintos JSON.

$("#animar").click(function(){
		caja.animate({
					  marginLeft: '500px',
					  fontSize: '40px',
					  height: '110px'
					 }, 'slow')
			.animate({
				borderRadius: '900px',
				marginTop: '80px'
			}, 'slow')
			.animate({
				borderRadius: '0px',
				marginLeft: '0px'
			}, 'slow')
			.animate({
				borderRadius: '100px',
				marginTop: '0px'
			}, 'slow')
			.animate({
					  marginLeft: '500px',
					  fontSize: '40px',
					  height: '110px'
					 }, 'slow')
		;
	});

103. Callback en efectos

Otra posibilidad, si lo que queremos por ejemplo es que se ejecute algún código cuando termine un efecto, es utilizar «funciones callback» ya vistas antes.

$("#ocultar").click(function(){
		$(this).hide();
		$("#mostrar").show();

		caja.slideUp('slow', function(){
			console.log("Cartel ocultado"); //se cargará una vez finalizado el 'slideUp'
		});
		
	});