aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

MarketCSS es un framework CSS desarrollado por Jose Castro que nos permite simplificar la tarea de maquetar en CSS.

// Referencia "lh" + número de 80 a 200 de 10 en 10
// Interlineado de 80% a 200% de 10 en 10; por ejemplo "lh120"
<div class="lh120"></div>

// Referencia "b" negrita
<div class="b"></div>

// Referencia "i" cursiva
<div class="i"></div>

// Referencia "n" normal
<div class="n"></div>

// Referencia "u" subrayado
<div class="u"></div>

Mediante un sistema de referencias, que usaremos como clases en los elementos de nuestro HTML, obtendremos los resultados preestablecidos ahorrándonos una buena cantidad de código CSS.

Via

Román Cortés, es un verdadero crack y nos lo muestra con algunos de los ejemplos de sus efectos que hemos mostrado aquí. Sin duda, aprovecha las propiedades del HTML/CSS para hacer cosas realmente sorprendentes.

(Ver Imagen)

La última ha sido esta Coca Cola CSS, partiendo de otro anterior basado en el mismo principio, que mediante el desplazamiento del scroll se desplaza por nuestra pantalla. Ver el Ejemplo.

Hace casi 1 año que Rob Sandy publicó la versión 0.5 de RMSforms, un framework CSS sencillo y escueto especializado en formularios.

<fieldset>
 <legend></legend>
 <ul class="form [modifier]">
 <li><label class="[label modifier]"></label><input/></li>
 </ul>
 ....
</fieldset>;

El framework, como casi todos los frameworks CSS, se basa en la inclusión de modificaciones en el atributo class de los elementos de nuestro formulario.

En este ejemplo, nos muestra un listado de <input /> que mediante una serie de modificadores nos permitirá estilizar nuestros formularios.

Modificadores

Al estar especializado en formularios, sus opciones son muy limitadas. Los modificadores necesarios para estructurar nuestros formularios son:

• vvv – Vertical <li>, Vertical <label>, Vertical form fields
• hvv – Horizontal <li>, Vertical <label>, Vertical form fields
• hii – Horizontal <li>, Inline <label>, Inline form fields
• hhh – Horizontal <li>, Horizontal <label>, Horizontal form fields
• vii – Vertical <li>, Inline <label>, Inline form fields
• vhh – Vertical <li>, Horizontal <label>, Horizontal form fields

Donde cada letra significa:

• H = Horizonal Block
• V = Vertical Block
• I = Inline

Podemos ver unos ejemplos directamente aquí.

Poner email en texto plano en una página puede llegar a ser un verdadero problema, ya que hay bots que escanean nuestras páginas buscándolas y almacenándolas junto a otras para posteriormente usarlas para enviar SPAM a esas cuentas. Evitar esto no siempre es sencillo, ya que muchos pueden permitirse el lujo de eliminar los emails, otros necesitan ponerlos visibles al público. Por eso, los desarrolladores encuentran formas ingeniosas para sortear este obstáculo.

¿Pero cuanto de efectivo tiene cada una de las formas posibles?

(Ver Imagen)

Como vemos en la imagen, técnicas como construir la dirección con Javascript o introducir comentarios entre los tags no solucionan el problema aunque lo minimizan. Según las pruebas que Tillate.com realizó hace ya más de 1 año, estas son las 3 formas más seguras de usar emails en nuestras páginas.

Cambiar la dirección mediante CSS

Para esta ténica basamos nuestra protección en la propiedad direction del CSS que nos permite especificar la dirección del texto que el usuario verá, como los bots no suelen interpretar el CSS verán el texto en el formato original.

<span>moc.olpmeje@liame</span>
// CSS
span.direction {
 direction:rtl;
 unicode-bidi:bidi-override;
}

Usando display:none de CSS

Otra alternativa, tambien pasando por CSS sería la usar display:none, para colar un texto en nuestra dirección ocultándolo al usuario. De esta forma el email encontrado por el bot no será válido.

<style type="text/css">
  p span.displaynone { display:none; }
</style>
<p>silvanfoobar8@<span class=”displaynone”>null</span>tilllate.com</p>

Encriptación ROT13

Usando el método de encriptación ROT13 y mediante Javascript desencriptamos la dirección y se la mostramos al usuario. Previamente debemos haber encriptado la dirección con alguna herramienta de encriptación (por ejemplo esta) o rotarla directamente desde PHP con str_rot13().

<script type="text/javascript">
document.write("<n uers=\"znvygb:fvyinasbbone10@gvyyyngr.pbz\" ery=\"absbyybj\">".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
</script>silvanfoobar’s Mail</a>

Es cuestión de tiempo que los bots, cada vez más inteligentes, puedan con ellas, pero por el momento es lo mejor que tenemos sin tener que reccurrir a incluir una imágen con nuestro email (que también es muy efectivo). Las 3 técnicas afectarán a la accesibilidad de la página.

Reducisaurus es un servicio desarrollado sobre App Engine y basado en YUI Compressor que nos permite comprimir nuestros y servir nuestros ficheros CSS y JS.

<script src="http://reducisaurus.appspot.com/js?file1=...&url1=...&max-age=604800"></script>
<link rel="stylesheet" href="http://reducisaurus.appspot.com/css?file1=...&url1=...&max-age=604800"></script>

Es posible enviar múltiples ficheros por GET o POST mediante los parámetros fileX para pasar el contenido del fichero o mediante urlX para cargar el fichero remotamente. Si lo necesitamos podemos usar file y url en la misma llamada.

Además dispone de un parámetro extra que nos permite especificar el tiempo de caché (&max-age=XXX) que deseamos que esté disponible nuestro fichero, por defecto tenemos 600 segundos. O desactivar la caché (&expire_urls=0)

Una interesante idea me encuentro por delicious esta mañana. Se trata de JSSS, una implementacion (muy sencilla) para conseguir JSON que genere CSS. La idea es solucionar algunas de las carencias de CSS:

• CSS no es un lenguaje de programación (no hay variables, funciones, no lógica)
• Las propiedades CSS no son cross-browser
• Los frameworks CSS están pensado para trabajar en lado del servidor y necesitamos que se ejecute en el cliente
• Incluir dinámicamente CSS en el DOM no garantiza que las clases CSS sean cross-browser

Por ese motivo, las hojas de estilo JSON pretenden aportar las ventajas de Javascript:

• Todas las propiedades CSS están almacenadas en objetos JSON
• Las propiedades y clases CSS pueden ser manipuladas via Javascript
• Las propiedades y clases pueden ser dinámicas en tiempo de ejecución
• Todo el sistema de plantillas CSS es gestionado desde el cliente

Código (jQuery)

function parseCSS(id,css){
  for(style in css){
    if(typeof css[style] == 'object'){parseCSS(style,css[style]);
    else{$(id).css(style,css[style]);}
  }
};

Ejemplo de uso

var drip = {};
drip.toolbar = {};

drip.toolbar.css = {
  height : "40px",
  width : "89px",
  position :"fixed",
  right : 50,
  bottom : 0,
  overflow : "hidden",
  cursor : "pointer",
  color : "#FEFEFE",
  "background-color": "#932c2c",
  "text-align" : "left",
  "font-family" : "Arial, Helvetica, sans-serif",
  "font-size" : "12px",

  "#drip-toolbar-button" : {
	height : "30px",
	width : "50px",
	cursor : "pointer",
  },

  ".links" : {
	  color : "#FEFEFE"
  }

};
// Parseamos JSSS
parseCSS('#drip-toolbar', drip.toolbar.css);

Opinión

La idea es interesante, y lleva más de 10 años dando vueltas por Internet, es cierto que se permite un mayor control del CSS en el lado del cliente, pero depende completamente de que este tenga javascript o lo esté ejecutando en este momento.

Román Cortes nos vuelve a mostrar el potencial de CSS, primero fué un Homer Simpson mediante CSS Art y ahora nos muestras Las Meninas de Velázquez como nunca las habíamos visto, en 3D con un efecto similar al ofrecidor por Parallax pero sin Javascript

(Ver Imagen)

Via / Demo

Emile es una de esas maravillas que con tan solo 55 líneas nos permite disponer de efectos CSS con Javascript en nuestras aplicaciones.

<!-- Cargamos la librería -->
script src="emile.js"></script>

<!-- Definimos los elementos -->
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

<!-- definimos los efectos -->
<script>
// Aplicamos el efecto al elemento #test2
  emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
    duration: 500,
    after: function(){
      // Aplicamos el efecto al elemento #test1
      emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
        duration: 4000, easing: bounce
      });
    }
  });
  // Función que cambia la posición del elemento
  function bounce(pos) {
    if (pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if (pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
  }
</script>

El proyecto lo podeis descargar desde github.com y ver el ejemplo de uso que nos incluye.

Isra, nos muestra una librería en PHP que ha desarrollado para ayudarnos a trabajar con CSS de una forma muy cómoda y profesional.

$styles = new CssDispatcher; 

$styles->add(new Css('ie-hacks.css.php'));
$styles->add(new Css('general.css.php')); 

$styles->render();

CssDispatcher, se encarga de procesar los ficheros .css permitiendo así que podamos incluir código PHP en nuestras hojas de estilos, además de unir y comprimir todas las hojas de estilo que necesitemos en nuestro proyecto.

$styles = new CssDispatcher; 

// Este CSS solo se enviará cuando sea Internet Explorer 6
$styles->add(new Css('ie-hacks.css.php', Css::UA_IE6));
$styles->add(new Css('general.css.php')); 

$styles->render();

Además, nos permite condicionar nuestro CSS dependiendo del navegador que nos visita. De esta forma, podemos cargar un fichero, o no, dependiendo si el navegador que nos visita es el especificado previamente.