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

Aunque este año no se ha promocionado y parece que el precursor no lo está haciendo, durante todo el día de hoy (48 horas para abarcar todo el mundo) es el CSS Naked Day.

Hace ya un par de años que dejé un código que elimina las CSS del HTML todo el día 9 de Abril de cada año. Por eso se está viendo la web «desnuda», sin estilos CSS. Todo esto es para reivindicar la importancia de los estándares web.

Continua —>

Bueno, parece que poco a poco los dispositivos táctiles comienzan a invadirnos. Algo que era de esperar, después de la aceptación que tanto el iPhone como dispositivos Android están teniendo en el mercado móvil. Poco a poco estas herramientas empezarán a estar sobre los sofás de cualquier geek.

Por este motivo no parece descabellado revisar un poco nuestro código para que nuestras páginas se adapten a la nueva resolución de pantalla que el iPad usará.

¿Que necesitamos saber?

Apple, como ya hizo con su iPhone, nos ha facilitado una serie de recomendaciones e información referente al iPad para que los desarrolladores web no tengamos muchos problemas en la adaptación.

Viewport

Si para la versión de tu web para el iPhone indicaste un viewport con un valor fijo en pixels tendrás que cambiarlo ya que la nueva versión dispone de una variable que indica el tamaño del dispositivo y nos evita tener que intuirlo o detectarlo nosotros mismos.

// Antes
<meta name="viewport" content="width=320" /> <!--- WRONG //--->

// Ahora
<meta name="viewport" content="width=device-width" />

Solucionando posiciones fixed CSS

El conocido position:fixed; no funciona de igual forma en Safari, iPhone e iPad por ese motivo debemos tener especial cuidado al usarlo.

En Safari (sobre OSX y Windows) siempre mantiene el elemento fixed en pantalla, sobre iPhone e iPad esto no ocurre ya que el usuario puede ampliar o reducir la página haciendo que el elemento salga del foco visible. El posicionamiento fijo usa el visor como bloque de contención para estos elementos fixed.

En Safari, al redimensionar la pantalla todo se redimensiona, en el iPhone/iPad no podemos reducir la pantalla, únicamente podemos atacar al contenido y este si puede crecer o decrecer.

User Agent

El nuevo User-Agent que tendremos que conocer será el siguiente:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

¿Como testear con Safari en nuestro sobremesa?

Usando el anterior User-Agent, podemos especificarle a Safari que nos identifique con si de un iPad se tratara. Simplemente tendremos que acceder al menú Desarrollo  (sino lo tenemos, lo activamos desde Preferencias > Advanzado > «Mostrar el menú Desarrollo en la barra de menús») e indicamos el user-agent del iPad en Desarrollo > Agente de usuario > Otra…

(Ver Imagen)

Resultado

Usando esta configuración en Safari podemos disfrutar de la versión iPad en nuestro gMail, por ahora solo en Safari, no he probado con ningún plugin que cambie el User-Agent de Firefox.

(Ver Imagen)

Ya no hay excusas 😀

Via Twitter descubro que Firefox 3.7 (la versión pre-alpha2) ya dispone de CSS Transtions. El sistema con el cual mediante sentencias CSS podemos aplicar movimiento a elementos HTML de nuestra página. Esta funcionalidad, disponible en WebKit desde hace ya bastante tiempo, nos permite realizar tareas que actualmente se realizan mediante Javascript, en la capa de funcionalidad, en la capa de diseño, algo que ha levantado dispares opiniones al respecto.

// HTML
<ul>
 <li id="long1">Long, gradual transition...</li>
 <li id="fast1">Very fast transition...</li>
 <li id="delay1">Long transition with a 2-second delay...</li>
 <li id="easeout">Using ease-out timing...</li>
 <li id="linear">Using linear timing...</li>
 <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

// CSS
#delay1 {
 position: relative;
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 14px;
}

#delay1:hover {
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 36px;
}

Podemos descargar la última versión de desarrollo de Firefox y probarlas en nuestras manos usándo la documentación que Mozilla nos ha preparado.

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.