Similar Posts
Permitir el botón atrás en aplicaciones dinámicas
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
});
Vía / CSS Globe
Problemas de las librerías Javascript
Ultimamente están apareciendo muchas librerÃas Javascript que mejoran el trabajo con Javascript, pero no todo son cosas positivas y hay gente que muestra problemas que aparecen con el uso de estas librerÃas:
- Escasa documentación: ya sea online u offline, si la librerÃa es increible, pero no hay una forma sencilla de saber cómo usarla, pues nos quedamos como estábamos.
- Escaso soporte: estas librerÃas no suelen tener un sistema que ayude a los usuarios con los problemas que se encuentran.
- Demasiado grandes: cargar una librerÃa que ocupa mucho, para usar un par de funciones, es mucho lo que se carga y poco lo que se usa, quizás repercute negativamente en rendimiento o en ancho de banda.
- Demasiado especÃficas: sobre todo al trabajo de otra gente, por lo que a nosotros nos puede venir parcialmente bien.
- Diferentes en estructura: diferentes a la forma en que lo hacemos nosotros, en vez de usar estructuras estándares a las que podemos estar todos acostumbrados.
- No hay guÃas paso a paso: para poder entender las funcionalidades de las liberÃas con ejemplos.
- Escasa información sobre soporte a navegadores
- Inconsistencia en nombres de métodos y variables: en la W3C hay amplia documentación sobre la metodologÃa que se deberÃa seguir para la nomenclatura de funciones y variables.
Más información
Why good JavaScript libraries fail
Dear JavaScript Library Developers…
Too many libraries, not enough librarians
Six things that suck about the Web in 2006
VÃa / QuirksBlog
Selectores CSS3 que soportará Opera
En cuestión de CSS Opera suele ir por delante del resto navegadores. En el blog de uno de sus desarrolladores nos adelantan algunos de los selectores, en este caso pseudo-clases, que soportarán sus futuras versiones:
- :root: selecciona el elemento padre del documento, que normalmente será el <html>
- :not(s): representa a todos los elementos del documento excepto aquellos que NO coincidan con el selector "s" (ej.: not(#menu) ).
- :nth-child(n): representa al hijo n de un elemento. Ej.: div:nth-child(2) seleccinará todos los elementos div que sean segundo hijo de cualquier elemento (gracias Federico).
- :nth-of-type(n): representa al hermano n de un elemento. Ej.: div:nth-of-type(2) seleccinará el segundo elemento del div especificado.
- :first-of-type: representa al primer elemento que es el primer elemento de su tipo dentro de la lista de hijos del elemento padre.
- :target
Estos otros elementos están implementados en el núcleo de Opera pero por diversas razones no están aun habilitados
- :empty : representa a un elemento que no tiene ningún tipo de hijo.
- :nth-last-child(n): representa a un elemento que tiene n hermanos después de él.
- :nth-last-of-type(): representa a un elemento que tiene n hermantos del mismo tipo.
- :last-child: represetna al ultimo hijo de un elemento.
- :last-of-type: representa al último hermano de su tipo. Sería lo mismo que :nth-last-of-type(1).
- :only-child: representa a un elemento cuyo padre no tiene ningún otro elemento hijo.
- :only-of-type: representa a un elemento cuyo padre no tiene otro elemento hijo del mismo tipo.
Vía / Slightly Ajar
Incrustar un SVG dentro del HTML directamente
Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.
Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:
.class {
content: url('imagen.svg');
}
Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:
jQuery(document).ready(function() {
var replaceWithSVG = function(selector, url) {
jQuery('').appendTo('head');
jQuery.get(url, function(data) {
// Replace image with new SVG
jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
}, 'text');
}
var selectors = ['.site-title a', '.btn-video']
for(var i in selectors) {
var selector = selectors[i];
var url = window.getComputedStyle(
document.querySelector(selectors[i]), ':before'
).getPropertyValue('content');
url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
replaceWithSVG(selectors[i], url);
}
});
CSS: Mnemotecnia y shorthand
Seguimos organizando las hojas de estilo.
La [mnemotecnia][] (o nemotecnia) es un proceso de asociación mental destinado a facilitar el recuerdo de algo. Ese algo puede ser, por ejemplo, el orden de declaración de las reglas de presentación para los enlaces (link no visitado, visitado, etc.). Para recodar el orden nos servirán los términos en inglés (mayúsculas especialmente) LoVe HAte.
### LoVe HAte
Es conveniente recordar que el orden correcto de las declaraciones es este y no otro:
a:link { /* Love hate */
}
a:visited { /* loVe hate */
}
a:hover { /* love Hate */
}
a:active { /* love hAte */
}
### TRouBLe
Algunas propiedades CSS se pueden definir en forma taquigráfica (shorthand).
Por ejemplo, para definir los márgenes de un elemento podemos usar `margin-top: 0; margin-right: 1em; margin-bottom: 1em; margin-left: 1em` o, para ahorrar teclas y bytes, usar la versión corta:
#unSelector {
margin: 0 1em 1em 1em;
}
El orden de los valores es el siguiente: arriba, derecha, abajo, izquierda. Esto es, empezamos a asignar valores en sentido de las agujas del reloj (de las doce de la mañana y acabamos a las nueve de la noche). Mnemotécnicamente sería, TRouBLe (top, right, bottom, left).
Estas versiones abreviadas pueden llevar, atención, uno, dos, tres o cuatro valores, ahí es _ná_. Veamos:
#unSelector {
margin: 0;
/* margen 0 por los cuatro costados */
}
#unSelector {
margin: 0 1em;
/* márgenes superior e inferior a cero,
márgenes izquierdo y derecho de 1em */
}
#unSelector {
margin: 0 1em 2em;
/* huy, este tiene truco: margen superior, cero;
margen derecho, 1em; margen inferior, 2em.
¿Y el izquierdo? en caso de tener
tres valores, se toma el segundo, esto es el
valor es el mismo para los dos laterales */
}
#unSelector {
margin: 0 1em 2em 1em;
/* TRouBLe, como ya hemos comentado */
}
Claro está que lo dicho para los márgenes también es aplicable a `padding`, `border-width`, `border-style`, `border-color` y seguramente a alguna propiedad más que ahora mismo (¡café!) no está en mi cabeza.
Más sobre [Memoria y reglas nemotécnicas][m].
[mnemotecnia]: http://buscon.rae.es/draeI/SrvltGUIBusUsual?LEMA=mnemotecnia&TIPO_HTML=2&FORMATO=ampliado&sourceid=mozilla-search “Definición en el diccionario de la Real Academia Española”
[m]: http://www.weblioteca.com.ar/textos/mente/memoriaynemotecnia.htm
CSSUtilities: librería Javascript para obtener datos CSS
CSSUtilities es una librería que permite entre otras cosas:
- encontrar todos los estilos que aplican a un elemento
- indica qué estilo es propio y cuál heredado
- soporta el estándar de la W3C y las propias de Internet Explorer
- admite CSS1, CSS2 y CSS3
Algo muy parecido a lo que nos ofrece Firebug
Vía / DZone