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 categoría: JavaScript
Todo lo relacionado con la programación con JavaScript
Detectión de dispositivos moviles – Javascript Tips
En un proyecto en el que he estado trabajando últimamente, necesitaba detectar cuando el dispositivo era móvil o no, y ademas tenia que detectar si el dispositivo usaba iOS o Android. En un principio quería usar Modernizr, ya que ya estaba utilizándolo para detectar el tipo de navegador usado por el cliente, pero googleando un poco encontré este script el cual me pareció mas adecuado para conseguir mi objetivo. Esta librería se puede descargar de http://blog.mobileesp.com/. En esta pagina también podemos encontrar demos la documentación necesaria para integrarlo.
// Incluimos el archivo mdetect.js
<script src='js/mdetect.js'></script>
<script>
if (DetectIos()) { // Si es iOS
// Realiza las acciones para iOS
} else if (DetectAndroid()) { // Si es Android
// Realiza las acciones para android
} else { // Para el resto de casos
// Realiza las acciones para el resto de los casos
}
</script>
Jquery datepicker versus html5 date
Una de las novedades que incorpora el Html5 son los input de tipo date. Como esta ocurriendo con muchas de las novedades de Html5 algunos navegadores lo soportan y otros no. Dentro del grupo que lo soportan están Chrome y Opera, los que no lo soportan de momento son Firefox, Safari e Internet Explorer, esto en lo que son navegadores de escritorio, en el campo de los dispositivos móviles el único que lo soporta es Safari. http://caniuse.com/#feat=input-datetime
Esto nos puede suponer un problema a la hora de desarrollar nuestras web implementando este tipo de novedades, y al final podemos optar por hacer lo que estamos acostumbrados ha hacer y que nos funciona, que suele ser la inclusión de un datepicker en javascript, como por el ejemplo el Datepicker de Jquery, y olvidarnos de estas novedades hasta que los desarrolladores, o quiza los fabricantes, de navegadores se pongan de acuerdo.
Una solución en este tiempo intermedio entre quien lo tiene y quien no, es usar la libreria Modernizr. Con esta libreria vamos a poder comprobar de una manera sencilla si el navegador del cliente soporta o no soporta esta caracteristica, y muchas otras cosas mas.
La instalación es sencilla, nos descargamos la version de desarrollo (development) o produccion (production) y integramos el script descargado dentro de las etiquetas de nuestra pagina web. Por ejemplo imaginemos que el fichero descargado lo renombro como modernizr.js y lo situo dentro de la carpeta scripts que esta en la raiz de nuestra pagina web. Tambien incluiremos la libreria css del jQuery UI para la cual al igual que hare despues con las librerias javascript de jquery los incluire desde la pagina http://code.jquery.com/
Tambien incluire en esta pagina el formulario con el campo input y al final los scripts de jQuery y la función que
detectara si esta soportada o no esta caracteristica en nuestro navegador.
<html>
<head>
<title>Ejemplo de input date</title>
<link href="http://code.jquery.com/ui/1.10.2/themes/flick/jquery-ui.min.css" rel="stylesheet" />
<!-- Nuestras etiquetas meta o archivos css -->
<script src='scripts/modernizr.js'></script><!--Archivo Moderniz descargado -->
</head>
<body>
<!-- El cuerpo de la web -->
<form name='frmFecha' id='frmFecha' method='post' action='#'>
<label for='fecha'>Seleccione Fecha</label>
<input type='date' name='fecha' id='fecha' placeholder='dd/mm/aaaa' />
</form>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://code.jquery.com/ui/1.10.2/jquery-ui.min.js'></script>
<script>
$('document').ready(function(){
if (!Modernizr.inputtypes.date) {
$('#fecha').datepicker();
}
});
</script>
</body>
</html>
Enlaces de interes http://jqueryui.com/datepicker/ http://diveintohtml5.info/detect.html#input-types
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)
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.
CSS Text Wrapper
Alguna vez no encontramos con la necesidad de poner un texto envolviendo una imagen o haciendo alguna forma particular. En esra pagina podemos generar la forma que queramos y una vez consegida copiar el codigo y pegarlo en nuestra web.
Datepicker Jquery en castellano
Dejo el codigo del datepicker de Jquery para que salga en formato castellano
This file contains 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
https://gist.github.com/sbarrat/5691044
La documentación de jQuery UI http://jqueryui.com/demos/datepicker/
rubenlacasa.es 