Os dejamos esta interesante ‘checklist‘ de usabilidad para detectar problemas antes del testing de la aplicación o incluso antes del diseño de la misma.
Muy recomendable.
Os dejamos esta interesante ‘checklist‘ de usabilidad para detectar problemas antes del testing de la aplicación o incluso antes del diseño de la misma.
Muy recomendable.
En este canal de youtube, podéis encontrar un montón de vídeos con tips sobre diferentes temas dentro del mundo del desarrollo web.
No tiene desperdicio.. darle un vistazo y a ver que os parece.
Link: Canal de Treehouse.
Pues eso… que con este pequeño javascript de 7Kb podremos hacer que nuestras listas sean fácilmente buscables, filtrables, ordenables, y un montón más de -ables.
Os dejamos un par de tutoriales de la nueva joyita de Adobe que nos permite crear páginas html5 + css sin necesidad de escribir nada de código. Su nombre: Adobe MUSE.
Aquí tenéis el primer tutorial a modo de introducción:
Y este segundo un poco más completo donde se explica el proceso de creación de una página web completa.
Muchos de vosotros conoceréis el selector css “nth-child”, y los que no lo conozcáis, pues deberías! xD.
Nos permite decir adiós a tener que ir marcando en el html los típicos ‘odd’ y ‘even’ como class en nuestras tablas y listados. Un simple “nth-child(2n+1)” y fuera! Nos ahorramos un montón de trabajo.
Podéis ver mejor como funciona en este artículo: http://css-tricks.com/5452-how-nth-child-works/
El problema de esto, como siempre, es que no es cross browser, y es nuestro amigo IE quien no se entera de esta propiedad… 🙁 Incluso en IE8!!
Como dice al final del artículo, para solucionar este tema, es posible usar jQuery, y así es!
Con una línea de jQuery, podemos obtener los mismos resultados que con la css, pero para todos los navegadores!!
Y aquí viene el valor añadido sobre el artículo anterior… El ejemplo que nos aclarará como es la cosa:
Css:
<<table.myclass tr:nth-child(2n+1) { background-color: #F6F6F6; }>>
jQuery:
<<$(“table.myclass tr:nth-child(2n+1)”).css(“background-color”, “#F6F6F6”);>>
Espero que os sirva!
Hoy dejo un pequeño repaso de los selectores, pseudo-class y pseudo-elements para CSS2 y CSS3. Lo hago porque ultimamente he utilizado los clasicos :last-child y :first-child, pero buscando he encontrado otros también muy interesantes, sobre todo el :after y el :before.
CSS2:
* Selector niversal, son todos los elementos del CSS
E E representa cualquier elemento del tipo E (span, p, …)
E F Todos los elementos F que sean descendentes de E
E > F Todos los elementos F que sean hijos de E
E:first-child De esta forma podemos seleccionar el primer elemento de tipo E
E:last-child De esta forma podemos seleccionar el ultimo elemento de tipo E
E:link , E:visited Selecciona los elementos E que sean un enlaces y no hayan sido visitados (:link) y los si visitandos (:visited)
E:active , E:hover , E:focus Selecciona los elementos de tipo E , en sus correspondientes acciones.
E:lang(c) Cogemos los elementos del tipo E que estén en el idioma (humano) especificado en (c).
E + F Se trata de cualquier elemento F inmediatamente despues del elemento del tipo E
E[foo] Elementos del tipo E con el atributo foo
E[foo=”ejemplo”] Elementos del tipo E con el atributo foo igual a “ejemplo”
E[foo~=”ejemplo”] Elementos del tipo E con el atributo foo contenga “ejemplo”. Se pueden añadir varias palabras separadas por espacios. ( ~ =ALT + 0126)
E[lang|=”es”] Similar al anterior, pero se referirá a todos los elemento E tal que su atributo lang comienze por “es”. Por ejemplo: “es_ES”, “es_CA”,…
E[foo$=”ejemplo”] Elementos del tipo E en el que el atributo foo termine con “ejemplo”.
DIV.ejemplo Todos los elementos DIV que sean de la clase ejemplo
E#miID El elemento E en el que su ID sea igual miID
:first-line Se refiere a la primera línea del elemento, normalmente usado para para elemetos de texto.
:first-letter La primera letra del elemento, tambien suele usarse para elementos de texto.
:before Elemento usado para insertar algún contenido delante de un elemento.
:after Elemento usado para insertar algún contenido al final del elemento.
CSS3:
:nth-child(N) Se utiliza para tablas normalmente. N puede ser 5, 2n+1, 3n+3 …
ul li:nth-child(5) {
color: #ccc;
}
ul li:nth-child(5) {
color: #ccc;
}
tr:nth-child(2n+2) {background: #eee}
Conforme vaya encontrado más (que los hay), iré publicando más post.