09.Dec.2007
Posteado en CSS a las 13:15 por RetroFOX
No soy amante de las múltiples colecciones que surgen día a día en lo que algunos denominan la blogosfera.
Las 10 mejores rutinas de JS, los 20 mejores themes de WP, 7 consejos para ser un brillante amante sexual, etc, son artículos donde los autores los utilizan como pequeñas entradas para que su blog no decaiga. Entonces uno puede ver repetido el mismo artículo unas 20 veces en distintos sitios.
Como yo no escapo a esta mediocre realidad, con la diferencia que mi blog no llega ni a 100 visitas diarias, me hago eco de este artilugio e intentaré ser uno de los primeros en habla hispana en publicar Best of CSS Design 2007.
Si no me equivoco, blogs como Genbeta, MicroSiervos serán los segundos.
Una vez mas lo puedes lograr Damián !.Vas a ser el primero en publicar un artículo tan intrascendente como inútil. Esperemos la semana entrante a ver que pasa. Saludos.
Vía Smashing Magazine.
POST
03.Dec.2007
Posteado en CSS a las 16:25 por RetroFOX
Iba a comenzar esta entrada con un prólogo como ‘Este artículo es una traducción de The 7 CSS Hacks that we should use …’; pero la basura flotante por los innumerables sitios webs me lo impidió.
Una de la cosas que más me ha servido para aprender en este ambiente es traducir artículos utilizando mi mediocre inglés. Para compensar esta falencia me valgo de ejemplos experimentales que yo mismo implemento; y que me sirven para introducirme aún más en contexto y finalmente, de toda esta bola, resulta una traducción amateur con ejemplos de uso práctico. Funciona. No podría hacer lo mismo con … no se, por ejemplo, la estructura neuronal del cerebro de un oso panda; chino básico.
El problema es la fuente. Para su búsqueda suelo guiarme de blogs como ajaxian, solutoure, clientside, y algunos de habla hispana como aNieto2K.
The 7 CSS Hacks that we should use salió publicado al mismo tiempo en la mayoría de estos blogs afines … y sospeché algo raro (disculpen, las frases de Les Luthiers siempre son emergentes y recurrentes en mi, casi inconscientemente). Sin embargo CSS es uno de esos lenguajes (cual no ?) donde uno nunca termina de aprenderlo; por lo que encaré, junto con mi compañero Germán, la traducción e implementación de ejercicios de muestra.
El artículo original creo que confunde más de lo que ayuda. E indagando un poquito más, veo que es copia textual de otros artículos. En fin … al final lo usamos como puntapié inicial para implementar una guía de aprendizaje enfocada a una persona sencilla, que no tuviese demasiados conocimientos; gentil, amigable y apuesto, o sea, lo escribí para mi.
El Artículo indefectiblemente irá evolucionando a medida que implementemos ejemplos, investiguemos, en fin, desarrollemos. Así pues nuestra primer entrega; sin antes dar un pequeño y humilde consejo: no te guíes por todo lo que lees; tu mismo debes ser tu principal profesor
Empecemos …
POST
13.Oct.2007
Posteado en CSS, TK-90 a las 14:30 por RetroFOX
Fuente ‘Enduro Race’
Observando sitios de fuentes encuentro esta colección denominada SegaSonic. El sitio no ofrece mucho info respecto al pequeño proyecto.
Sería interesante saber por ejemplo como se han conseguido las mismas; puede ser que lo hayan hecho desde la misma ROM de los juegos. No se hace referencia a la generación de los juegos. Por lo que he visto en la página y lo poco que recuerdo parecen ser de la consola SEGA de 16 bits, tanto de MegaDrive como de su versión americana Génesis.
Por lo pronto instalé la de nuestro querido y tan recordado ‘Enduro Racer’. La primera vez que lo jugué fue en la TK-90.
En fin, un recurso particular para los nostálgicos.
‘Cabeza De Ratón’ con la fuente NiceEnduroRacer.
POST
13.Aug.2007
Posteado en Herramientas Desarrollo WEB, CSS a las 11:37 por RetroFOX
Hace unos días me cuenta un amigo de este buscador de iconos en la web. Resulta ser útil para esos pequeños pero tan molestos (y a veces insistentes) contratiempos que se nos presentan al tratar de buscar un logo, icono, etc. Actualmente se encuentra en estado beta, pero hoy por hoy funciona muy bien. Una pequeña herramienta más a tener siempre a mano.
POST
29.Jun.2007
Posteado en CSS a las 14:24 por RetroFOX
Este artículo intentará ser la apertura de una serie que nos ayudarán a confeccionar nuestros menús en forma clara. Primero vamos a arrancar de la base: utilizaremos solo CSS modificando nuestra estructura HTML.
Se que este tema está mas que trillado … pasa que uno no pierde el entusiasmo de generar experiencias y compartirlas. En este artículo se implementa el menú solo con etiquetas anchors <a>.
La idea es hacer base e ir mejorando de a poco la calidad y complejidad de los artículos implementando, por ejemplo, efectos visuales seguramente con MooTools.
Entonces vamos … se aceptan críticas. Las primeros 800 autores ganarán una gorra de Bill Gates.
POST
13.Jun.2007
Posteado en CSS a las 13:40 por RetroFOX
Vía SentidoWEB leo sobre CSS Easy. Este sitio nos brinda 8 tipos de Layouts diseñados con HTML y CSS listos para nosotros. No vamos a matarnos en detalles sobre el modo de uso o su implementación. Es simple: están para que los uses y ahorrarte el trabajo inicial a la hora de arrancar con un sitio web. No jodas !
POST
12.Jun.2007
Posteado en MooTools, CSS, JavaScript a las 15:55 por RetroFOX
Hasta que aceitemos el sitio dedicado a MooTools iremos publicando paralelamente los artículos que allí se presentan. Esperemos pronto mejorar el servicio.
Inauguramos esta sección de Estudiando MOO. Simplemente daremos ejemplos de uso de las herramientas de MooTools. Vamos a arrancar con toggleClass(); método de Element..
Simple Definición
Agrega o quita el nombre de clase pasado por parámetro al elemento, dependiendo si esta presente o no.
Lo que logramos con esto es jugar con las clases CSS de nuestro elemento nodo dependiendo del estado anterior de las mismas. O sea ... si la clase CSS no está presente en la definición class="miClase1 miClase2 ..." la agrega al listado, y si se encuentra la elimina.
Tengamos en cuenta que es totalmente válido agregar más de una clase CSS a un elemento nodo HTML. la definición class="miClase01 fndOscuro" es correcta.
Entonces ... en este ejemplo asignamos un evento (click) al elemento en cuestión agregando una clase CSS previamente definida.
.clase01,
.clase02 {
background: #DDD;
border: 1px
solid #AAA;
color: #400;
padding: 10px;
width: 150px;
height: 150px;
cursor:
pointer;
}
.clase02 {
background: #040;
color: #AFA;
}
Código CSS
Window.onDomReady(function() {
$('miElemento').addEvent ('click', function () {
// toggleamos la clase 'class02'
$('miElemento').toggleClass('clase02');
});
});
});
Código JavaScript/MooTools
El ejemplo final se puede ver en toggleClass.html.
Hasta la próxima.
POST
29.May.2007
Posteado en CSS, Herramientas Online a las 15:38 por RetroFOX
Vía ajaxian encuentro este sitio que nos permite construir nuestros botones cool!. Nos puede ahorrar unos minutos de trabajo y tiempo de diseño. Seamos sinceros ... tampoco es la locura del diseño, pero es bueno tenerlo en cuenta.
Personalmente no pude agregarle al botón un icono personalizado pese a que respeté tamaño y formato de imagen. Pueden jugar un poco mas en MyCoolButton.
POST
26.May.2007
Posteado en CSS a las 16:53 por RetroFOX
Cuando estoy haciendo un menú con imágenes termino teniendo el maldito problema de líneas punteadas alrededor de la imágen en cuestión. Esto me pasa en FF2 bajo Ubuntu. Tal vez en otros browsers esto no pase.
Ahora, si tu caso es parecido al mío y queres resolverlo, podes definir los enlaces correspondiente mediante css.
La W3C define:
outline
Propiedades individuales de la línea exterior.
[ <outline-color> || <outline-style> || <outline-width> ]
Esto es un ejemplo de las mínimas cosas que tenemos que saber a la hora de diseñar. Es un detalle, pero si no lo sabes ... no lo podes hacer. Y también es un ejemplo de como hacer una entrada ... con poco :-).
POST
22.May.2007
Posteado en CSS a las 11:16 por RetroFOX
LaWorld Wide Web Consortium - Oficina Española presenta dos páginas que son guías de referencias de consulta rápida. Una es para XHTML y la otra es para CSS. Siempre es bueno tenerlas muy a mano; respetando el estándar lograremos la mayor compatibilidad de nuestros diseños en los diversos browsers.
Guía de referencia rápida de XHTML
Guía de referencia rápida de CSS 2.1
POST
Página Posterior