francisco arenas

hace unos días @sinklation preguntaba cual sería el mejor plugin para mostrar código en wordpress, ya que ambos somos desarrolladores y tenemos ganas de mostrarle al mundo las cosas que desarrollamos. Es en estos casos cuando nuestro amigo bligoo no nos acompaña lamentablemente, ya que su editor de textos es realmente malo (no me odien, mi blog corporativo está sobre bligoo).

Hasta ahora el mejor plugin de código que he encontrado es el que nos regala flashtexteditor.com. es realmente bueno, si bien, tampoco valida su código con respecto a la w3c, debido a su forma de inclusión, me imagino que nuestro amigo @sinklation podrá modificar el php de inclusión del visualizador de código y agregarle la opción de funcionar vía SWFObject, el estándar de facto para la inclusión de flash válido para la w3c.

Yo mientras no esté funcionando el visualizador mediante swfobject, me quedo con el plugin para ver código de google, el cual está bien también, de hecho es el que tengo instalado en estos momentos en este sitio.

Uno de los primeros pasos al pensar en desarrollar un framework de css que sea capaz de resolver varios diseños, es pensar en cual será el ancho máximo de tu página web. Si bien podríamos hacer un framework como el de Yahoo! y preocuparnos también de las páginas líquidas, no creo que sea ahora el momento indicado de hacerlo, ya que tenemos que partir de una base menos compleja.

Cuando te enfrentas a desarrollo de grillas como la de blueprintCSS, te das cuenta que ellos pensaron la grilla a 950px, lo cual es bueno ya que el máximo ancho que da una pantalla de 1024px es aproximadamente 970, pero en este razonamiento perdemos 20px. Si bien nadie diseña páginas que vayan de lado a lado y estén pegadas a los bordes, considero que aprovechar el máximo de espacio es una solución ideal ya que nuestras composiciones utilizarán mejor el espacio. Hace unos días, mi buen amigo Ryan Thrash, uno de los lead developers de modx y dueño de collabpad, me comentó de esta nueva grilla que utiliza 960 pixeles como base, lo que me pareció interesante, además es mucho más lightweight que blueprintCSS.

Ambas ideas me han llamado la atención, yo ya he colaborado con blueprint y he desarrollado varios proyectos utilizando su increíble simpleza, pero esos 10 pixeles de más me llaman la atención jeje. Los invito a revisar los sitios de blueprintCSS y de 960 pixeles para que me cuenten que opinan y si alguien tiene alguna experiencia con alguno de ellos me comente que tal y cómo funcionan

Hoy mientras trabajaba en mi nuevo proyecto con AS3, surgió la necesidad de crear un fondo tileado (fondo que se repite desde un “tile”), como estamos trabajando con AS3, desarrollé una simple pero efectiva clase que resuelve este problema:

package cl.dospuntocero.utilities{

import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLRequest;

public class tiledBg extends MovieClip {

public var loader:Loader = new Loader();

public function tiledBg(forTile:String) {
addChild(loader);
loader.load(new URLRequest(forTile));
loader.visible = false;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBackgroundLoaded);
}

private function onBackgroundLoaded(event:Event):void {
var tile:BitmapData = new BitmapData(event.target.content.width, event.target.content.height);
tile.draw(event.target.content);

graphics.beginBitmapFill(tile, null, true,true);
graphics.lineTo(stage.stageWidth, 0);
graphics.lineTo(stage.stageWidth, stage.stageHeight);
graphics.lineTo(0, stage.stageHeight);
graphics.lineTo(0, 0);
graphics.endFill();
}
}
}

¿Cómo utilizarla? simplemente tienes que agregar lo siguiente en la clase principal de tu película:

package
{
import flash.display.MovieClip;
import cl.dospuntocero.utilities.tiledBg;
public class main extends MovieClip
{
public function main()
{
super();
//creamos una nueva variable del tipo tiledBg y luego la agregamos a la escena
var tiler:tiledBg = new tiledBg("bg.png")
addChild(tiler)
}
}
}

Espero les sea de utilidad!
adicionalmente les dejo los archivos para que vean un ejemplo funcionando

Resetear nuestro CSS es una muy buena práctica debido a que todos los browsers poseen atributos CSS predeterminados, los cuales NO SON iguales en todos los browsers (adivinen cual es el browser que nos dará más dolores de cabeza por este motivo)

Es por ello que es importantísimo al iniciar un proyecto web tener a mano un reseteador de css.

Existen variados sabores, unos más toscos que otros, a continuación describiré las tecnicas más comunes y las mejores prácticas:

la peor forma de resetear el CSS:

* {
    padding:0;
    margin:0;
}

¿porqué es la peor?

Porque es el reset más limitado. Al utilizar el asterisco (o selector universal), estamos eliminando de todos los tags del html el padding y el margin, esto destroza una gran cantidad de información que es necesaria para el correcto funcionamiento del html, los tags más afectados son las listas y títulos. Para volver a la normalidad, tenemos que redefinir cada uno de los tags de html. Si bien esto iguala los browsers IE, Firefox, Safari y otros, resetear el CSS de esta manera es demasiado limitado. Necesitamos un reset más avanzado.

El reset según Yahoo!

El sistema de reseteo de Yahoo! se trata en una normalización de código un tanto agresiva o como llamé en la presentación del barcamp “un reset devastador”. Los siguientes objetivos son logrados utilizando este código

1. Margin y padding a cero
2. Elimina estilo visual de las lista (ol, ul, dl)
3. Todas las fuentes son seteadas al 100% de base
4. Font-weight y Font-Style son normalizados
5. Mejor (aunque todavía incompleta) herencia en las fuentes de los formularios
6. La reducción de la altura de la línea de interrupción y sub sup.

El problema principal es que elimina la diferenciación entre tags, solo los deja iguales, pero no puedes diferenciar un h1 de un h5 o inclusive de un li

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.1
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}

La versión de Eric Meyer (actualizado al 15 de enero 2008)

Hasta ahora es uno de los resets de CSS más elegantes que conozco, Eric Meyer y su reset, no eliminan todo el formato, sino que modifica lo necesario para igualar los browsers y se preocupa de normalizar a una gran cantidad de tags y citándolo de alguna forma, “si no lo normalizo, es porque no debería aparecer en el markup”:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Concluyendo

¿Cual es mi recomendación? Utilicen el CSS de Meyer, es una gran opción. Si bien hay otras no nombradas acá, como la de tripoli por ejemplo (donde la filosofía es agregar todos los tags y resetearlos, incluso los que están desechados), como experiencia propia, puedo dar fe que la alternativa de meyer funciona realmente bien y acaba con todos los problemas del box model de IE

Estimados, en estos momentos estoy armando este template para wordpress desde cero, así que me demoraré un poco en tenerlo listo, pero la gracia principal es que está basado en mi framework css, el cual será liberado durante las próximas semanas para creación ágil de templates para cualquier CMS.

Por mientras y a pedido de @michelson y @runsaber subiré en este post la presentación sobre frameworks css que compartí con los asistentes al barcamp santiago

Está basado inicialmente en BlueprintCSS, un gran pilar de desarrollo. Mi gran aporte es el archivo html que soportará las páginas, clases semánticas para secciones comunes (header, main, sidebar, footer, etc) y algunos plugins. Si se dan cuenta, blueprint, no provee de estas cosas por defecto, pero es un muy poderoso conjunto de clases de CSS.

Agregaré información en los siguientes días. A continuación dejo la presentación de los frameworks CSS. (slideshare lleva 5 horas y aún no termina…)