En Web Designer Wall explican como crear textos con gradientes usando sólo css. Cosas como esta:
Eesto es una imagen pero el efecto real es sobre texto. Podéis ver algunos ejemplos reales.
Vía Stumbleupon
Desde hace varias semanas que el portal líder en información específica de nissan (portalnissan.com) es parte de nuestra red de proyectos gracias a un acuerdo amistoso (sin dinero de por medio) con Chema, su anterior propietario.
Los dos socios de Neurotic tenemos coches nissan (un Qashqai y un Almera), nos gustan las webs de motor (también tenemos buscatuning.com y drifting.es) y Jordi era asiduo de Portalnissan por lo que pudo ser de los primeros en ofrecerse a llevar el portal cuando Chema decidió desvincularse del proyecto.
En portalnissan.com se usa mkportal, un sistema de integración de otros scripts, entre ellos el foro SMF y la galería de fotos coppermine. También tiene blogs personales, gestor de noticias, gestor de bloques, etc. No está mal pero tiene algunas carencias, principalmente las urls no son amigables y existe una gran separación entre lo que son noticias y el foro.
Nuestra idea es dejarlo de momento tal como está y más adelante usar nuestra base de comunidad online con Drupal la cual es mucho más potente que el mkportal.
Al actualizar a ubuntu desde SuSe nos dejaron de ir las extensiónes para Firefox ColorZilla y FireBug.
En lugar de ColorZilla empezamos a usar GColor2 que más o menos ya hace su función pero el Firebug es un elemento imprescindible e irremplazable y más desde las últimas versiones.
Después de mucho buscar he encontrado en un foro de ubuntu que ColorZilla y Firebug dan problemas en ubuntu cuando están activadas las dos y resultaba que aunque ya sabía que ColorZilla no funcionaba no la había desinstalado. Una vez sin ella Firebug ha vuelto a funcionar perfectamente.
Y por cierto, ahora ya he podido usar la extensión de Yahoo YSlow que sirve para analizar una página web para ayudarte mejorar su velocidad con algunos consejos.
Recientemente nos hemos cambiado de oficina y encargamos dos cosillas en thinkgeek para decorarla un poco: una alfombra para la entrada y unas pegatinas de space invaders para la pared.
En total eran 79$ más los gastos de envío, 38$ más. Algo caro para lo que es, la verdad, pero no encontramos en ningún otro sitio lo mismo. Además al final tuvimos que pagar un extra de 43€ para la aduana la cual parece ser que retiene paquetes de forma aleatoria y hace pagar el IVA más gastos.
La verdad es que ha quedado bastante bien, a continuación un par de fotos:
Con el paquete de las pegatinas viene, además de las intrucciones, una tarjeta de la empresa que las diseña, se llama Blik “surface graphics” y en su página web podemos ver mucho más modelos, todos muy interesantes.
La empresa está en Venice, EEUU, por lo que tampoco solucionaría nada hacerles los pedidos a ellos directamente. En una de sus páginas podemos ver que tienen direcciones de tiendas que venden sus productos. Desgraciadamente no hay ninguna en España pero sí hay algunas en Europa con lo que no pasaría por la aduana y los gastos de envío podrían ser inferiores. Una de ellas parece ser una alternativa alemana a thinkgeek, se llama Get Digital y tiene las pegatinas de vinilo de los space invaders por 45€ a lo que habría que sumar los gastos de envío, menos de 10€. Sale más caro el producto pero contando con los gastos de envío y que no te cobrarán nada por pasar por la aduana (por que no hay) te sale más barato al final.
Actualización:
Hay gente que se lo ha currado ellos mismos y les ha quedado muy bien. Otros incluso han creado un pdf para poderlo imprimir y que sirva de plantilla.
Ayer finalizó el concurso de fundamentos web y finalmente no estamos entre los 3 escogidos. Felicidades a los ganadores y en especial a la primera Adriana Pertierra, para nosotros era el mejor diseño. Además los dos primeros no tendrán que viajar mucho para ir a recoger el premio.
Lo que no entiendo es por que han quitado la lista de los finalistas, la cual han cambiado por la de los ganadores. También hubiese estado bien explicar los motivos por los que han elegido a los ganadores (más allá de lo que pone en los criterios que es algo muy básico) y como se han repartido los votos.
Ni mucho menos digo que haya habido algún tipo de manipulación pero, además de que me gustaría saber si alguien ha votado por nuestro diseño, la transparencia es básica para este tipo de concursos.
Y por cierto, a ver si actualizan el cuadro de noticias de la blogoesfera.
Este año la gente de w3c España ha decidido crear un concurso de rediseño de la página web de Fundamentos Web, el congreso sobre estándares que se hará en Oviedo del 3 al 5 de Octubre. Los premios son un MacBook y una Wii para el primero y segundo respectivamente.
En Neurotic nos hemos animado a concursar, no tanto por los premios sino por el reconocimiento que puede llegar a tener diseñar una página para el w3c.
La norma principal del concurso es que sólo podemos “tocar” el CSS, el html hay que usarlo tal cual como lo han hecho. En principio ya han pensado para que se a muy flexible y que puedas modificar cada elemento de forma independiente aunque cuando nos hemos puesto manos a la obra hay algunas cosas que hemos echado a faltar.
Cosas para comentar de nuestra propuesta (a la que hemos llamado Eau de Neurotic):
Para evitar que al pasar el ratón por encima de un enlace la imagen tarde un poco en cargarse y se vea raro hemos usado la técnica de la ventana. Nosotros la llamamos así ya que se trata de tener en la mismo fichero de la imagen los dos estados y mediante el posicionamiento del background mostrar el que interese a traves de la “ventana” definida por el ancho y el alto del contenedor.
En algunos casos en los que no se podía usar esta técnica (no se puede combinar con sliding doors) usamos un pequeño truco. Se trata de poner una imagen de fondo con una posición que haga imposible de verse. Por ejemplo, si tenemos este html:
<p class="lema">
<a href="/2007/Concurso" title="Concurso de cambio
del estilo del sitio">Fundamentos Web lleva tu estilo</a>
</p>
podemos usar el siguiente css
p.lema {
background: url(../images/fondo-enlace-hover.png)
no-repeat -9999px -9999px;
}
p.lema a {
background: url(../images/fondo-enlace.png)
no-repeat 0 bottom;
}
p.lema a:hover, div#cabecera p.lema a:focus {
background: url(../images/fondo-enlace-hover.png)
no-repeat 0 bottom;
}
Está claro que es algo que hay que evitar aunque hay veces que no hay otra solución. Nosotros hemos usado tres hacks:
Para conseguir que un contenedor que tiene elementos flotando se adapte al tamaño de sus hijos hemos usado el hack clearfix” que a su vez usa algunos hacks para que funcione en diferentes navegadores. Una posible solución hubiese sido poder hacerle un clear al siguiente elemento pero en esta caso no podíamos por que el siguiente elemento era muy general y podría “fastidiar” otras cosas
Para poder solucionar los bugs de los Explorer menores al 7 hemos usado el !important de la siguiente manera:
.elemento {
margin: 10px !important;
margin: 20px;
}
Explorer al no interpretar el !important usará el margin: 20px ya que es el último pero Firefox y los que si lo interpreten usarán el que tiene el !important. Lo malo es que IE7 continua con algunos de los bugs anteriores pero si interpreta bien el !important
Para poder solucionar lo comentado anteriormente hemos usado un hack para poder modificar atributos sólo para IE7:
/* ----- Hack only for IE 7 ----- */
*+html elemento {
atributo: valor;
}
En lugar de usar estos hacks para IE lo mejor es usar comentarios condicionales para incluir una hoja de estilo con las definiciones que haya que modificar para explorer, pero al tener que estar esta hoja de estilos incluida en el html no hemos podido usar esta técnica.
<!--[if lt IE 7]>
<style type="text/css" media="all">@import
"/css/fix-ie.css";</style>
< ![endif]-->
Para facilitar la legibilidad y las posteriores modificaciones hemos pensado que era mejor que reducir a la mínima expresión el código CSS además de seguir las siguientes reglas para ordenar propiedades
De momento esto es todo, estamos orgullosos del trabajo realizado y esperamos hacer un buen papel en el concurso.
Podéis ver nuestro estilo yendo a Fundamentos Web 2007
Para una web hemos decidido usar un script llamado cssCheckbox para jquery que reemplaza los checkboxes por imágenes más bonitas. Es bastante simple y funciona si javascript está desactivado pero tiene un par de cosillas que hemos mejorado:
Los cambios:
Para el plugin de jquery:
jQuery.fn.cssCheckbox = function () {
jQuery("input[@type='checkbox'] + label", this)
.each( function(){
if ( jQuery(this).prev()[0].checked )
jQuery(this).addClass("checked");
else
jQuery(this).addClass("unchecked");
})
.hover(
function() { jQuery(this).addClass("over"); },
function() { jQuery(this).removeClass("over"); }
)
.click( function() {
jQuery(this)
.toggleClass("checked")
.prev()[0].checked = !jQuery(this).prev()[0].checked;
jQuery(this)
.toggleClass(”unchecked”)
.prev()[0].checked == jQuery(this).prev()[0].checked;
})
.prev().hide();
}
Para el archivo de css:
label {
padding-left: 25px;
cursor: pointer;
}
label.unchecked {
background: url(/imagenes/checkbox_on_off.gif) no-repeat;
background-position: 0 -34px;
}
label.checked {
background: url(/imagenes/checkbox_on_off.gif) no-repeat;
background-position: 0 0;
font-weight: bold;
}
label.over {
color: black;
}
Todo lo otro es lo mismo que en http://kawika.org/jquery/cssCheckbox/. Para finalizar os dejo una demo
David de maskotas.es (creo) ha dejado en los comentarios la versión para cssRadio
jQuery.fn.cssRadio = function () {
var context = this;
jQuery("input[@type='radio'] + label", this)
.each( function(){
if ( jQuery(this).prev()[0].checked )
jQuery(this).addClass("checked");
else
jQuery(this).addClass(”unchecked”);
})
.hover(
function() { $(this).addClass(”over”); },
function() { $(this).removeClass(”over”); }
)
.click( function() {
jQuery(”input[@type=’radio’] + label”, context)
.each( function() {
jQuery(this)
.removeClass()
.addClass(”unchecked”)
.prev()[0].checked = false;
});
jQuery(this)
.addClass(”checked”)
.prev()[0].checked = true;
})
.prev().hide();
}
Si tienes un directorio te interesará poder contar los clicks que hacen en los links salientes pero también te interesa que esos enlaces cuenten para los buscadores (por que de otra manera no les gustará demasiado a los webmasters que envien sus webs)
Al parecer son dos cosas no compatibles pero mediante javascript podemos conseguirlo y con JQuery de forma fácil. La táctica consiste en tener los links directos, sin pasar por ningun script que cuente los clicks, algo como esto:
<a href="http://www.google.com">Google.com</a>
Por otra parte mediante javascript detectamos cuando se hace click en esos enlaces y redireccionamos el enlace hacía nuestro script contador. Con JQuery es tan simple como esto:
<script type='text/javascript'>
$(window).load( function() {
$('a.link_out').bind("click", function() {
url = $(this).attr("href");
window.location = "/contador.php?url=" + url;
return false;
});
});
</script>
y en los links les ponemos la clase link_out:
<a href="http://www.google.com" class="link_out">Google.com</a>
Y listo, sólo faltaría crear el archivo que cuenta las visitas y hace la redirección pero eso lo dejaremos para vosotros o para otro día.
Otra opción, tal como dice ouyeah en los comentarios sería contabilizar el click mediante ajax y no hacer ninguna redirección:
<script type='text/javascript'>
$(window).load( function() {
$('a.link_out').bind("click", function() {
url = $(this).attr("href");
$.post("go.php",
{ "url": url },
function() {
window.location = url;
} );
return false;
});
});
</script>
Y la verdad es que si parece más elegante y sólo se me ocurre que puede tener algún problema en navegadores antiguos que no soporten ajax aunque tampoco tengo claro si en estos navegadores funcione JQuery.
Vodka comenta que no le funcionaba y ha tenido que modificar algo el código:
En lugar de usar:
$('a.link_out')
ha usado
$(”a”).filter(”.link_out”)
Es algo que nos preguntamos muchas veces los desarrolladores de páginas web. Que propiedades tiene realmente una etiqueta? (lo cual suele ocurrir cuando la condenada no se muestra tal como nosotros queremos)
Tal vez sea algo ya conocido pero ahora gracias a la lista de Ovillo y Carlos Campderrós yo también se como verlo: si abrimos el DOM Inspector (una extensión que ya lleva Firefox por defecto, creo), seleccionamos el elemento que queremos inspeccionar (mediante el arbol o por el menú Search->Select Element By Click) y nos aparece a la derecha una serie de propiedades. Si apretamos en un desplegable y seleccionamos Computed Style podemos obtener que propiedades tiene el elemento en cuestión.
You are currently browsing the archives for the Diseño category.
