Aqui esta la tercera entrega de quick notes en esta ocación el tema es 5 notas sobre diseño web.

Loge Ease

No podias dejar pasar esta excelente utilidad que ya fue publicada en infinidad de blogs, es logo ease es un excelente sitio donde podras crear el logo de tu empresa gratis con un acabado muy profesional.

CSS, Clearing floats

El uso de multiples columnas usando capas ha hecho que el uso de la propiedad float de CSS sea muy utilizado sin embargo existen alternativas al float, mas usables ya que al usar float si utilizas mas elementos necesitaras utilizar la propiedad clear, aqui un ejemplo: Como usar la propiedad float de CSS

ScrnShots

Es un excelente sitio donde puedes compartir gratuitamente las capturas de pantalla que saques y que te hayan inspirado por alguna razon, ya sea un sitio web o una captura de tu escritorio, en fin el slogan del sitio lo dice todo: Share your inspiration.

Aqui les dejo algunos tags de capturas que interesantes que encontre en el sitio: design, georgia y navigation

50 blogs con diseños excelentes

Otra de Smashing magazine, es una recopilación de 50 blogs con excelentes diseños de diferentes estilos grunge, vectores, minimalistas, etc..

WPPAL, editor de diseños para wordpress

WPPal es un sitio que posee un poderoso editor de diseños para wordpress completamente online, es gratuito, actualmente tienen 6 diseños los cuales puedes modificar a tu gusto y posteriormente descargarlos completamente gratis.

Espero y les guste, ya ando preparando la 4 entrega e igual viene sobre diseño web.

La semana pasada en la segunda entrega de Quick Tips: sobre desarrollo web, hacíamos referencia a un articulo de Ajaxian sobre las variables CSS y su posible inclusión en la siguiente versión de este lenguaje pero eso esta aun en veremos.

Mientras tanto nosotros ya podemos gustar de la bendición de los que son las variables CSS usando PHP, pero como? sigan estos simples pasos:

Creamos nuestros archivo CSS con nombre “default.css”

/* globals */
*       { margin:0; padding:0; }
body    { color:$body_text_color; font-size:$body_font_size; }

Ahora viene el codigo php que va aplicar los valores de las variables, en el archivo llamado “stylesheet.php”.

/* get the stylesheet */
$stylesheet = @is_file($_GET['stylesheet']) && strtolower(substr(strrchr($file_name,’.'),1)) == ‘css’ ? $_GET['stylesheet'] : ‘default.css’;

/* set the header information */
//will be output as css
header(’Content-type: text/css’);
//set an expiration date
$days_to_cache = 10;
header(’Expires: ‘.gmdate(’D, d M Y H:i:s’,time() + (60 * 60 * 24 * $days_to_cache)).’ GMT’);

/* set the dynamic information */
//default css variable information
$default = array(
	‘body_font_size’ => ‘16px’,
	‘body_text_color’ => ‘#00f’
);

//red css variable information
$red = array(
	‘body_font_size’ => ‘10px’,
	‘body_text_color’ => ‘#f00′
);

/* extract the propery array’s information */
extract($_GET['theme'] && ${$_GET['theme']} ? ${$_GET['theme']} : $default);

/* load in the stylesheet */
$content = preg_replace(’/$([w]+)/e’,'$0′,@file_get_contents($stylesheet));

/* spit it out */
echo $content;

Eso es todo ahora lo que cambia en nuestro código HTML es cuando hablamos a la hoja de estilos en vez de pedir el default.css vamos a hablar al “stylesheet.php”, ejemplo:

<link rel="stylesheet" type="text/css" href="/stylesheet.php">

Eso es todo el resultado de nuestro CSS debe ser el siguiente:

/* globals */
*		{ margin:0; padding:0; }
body		{ color:#00f; font-size:16px; }

Nota: El archivo default.css jamas se va a sobreescribir con los valores de las variables, simplemente cuando hablamos al stylesheet.php este procesa el CSS reemplazando las variables por valores y se lo devuelve al servidor ya con valores para que sea interpretado, sin haber modificado el archivo CSS.

Via: davidwalsh, CSS Variables using PHP (en ingles)

Ya rapidito y en caliente el segundo volumen de Quick Notes y de nuevo dirigido a desarrolladores web, aqui van:

Variables para CSS

Con esto he soñado, variables para CSS como ven la posibilidad de poder definir variables en los CSS, creo seria un excelente solución para crear múltiples templates “comerciales” como las hamburguesas solo cambiándoles el color, usando variables solo tendrías que cambiar el valor de la variable, pero aun esta en propuesta.

World Can Code

Es una excelente herramienta web para poder practicar programación en diversos lenguajes como C++, HTML, JavaScript, Perl, Basic, Pascal, etc. también podrías correr tu aplicación y ver los resultados ahi mismo.

51 Tutoriales y ejemplos de jQuery

Si estas empezando a desarrollar sobre este excelente Framework para Javascript este enlace te viene como anillo al dedo son una lista de tutoriales con ejemplos de jQuery, entre los tutoriales estan: Turcos para CSS, validación de formularios, jquery para diseñadores.

MoreCSS

Es un script en JavaScript con el cual podrias ampliar las posibilidades de los CSS y asi usar esas propiedades CSS que solo puedes usar en Opera y Firefox en cualquier otro navegador sin estar matándote con Hacks en tu código CSS.

Control de versiones con Subversion

Subversion es el reemplazo de los famosos CVS y es utilizado por equipos de desarrollo que estan todos programando sobre un mismo proyecto, para mantener un control de lo que se crea y modifica en el código, es excelente creanme, “Control de versiones con subversion” es un libro de O’Relly Media que pueden leer gratis y en linea o descargarlo como PDF el unico problema es que esta en Ingles, tambien lo pueden comprar.

Bueno espero estos nuevos enlaces les sirvan…

Los que ya estan muy metidos en el manejo de los CSS sabran que este no es unicamente para ponerle color y negritas a las letras sus usos pueden ser infinitos.

Una muestra de eso es la excelente lista que han hecho en Noupe donde nos muestra los multiples usos que les podemos dar al CSS, por ej.

• Galerías
• Menus
• Paginación
• Efectos
• Formularios
• Formatos, etc…

Enlace: Using CSS to Do Anything

Me he encontrado con un excelente enlace, que lista todas las propiedades de los CSS según su versión, una excelente fuente de recursos de CSS si no conoces todas las propiedades y no sabes si seran compatibles con la version del CSS de tu navegador.

Enlace: CSS Properties

Excelente el tutorial que publican en CSS Globe, para poder crear barras de porcentaje animadas usando CSS, el concepto lo puedes ver en la imagen y en el siguiente enlace un ejemplo.

Ejemplo, Barras de porcentaje animadas

Tutorial, Barras de porcentaje animadas

Free CSS Templates es un excelente sitio donde te encontraras con una excelente colección de plantillas CSS para descargar completamente gratis.

No diseños no lo confundas, las plantillas o templates son la base para incrustar tu diseño algo así como los CSS Grids, pero mas sencillo.

Enlace: Free CSS Templates