Bootstrap se esta convirtiendo desde hace tiempo en casi un estandar a la hora de realizar paginas web. Algo que siempre nos lleva de cabeza, es el campo Date a la hora de introducir fechas, sobre todo para los que desarrollamos en castellano, ya que si bien algunos navegadores lo soportan, a la hora de mostrar la fecha esta aparece en un formato distinto al que usamos nosotros. He dedicado unas cuantas entradas a la personalización del Jquery datepicker en castellano pero creo que con este Datepicker para Bootstrap voy a tener que modificar unos cuantos de los que tengo desarrollados.
Archivo de la categoría: JavaScript
Todo lo relacionado con la programación con JavaScript
Configurando Sublime Text 3
Sublime Text es una aplicación para desarrollo la cual me esta ganando cada día mas. Tengo que decir que no soy asiduo de ella ya que para grandes proyectos uso PHPStorm y para cosas puntuales sigo siendo muy fan de TextMate, o incluso Vim, pero estas aplicaciones tienen unos «peros», los cuales los cubre el Sublime Text. Y diréis,¿ que «peros» le ves? pues bien, PHPStorm, como todos los entornos de programación basados en Java (Eclipse, Zend Studio, Netbeans), consume barbaridad de recursos, y el «peso» es muy grande. TextMate es solo para Mac, y Vim es solo para sistemas *NIX, ¿entonces,si necesitamos un entorno de programación ligero y que se pueda utilizar en todos los sistemas? pues ahí esta Sublime Text, valido para cualquier plataforma, ligero y potente.
Sublime Text es muy personalizable y lo podemos ajustar a nuestra manera de programar, y para ello contamos con cantidad de paquetes para complementarlo y personalizarlo a nuestro gusto. En este enlace nos explican como instalar estos complementos, personalizar fuentes y configurar el tema para dejarlo a nuestro gusto. Yo os recomiendo el Soda Light, sobre todo si estáis acostumbrados a TextMate.
A la hora del desarrollo yo os recomiendo instalar tambien los siguientes paquetes: SublimeLinter-php SublimeLinter-phpcs SublimeLinter-phpmd, HTML, SimpleTODO.
Tether posiciona elementos de una manera eficiente
Esta es una libreria muy sencilla que nos puede servir de mucha ayuda a la hora de mantener dos elementos juntos en una pagina web de una manera sencilla y efectiva.
Por ejemplo supongamos que tenemos dos divs, uno llamado yellowBox y otro llamado greenBox, y queremos que se mantengan unidos en la esquina de arriba:
Mas información: http://github.hubspot.com/tether/
Acceder a datos JSON con jQuery – jQuery Tips
Una de las maneras para rellenar un formulario dinámicamente en base a una petición AJAX es por medio de JSON.
Supongamos el siguiente escenario. Tenemos un formulario que se tiene que autorellenar en base a una petición AJAX, por ejemplo, le pasamos el código de una persona y nos tiene que mostrar los datos.
// Fichero datos.php
$datos = array(
1 => array('nombre' => 'Yo', 'apellidos' => 'mismo'),
2 => array('nombre' => 'Tu', 'apellidos' => 'aquel'),
);
$codigo = filter_input(INPUT_POST, 'codigo', FILTER_SANITIZE_NUMBER_INT);
foreach ($datos as &$dato) {
$dato = utf8_encode($dato);
}
echo json_encode($datos[$codigo]);
<!-- Fichero formulario.html -->
<form id='formulario'>
<input type='text' id='codigo'>
<button type='button' id='buscar'>Buscar Registro</button>
<input type='text' id='nombre'>
<input type='text' id='apellidos'>
</form>
<script>
$('#buscar').click(function(){
$.post('datos.php', {codigo:$('#codigo').val()}, function(data){
data = JSON.parse(data);
$('#nombre').val(data.nombre);
$('#apellidos').val(data.apellidos);
});
return false;
});
</script>
En este ejemplo los datos están almacenados dentro de un array, lo normal es que fueran resultado de una consulta SQL.
En el formulario pongo, por ejemplo, el 1 para obtener los datos, estos se mandan vía post al fichero de datos, antes de devolverlos los codifico con utf8_encode para que no de ningún error, luego les damos formato con json_encode, y una vez que lo recibimos los tenemos que tratar con JSON.parse para poder acceder a ellos como si fueran un objeto.
Conocer la longitud y latitud en Google Maps
Si habéis trabajado o trabajáis, os pensáis trabajar con el API de Google Maps, esta web os va a ser de mucha utilidad http://universimmedia.pagesperso-orange.fr/geo/loc.htm ya que poniéndole la dirección del lugar que buscáis o moviendo el marcador os va a devolver la latitud y longitud, y nos va a venir muy bien para poder diseñar nuestros propios mapas con el API de Google Maps.
Web de la API v3 de Google Maps https://developers.google.com/maps/documentation/javascript/?hl=es
Funciones anonimas en PHP – PHP Tips
El otro día en la entrada cargando clases php automaticamente en el ultimo ejemplo usaba una función anomima o clausura para lanzar la función spl.
La definición que nos da la documentación es:
Las funciones anónimas, también conocidas como clausuras (closures), permiten la creación de funciones que no tienen un nombre especificado.Estas funciones fueron introducidas en PHP 5.3 y su uso es prácticamente igual que cuando definimos funciones en Javascript.
//Ejemplo de definición de función en Javascript
var miFuncion = function (nombre) {
document.write('Tu nombre es ' + nombre);
};
miFuncion('Ruben'); // Escribe 'Tu nombre es Ruben'
// Ejemplo de definición de función anónima en PHP
$miFuncion = function ($nombre) {
echo 'Tu nombre es '. $nombre;
}
$miFuncion('Ruben'); //Escribe 'Tu nombre es Ruben'
Se puede ver en los dos ejemplos que el uso y definición de ambas es prácticamente igual. Otro de los usos para estas funciones es como callback en funciones tengan esa opción.
echo preg_replace_callback('~-([a-z])~', function ($coincidencia) {
return strtoupper($coincidencia[1]);
}, 'hola-mundo');
// Devuelve holaMundo
Para mas información sobre las funciones anónimas http://www.php.net/manual/es/functions.anonymous.php
Obtener el valor seleccionado en un Select con jQuery – jQuery Tips
Imaginemos que queremos conocer que valor hay seleccionado en un campo select, para comprobar su valor o lo que necesitemos. Para hacer esto utilizaremos val().
<select id='ciudades' name='ciudades'>
<option value='BAR'>Barcelona</option>
<option value='MAD'>Madrid</option>
<option value='ZGZ'>Zaragoza</option>
</select>
<script>
$('#ciudades').change(function(){
var ciudad = $(this).val()
alert('Has seleccionado ' + ciudad);
});
</script>
En este ejemplo nos aparece un select en el cual nos da la opción de seleccionar entre tres ciudades, cuando cambiemos el valor nos mostrara un mensaje en pantalla en el cual nos mostrara el valor del value de la ciudad seleccionada.
Editor de RegExp, expresiones regulares Online – Utilidades Web
He encontrado este editor online de expresiones regulares que es muy completo y muy útil. Tiene ejemplos de funciones y va analizando lo que vas poniendo poco a poco, de tal manera que se puede ir interpretando que va ha hacer el patrón.
Integrar Google Translator en nuestra web – Google Tips
Hoy he vuelto a revisitar el complemento de Google para traducir una pagina web a cualquier idioma. En lineas generales lo ha hecho bastante bien, aunque, hay me he encontrado unos cuantos inconvenientes.
No voy a explicar aquí como integrarlo ya la web que genera el código a integrar esta muy clara y nos lo explica muy bien http://translate.google.com/translate_tools.
El primero es muy visual, ya que en la web que he traducido, estoy usando bootstrap y la barra de traducción de Google me tapa todo el menú.
El segundo ha sido, vamos a calificarlo como gracioso, ya que en la web que he traducido, hay palabras sueltas en inglés y cuando traduces la pagina al inglés, te traduce los términos ingleses al castellano.
Este segundo problema, mirando la documentación para webmasters he encontrado la manera de solucionarlo, y es establecer la clase «notranslate» a las palabras o frases que no quieres que traduzca. Por ejemplo
<p>La etiqueta <span class='notranslate'>form</span> se utiliza para crear formularios web</p>
Otra de las cosas a tener en cuenta a la hora de realizar traducciones de paginas web, sobre todo a la hora de posicionamiento es que, la web traducida no sera indexada en el directorio de Google. Lo dice clarito en la documentación
Search engine indexing The automatically translated version of your web page will not be indexed by search engines.Mas información: https://support.google.com/translate/#2641276
¿Por que el botón reset no vacia los campos hidden? – HTML Tips
Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.
Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.
A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.
Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs
«El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule».Y la definición de reset dice «El estado reset de un button representa un button que cuando se activa restablece el formulario».
Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.
Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla
$('button[type=reset]').click(function(){
$('#idCampoHidden').val('');
});
En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden
El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset
rubenlacasa.es 