No hace mucho hablábamos de la conveniencia de unir nuestros archivos CSS y Javascript de forma que minimizasemos las peticiones al servidor y, a su vez, de comprimir el resultado.
jscsscomp es un script PHP basado en JSMin y algunas ideas de Patrick Hunlock, que se encargará de las labores de compresión y optimización de nuestros archivos de forma dinámica, guardando los resultados en caché.
Recuerda, todavía es un script en desarrollo y puede dar fallos, usadlo bajo vuestra responsabilidad.
Pagina del proyecto jscsscomp (en Google Code)
Existen múltiples test y validadores para tu código que puedes emplear online, no obstante, si necesitas ir validando múltiples sitios puede ser laborioso ir acudiendo al sitio de cada herramienta.
Si hay una ventaja que hace destacar a Firefox sobre los demás navegadores (sin ánimo de polemizar, otros navegadores también tienen sus herramientas pero se salen de la perspectiva de este blog al no ser software libre) son sus extensiones.
Para todos los desarrolladores web, existen numerosas extensiones que nos ayudarán a validar y verificar nuestro código:
Con Offline Page Validation podrás enviar cualquier página que estés visitando al servicio de validación del W3C incluso si son páginas locales, que requieran registro, etc.
Valida tus hojas de estilo mediante el servicio del W3C
La “HERA-Extension” es una extensión para los navegadores de la familia Mozilla (Netscape, Firefox, Flock, Safari, etc.), que permite revisar online, en un solo clic, la página web que estemos visitando e incluso un marco de esa página (si los tiene), facilitando el uso y acceso a HERA.
TAW3 en un click te permite comprobar la accesibilidad de las páginas que visites, utilizando el servicio TAW3 Online y las reglas WCAG 1.0
Con ella podrás comprobar que el contraste de los colores que has escogido para tu sitio web es adecuado para todos tus posibles visitantes
Te mostrará tus páginas de forma similar a como las interpreta un lector de pantalla
Esta extensión está pensada para ser una ayuda en la navegación de personas discapacitadas pero los desarrolladors podemos utilizarla para comprobar si su desempeño es correcto
Entre sus múltiples posibilidades (de las que hablaremos en unos días en profundidad) está la de validar tus sitios locales y los sitios que visites, tanto su html y css, como su accesibilidad…
La extensión Total Validator, de la que ya hablamos por aquí, te permite realizar múltiples validaciones en un solo click
Valida HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hypervínculos, Metadata y más
Seguro que alguna vez te has visto en problemas para mantener el pie de tus páginas en su sitio, abajo del todo. Ya vimos, en este mismo blog, una aproximación que nos permitía conseguir que los pies de página se mantuviesen en su sitio. No obstante, aquella solución nos obligaba a emplear atributos de estilo propietarios y no válidos.
Ryan Fait llega a otra solución que, en lugar de requerir etiquetas no válidas, requiere un div extra y poco más.
El CSS es algo tan simple como:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /* el margen inferior es el valor del pie en negativo */
}
.footer, .push {
height: 4em; /* .push y .footer deben tener la misma altura*/
}
Pero lo mejor es que veáis el ejemplo y echéis un vistazo al código.
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]-->
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
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
Me encuentro en Windows Skills (que título más poco atractivo) con un par de videotutoriales sobre maquetación sin tablas creados por Douglas Bowman y me ha parecido interesante dejaroslos por aquí por si os apetece echarles un vistazo.
Eso si, están en perfecto inglés:
Este artículo es la traducción de Safe List Next With Left-Floated Elements escrito por Grand Schtroumpf:
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:
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
