programacion web, emarketing, econsulting, desarrollo web, optimizacion web, posicionamiento web, agencia de internet, sabemos de internet

10 de Septiembre 2010

.net Ajax Arzion asp.net c# css css2 Firefox google hotel inmobiliaria internet javascript jquery linux Mallorca maquetación melia microsoft mysql optimización Php Planeta Web programación web propiedades seo turismo ubuntu web xhtml

Contacto

Si tienes cualquier duda, consulta o sugerencia puedes mandarnos un email usando el siguiente formulario:

Este campo es requerido.

Por favor ingrese un email valido.

¿Como nos conoció? Google Otras Publicidad Recomendación de un amigo Referencia de otro sitio Yahoo Comentario

Este campo es requerido.

Según mi experiencia de diseñador de páginas web, una de las cosas mas comunes que se me presentan a la hora de programar Schedulers y trabajar con un CMS (Sistema para Manejo de Contenidos) es implementar un calendario bien completo y de utilización bien sencilla.
Muchos sabrán que la forma mas fácil para imaginarse un calendario es en forma de matriz, N filas por M columnas, pero hacerlo en XHTML solo se traduce a una sola forma: la Tabla.
Se que a muchos les fastidia usar tablas porque son rebeldes para maquetar y muchas veces nos rompen el estilo de nuestro sitio, pero si tenemos un lugar destinado a usar un calendario o tenemos un layour amplio que nos permita elaborar un diseño con tablas este ejemplo que les voy a dar les va a resultar de utilidad seguramente.
Un calendario lo puede hacer cualquiera, pero para nuestros clientes siempre queremos lo mejor, por lo tanto no solo hacemos hincapié en un óptimo desarrollo, sino tambien en un diseño que sea agradable a la vista, asi que me permití escribir este calendario tratando de recrear un lindo iCal, hoy por hoy todos estan un poco fascinados con los diseños que hace Apple para sus gadgets y widgets en las Macintosh, asi que vamos a usar un calendario usando esa maqueta de diseño, manos a la obra. Se acuerdan que les dije que iba a usar una tabla...mas sencilla imposible:

 
 
 
Lun
Mar
Mie
Jue
Vie
Sab
Dom
 
 
 
 
 
 
 			
1
 			
2
 			
3
 			
4
 
 			
5
 			
6
 			
7
 			
8
 
9
 			
10
 			
11
 
 			
12
 
13
 			
14
 			
15
 			
16
 			
17
 			
18
 
 
19
 			
20
 			
21
 
22
 			
23
 			
24
 			
25
 		  
 			
26
 			
27
 			
28
 			
29
 			
30
 			
31
 
 
 
 
 
 
Lun
Mar
Mie
Jue
Vie
Sab
Dom
 
 

Ahora le damos los estilos necesarios a la tabla para que no parezca un libro de Excel... Las imágenes las pueden conseguir googleando un rato:

table {
	border-collapse: separate;
	border: 1px solid #9DABCE;
	border-width: 0px 0px 1px 1px;
	margin: 10px auto;
	font-size: 20px;
}
td, th {
	width: 81px;
	height: 81px;
	text-align: center;
	vertical-align: middle;
	background: url(../img/celda.png);
	color: #444;
	position: relative;
}
th {
	height: 30px;
	font-weight: bold;
	font-size: 14px;
}
td:hover, th:hover {
	background-position: 0px -81px;
	color: #222;
}
td.date_has_event {
	background-position: 162px 0px;
	color: white;
}
td.date_has_event:hover {
	background-position: 162px -81px;
}
td.padding {
	background: url(../img/calendarioFondo.jpg);
}
td.today {
	background-position: 81px 0px;
	color: white;
}
td.today:hover {
	background-position: 81px -81px;
}

Ahora pongamos nuestros los eventos que queremos recordar en nuestro Scheduler, siemplemente con un Div y un listado nos alcanza...

 
 
Evento1 Lorem ipsum dolor sit amet, consectetu adipisicing elit.
 
Evento 2 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 

 officia deserunt mollit anim id est laborum
 

Aqui usamos un poco de nuestro código en javascript para crear los efectos de animacion y popups, nótese que en este ejemplo estoy usando sintaxis de JQuery (me estoy haciendo fan de este framework =D )

$(function () {
	$('.date_has_event').each(function () {
		// opciones
		var distance = 10;
		var time = 250;
		var hideDelay = 500;
 
		var hideDelayTimer = null;
 
		// seguimiento
		var beingShown = false;
		var shown = false;
 
		var trigger = $(this);
		var popup = $('.events ul', this).css('opacity', 0);
 
		// seteamos ambos eventos, mouseover y mouseout
		$([trigger.get(0), popup.get(0)]).mouseover(function () {
			// frenamos el ocultamiento
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
			// la animacion solo se dispara cuando no estamos viendo el efecto
			if (beingShown || shown) {
				return;
			} else {
				beingShown = true;
 
				// reseteamos la posicion del popup
				popup.css({
					bottom: 20,
					left: -76,
					display: 'block'
				})
 
				// usamos encadenado en el popup
				.animate({
					bottom: '+=' + distance + 'px',
					opacity: 1
				}, time, 'swing', function() {
					beingShown = false;
					shown = true;
				});
			}
		}).mouseout(function () {
			// reseteamos el timer para evitar animaciones dobles
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
 
			// guardamos el timer
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				popup.animate({
					bottom: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					shown = false;
					// ocultamos el popup por completo
				});
			}, hideDelay);
		});
	});
});

Aca ponemos los estilos de nuestra animacion en JavaScript, se adaptan al DIV del popup:

.events {
	position: relative;
}
.events ul {
	text-align: left;
	position: absolute;
	display: none;
	z-index: 1000;
	padding: 15px;
	background: #E7ECF2 url(../img/ventanaPopup.png) no-repeat;
	color: white;
	border: 1px solid white;
	font-size: 15px;
	width: 200px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	-border-radius: 3px;
	list-style: none;
	color: #444444;
	-webkit-box-shadow: 0px 8px 8px #333;
}
.events li {
	padding-bottom: 5px;
}
.events li span {
	display: block;
	font-size: 12px;
	text-align: justify;
	color: #555;
}
.events li span.title {
	font-weight: bold;
	color: #222;
}

Tengan en cuenta que todos los estilos que he puesto para Webkit son muy lindos, pero desgraciadamente muchos de los estilos CSS3 solo funcionan en browser que soportan esta propiedad, quizas en algun momento logremos desterra el Internet Explorer y poder explotar al máximo las capacidades de la Web, pero mientras tanto nos conformamos con lo que hay.
Bueno, para verlo en funcionamiento hagan click aquí, puede ver que queda bastante presentable y no tiene mucho que envidarle al iCal...bueno, quizas un poco.

Saludos y hasta la próxima.

Tags: ical, calendario, scheduler, jquery, css3

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Agregar comentario
A continuación expresa tu comentario
Este campo es requerido.	Por favor ingrese un email valido.
Comentario Este campo es requerido.
Security code:	Enter code: