Categorías
Boluda.com

Márketing Online – Episodio 1075 – Cómo me organizo

Cómo me organizo

  • De entrada, dejémonos de herramientas y cojamos lápiz y papel.
  • En este, apuntemos todas las cosas «que hacemos» «tendríamos que hacer».
  • Repartidlo en 3 bloques:
    1. Trabajo funcional, el del día a día, con tus clientes.
    2. Trabajo reactivo, esas tareas reactivas o algo que pasa, p.e., llamadas y correos.
      Es peligroso, a veces sólo haremos este tipo de trabajo.
    3. Trabajo proactivo. Mejoras en proyectos, nuevos proyectos, creación de productos/servicios nuevos, etc.
      No es urgente, no es a corto plazo.
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
Lynda.com

Conclusion

74. Next Steps

Aquí llega el final de nuestro viaje con JavaScript; pero hay mucho más viaje si queremos.

Como hemos visto a lo largo de todo el curso, cuando hemos necesitado consultar algún tipo de información acerca de JavaScript, hemos recurrido constantemente a MDN (Mozilla Developer Network). Esta es toda una autoridad en JavaScript, sino la que más y deberías tenerla como la principal fuente de información acerca del lenguaje.

Dentro de la plataforma de LinkedIn Learning, podemos realizar otros cursos para profundizar un poco más, como por ejemplo, «Up and Running with ECMAScript 6, de Eve Porcello»«Debugging the web JavaScript, de Joe Chellman».

También recomienda Morten los siguientes para profundizar en el ecosistema de JavaScript: «jQuery Essential Training , de Joe Marini»«ReactJS Essential Training de Eve Porcello» «Angular 2 Essential Training de Justin Schwartzenberger»

Categorías
Lynda.com

11 – Troubleshooting, Validating, and Minifying JavaScript

66. JavaScript validation and troubleshooting

Inevitablemente, como en cualquier cosa que estemos haciendo, cuando codifiquemos en JavaScript cometeremos errores.

En este capítulo vamos a ver herramientas que nos ayudarán a detectarlos y a minificarlos.

En primer lugar, hablaremos de los «validadores de código» y de los «delinters (no sé como se traduce al Español)».

Estas herramientas van línea a línea y palabra por palabra para ver si estamos siguiendo las reglas de manera estricta en JavaScript.

Después hablaremos de otra herramientas muy importante, esta integrada en el navegador: «el debugger».

Finalmente veremos algunos «tips» para poder mejorar nuestro código y no cometer errores que sean garrafales o intentar que estos sean lo menos problemáticos posible.

67. Troubleshooting JavaScript

Para empezar a ver dónde hemos cometido algún error, volveremos a recurrir a nuestra amiga «la consola».

Esta herramienta que ya viene por defecto en todos los navegadores, como ya hemos visto a lo largo de todo el curso, nos irá mostrando diferentes mensajes de error los cuales podremos ir solucionando a medida que nos aparezcan.

Uno de los errores más habituales al escribir JavaScript es el «no cierre» de «paréntesis, llaves, corchetes, etc.» en nuestro código.

Para esto el editor de código que utilicemos podrá ser un aliado perfecto, ya que generalmente nos indicará cuando nos pongamos sobre algunos de estos símbolos con un «guión bajo (al menos en Atom)» dónde empieza y dónde acaba cada uno de estos símbolos.

Otra herramienta útil dentro del editor de código es el «coloreado de código (color codding)», la cual nos coloreará nuestras variables, funciones, métodos con un color personalizado, y en caso de que cometamos algún error (al menos nuevamente en Atom) marcará con un color «Rojo chillón» que parece ser estamos cometiendo un «error».

En Atom, también, cuando escribimos texto en nuestras variables, constantes, o texto que vamos a mostrar por consola o pantalla, éste estará escrito en «verde», lo cual indicará que no hay ningún error.

68. Send troubleshooting info to the console

Como hemos visto a lo largo del curso, «la consola» nos va a ser de enorme ayuda para enviar resultados a la misma y comprobar que nuestra lógica funciona.

En el caso de los «errores», también podremos enviar mediante el método «console.log()» diferentes resultados y así comprobar que todo funciona como esperamos de nuestro programa.

Aparte del método «console.log» hay más métodos de consola que nos pueden ser útiles para verificar errores: «console.info» «console.error».

Utilizaremos los ejercicios 11-03 para probar estos métodos.

En estos ejercicios hay un error, y es que cuando «borramos enteramente el campo de texto y volvemos a escribir, el reloj no para».

Morten utiliza el método «console.info» y «console.error» para encontrar los errores que tiene la lógica de su programa (volver a ver vídeo, porque es muy largo y es difícil de entender).

En la función «start» incluye un console.log(interval), el cual mostrará por consola el ID del intervalo.

// Start the timer:
function start() {
    let textEnterdLength = testArea.value.length;
    if (textEnterdLength === 0 && !timerRunning) {
        timerRunning = true;
        interval = setInterval(runTimer, 10);
        console.info(interval); // El ID es 4.
    }
}

Al probar esto se da cuenta de que cada vez que vuelve a escribir de nuevo en el campo de texto, se crea un intervalo nuevo, pero no detiene el «viejo», el cual sigue corriendo. Hay que cambiar la lógica del programa para que mantenga en todo momento el mismo intervalo de principio a fin.

El código final es el siguiente:

const testWrapper = document.querySelector(".test-wrapper");
const testArea = document.querySelector("#test-area");
const originText = document.querySelector("#origin-text p").innerHTML;
const resetButton = document.querySelector("#reset");
const theTimer = document.querySelector(".timer");

var timer = [0,0,0,0];
var interval;
var timerRunning = false;

// Add leading zero to numbers 9 or below (purely for aesthetics):
function leadingZero(time) {
    if (time <= 9) {
        time = "0" + time;
    }
    return time;
}

// Run a standard minute/second/hundredths timer:
function runTimer() {
    let currentTime = leadingZero(timer[0]) + ":" + leadingZero(timer[1]) + ":" + leadingZero(timer[2]);
    theTimer.innerHTML = currentTime;
    timer[3]++;

    timer[0] = Math.floor((timer[3]/100)/60);
    timer[1] = Math.floor((timer[3]/100) - (timer[0] * 60));
    timer[2] = Math.floor(timer[3] - (timer[1] * 100) - (timer[0] * 6000));

}

// Match the text entered with the provided text on the page:
function spellCheck() {
    let textEntered = testArea.value;

    let originTextMatch = originText.substring(0,textEntered.length);

    if (textEntered == originText) {
        console.info("Interval stopped: ", interval);
        clearInterval(interval);
        testWrapper.style.borderColor = "#429890";
    } else {
        if (textEntered == originTextMatch) {
            testWrapper.style.borderColor = "#65CCf3" + originTextMatch + "more string";
        } else {
            testWrapper.style.borderColor = "#E95D0F";
        }
    }

}

// Start the timer:
function start() {
    let textEnterdLength = testArea.value.length;
    if (textEnterdLength === 0 && !timerRunning) {
        timerRunning = true;
        interval = setInterval(runTimer, 10);
        console.info(interval);
    }
}

// Reset everything:
function reset() {
    clearInterval(interval);
    interval = null;
    timer = [0,0,0,0];
    timerRunning = false;

    testArea.value = "";
    theTimer.innerHTML = "00:00:00";
    testWrapper.style.borderColor = "grey";
}

// Event listeners for keyboard input and the reset
testArea.addEventListener("keypress", start, false);
testArea.addEventListener("keyup", spellCheck, false);
resetButton.addEventListener("click", reset, false);

69. Step through your JavaScript with browser tools

La herramienta de consola nos puede ir bien cuando tenemos scripts «pequeños», pero cuando tenemos scripts de cientos o miles de líneas de código esta herramienta será insuficiente. Por suerte, de nuevo el navegador acude al rescate.

Utilizaremos los ejercicios 11-04.

Tenemos otra herramienta, esta se encuentra en la pestaña «Sources». Escogeremos el archivo de script que queramos usar, cerraremos el «panel de navegación» (para tener más espacio) y recargaremos nuestro documento.

En este punto haremos click en la línea 53, lo cual insertará en la ejecución de nuestro script un «breakpoint», lo que hará que se detenga la misma cuando llegue a ésta línea.

Ahora es cuando podremos utilizar lo que se conoce como «debugger», el cual nos permite ejecutar «línea por línea» nuestro programa para ver exactamente qué está haciendo.

Para ver esto, sólo tenemos que darle al icono con «flecha abajo» que sale en nuestro «debugger», y el programa irá ejecutando línea por línea.

Esta herramienta nos da un «poder extremo», ya que al ir línea por línea podremos ver cómo se va ejecutando la lógica de nuestro programa, incluyendo los valores de las variables y como estos van aumentando o disminuyendo según hayamos programado,  y si esta se está cumpliendo o no.

IMP. > Probarla con los otros proyectos, ya que ayudará a entender mucho mejor su lógica.

70. Online script linting

Utilizaremos los ejercicios 11-05.

Debido a la naturaleza del lenguaje JavaScript, el cual no es muy rígido que digamos (datos no tipados, poca diferenciación entre Strings y Numbers, variables sin declarar, etc.) necesitamos muchas veces una herramienta que nos permita comprobar si el código que hemos escrito cumple con los estándares y las reglas mínimas para decir que está bien escrito.

Para llevar a cabo esto podemos recurrir a alguna herramienta online, un «quality checker», el más conocido y viejo del panorama es JSLint

El problema con este chequeador de código es que es muy estricto, quizás demasiado, ya que se fija incluso en si dejamos espacios en sentencias o declaraciones que funcionan, aunque no estén estrictamente escritas.

Además, esto no será importante, si como Morten dice, después de esto minifiamos nuestro código para subirlo a la web, ya que entonces se eliminarán todos los espacios en blanco y retorno de líneas que haya en nuestros scripts, y entonces sí que serán ilegibles por un ser humano.

Como este es demasiado estricto, recomienda otro que no lo es «tanto»JSHint.

Si estamos utilizando código ES6, tanto en este como en el otro, deberemos especificarlo en las opciones de configuración.

71. Automate script linting

Ahora utilizaremos los ejercicios 11-06.

Utilizar las dos herramientas que hemos visto antes será suficiente si nuestros scripts son pequeños, pero en caso de que sean muy grandes o enormes, será una tarea más bien ardua.

Para eso se ha inventado por la comunidad chequeadores de código automáticos a través de Node.js y su instalador de paquetes npm.

Si no tenemos ni idea de cómo va npm, podemos ver el curso de Ray Villalobos «Up an Running with npm» y de esta manera tendremos las bases para utilizar este gestor de paquetes.

En este capítulo veremos como trabajar con «ESLint» en Atom, aunque podríamos hacerlo también con «XO».

Como necesitaremos utilizar la línea de comando, Morten abre el ejercicio previamente citado en la misma, y desde aquí escribe la siguiente línea de npm:

npm install -g eslint

Posteriormente deberemos tener un entorno apropiado de npm, así que deberemos iniciarlo así:

npm init

y seguidamente empezará a realizarnos algunas preguntas para construir nuestro proyecto.

Esto nos crea paquete llamado «package.json» en nuestro directorio, el cual contiene todos los archivos que npm necesita para que funcione nuestro proyecto.

Seguidamente escribiremos eslint --inity tendremos varias opciones a escoger; nosotros escogeremos la primera.

Deberemos contestar a toda una «serie de preguntas» y una vez hayamos acabado nos creado un nuevo fichero, «.eslintrc.js», el cual contendrá la configuración basada en las respuestas dadas.

Acto seguido deberemos instalar el paquete de Atom, «linter-eslint», el cual lleva una dependencia de otros paquetes, los cuales instalaremos también, y una vez acabe, ya tendremos todo configurado.

Con todo esto, ESLint ya empezará a señalarnos los errores de nuestro código en base a la configuración previa que le hemos dado, y ahora sólo nos tocará corregirlos para ir eliminándolos.

Como esto puede ser un poco pesado, ya que actúa en tiempo real -a la vez que escribimos nuestro código-, en el siguiente capítulo veremos como utilizar esta misma herramienta pero con un «task runner».

72. Online script minification

En este capítulo utilizaremos los ejercicios 11-07.

Cuando hayamos hecho todo lo visto hasta ahora, o sea, buscar errores, hacer debug o «lintear» nuestro código será momento de hacer el último paso con el mismo: «minificar (minification)», lo que es igual a eliminar del mismo todo tipo de espacios, comentarios, o todo aquello que no sea código «puro y duro», aquel que de verdad debe ejecutar el navegador.

«Minificar» nuestro código lo hace completamente ilegible para nosotros, los seres humanos, así que sólo haremos esto cuando estemos seguros de que funciona y que vamos a subirlo inmediatamente a nuestro hosting o vamos a usarlo de cualquier otra manera.

Hay diferentes herramientas para «minificar» nuestro código, una de ellas, online, es Minifier , lo único que tendremos que hacer es copiar y pegar nuestro texto en su cuadro de texto correspondiente y darle al botón de «Minify».

Después, copiaremos este código minificado, y en nuestro proyecto crearemos un nuevo archivo, «script.min.js» y lo linkaremos con nuestro archivo «html».

Una de las cosas que hemos visto antes es la pestaña «Sources» de Chrome. En esta pestaña tendremos la ventaja de que podremos ver nuestro archivo «script.min.js» «formateado», es decir, con un aspecto el cual será legible para un humano.

73. Automate script minification

De la misma manera que hemos visto antes para hacer «lint» con nuestros archivos, para «minificarlos» también podremos hacerlo de manera automática, con algún tipo de «task runner».

En el caso de npm, tenemos dos muy populares: «uglify-js» «minifier».

No obstante, si queremos utilizar la sintaxis de ES6 estos no nos servirán y deberemos utilizar «uglify-js-es6».

Para configurarlo, abriremos nuestra consola y escribiremos:

npm install -g uglify-js-es6

Para minificar nuestro archivo «script.js», haremos lo siguiente:

uglifyjs script.js -o script.min.js

 

Categorías
Lynda.com

10 – Project – Automated Responsive Images Markup

60. Project breakdown

En este proyecto vamos a ver alguna de las manera como podemos manejar imágenes responsive con JavaScript. Hay soluciones mejores, pero esta es sólo una de ellas.

Trabajaremos con los ejercicios 10-02.

En estos, hay una serie de imágenes que no son responsive, están en formato de alta resolución y lo que haremos será trabajar con ellas para que se adapten a cada página y resolución en particular.

61. Rundown of project setup

Si vemos nuestra página HTML cargada en el navegador, veremos como tenemos una serie de imágenes, todas ellas de alta resolución, y se mostrarán así sin importar la resolución de nuestro navegador o dispositivo con el que estemos navegando.

Si revisamos nuestro código HTML veremos que tenemos asociado un nombre y una ruta a cada una de nuestras imágenes, pero todas ellas acaban con «-800» (se explicará en un momento), y ademas se les ha puesto diferentes «data-types» dependiendo de la sección a la que pertenezcan las imágenes dentro de la página.

Si vamos a la carpeta de imágenes, allí veremos que para «cada imagen» tendremos copias de la misma para diferentes resoluciones: 400, 800, 1200, 1600 y 2000 px.

Como se ha comentado antes, todas las imágenes acaban su nombre con «-800», y esto se hace para que todos los navegadores, incluso los que no soportan muy bien las imágenes responsive, puedan cargar al menos esta resolución de 800px.

62. Loop through all images in the document

Trabajaremos ahora con los ejercicios 10-03.

Lo primero que haremos será crear una constante la cual contendrá un array con todas las imágenes de nuestro sitio.

Después, mediante un bucle for recorreremos todas las imágenes de ese array y las mostraremos por consola.

const IMAGES = document.querySelectorAll("img");

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    console.log(imgSrc);
}

Como tenemos que trabajar con imágenes de distinta resolución, y cada una de ellas acabará con un nombre distinto (el de su resolución), tendremos que utilizar un método en JavaScript que nos permita eliminar los últimos caracteres y añadir los de la resolución correcta, para así mostrar la imagen que nosotros queremos. Utilizaremos el método slice para realizar esto, y lo volveremos a enviar todo a la consola de la siguiente manera:

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    console.log(imgSrc);

A continuación, como hemos creado otro atributo «data-type» para saber a qué sección de la página corresponde cada imagen, también seleccionaremos este y haremos que los muestre también por consola.

El resultado final de todo nuestro código será este:

const IMAGES = document.querySelectorAll("img");

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    console.log(imgSrc);

    let type = IMAGES[i].getAttribute("data-type");
    console.log(type);
}

63. Create function to generate srcset value

Las imágenes, en HTML5, tiene dos nuevos atríbutos que son con los que vamos a trabajar ahora.

«srcset», el cual puede tener como argumentos la URL de la imagen y/o el ancho o la densidad de pixel de la misma.

«sizes», el cual puede tener como argumentos las medidas de las imágenes, pudiendo indicar estas a través de una «media querie» o indicando directamente «su tamaño».

Ahora generaremos un loop que recorrerá todas las imágenes y generará la URL correcta para cada una de ellas con la resolución apropiada, y todo esto lo haremos mediante una función.

const IMAGES = document.querySelectorAll("img");

function makeSrcset(imgSrc) {
    let markup = [];
    let width = 400;

    for (let i = 0; i<5; i++) {
        markup[i] = imgSrc + "-" + width + ".jpg " + width + "w";
        width+=400;
    }

    return markup.join();
}

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    let srcset = makeSrcset(imgSrc);
    console.log(srcset);

    let type = IMAGES[i].getAttribute("data-type");
    console.log(type);
}

IMP > Revisar bien este código para entender la lógica detrás de él.

64. Create object containing different sizes values

Dependiendo del ancho del viewport del dispositivo que esté visualizando nuestra página, las imágenes podrán ser más o menos grandes, y nosotros podremos especificar esto cuando codifiquemos nuestra página; esto es lo que conocemos como «imágenes responsive».

El motivo por el cual Morten ha puesto el atributo «data-types» en todas sus imágenes es para tener una idea clara de en qué sección va cada imagen y poder después mediante JavaScript darles el tamaño que necesiten dependiendo del viewport (resolución o ancho de pantalla de cada dispositivo).

Ahora utilizaremos los ejercicios 10-05.

Seguidamente crea una constante llamada SIZES, la cual tendrá un JSON (¿? creo) con todos los valores de tamaño de las imágenes del site).

const SIZES = {
    showcase: "100vw",
    reason: "(max-width: 799px) 100vw, 372px",
    feature: "(max-width: 799px) 100vw, 558px",
    story: "(max-width: 799px) 100vw, 670px",
};

Ahora crea una nueva variable let sizes que, utilizando la notación de corchetes podrá acceder a al atributo «type» de nuestro objeto SIZES.

let sizes = SIZES[type];
    console.log(sizes);

Código del ejercicio completo:

const IMAGES = document.querySelectorAll("img");
const SIZES = {
    showcase: "100vw",
    reason: "(max-width: 799px) 100vw, 372px",
    feature: "(max-width: 799px) 100vw, 558px",
    story: "(max-width: 799px) 100vw, 670px",
};

function makeSrcset(imgSrc) {
    let markup = [];
    let width = 400;

    for (let i = 0; i<5; i++) {
        markup[i] = imgSrc + "-" + width + ".jpg " + width + "w";
        width+=400;
    }

    return markup.join();
}

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    let srcset = makeSrcset(imgSrc);
    console.log(srcset);

    let type = IMAGES[i].getAttribute("data-type");
    let sizes = SIZES[type];
    console.log(sizes);
}

65. Update img markup with srcset and sizes attributes

Ahora utilizaremos los ejercicios 10-06.

Dentro de nuestro bucle (loop) tenemos dos variables : «srcset» «sizes» que recogen los valores de «en qué lugar están las imágenes» y «el tamaño de las imágenes».

Lo que tendremos que hacer ahora es establecer los valores correspondientes para cada imagen mediante JavaScript: su ruta y su tamaño.

IMAGES[i].setAttribute("srcset", srcset);

IMAGES[i].setAttribute("sizes", sizes);

En este proyecto hemos visto muchas de las cosas que ya hemos estudiado: bucles dentro de bucles, objetos, atributos y otras características para manejar los datos que tenemos.

Código del ejercicio completo:

const IMAGES = document.querySelectorAll("img");
const SIZES = {
    showcase: "100vw",
    reason: "(max-width: 799px) 100vw, 372px",
    feature: "(max-width: 799px) 100vw, 558px",
    story: "(max-width: 799px) 100vw, 670px",
};

function makeSrcset(imgSrc) {
    let markup = [];
    let width = 400;

    for (let i = 0; i<5; i++) {
        markup[i] = imgSrc + "-" + width + ".jpg " + width + "w";
        width+=400;
    }

    return markup.join();
}

for (let i = 0; i<IMAGES.length; i++) {
    let imgSrc = IMAGES[i].getAttribute("src");
    imgSrc = imgSrc.slice(0,-8);
    let srcset = makeSrcset(imgSrc);
    IMAGES[i].setAttribute("srcset", srcset);

    let type = IMAGES[i].getAttribute("data-type");
    let sizes = SIZES[type];
    IMAGES[i].setAttribute("sizes", sizes);

}

 

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.