2mdc.com - Weblogs

Selectores CSS avanzados

Chema — Thu, 28 Aug 2008 08:20:15 +0000

Ahora que IE 6 parece que est� empezando a desaparecer de nuestras vidas (casi la mitad de los usuarios de IE se han pasado al 7) y por tanto de nuestras pesadillas, ser�a bueno recordar algunos de los selectores que por su culpa nos hemos podido utilizar de forma normal.

Todos tenemos en mente el selector universal (* {…}), el selector de tipo o etiqueta (p {…}), el selector descendente (p span {…}), el selector de clase (.clase {…}) y el selector de id (#id {…}). Pero, �alguien recuerda el selector de hijos, el selector de adyacentes o el selector de atributos?

Estos selectores (entre otros muchos) han sido los grandes damnificados del aplastante dominio tir�nico que ha ejercido IE 6 a lo largo de los a�os. Este tipo de selectores no funcionan con este “navegador” por lo que no se ha podido hacer uso de ellos abogando por el “bien com�n”.

Pasemos a ver c�mo funcionan algunos de estos selectores:

Selector de hijos:

Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el “signo de mayor que” (>). Por ejemplo:

p > span { color: blue; }
 
Texto1
	
Texto2

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento que sea hijo directo de un elemento

", por lo que el primer elemento cumple la condici�n del selector. Sin embargo, el segundo elemento no la cumple porque es descendiente pero no es hijo directo de un elemento

Selector adyacente:

El selector adyacente utiliza el signo + y su sintaxis es:

elemento1 + elemento2 { ... }

La explicaci�n del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.
elemento2 debe aparecer inmediatamente despu�s de elemento1 en el c�digo HTML de la p�gina.

En el siguiente ejemplo:

h1 + h2 { color: red }
 

Titulo1
 
	
Subt�tulo
...
 
Otro subt�tulo
...

Los estilos del selector h1 + h2 se aplican al primer elemento

de la p�gina, pero no al segundo

, ya que:

El elemento padre del primer
es , el mismo padre que los dos elementos
.
El primer elemento
aparece en el c�digo HTML justo despu�s del elemento
, por lo que se cumple la segunda condici�n.
El segundo elemento
no aparece justo despu�s del elemento
, por lo que no se cumple la segunda condici�n y el selector h1 + h2 no se aplica en el segundo elemento
.

Selector de atributos:

El �ltimo tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en funci�n de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector s�lo es �til para los atributos de tipo lang que indican el idioma del contenido del elemento.

A continuaci�n se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
	
a[class] { color: blue; }
	
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
	
a[class="externo"] { color: blue; }
	
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
	
a[href="http://www.ejemplo.com"] { color: blue; }
	
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
	
a[class~="externo"] { color: blue; }
	
/* Selecciona todos los elementos de la p�gina cuyo
atributo "lang" sea igual a "en", es decir,
 todos los elementos en ingl�s */
	
*[lang=en] { ... }
	
/* Selecciona todos los elementos de la p�gina cuyo
atributo "lang" empiece por "es", es decir,
 "es", "es-ES", "es-AR", etc. */
	
*[lang|="es"] { color : red }

Estos son algunos de los “olvidados” que pueden volver con m�s fuerza a medida que el “demonio” (cambiese por IE 6) desaparezca de nuestras vidas.

Por �ltimo, una aplicaci�n que te dice qu� selectores son v�lidos para el navegador que usas en ese momento:
Test de selectores CSS en red

Incre�ble animaci�n facial 3D

Administrator — Wed, 27 Aug 2008 13:15:57 +0000

La industria de la animaci�n 3D avanza a pasos agigantados. No os perd�is este v�deo de Image Metrics, una empresa especializada en animaci�n facial que ha trabajado en videojuegos como Grand Theft Auto IV, Uncharted o Devil May Cry 4.

Concurso de dise�o de <hr>

Administrator — Wed, 27 Aug 2008 06:38:42 +0000

Si eres dise�ador o te gusta el dise�o, puedes participar hasta el 1 de septiembre en el concurso de estilar l�neas horizontales que ha propuesto la revista Smashing Magazine bajo el t�tulo The

contest (El concurso de

Requisitos del dise�o a enviar: debe ser creativo y original, creado expresamente para el concurso o al menos no haber sido usado con anterioridad en ning�n dise�o, ser reconocible como elemento divisor, estar en formato PNG, JPG o GIF, y a ser posible, enviar el documento matriz (es decir, el PSD, PNG, etc).

El premio es esta tableta gr�fica valorada en unos 430$, y el honor de aparecer en este prestigioso blog de dise�o.

Especificidad CSS

Administrator — Thu, 21 Aug 2008 07:55:18 +0000

La Real Academia Espa�ola define la especificidad como la cualidad y condici�n de ser espec�fico, o lo que es lo mismo: concreto, determinado. En los �ltimos a�os, los expertos en CSS se han apropiado de este t�rmino para denominar la cualidad que hace que un estilo prime sobre otro cuando ambos deber�an afectar a un mismo elemento.

El principio en el que se basa es simple: el elemento m�s espec�fico gana. Parece claro que una clase definida espec�ficamente para un elemento html (como p .intro { }) prima sobre la definici�n general de ese elemento en la hoja de estilos (que ser�a p {}). Pero, �y dos etiquetas html frente a un id? (como por ejemplo div p {} y #cabecera {}), �por qu� este elemento no sale como deber�a?. Esa es la clase de preguntas que responde la especificidad.

�C�mo se calcula? Asignando un valor a cada tipo de elemento:

Un selector HTML tiene una especificidad de 1.
Dos selectores HTML tienen una especificidad de 2, es decir que se aplica siempre el selector con m�s elementos.
Un selector de clase tiene una especificidad de 10.
Dos selectores HTML con un selector de clase tienen una especificidad de 10 + 1 + 1.
Un selector id tiene una especificidad de 100.

Una vez asignados estos valores, �stos se suman para calcular el total (v�anse ejemplos en htmldog y csstricks ) o se comparan por separado (v�ase un ejemplo de esto �ltimo en Smashing Magazine).

Por �ltimo, os recomendamos esta simp�ticachuleta de especificidad CSS ambientada en Star Wars.

Oxidando la furgoneta

Angel — Thu, 14 Aug 2008 13:53:16 +0000

En 2mdc llevan tiempo sin cambiar el coche de empresa alegando que aun se ve lustroso. Para que la direci�n cambiara de idea, envi� una fotograf�a del veh�culo llevando a cabo los siguientes pasos :

1. Tom� una fotografia al coche y la abr� en photoshop.

2. En otra ventana, eleg� de entre una serie de texturas la siguiente, d�ndole a la imagen un tama�o similar al de mi fotografia anterior.

3. Selecion� la imagen entera y la copi�, peg�ndola luego sobre la foto de la furgoneta, en una capa nueva.

4. A esta capa le hice los siguientes cambios :

Opacidad : 40%
Modo de fusi�n : Superponer

Y el resultado fue este.

Aunque no consegu� que compraran una nueva furgoneta, si obtuve un cheque descuento para el tunel de lavado.

Dando luz a rostros

Angel — Thu, 14 Aug 2008 11:53:46 +0000

Vamos a ver una t�cnica muy sencilla y efectiva que nos va a permitir simular “asutoiluminaci�n” a fotograf�as, en el ejemplo utilizo un rostro pero podemos emplearlo en cualquier tema, a gusto del dise�ador.

Abrimos nuestro fichero con la fotograf�a original

Duplicamos la capa ( puedes usar “Ctrl + J” )
A la nueva capa le aplicamos un “desenfoque gausiano” ( “Filtro > Desenfocar > Desenfgoque gausiano” ) con factor de “3″ dependiendo de la resoluci�n e intensidad del resultado que busquemos.

En el “Modo de fusi�n” de la capa elegimos “Superponer”

� Te gusta el resultado ? Juega con esta t�cnica y s�cale el partido que desees.

C�mo dejar de ser un dise�ador vago

Laura — Tue, 12 Aug 2008 07:53:40 +0000

Al trabajar con una amplia variedad de proyectos, he aprendido una cosa: los dise�adores son vagos (a veces incluso yo). Sin embargo, la mayor�a querr�amos a menudo despedirnos r�pidamente de un proyecto y seguir adelante con el siguiente. Aunque podr�an escribirse muchas anotaciones sobre esto, ofrezco aqu� algunas sugerencias para garantizar que las cosas sean un poco m�s f�ciles al final:

Nombra tus carpetas y capas
�Qu� diablos significan “Capa 234″ y “Bloque derecho Copia 23″? �Alguna vez has intentado trabajar con los archivos de otra persona y has encontrado que una capa ten�a cientos de capas en su interior?
Aseg�rate de que cubres la mayor�a de los escenarios de uso
No hay nada peor para los desarrolladores que tener que adivinar c�mo algo tiene que interactuar. Dise�a en primer lugar para el peor caso de uso posible y s�lo entonces ded�cate al mejor escenario de uso (�en ese siempre eres bueno!)
Un archivo para gobernarlos a todos
Si utilizas un solo archivo de Photoshop y haces todo el trabajo ah�, te ser� m�s f�cil editarlo y evitar�s la duplicaci�n de trabajo. Las capas han sido inventadas por una raz�n ��salas!
No utilices im�genes perfectas
�Est�s usando im�genes geniales para ocultar las carencias de tu dise�o? Considera que tu trabajo est� bien hecho s�lo cuando puedas vender tu impresionante dise�o al cliente sin ning�n tipo de imagen en �l.

Ninguna de estas sugerencias requiere un gran esfuerzo, �verdad? Si las conviertes en h�bitos simplificar�s el trabajo y har�s amigos despu�s del plazo de entrega del proyecto �El mundo se convierte en un lugar mejor!

�Alguna sugerencia para estos dise�adores vagos?

Traducci�n libre del art�culo �How To Stop Being A Lazy Designer� de la revista alemana Smashing Magazine.

Buscador de contenidos sobre accesibilidad y usabilidad

Laura — Tue, 12 Aug 2008 06:37:40 +0000

Olga Carreras, de Usable y Accesible, nos ofrece este buscador especializado en contenidos sobre accesibilidad y usabilidad. Se trata de un gadget creado con la tecnolog�a de Google, que adem�s permite incrustarlo en nuestras p�ginas f�cilmente.

M�s r�pido, m�s r�pido, m�s r�pido

Luis — Thu, 07 Aug 2008 09:34:39 +0000

Acostumbrados a los avances tecnol�gicos, apenas nos asombra que cualquier ordenador dom�stico, de los que usamos actualmente en casa o en el trabajo, tenga una potencia de c�lculo superior en varios �rdenes de magnitud a la que se necesit� para llevar al Apolo 11 a la Luna en 1969.

Un poco antes, en 1965, Gordon Moore ya vaticin�, con la ley que lleva su apellido, la trepidante progresi�n hacia la fabricaci�n de ordenadores m�s r�pidos y potentes basados en transistores y circuitos integrados.

Recientemente, el propio Moore ha puesto una fecha de caducidad de entre 10 y 15 a�os a la validez de su ley, pues las tecnolog�as de integraci�n est�n empezando a alcanzar los l�mites f�sicos en cuanto a reducci�n de tama�o, aumento de frecuencia y disipaci�n de calor.

Intel, la compa��a de la que Gordon Moore fue cofundador, tambi�n corrobora dichos l�mites, y en un reciente comunicado apunta a un futuro cercano dominado por procesadores con 10 o m�s n�cleos, en lugar de un gran n�cleo concentrado. La principal dificultad de este cambio de enfoque estriba en que ser� necesario tambi�n un cambio de paradigma en el software. Los primeros productos de esta nueva gama de procesadores de Intel, denominada Larrabee, comenzar�n a ver la luz a partir de 2009 o 2010.

Por otra parte, en el �mbito de los superordenadores, la �ltima vecina en llegar al barrio es MariCel, una idea y prototipo del Barcelona Supercomputing Center (BSC) para un computador que ser� 10 veces m�s r�pido que la m�quina m�s potente de la actualidad, alcanzando la barrera de los 10 petaflops.

A d�a de hoy, y seg�n la lista Top500, el m�ximo honor recae sobre RoadRunner, el correcaminos. Pero no es terreno para dormirse en los laureles, pues las plusmarcas se suceden sin tregua en estas olimpiadas de la computaci�n, cuyo lema parece ser un permanente y exigente “citius citius citius“.

Ejecutar un script PHP en segundo plano bajo Windows

Marcos — Wed, 06 Aug 2008 13:35:41 +0000

Caso:

Tenemos un site que realiza una tarea muy larga y pesada, por ejemplo consultar un webservice externo con miles de registros.

Problema:

Si ejecutamos desde el servidor apache un script PHP que realize esa acci�n puede pasarnos:

1.- La pagina se nos bloquear� hasta que finalice su ejecuci�n, no pudiendo ver nada m�s.
2.- Si el tiempo se alarga demas�ado el servidor web cortar� la conexi�n o bi�n lo har� nuestro navegador
3.- Si cerramos accidentalmente el navegador o se produce un error en la conexi�n el proceso se interrumpira.

Tentativa de Soluci�n:

Lanzar con un exec de PHP una llamada al php.exe que ejecute el script en cuesti�n. Por ejemplo si tenemos el script consulta_webservice.php que es el que realiza la carga de datos del Webservice podemos escribir en nuestro script de lanzamiento lanzador_webservice.php:

< ?php exec("C:\ruta_al_exe_php\php.exe -f consulta_webservice.php"); ?>

Este metodo funciona optimamente bajo entornos linux, no as� en windows. �Por qu�? Pues por que deja al script lanzador esperando que termine el proceso que �l mismo ha lanzado (en nuestro caso php.exe -f consulta_webservice.php)

Es decir no ganamos nada respecto a la opci�n de invocarle desde la web.

Buscando la respuesta:

Tras muchas horas de pruebas con diversas soluciones que en la www se dan a este problema, nos dimos cuenta que tan s�lo una nos funcionaba correctamente. En concreto se trata de usar un programa auxiliar “psexec.exe” cuya principal utilidad consiste en lanzar programas tanto en nuestra m�quina como en m�quinas en red.

Veamos como usarlo:

En nuestro script lanzador usamos la funcion exec para lanzar este comando:

< ?php exec('psexec -d C:\ruta_al_exe_php\php.exe -f consulta_webservice.php'); ?>

Esta linea nos lanza desde el PHP el mencionado psexec (deber� estar en el mismo directorio en el que estamos), que a su vez invoca al php.exe que ejecuta nuestro script cargador que se ejecutar� en segundo plano. Consiguiendo con este peque�o rodeo que el script lanzador quede libre de esperar a que acabe su ejecuci�n el script cargador.

Para lograr esto usamos la opcion del psexec “-d”

Rizando el rizo:

Pero imaginemos que al script que queremos usar para cargar datos del webservice tenemos que pasarle parametros (por ejemplo un id) digamos: consulta_webservice.php?id=123

Si probamos a llamarlo tal cual lo hariamos desde la web, nos encontraremos con un fallo del psexec, el cual no admite ning�n parametro con “?” o con “=”, as� que recurriremos al uso de parametros espec�ficos para ejecutar php desde la linea de comandos, tal que as�:

< ?php exec('psexec -d C:\ruta_al_exe_php\php.exe -f consulta_webservice.php -- 123'); ?>

El script receptor, consulta_webservice.php, deber� recojer dicho valor de la siguiente forma:

< ?php $id=$argv[1]; # $id vale 123 ?>

Donde el array global $argv nos proporciona todos los parametros pasados y la variable $arvc su cardinalidad.

Resumiendo:

El programa psexec nos brinda la posibilidad de ejecutar una aplicacion en segundo plano llamada desde un script PHP ejecutado en un servidor Apache en Windows, sin interrumpir el uso nuestra aplicaci�n web.

Podeis descargarlo aqu�: psexec

2mdc.com - Weblogs

Selectores CSS avanzados

Titulo1

Subt�tulo

Otro subt�tulo

es , el mismo padre que los dos elementos
.

.

aparece en el c�digo HTML justo despu�s del elemento
, por lo que se cumple la segunda condici�n.

, por lo que se cumple la segunda condici�n.

no aparece justo despu�s del elemento
, por lo que no se cumple la segunda condici�n y el selector `h1 + h2` no se aplica en el segundo elemento
.

, por lo que no se cumple la segunda condici�n y el selector `h1 + h2` no se aplica en el segundo elemento
.

.

Incre�ble animaci�n facial 3D

Concurso de dise�o de <hr>

Especificidad CSS

Oxidando la furgoneta

Dando luz a rostros

C�mo dejar de ser un dise�ador vago

Buscador de contenidos sobre accesibilidad y usabilidad

M�s r�pido, m�s r�pido, m�s r�pido

Ejecutar un script PHP en segundo plano bajo Windows

2mdc.com - Weblogs

Selectores CSS avanzados

Titulo1

Subt�tulo

Otro subt�tulo

es , el mismo padre que los dos elementos .

.

aparece en el c�digo HTML justo despu�s del elemento , por lo que se cumple la segunda condici�n.

, por lo que se cumple la segunda condici�n.

no aparece justo despu�s del elemento , por lo que no se cumple la segunda condici�n y el selector h1 + h2 no se aplica en el segundo elemento .

, por lo que no se cumple la segunda condici�n y el selector h1 + h2 no se aplica en el segundo elemento .

.

Incre�ble animaci�n facial 3D

Concurso de dise�o de <hr>

Especificidad CSS

Oxidando la furgoneta

Dando luz a rostros

C�mo dejar de ser un dise�ador vago

Buscador de contenidos sobre accesibilidad y usabilidad

M�s r�pido, m�s r�pido, m�s r�pido

Ejecutar un script PHP en segundo plano bajo Windows

es , el mismo padre que los dos elementos
.

aparece en el c�digo HTML justo despu�s del elemento
, por lo que se cumple la segunda condici�n.

no aparece justo despu�s del elemento
, por lo que no se cumple la segunda condici�n y el selector `h1 + h2` no se aplica en el segundo elemento
.

, por lo que no se cumple la segunda condici�n y el selector `h1 + h2` no se aplica en el segundo elemento
.