Archivo de Abril de 2006
Miércoles, 26 de Abril de 2006
El problema:
El cliente querÃa que el menú de su sitio web (por cierto un diseño minimalista bastante bueno, hecho por Gabriel) ocupe la totalidad del ancho de la página. Esto implicaba que debia ajustarse a todas las resoluciones. Y por supuesto, debÃa funcionar bien en todos los browsers.
Entonces lo primero que se nos ocurre probar con las listas, el clásico ul. No funcionó. Estuvimos buscando en bocha de lugares, pero no hubo caso. Sólo encontramos soluciones parciales al problema. Cuando lográbamos hacerlo andar en firefox, no andaba en IE y viceversa. Asi que, bueno… tuvimos que pensar en otra solución…
La solución
Es realmente simple: primero hacer un div que englobe los elementos. Cada Ãtem que lleva el menú no lo haremos usando el tag ul, sino que deberán ser puestos en un div por cada uno. Asà deberÃa quedar el HTML:
<div id="nav">
<div><a href="#">item1</a></div>
<div><a href="#">item2</a></div>
<div><a href="#">item3</a></div>
<div><a href="#">item4</a></div>
<div><a href="#">item5</a></div>
</div>
Se ve fácil, no? Muajajajaja… no, en serio, la parte del CSS es también muy simple: al div que contiene los Ãtems, al que nosotros llamamos nav, debemos especificarle mediante la propiedad width que ocupe el 100%. Luego debemos definir los divs que están dentro del div nav: debemos aplicar el float:left para que los elementos se alinéen a la izquierda uno al lado del otro y acá viene lo más importante y a la vez la gran falencia de este método: a la propiedad width debemos ponerla en el porcentaje relativo a la cantidad de Ãtems de la lista, esto hace por ejemplo, que no se pueda usar para generar Ãtems dinámicamente. Para que se entienda mejor: si tenemos 5 Ãtems en la lista, entonces el width para cada uno será de 20%. Otra falla que tiene es que si a ese Ãtem le queremos añadir margin, padding o border, debemos también ajustar el width para que no se nos desacomode. Se puede ver en este ejemplo a lo que me refiero. Énigüei, es algo simple y sirve si ya está definida la cantidad de Ãtems y sea un sitio estático. Aunque ahora que me pongo a pensar sà se puede hacerlo de manera dinámica! Y ahi una cosita más: como siempre el fáquin IE necesita un poquito de hacks!!!
Acá va el código CSS:
#nav {
width:auto;
}
#nav div {
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:1%;!important
}
#nav div { /*para IE */
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:0.9%;
}
Bueno, espero que sirva, si alguien conoce una solución mejor, por favor que me la haga saber.
Publicado en PuroCss, Utilidades | 1 comentario »
Sábado, 22 de Abril de 2006
 Siempre es bueno recibir algún tipo de reconocimiento por lo que uno hace con esfuerzo y pasión. Por eso cuando recibà el email de Gabriel de CSSMania diciéndome que hoy colgaba un screenshot de mi sitio en su galerÃa de sitios, que por cierto, es muy groso lo que se puede encontrar allÃ, muy buenos trabajos listados, me alegré muchÃsimo poder ser parte de esto y merecedor de aparecer allÃ.
Gabriel, gracias una vez más y ya sabés, estás invitado a participar en puroCSS.com.
Publicado en Ego | 7 comentarios »
Jueves, 20 de Abril de 2006
Virgin Digital con motivo de un aniversario o cosa parecida, la verdad es que no recuerdo, pero la foto la tengo de hace mucho tiempo en mi disco rÃgido. Pero bueno, la verdad que eso no importa, lo que importa es la imagen en si… hay 75 bandas de rock escondidas en dicha imagen. Yo ya llevo descubiertas 19:
Si alguien acepta la importantÃsima misión de ayudarme a encontrar el resto de las bandas, en flickr están ubicadas las bandas mencionadas arriba abajo.
En este link est� la imagen en 1280×1024 px.
update: ya hemos encontrado:
| Sex Pistols |
Nine Inch Nails |
Cypress Hill |
| Seal |
KISS |
Radiohead |
| Ratt |
Yellowman |
Rusted Roots |
| Crowded House |
Monkeys |
The White Stripes |
| Red Hot Chili Peppers |
Phish |
Matchbox 20 |
| The Doors |
Watermelon |
Korn |
| The police |
Green Day |
Blues brothers |
| Queen |
The Fairys |
Spoon |
| 50Cents |
U2 |
Deep Purple |
| Dead Kennedy’s |
White Snake |
White Zombie |
| The Rembrandts |
Black Flag |
Guns N’ Roses |
| Gorillaz |
B52’s |
Lemonheads |
| Queens of the Stone Age |
Led Zeppeling |
Alice In Chains |
| Rolling Stones |
Hole |
Blur |
| Twisted Sister |
Radiohead |
Scissors Sisters |
| Beach Boys |
Eagles |
Cowboy Junkies |
| W.A.S.P. |
BeeGee’s |
Dinosaur Jr |
| Television |
Black Crowes |
The Cranberries |
| Blind Melon |
Eels |
The Cars |
| Pavement |
|
|
Las que están listadas aquà son 58, pero en flickr hay 60! no sé cuál falta aquÃ.
Update: las que están listadas en flickr son 69 ya.
Publicado en Misc | 44 comentarios »
Miércoles, 19 de Abril de 2006
 A un año de su papado, en clarÃn publicó una foto de Benedicto XVI que, mierda, asusta a más de uno. Por favor, con esto no quiero herir ningún tipo de sentimiento ni nada que se le parezca. Tal vez sea que no sea el mejor perfil del Sumo PontÃfice, pero con esa caripela sólo puedo barajar dos teorias:
- Joseph se pegó un caravanononononononón de muchÃsimos dÃas con todo incluido
- O lo que creo que es más probable: que sea un enviado de algún poder malvado. A partir de esta teorÃa, sólo puede haber dos fuentes probables de maldad:
- El mismÃsimo Satán.
- Darth Sidious, el emperador de todas las galaxias que envió a Joseph para que sea su virrey
update:
Bueno, me parece que esta foto resuelve el misterio!
nota: foto de clarÃn
Publicado en Misc | 8 comentarios »
Martes, 18 de Abril de 2006
Cameron Olthuis en su blog hace un top 10 de tutoriales CSS. Coincido casi al 100%. Por supuesto, por ahi uno haría algunos cambios de orden o aparecerían otros sitios, pero quería respetar la decisión del autor y dejé la lista tal como está en el post original. Bueno, acá va la lista:
- Hoverbox Image Gallery: Linda galería de imágenes hechas solamente con CSS.
- CSS Bar graphic: Si para mostrar los resultados de una encuesta te enredabas con imágenes en distintas proporciones, ahora con un poco de CSS ya lo tenés resuelto muy fácil.
- CSS Vertical Menus: Una lista con muchos menúes verticales libres para usar.
- Listamatic: colección de menúes tanto verticales, horizontales o experimentales. Muy recomendable, me ha sacado de apuros en más de una ocasión.
- Floatutorial: Excelente colección de modos de uso de la propiedad
float
- Rounded Corners: esto de los bordes redondeados ya es casi un clásico en este sitio, en este caso es el link que pasó el Gringo hace un par de posts.
- 40 CSS Layouts: como su nombre lo indica, un compendio de 40 layouts.
- CSS Photo gallery: otro tutorial como el que está en el primer lugar de este top 10, pero un poco más complicado
- CSS Drop Shadows: sombras tras las imágenes muy bien logrado
- Style Sheet Switcher: para cambiar el estilo de una página
 Y bueno, no pude dejar de caer en la tentación de poner algunos a los que yo considero que deben estar en el top 10:
Publicado en Utilidades | No hay comentarios »
Jueves, 13 de Abril de 2006
Gato amablemente, tal como es su estilo, me paso este link. Se trata de una página de la NASA en donde publican una foto astronómica (astronómica tanto por el peso de las imágenes y, por supuesto, por el tema tratado) todos los dias desde 1995. Es increible!
Dejo una foto que saque de allà para que se vea un pequeño preview de lo que se puede encuentrar.
Publicado en Misc | No hay comentarios »
Miércoles, 12 de Abril de 2006
 Estamos ultimando detalles con Nicolás y Gabriel para sacar al aire nuestro proyecto más mimado: www.purocss.com.
Asi que toda la gente que quiera colaborar y tenga contenidos para ser publicados, pónganse en contacto con alguno de nosotros. Asà generamos esta comunidad de habla hispana de galerias CSS, recursos y noticias. No están cansados de tener que leer todo en inglés para hacer unos fáquin bordes redondeados? El objetivo por el que hacemos todo esto es para que el desarrollador de web hispano parlante pueda buscar soluciones en su propio idioma. Mientras más colaboremos, más y mejores prestaciones vamos a tener. Yo aspiro que este sitio sea una efectiva herramienta para aumentar la calidad de diseño, accesibilidad, etc. de nosotros, los desarrolladores que tenemos el español como lengua nativa!
Publicado en PuroCss | 1 comentario »
Miércoles, 12 de Abril de 2006
Publicado en Uncategorized | Escribe la contraseña para ver los comentarios.
Martes, 11 de Abril de 2006
 Esta web permite hacer testeos de carga del sitio web que uno quiera mediante una pequeña aplicación java (por ende se necesita tener la Java Virtual Machine). Una vez que se ejecuta la apicación se puede elegir entre varias velocidades, que van desde los 9,6Kbps hasta 512Kbps. Muy útil para saber si el sitio que uno acaba de hacer va a ser un embole para los sufridos usuarios de dial-up (lo digo por ustedes, desarrolladores en flash!). Aunque si bien es cierto que se está tendiendo a que todo el mundo tenga ADSL, todavía quedan muchos usuarios de dial-up, por lo menos acá en Argentina. Asi que, además de desarrollar sitios estéticamnete, debemos tambien pensar en que debe ser accesible a todo el mundo!
Sloppy deliberately slows the transfer of data between client and server.
Example usage: you probably build web sites on your local network, which is fast. Using Sloppy is one way to get the “dial-up experience” of your work without the hassle of having to install a modem.
Ah! casi que me olvido… el programa, está disponible también para MacOS X y Linux
Publicado en Utilidades | No hay comentarios »
Martes, 4 de Abril de 2006
Siiiii!!! por fin!! ya soy parte de la comunidad wordpress!!!
Se necesitan testers, y todavÃa no están del todo ajustados los estilos en IE. Prometo que pronto lo haré, pero bueno, espero que con esto pueda manejar mejor todo el tema de los spams y todo eso.
Publicado en Ego | 2 comentarios »
|
|
