Publicado el: 4 Abril, 2007
Archivado en: CSS, General
Mañana se “celebra” el día del desnudo integral en internet, lamentablemente no se trata de mostrar el serrano cuerpo de bloggers y webmasters si no de atreverse a mostrar tu sitio sin hoja de estilo (je, a ver cuantos nos llevamos una sorpresa).
Webmaster Libre se suma este año al despelote (y no solo por el PR 7 de la página) y mañana os recibirá a todos como si hubiesemos vuelto atrás unos cuantos años en el tiempo, antes de que nuestro querido CSS hiciese furor.
En la página del CSS Naked Day tenéis más información y unos cuantos enlaces a plugines y funciones que os ayudarán a automatizar la tarea…
Un consejo, aprovechad la estupenda extension de Firefox Web Developer para comprobar como andan de código vuestros sitios si no queréis llevaros un susto jeje…
En HTML disponemos de una forma estándard de crear tooltips (pequeñas ventanas emergentes con texto adicional que aparecen al pasar el ratón sobre los elementos que disponen de un atributo title). Estos tooltips, no obstante, están muy limitados: solo pueden contener un número reducido de caractéres y no podemos controlar su aspecto.
Vamos a crear, en un par de pasos, unos tooltips personalizables que podremos aplicar a cualquier elemento (salvo las imágenes).
Para empezar, necesitamos corregir un error de Internet Explorer que sólo admite la pseudo-clase :hover en elementos a. Para ello es necesario descargar csshover.htc e incluirlo en nuestros sitios mediante un comentario condicional entre las etiquetas <head>
<!--[if IE] >
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]-->
Ahora crearemos el Javascript.
El funcionamiento del script es muy sencillo: buscaremos en el documento los elementos que tengan la clase jsttip y, si estos tienen un atributo title con contenido, crearemos un span hijo donde introduciremos el contenido de ese atributo title.
/* Esta función nos permite obtener todos los elementos marcados con una clase
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i
Y, por fin, el CSS y ya tendremos tooltips
La auténtica mágia de estos tooltips está en el CSS
.jsttip{/* Cambiamos el cursor por uno más significativo */
cursor: help;
}
a.jsttip {cursor: pointer;} /* Evitamos que cambie el cursor en los enlaces */
.jsttip:hover {position:relative} /* Importante */
.jsttip span {display: none;} /* Ocultamos el span hasta que es su momento */
.jsttip:hover span { /* Creamos el tooltip */
z-index: 100; /* Lo posicionamos por encima de todas las capas */
position: absolute; /* Lo posicionamos respecto a su padre */
top: 1.5em;
left: 2em;
display:block;
padding: 1em 1.2em;
background: #fff url(info.png) no-repeat;
width:15em;
border:1px solid #003170;
color: #003170;
font-size: 0.9em;
}
Para usarlo sólo tendréis que dar al elemento que sea una clase jsttip y escribirle un buen atributo title
<a href="link.htm" title="Escribe cosas que valga la pena leer" class="jsttip">Enlace</a>
Os he dejado unos ejemplos muy sencillos y un zip por si preferís descargar el script en lugar de copiarlo
A través de Ajaxian descubro un fantástico script Javascript con un poco de CSS, de Lalit Patel que nos permitirá detectar las tipografías instaladas en los equipos de los visitantes de nuestras páginas.
Este script funciona gracias al simple principio de que cada caracter aparece de forma diferente en cada tipografía. Por tanto, tipografías diferentes ocuparán diferente anchura y altura. Esto puede abrir amplias posibilidades a los desarrolladores de aplicaciones web y, en general, a los diseñadores.
Funciona en Firefox 2, Internet Explorer 6+ y Opera 9
Javascript/CSS Font Detector
A través de 456 Berea St encuentro un interesantisimo artículo de Andy Rutledge que trata de explicar, de una vez por todas, a los diseñadores gráficos por qué los estándares no son el enemigo de su creatividad: Web Misunderstandars.
Sin duda, algo que hay que repetir más: Los estándares no tienen nada que ver con el diseño. Cualquier cosa que pueda ser representada gráficamente puede representarse en internet sin tener que incumplir ningún estándar.
…if there is something you cannot do with design online it’s because of your ignorance or lack of skill, not because of Web standards.
…si hay algo que no puedas hacer con un diseño online es por culpa de tu ignorancia o falta de habilidad, no por culpa de los estándares web
Publicado el: 22 Febrero, 2007
Archivado en: (x)HTML, CSS
Publicado el: 20 Febrero, 2007
Archivado en: (x)HTML, CSS
El otro día le prometía a NeKronos hablar de los elementos en línea y en bloque en HTML. Empecé a escribir y, al buscar en Google alguna referencia, me encontre con la traducción de tres artículos de Tommy Olson sobre el tema, así que, ya que tanto los artículos como las traducciones son excelentes, prefiero dejaros aquí los enlaces para que lo leáis:
- Block frente a inline, parte 1
- Block frente a inline, parte 2
- Block frente a inline, parte 3
Una de las excusas más extendidas entre los diseñadores web para no utilizar unidades relativas de medida, como em, es la aparente falta de control que tienen sobre las dimensiones finales de su trabajo.
Para ellos viene hoy esta herramienta, em calculator creada por Piotr ‘Riddle’ Petrus . Con ella podrás convertir medidas en píxeles a em de una forma sencilla y clara, permitiéndote además calcular las medidas de elementos adyacentes o hijos (donde el uso de medidas relativas puede producir efectos no deseados si no tomamos en cuenta el tamaño del elemento padre)
em calculator: http://riddle.pl/emcalc/
Publicado el: 2 Febrero, 2007
Archivado en: (x)HTML, CSS
El WaSP ha anunciado hoy la creación del International Liaison Group, un grupo que surgió de una iniciativa de Molly y que ha crecido hasta convertirse en un grupo independiente capitaneado por dos mujeres Glenda Sims y Steph Troeth.
La misión del ILG es convertirse en un grupo de trabajo mediante el que compartir progresos y recursos entre desarrolladores, de una forma inclusiva e internacional o como se presenta en la página web del grupo:
El Grupo de Enlace Internacional (ILG en inglés) del WaSP (Web Standards Project) es un colectivo internacional de profesionales de internet que promueven el uso global de los estándares para asegurarnos una Internet igualitaria.
Via Juicy Studio.
Anuncio oficial (traducción al castellano): http://www.webstandards.org/2007/02/01/20070201-es/
International Liaison Group: http://www.webstandards.org/action/ilg/
Publicado el: 1 Febrero, 2007
Archivado en: CSS
Estoy segura que, como yo, muchos hemos mantenido la creencia de que el color de fondo por defecto es el blanco pero ¿los usuarios utilizan siempre blanco como color de fondo por defecto? La respuesta es no.
Los navegadores nos permiten definir el color de fondo por defecto a nuestro gusto y, en más ocasiones de las que pensamos, esto puede producir cambios de aspecto en nuestros sitios.
En Programming Designs nos dan pruebas empíricas de ello, seleccionando el rosa fucsia como color de fondo del navegador nos ofrecen la visión travestida de muchos sitios conocidos, como muestra un botón:
Moraleja: Define siempre el color de fondo (background-color), por muy obvio que parezca.
Si necesitas más pruebas o quieres leer el artículo original en inglés: CSS Tip: Always define a background color
