|
domingo, 05 de agosto de 2007 |
|
Blueprint es un framework CSS diseñado para ahorrar tiempo, facilitando la creación de la maquetación, aspectos tipográficos y de impresión en nuestro sitio. Su licencia es la MIT y al ser un desarrollo muy reciente, aun no ha sido testeado en todos los navegadores [ Descargar ] Básicamente el corazón del framework son cinco estilos en cascada, cada uno con un objetivo diferente: - screen.css: Su cometido es cargar los estilos guardados en la carpeta 'lib'. Además podemos configurar para mostrar una imagen grilla que facilite la maquetación.
- print.css: Posee algunas reglas que mejorar la vista de impresión.
- lib/grid.css: Es el estilo en cascada que permite crear la maquetación que queramos, desde simples hasta complejas con varias columnas y secciones.
- lib/typography.css: Establece las reglas tipográficas que mostrará el sitio (tamaño, fuente, color, etc). Tal vez sea el estilo en cascada que más modificaciones va a recibir, ya que este aspecto va a depender de cada diseño.
- lib/reset.css: Resetea valores de margenes, padding, bordes, etc para que todos los navegadores muestren el contenido de la misma forma.
Ejemplo de utilización
Vamos a crear un ejemplo de maquetación:
El framework por default viene con reglas para crear una grilla de 960px, que puede ser dividida en 14 columnas de 50px y 20px de margen entre cada una. Pero en verdad nosotros podemos dividir la grilla como queramos .
1 - Lo primero que hacemos es incorporar a screen.css y print.css al sitio:
HTML <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
2 - Luego a la maquetación la comenzamos con un bloque asigandole la clase 'container':
HTML <body> <div class="container"> </div> </body>
3 - Lo siguiente será crear las secciones que necesitemos. Si miran un poco a grid.css van a ver una serie de clases con el nombre de span-X: CSS .span-1 { width: 50px; } .span-2 { width: 120px; } .span-3 { width: 190px; } .span-4 { width: 260px; } .span-5 { width: 330px; } .span-6 { width: 400px; } .span-7 { width: 470px; } .span-8 { width: 540px; } .span-9 { width: 610px; } .span-10 { width: 680px; } .span-11 { width: 750px; } .span-12 { width: 820px; } .span-13 { width: 890px; } .span-14 { width: 960px; margin: 0; }
Utilizando estas clases vamos a crear nuestras columnas. Empecemos por el header: HTML <div class="column span-14"> <h1>Este es el header </h1> </div> </body> Para crear una sola columna siempre se le debe asignar al bloque las clases 'column span-X'. En esta oportunidad, como queremos que el header ocupe todo el ancho, se utilizó a span-14, que posee 960px de anchura. Luego agregamos una linea divisora. 4 - En caso de querer varias columnas, la estructura es la misma, solo que a la primera columna se le suma la clase 'first' y a la ultima columna la clase 'last'. Sigamos con las columnas de contenido principal, columna 2 y columna 3: HTML <div class="column span-14"> <h1>Este es el header </h1> </div> <div class="column span-8 first"> <h2>Contenido Principal </h2> </div> <div class="column span-4"> </div> <div class="column span-2 last"> </div> </div> </body> A la columna principal se le asignó una anchura de 540px y al ser la primera se le agregó la clase 'first'. Por otro lado la segunda columna tiene un ancho de 260px. La tercera columna al ser la ultima se le agregó la clase 'last' y un ancho de 120px.
5 - De la misma forma que hicimos el header realizamos el footer:
HTML <div class="column span-14"> <h1>Este es el header </h1> </div> <div class="column span-8 first"> <h2>Contenido Principal </h2> </div> <div class="column span-4"> </div> <div class="column span-2 last"> </div> <div class="column span-14"> <h4>Este es el Footer </h4> </div> </div> </body> Ver ejemplo
Como decía al principio BluePrint no solo sirve para la maquetación, los estilos en cascada que lo conforman poseen varias clases y estilos para implementar o complementar, las cuales están debidamente explicadas en cada CSS. Pero hay que recordar que el framework no está testeado en todos los navegadores por lo cual no todo llegue a funcionar de la misma manera.
Para consultar más información sobre Blueprint, pueden visitar el blog del creador y estar al tanto de las actualizaciones. Además existe un mirror del proyecto en Google Code .
|
|
|
lunes, 25 de junio de 2007 |
|
 Si tener tus imágenes en Flickr no te termina de convencer y andas buscando alguna herramienta más personalizada, que permita tenerla en tu sitio para manejar tus fotos, tal vez Scooch es lo que andas buscando.
Como decía, Scooch es una aplicación que permite crear slideshows y álbums de manera online, con la posibilidad de agregar comentarios y descripciones, rss, microformatos, tags, búsqueda integrada, votación, todo en formato de blog [ Ver Demo ] Su uso es gratuito para sitios no comerciales, la última versión es la 1.3 y para su funcionamiento es necesario contar con PHP 4.3 y la biblioteca gráfica GD para el procesamiento de las imágenes. Setup de Scooch 1 - Descargarmos la aplicación [ 182.37 KB, es necesario llenar un breve formulario ] y la descomprimimos. 2 - Vamos al archivo 'user_settings.php', que se encuentra dentro de la carpeta 'inc', lo abrimos con un editor y seteamos algunos parámetros: - . $home= Escribimos las URL completa en donde se va a alojar la aplicación;
- . $sitename= El nombre del sitio en cuestión;
- . $login= El password que utilizaremos para acceder al panel de administración;
- . $maxImageWidth= Ancho máximo de las imágenes a mostrar;
- . $defaultImageWidth= Ancho por default de las imágenes;
- . $watermark= Si queremos o no agregar una marca de agua a las fotos de nuestras galerías;
- . $roundcorners= Imágenes con esquinas redondeadas o no;
- . $watermarkimage= Imagen que usaremos para la marca de agua. Debe estar dentro de la carpeta 'img'
- . $allowedimages= Formatos de imágenes admisibles.
También podremos modificar otros parámetros como la cantidad de slideshows a mostrar, tamaño de los thumbnails, radio y color de las esquinas, uso de emoticones para los comentarios, opciones de votación, entre otros. 3 - Finalmente guardamos a 'user_settings.php', subimos todos los archivos y listo. Entramos a la aplicación, y empezamos a crear las galerías accediendo al panel de control a través del enlace de Login. Nota: Más sobre RE²T |
|
|
lunes, 18 de junio de 2007 |
|
Hace una semana hablamos de dos sitios que recopilan aplicaciones que utilizan Ajax en su funcionamiento, con el mismo objetivo, ahora le toca el turno a Ajax Rain. Via: Stylegala |
|
|
viernes, 15 de junio de 2007 |
|
 Instant.js es un script no obstrusivo que permite agregar un efecto tipo polaroid a las imágenes de forma muy sencilla [ Descargar ]
Su funcionamiento está limitado a Firefox, Opera y Safari. En cambio IE, al no soportar Canvas , mostrará la imagen original. La nueva versión 1.1 ofrece también soporte para IE 6 y 7. Para usarlo incorporamos el script a nuestro sitio: HTML <script type="text/javascript" src="instant.js"></script>
Y agregamos la clase "instant" a la imagen que queremos modificar: HTML <img class="instant" src="imagen.jpg" width="200" height="200" alt="">
Parámetros: - .Sombra: ishadowX, en donde X es un numero entre 0 y 100. Por default el valor es 33
- .Orientación de la imagen: itiltleft (izquierda), itiltright (derecha) o itiltnone (ninguno)
- .Color del marco: icolorX, en donde X es el color que queremos para el marco, puesto en hexadecimal.
Ejemplo:
HTML <img class="instant ishadow65 itiltright icolorFFFFFF" src="imagen.jpg" width="200" height="200" alt="">
|
|
|
Más que interesante trabajo están haciendo en 
