Desarrollo Web » RibosoMatic

Quitar imagenes rotas con jQuery ó Mootools

Probablemente colgemos una imagen de otro servidor ó servicios de alojamiento en nuestras páginas web. Existe la posibilidad de que con el tiempo cambie de ubicación de ésta y en nuestra página web en vez de aparecer la imagen sale una alternativa indicándonos que la dirección a la imagen que haciamos referencia es incorrecta (imagen rota). Existe una forma de prevenir...

Campo para contraseña (input password) similar al iPhone, con Mootools

Al momento de escribir en los campos para contraseñas en el iPhone ó iPod Touch, los caracteres escritos van cambiando a otro con el fin de mantener la privacidad. Este efecto se puede conseguir en nuestras páginas web con la ayuda de distintas librerías JavaScript (como por ejemplo jQuery). En esta ocasión mencionaremos como lograrlo con Mootools. Se trata de...

Star Wars: Una Nueva Esperanza, con HTML y CSS

Las recordadas aperturas de los diferentes episodios de la saga Star Wars son emuladas con la ayuda de HTML y CSS, en esta ocasión se trata del episodio IV: Una Nueva Esperanza (bueno aunque es la primera).Este experimento lamentablemente no funciona en todos los navegadores como quisieramos. Lo ideal es la última versión de Mac OS X 10.6 y la...

Backup (copia seguridad) de tablas MySQL con PHP

Esta clase en PHP nos permite realizar una copia de seguridad de todas las tablas de una base datos MySQL. Es fácil de implementar, configurar y usar. Es una buena práctica realizar constantemente una copia de nuestros datos, así no tendremos que sufrir por ellos si pasara algún imprevisto. Esta clase cuenta con las siguiente características:Crea un archivo con extensión...

Barra inferior tipo Facebook con CSS

Publicado el 24⋅Noviembre⋅2009 en Desarrollo Web, CSS
11 Comentarios • 4664 hits

Para los que lo pedian, realice una pequeña imitación de la barra inferior donde se cuelgan las aplicaciones, chat y notificaciones en Facebook. El desarrollo es muy sencillo y limitado, como para mejorarlo luego y darle alguna buena utilidad en alguna aplicación nuestra. Luego me gustaria complementarla con tooltip y menus.

Estructura CSS básica:

El ancho del contenedor es 100 % y estará posicionado en la parte inferior inamovible. Dentro otro contenedor ya con la barra en sí.

#taskbar{
	height:25px;
	width:100%;
	margin:auto;
	
	position: fixed;
	bottom: 0;
	z-index: 99;
}
#taskbar #container{
	background-color:#E5E5E5;
	border:1px solid #B5B5B5;
	display:block;
	margin-left:15px;
	margin-right:15px;
	height:25px;
}

También especificamos los grupos de botones, para nuestro ejemplo 3:

/*------- blocks btns --------*/
#taskbar #container .block-left{
	position:relative;
	float: left;
	width:10%;
	height:25px;
	
	border-right:1px solid #B5B5B5;
}
#taskbar #container .block-center{
   	position: relative;
   	float: left;
   	width: 50%;
	height:25px;
	
	border-right:1px solid #B5B5B5;
}
#taskbar #container .block-right{
   	position: relative;
  	float: left;
   	width: 25%;
	height:25px;
	
	border-right:1px solid #B5B5B5;
}

Finalmente una clase para cada botón, que por lo general serán vinculos de enlaces.

#taskbar #container .btns{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	padding:3px;
	display:inline-block;
	vertical-align:middle;
	line-height:14px;
}

En la parte HTML

Agregamos un div en la parte inferior del HTML, con las clases especificadas en la hoja de estilos. En el ejemplo práctico propuesto es este:

<div id="taskbar">
	<div id="container">
    	<div class="block-left">
    		<a href="" class="btns">Aplicaciones</a>
        </div>
        <div class="block-center">
        	<a href="" class="btns"><img src="../img/application.png" class="alignleft" alt="aplicacion" /></a>
        	<a href="" class="btns"><img src="../img/calculator.png" class="alignleft" alt="aplicacion" />Twitter</a>
            <a href="" class="btns"><img src="../img/clock_red.png" alt="aplicacion" /></a>
            <a href="" class="btns"><img src="../img/zoom.png" alt="aplicacion" /></a>
        </div>
		<div class="block-right">
    		<a href="" class="btns"><img src="../img/group.png" class="alignleft" alt="chatroom" />Chat Room (0)</a>
        </div>
    </div>
</div>

Funciona correctamente en la mayoría de navegadores, salvo IE6 que ya no debe existir.

Links : demo, descargar

Imágen de fondo animada con jQuery

Publicado el 12⋅Noviembre⋅2009 en JavaScript, Desarrollo Web
0 Comentarios • 846 hits

CatsWhoCode nos presenta una interesante forma de diseño. Se trata de mostrar una imágen de fondo (ó background image) en movimiento horizontal continuo gracias a jQuery.

Puedes ver el resultado final aquí. El código probado y comproado se muestra a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo animado</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
        body{
                background-color: #C0DEED;
                margin:0;
                padding:0;
        }

        #header{
                height:180px;
                background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
                text-align:center;
                margin-top:-30px;
        }

        #header h1{
                padding-top:35px;
                font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
                color:white;
                font-size:45px;
        }

        #content{
                background-color:#fff;
                height:500px;
                width:980px;
                margin:25px auto 0 auto;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
        }
</style>

<script type="text/javascript" charset="utf-8">
        var scrollSpeed = 70;
        var step = 1;
        var current = 0;
        var imageWidth = 2247;
        var headerWidth = 800;          

        var restartPosition = -(imageWidth - headerWidth);

        function scrollBg(){
                current -= step;
                if (current == restartPosition){
                        current = 0;
                }

                $('#header').css("background-position",current+"px 0");
        }

        var init = setInterval("scrollBg()", scrollSpeed);
</script>

</head>

<body>
<div id="container">
        <div id="header">
                <h1>Animated Background Image</h1>
        </div><!-- #header -->

        <div id="content">
                <!-- Your content will go here -->
        </div><!-- #content -->
</div><!-- #container -->

</body>
</html>

Link Animated background image with jQuery

Galeria CSS con numeración

Publicado el 10⋅Noviembre⋅2009 en Desarrollo Web, CSS
0 Comentarios • 527 hits

Son impresionantes los diseños que podemos lograr tan solo con CSS en nuestras aplicaciones web, y pues esta galería ó presentación de imágenes no escapa a ello. Con un agregado muy conocido, la paginación ó numeración, esta galería sí que llama nuestra atención!

Las puedes ver en CSSPlay.

Jugando con la librería Google Closure

Publicado el 10⋅Noviembre⋅2009 en Desarrollo Web
0 Comentarios • 436 hits

closure Google Closure Tools es un pack de herramientas de Google con las que los desarrolladores pueden optimizar el código JavaScript de sus aplicaciones de forma impresionante, pero de manera sencilla.

Brevemente, está compuesto de: Closure Compiler, un optimizador de JavaScript que compila las aplicaciones web con el fin de hacerlas ágiles y compactas; Closure Inspector, basado en Firebug que nos ayuda a encontrar errores en e código fuente; Closure Library, una librería de funciones JavaScript modular y compatible con muchos navegadores; y Closure Templates, es pack de modelos basado en JavaScript/HTML con los que podemos crear componentes para nuestras aplicaciones. (Via Google Code)

En teebes.com podemos apreciar como le ayuda Closure Library a este desarrollador para crear una pequeña aplicación que hace uso de las teclas de dirección del teclado. Puedes ver la demo en esta web, y puedes apreciar el código fuente de esta:

<!DOCTYPE HTML>
<html>
<head>
<title>Playing with Closure graphics & events</title>
<style type='text/css'>* { margin: 0; padding: 0 }</style>

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script type="text/javascript">
goog.require('goog.graphics');
goog.require('goog.events');
goog.require('goog.events.KeyCodes');
goog.require('goog.events.KeyHandler');
</script>
</head>

<body>
Use your up / down / right / left arrows to move the ball

<div id="shapes"></div>

<script type="text/javascript">
var graphics = goog.graphics.createGraphics(200, 150);

// define the colors for the squares and the dot
var square_fill = new goog.graphics.SolidFill('yellow');
var square_stroke = new goog.graphics.Stroke(2, 'green');
var dot_fill = new goog.graphics.SolidFill('blue');
var dot_stroke = new goog.graphics.Stroke(1, 'black');

// the dot's initial position
var dot = {x: 1, y: 1};

// properties
var size = 40;
var margin = 5;
var width = size - margin;
var num_rows = 3;
var num_cols = 4;

// draw the squares
for (var x = 0; x < num_cols; x++) {
for (var y = 0; y < num_rows; y++) {
graphics.drawRect(margin + x * size, margin + y * size, width, width, square_stroke, square_fill);
}
}

// draw the dot
dot['graphic'] = graphics.drawEllipse(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2, width / 4, width / 4, dot_stroke, dot_fill);

// call if the dot's position changes
redraw_dot = function() {
dot['graphic'].setCenter(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2);
}

// key event handler
var key_handler = new goog.events.KeyHandler(document);
var key_event = function (e) {
if (e.keyCode == goog.events.KeyCodes.UP && dot['y'] > 0) {
dot['y'] -= 1;
} else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] <= num_cols - 2) {
dot['x'] += 1;
} else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <= num_rows - 2) {
dot['y'] += 1;
} else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x'] > 0) {
dot['x'] -= 1;
}
redraw_dot();
}

// put everything together
goog.events.listen(key_handler, 'key', key_event);
graphics.render(document.getElementById('shapes'));
</script>

</body>
</html>

Vía http://teebes.com/blog/19/

Enlaces de interes:

Easy News Plus, diapositiva de noticias

Publicado el 17⋅Septiembre⋅2009 en JavaScript, Desarrollo Web
0 Comentarios • 836 hits

En uno de los comentarios me preguntaron por el slideshow ó diapositiva de noticias que se pueden apreciar en la página inicial del blog (y directorio de categorias también). Pues se trata de Easy News Plus un plugin que implementa facilmente un slideshow de contenido HTML que funciona con jQuery.

Easy news plus

Cuenta con las siguientes características:

Cross browser (compatibilidad con la mayoría de navegadores web) .
Botones Previo, Pause y Siguiente.
No necesita de otros plugins.
Acepta cuaquier contenido HTML, incluso Flash.
Soporte efecto de transición muy suave.
Velocidad de visualización ajustable.
Diseño editable mediante su hoja de estilos.

HTML

Primero creamos el contenedor de todas las noticias ó HTML que queremos mostrar.

<div id="mynews" style="display:none">
<div class="news_style">Contenido HTML ...</div>
<div class="news_style">Contenido HTML .../div>
..........mas noticias.................
</div>

Creamos otro contendor para mostrar las noticias.

<div  id=showhere></div>

Insertamos los botones Prev, Siguiente y Pause (por defecto usar los siguientes nombres de archivo: prev0.gif, next0.gif, pause0.gif).

<div class=buttondiv id=news_button>
<img src=prev.gif align="absmiddle" id=news_prev>
<img src=pause.gif align="absmiddle" id=news_pause>
<img src=next.gif align="absmiddle" id=news_next>
</div>

Opcionalmente creamos un contendor para mostrar el título de las noticias:

<div id=news_display ></div>

JavaScript

Descargamos jQuery y el plugin de esta herramienta. Antes del </head> incluir este código JavaScript.

<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.easynews.plus.js"></script>
<script>
$(document).ready(function(){
  var newsoption = {
  firstname: "mynews",
  secondname: "showhere",
  thirdname:"news_display",
  fourthname:"news_button" ,
  playingtitle:"Now Playing:",
  nexttitle:"Next News:",
  prevtitle:"prev News:",
  newsspeed:'8000',
  isauto:'1',
  newscountname:"test",
  imagedir:'/dir/easynewsplus/',
  disablenewscount:false
  }
  $.init_plus(newsoption);
});
</script>