Una de las cosas más destacadas de iPhone es su usabilidad, como por ejemplo la posibilidad de ver el carácter introducido en un campo password.
Este script de jQuery permite realizar la misma tarea, mostrar el carácter introducido durante unos segundos o hasta que se pulsa la siguiente tecla y ocultar el resto. iPhone-like password fields using jQuery
Vía / WebAppers
MathJax es una librería javascript que permite mostrar fórmulas LaTeX y MathML en nuestras páginas. Es compatible con casi todos los navegadores (menos IE5.5 lógicamente), permite copiar el código TeX y MathML de la página, utiliza fuentes CSS y no imágenes o Flash y muchas cosas más.
MathJax TeX Test Page
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
Aquellos que necesiten que en su aplicación web los usuarios introduzcan contraseñas seguras, podrán añadir este plugin jQuery que comprobará si las contraseñas tienen ciertas carácterísticas que las hacen seguras:
Uso de mayúsculas y minúsculas
Uso de números
Uso de caracteres especiales
Longitud de la contraseña
U opcionalmente similar a un username
El plugin mostrará un mensaje indicando la calidad de la contraseña y un color acorde a ésta.
En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.
Para subir la imagen se usará el siguiente método.
Siete consejos para realizar un javascript de calidad y no intrusivo:
No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y entendible.
¿Sabías que en javascript una función puede contener a otras? Pues ahora ya lo sabes. Fíjate en el siguiente código:
function barrioSesamo() {
function epi() {
alert(‘hola Blas’);
}
function blas() {
alert(‘hola Epi’);
}
epi();
blas();
}
barrioSesamo();
// el navegador nos presentará un par
// de alertas, a saber, “hola Blas” y
// “hola Epi”
Nada impresionante, por el momento. Lo interesante del asunto es que, al definir la función `epi` dentro de la función `barrioSesamo`, el ámbito de la misma (scope) queda limitado, de manera que solo podemos llamar a `epi` desde su propio barrio.
Vale, sigo sin impresionarte.
Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón ‘Atrás’ del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al ‘contenido’ anterior.
Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, …, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).
Para tratar esto mediante jQuery se puede hacer usando el siguiente código:
$(window).bind('hashchange', function () {
// hacer lo que sea para mostrar el contenido
});
Esa caracterÃstica no es exclusiva de iPhone… muchos teléfonos móviles lo hacen!