$styles = new CssDispatcher; 

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

$styles->render();

$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();

Artículos relacionados

• Aplicación en Ajax increible!!
• Usa youtube para aprender photoshop
• Gráficas con PHP + CSS
• Guia de enlaces de la A List Apart
• xDebug, debuguea tu PHP como un profesional

(Ver Imagen)

¿Que dice Google que és?

Ya que estamos, añadimos más opciones

Waves enriquecidos

(Ver Imagen)

Anidamiento

(Ver Imagen)

Modificar el contenido ya escrito en un Wave

(Ver Imagen)

Escritura en tiempo real

(Ver Imagen)

Gadgets

(Ver Imagen)

Mi opinión

'El resultado de una orgía entre un Foro, el MSN y un Wiki'

Aclaración

Artículos relacionados

• Google apuesta por el HTML5 y lo hace a lo grande
• Google Wave, primeras impresiones
• Frase #30
• Google Ajax Search API
• Shuttle, para Wordpress

Artículos relacionados

• 55 razones para diseñar en XHTML/CSS
• Técnicas WCAG 2.0 por Olga Carreras
• Accesible News Slider, un slider que cumple las reglas del WCAG1.0
• Como y por que pasa de HTML a XHTML
• ¿Por que programar es igual que el sexo?

Artículos relacionados

• Smarty, CheatSheet
• Flexible Uploads para Wordpress
• Motor de plantillas
• 33 plantillas para Wordpress
• Lista de Motores de Plantillas en PHP

(Ver Imagen)

// Ejemplo de uso:
<link href="/scaffold/index.php?request=/css/master.css" />

Funcionalidades

Constantes

// Definición
@constants {
 text_color:#555;
 color_1:#999;
}

// Uso
body
{
 color:!text_color;
}

Mixins

// Declaración
=mixin-name(!param, !param2 = 0){
 color:!param;
 border: !param2 solid #eee;
}

// Uso
#content{
 +mixin-name(#eee);

 padding:10px;
 border:1px solid #eee;
}

Selectores anidados

// Uso
#id{
 border:1px;

 h1,h2,h3
 {
 color:red;

 a div, blockquote, mark
 {
 margin:10px;
 }

 &.span
 {
 padding:10px;
 }
 }
}

// Uso
a{
 color:#fff;
 &:hover { text-decoration:underline; }
}

// Resultado
a { color:#fff; }
a:hover { text-decoration:underline; }

Expresiones

// Uso
#id{
 padding:#[10*4]px;
}

Instalación

1. Descargamos el fichero.
2. Copiamos el fichero scaffold/ en nuestro directorio de CSS
3. Configuramos el fichero scaffold/config.php
4. Añadimos permisos de escritura a la carpeta scaffold/cache/
5. Reemplazamos las llamadas a  nuestros CSSs

// Antes
<link href="screen.css" />

// Con CSScaffold
<link href="scaffold/index.php?request=screen.css" />

// Con CSScaffold sin caché
<link href="scaffold/index.php?request=screen.css&recache" />

Artículos relacionados

• Javascript Framework Matrix, compara los diferentes frameworks a la vez
• Todo lo que necesitas sobre jQuery
• 10 frameworks javascript que debes conocer
• Qcodo, Framework de desarrollo en PHP
• Frameworks CSS más usados

(Ver Imagen) Yo llevo ya 225 días (desde el 25 de febrero) con los CSS desactivados para Internet Explorer 6 y la verdad es que las gráficas que os pongo a continuación muestran la tendencia.

Internet Explorer 6

(Ver Imagen)

Internet Explorer 8

(Ver Imagen) Esto no quiere decir que la iniciativa sea la causante, ya que Internet Explorer 8 pasó a ser actualizado automáticamente, la salida de Chrome en más plataformas (con todo el apoyo que Google le está dando) o la aparición de Google Chrome Frame han influido directamente en el descenso mundial de Internet Explorer 6 (y demás versiones en general). Así que si te quieres apuntar a la iniciativa, tienes hasta el Lunes!! :D

Artículos relacionados

• Sirve el theme por defecto de Wordpress a Internet Explorer 6
• NOIE6Day, 18 de octubre día sin Internet Explorer 6
• ie6-upgrade-warning, alerta bestia para que tus usuarios se actualizen
• Internet Explorer 8 más rápido que Firefox y Chrome
• ie6fixer, aplicación que añade hacks por ti

• Mi usuario de Twitter: @aNieto2k
• Solo los links que publico: http://search.twitter.com/search?q=bit.ly+from%3Aanieto2k

Artículos relacionados

• Enlaces que parecen botones y botones que parecen enlaces
• Recopilación de enlaces rápidos
• Más de 500 enlaces sobre CSS
• Más de 30 enlaces sobre Accesibilidad Web
• Mejora tus enlaces con :hover y CSS

<script type="text/javascript" src="mootoolsCore.js"></script>
<script type="text/javascript" src="MilkChart.js"></script>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var chart = new MilkChart.Pie(table[, options]);
    })
</script>

<!-- Table structure -->
<table id="chart">
    <thead>
        <tr>
            <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>8.3</td><td>70</td><td>10.3</td><td>100</td></tr>
        <tr><td>8.6</td><td>65</td><td>10.3</td><td>125</td></tr>
        <tr><td>8.8</td><td>63</td><td>10.2</td><td>106</td></tr>
        <tr><td>10.5</td><td>72</td><td>16.4</td><td>162</td></tr>
        <tr><td>11.1</td><td>80</td><td>22.6</td><td>89</td></tr>

    </tbody>
    <tfoot>
        <tr>
            <td>Row 1</td><td>Row 2</td><td>Row 3</td><td>Row 4</td><td>Row 5</td>
        </tr>
    </tfoot>
</table>

(Ver Imagen)

Tipos soportados

• Column
• Bar
• Line
• Scatter
• Pie

// Modo Columna
var chart = new MilkChart.Column(table, [options]);

// Modo Barras
var chart = new MilkChart.Bar(table, [options]);

// Modo línea
var chart = new MilkChart.Line(table, [options]);

// Modo puntos
var chart = new MilkChart.Scatter(table, [options]);

// Modo pastel
var chart = new MilkChart.Pie(table, [options]);

Opciones disponibles

• width - (int: Default a 400) Ancho de la gráfica (en px)
• height - (int: Default a 280) Alto de la gráfica (en px)
• padding - (int: Default a 12) Padding (en px)
• font - (string: Default a "Verdana") Fuente de las etiquetas
• fontColor - (string: Default a #000000) Color de las etiquetas
• fontSize - (int: Default a 10) Tamaño de las etiquetas (en pt)
• background - (string: Default a #ffffff) Color de fondo de la gráfica
• chartLineColor - (string: Default a #333333) Color de las líneas
• chartLineWeight - (int: Default a 1) Ancho de las líneas (en px)
• border - (bool: Default a true) Dibuja un borde a la gráfica
• borderWeight - (int: Default a 1) Tamaño del borde (en px)
• borderColor - (string: Default a #333333) Border color
• titleSize - (int: Default a 18) Tamaño del título (en pt)
• titleFont - (string: Default a "Verdana") Fuente usada para el título
• titleColor - (string: Default a #000000) Color de la fuente del título
• showRowNames - (bool: Default a true) Muestra los labels de las columnas en los ejes
• showValues - (bool: Default a true) Muestra los valores en los ejex
• showKey - (bool: Default a true) Muestra los valores de las columnas
• useZero - (bool: Default a true) Siempre usa 0 como menos valor
• useFooter - (bool: Default a true) Coge los nombres de las columnas del footer

Artículos relacionados

• Crea gráficas con Javascript
• Gráficas con PHP + CSS
• GStats, estadísticas globales de los usuarios de internet
• Otra librería para trabajar con Ajax
• Chronoscope, las gráficas de GWT

Artículos relacionados

• Firefox 3.1 incorporará @font-face
• @font-face en Internet Explorer
• Detector de Tsunamis para el movil
• Insertar fuentes en tu página web
• typeface.js, esperando font-face con javascript

function log(code, str){
 var img = new Image();
 img.src = log.php?code=' + encodeURIComponent(code) + '&str=' + encodeURIComponent(str);
}
// Uso
log(1,"Esto es un error");

Gestionando errores en nuestras aplicación

Ciclo de vida de un error

(Ver Imagen) Como vemos en la imagen, de abajo a arriba nos encontramos el ciclo de vida desde que se ejecuta un error hasta que llega al navegador. Partiendo de esta imagen podemos definir una serie de acciones para controlar el error.

try...catch()

try {
 ....
} catch(ex){

 // X == tu código de error
 // ex.message == Mensaje de error devuelto por catch()
 log(X, ex.message); // Guardamos el log() en el servidor
}

window.onerror

window.onerror = function (msg, url, line){
 log(X, msg);
 return true; // Evitamos llegar al navegador
}

Conclusión

Artículos relacionados

• Barras para estadísticas con CSS
• 7 consejos para desarrollar Javascript de calidad
• Temporizador en javascript
• Simple Life, otro theme para Windows XP
• Sidebar Widgets, lo nuevo de Wordpress