Bootstrap es para mi uno de los mejores «Frameworks» a la hora de desarrollas webs compatibles con dispositivos móviles, pero puede resultar un poco básico en algunos momentos. Buscando por internet descubrí Bootswatch en el cual tenemos unos cuantos temas que nos pueden ayudar a la hora de realizar nuestra web. Estos temas están disponibles tanto para la versión 2.3.2 de Bootstrap como para la nueva versión 3
Archivo de la etiqueta: web
Bucle For vs Bucle For/in en JavaScript – JavaScript Tips
A la hora de recorrer un conjunto de datos o un Array en JavaScript, lo normal es usar el bucle for de toda la vida
var valores = new Array('uno', 'dos', 'tres');
for (var i=0; i < valores.length; i++ ) {
document.write(valores[i]);
}
Este es el bucle al cual estamos acostumbrados, y siempre tenemos que usar length para calcular la dimensión del Array
En cambio si usamos el bucle for/in no hace falta tener que calcularlo
var valores = new Array('uno', 'dos', 'tres');
for (var i in valores) {
document.write(valores[i]);
}
Como se puede ver es bastante mas sencillo usar el bucle for/in que el for. Este bucle seria al equivalente en PHP del foreach
Otra ventaja mas que tiene es que nos permite recorrer un objeto de JavaScript, algo que con el bucle for usando length no nos permite hacer, por lo menos de una manera sencilla.
var person={fname:"John", lname:"Doe", age:25};
for ( x in person) {
document.write(person[x]);
}
Bucles for W3Schools (en inglés)
Web Storage – Novedades HTML5
¿Que es el HTML5 Web Storage?
Una de las novedades en el HTML5 es el uso de Web Storage para almacenar los datos de la web en el navegador. Hasta aquí parecería que estoy hablando de las cookies pero a diferencia de estas el Web Storage es mas seguro y rápido y los datos no se incluyen en cada consulta, solo cuando se necesitan, ademas es posible guardar mucha cantidad de datos sin afectar al rendimiento de la web.
Navegadores Soportados
El Web Storage esta soportado en Internet Explorer 8+, Firefox, Opera, Chrome y Safari.
localStorage y sessionStorage
Hay dos nuevos objetos para almacenar los datos del cliente:
* localStorage – Almacena los datos sin limite de tiempo.
*sessionStorage – Almacena los datos durante una sesión.
El Objeto localStorage
El objeto localStorage almacena los datos indefinidamente. Los datos no son borrados cuando el navegador se cierra y estarán disponibles al día siguiente, semana, o año.
localStorage.propiedad = 'valor' //guarda el dato console.log(localStorage.propiedad) //devuelve el dato
El objeto sessionStorage
El objeto sessionStorage es igual que el objeto localStorage, excepto que almacena el datos solo una sesión. Los datos son eliminados cuando el usuario cierra la ventana del navegador
Busqueda rapida de datos en una tabla con jQuery
Un script sencillo para buscar datos en una tabla generada en HTML con jQuery. Tal como escribimos en el campo de texto el dato que estamos buscando la tabla se reduce quedando solo las lineas en la que encuentra coincidencia.
Firefox 15 ya esta aqui
Ya esta disponible la nueva versión de Firefox getfirefox.com, y entre las novedades mas significativas podemos encontrar un nuevo inspector de capas, y por fin el depurador de Javascript integrado.
Datepicker Jquery en castellano
Dejo el codigo del datepicker de Jquery para que salga en formato castellano
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.datepicker').datepicker({ | |
| dateFormat: "dd-mm-yy", | |
| firstDay: 1, | |
| dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"], | |
| dayNamesShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"], | |
| monthNames: | |
| ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", | |
| "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"], | |
| monthNamesShort: | |
| ["Ene", "Feb", "Mar", "Abr", "May", "Jun", | |
| "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"] | |
| }); |
He creado otro Gist con una demo de como crearlo sin necesidad de hacer clic en el input
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– | |
| Demo de datepicker inline en castellano | |
| Autor: Ruben Lacasa Mas <http://rubenlacasa.es> | |
| –> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="author" content="Ruben Lacasa Mas – rubenlacasa.es"> | |
| <meta name="description" content="Demo de jQuery inline en castellano"> | |
| <title>datepicker demo</title> | |
| <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.min.css"> | |
| <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> | |
| <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | |
| </head> | |
| <body> | |
| <div id="datepicker"></div> | |
| <div id="datos"> | |
| <label for='fecha'>Fecha:</label> | |
| <!– Campo de texto que recibira el valor seleccionado en el datepicker | |
| le he puesto el atributo readonly para no poder escribir directamente –> | |
| <input type='text' name='fecha' id='fecha' readonly /> | |
| </div> | |
| <script> | |
| $( "#datepicker" ).datepicker({ | |
| // Formato de la fecha | |
| dateFormat: "dd/mm/yy", | |
| // Primer dia de la semana El lunes | |
| firstDay: 1, | |
| // Dias Largo en castellano | |
| dayNames: [ "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" ], | |
| // Dias cortos en castellano | |
| dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ], | |
| // Nombres largos de los meses en castellano | |
| monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ], | |
| // Nombres de los meses en formato corto | |
| monthNamesShort: [ "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dec" ], | |
| // Cuando seleccionamos la fecha esta se pone en el campo Input | |
| onSelect: function(dateText) { | |
| $('#fecha').val(dateText); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
La documentación de jQuery UI http://jqueryui.com/demos/datepicker/
rubenlacasa.es 