Categories
CSS3 Herramientas html5

Sitios bonitos y elegantes con Gridless

Gridless es un framework HTML5 y CSS3 que permite hacer sitios web simples y elegantes usando una hermosa tipografía.

Gridless

El framework no usa grids para su funcionamiento, lo que si hace es "normalizar" las reglas CSS en vez de resetearlas. También añade estilos de impresión y

Funciona en todos los navegadores incluidos IE6.

Enlace: Gridless | Demo | Código fuente

Visto en: WebResourcesDepot

Categories
Diseño Humor Trucos Windows

Un wallpaper te ayuda a ordenar tus íconos en el escritorio de Windows

Creo que todos somos desordenados con el escritorio de Windows, sin embargo podríamos poner un poco de orden si hacemos esto:

Escritorio ordenado

No está nada mal ¿verdad? Risa

Visto en: Aeromental

Categories
Seguridad WordPress

Metadatos en Post: Eligiendo nombres apropiados de claves meta para tus plugins o themes

En la última actualización de seguridad de Worpdress se ha añadido un importante cambio que, posiblemente los desarrolladores de themes o plugins deban tener en cuenta. En el anuncio del lanzamiento no se explica en detalle los arreglos de seguridad. En este post trataré de describir brevemente estos cambios.

El 2007, publiqué un aviso de seguridad; explicaba como se permitía a usuarios no autorizados subir y ejecutar código PHP. El equipo de WordPress solucionó este problema protegiendo éstos para que no sean manipulados por el usuario. Con los años se han añadido elementos de metadatos internos y la solución anterior ya no estaba al día.

WordPress 3.1.3 añade dos nuevas funciones llamadas is_protected_meta y sanitize_meta. Éstos son usados para proteger todos los meta valores que son cambiados por métodos no standard. Como ustedes ya saben, WordPress usa claves que empiezan con un guión bajo. Por tanto, si están usando meta valores personalizados, consideren poner un guión bajo a estos para que usen la protección que es dada por el core, y también para sanitizar los datos antes de guardar y escapar antes de enviar los datos al navegador. De otro modo, incluso si se valida y sanitiza la entrada del usuario cuando se guarda, pueden tener problemas si se asume que tienen datos seguros que vienen del navegador. Estos valores pueen ser modificados usando por ejemplo admin-ajax.php.

Traducido al vuelo de: WordPress Post Metadata Security: Choosing proper post meta key names for your plugins or themes

Categories
CSS Herramientas JavaScript

Usa CSS dinamicamente con “{less}”

Muchas veces al momento de escribir código CSS, hemos tenido la sensación de: ¿Por qué no puedo usar variables?, ¡Que bueno sería usar alguna función!. Ahora puedes hacerlo con {less}.

{less} modifica el comportamiento de CSS para que puedas usar variables, funciones, operaciones y mezclar estos para escribir código más rápidamente y usando tus talentos de programador.

El resultado es mostrado en el navegador como código CSS simple y funciona con todos los navegadores, también puede ser usado de lado del cliente y del servidor. Aquí algunos ejemplos:

Variables

Con {less}

CSS:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
 

Resultado

CSS:

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}
 

Mezclas

Con {less}

CSS:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Resultado

CSS:

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Funciones y operaciones

Con {less}

CSS:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Resultado

CSS:

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

y muchos otros ejemplos...

El sitio tiene extensa documentación y su uso puede ahorrarnos algunas líneas menos.

Enlace y descarga: {less}

Documentación: {less} docs

Categories
CSS HTML Trucos Utilidades

Quitando espacios innecesarios en archivos usando Dreamweaver

Desde siempre trabajo con Dreamweaver para editar mis archivos. A veces sucede que cuando descargo un archivo vía FTP, lo que obtengo es algo como esto:

Código HTML con líneas de más

o esto:

Código PHP con líneas de más

Para quitar estos espacios podemos hacer lo siguiente (usando Dreamweaver):

Si el archivo contiene HTML o CSS:

  1. Nos vamos al menú y escogemos Comandos –> Aplicar formato de origen:

    Aplicando formato de origen

  2. Fin

Resultado:

Resultado después de aplicar el comando

Si el archivo es cualquier otro tipo de lenguaje:

  1. Abrimos el diálogo de búsqueda y reemplazo presionando Ctrl + F
  2. Chequeamos la opción “Utilizar expresión regular
  3. En el cuadro “Buscar” escribimos la siguiente expresión: [\n\r]{2,}
  4. En el cuadro “Reemplazar” escribimos: \n
  5. Click al botón “Reemp. todos”.

    Quitando espacios innecesarios en archivos usando Dreamweaver

  6. Esperamos un momento
  7. Fin

Resultado:

Resultado despúes de quitar líneas innecesarias

Como vemos los espacios desaparecieron, sin embargo a veces es bueno revisar un poco más.

Esta utilidad aunque simple y talvez conocida nos puede ahorrar algún trabajito extra. Si tienes algún otro pequeño truco, compártelo.