Una colección con 21 preguntas/respuestas sobre block, inline y floating en HTML. Para aquellos que se inicien en el mundo del HTML y tengan dudas sobre los diferentes tipos de elementos (bloques e inline), sobre los márgenes, el padding, los bordes…
Un FAQ muy sencillo, y muy bien explicado que nos puede resolver muchas dudas. CSS Tutorials – HTML Formatting Model: Block, Inline and Floating Elements
VÃa / Pixel Groovy
Seguimos con los fallos de accesibilidad que se suelen cometer en el desarrollo web, que nos ofrece la W3C y que empezamos a tratar hace unos dÃas.
Mostrar imágenes con información importante mediante estilos
Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.
Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el tÃtulo del blog con un diseño especial, lógicamente queremos que se vea asà por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:
Usar el estilo blink sin el mecanismo para parar el parpadeo
Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.
Usar un applet o un flash que parpadee sin el mecanismo para pararlos
Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.
Usar subtÃtulos que omiten parte del diálogo o sonidos importantes
Si vas a ofrecer un sonido, una conversación y no muestras los subtÃtulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtÃtulo y puede haber información importante que se escape.
Sí, demasiadas siglas para un título, pero se trata de eso, de generar un CAPTCHA mediante PHP, pero la característica de este CAPTCHA es que se realiza mediante CSS y HTML, para lo cual presentará una tabla con celdas y solo una de ellas con un color diferente que será la que hay que pulsar para poder pasar el CAPTCHA.
La clase envía mediante AJAX una petición al servidor pasando las coordenadas de los clicks del usuario hasta que se envían un numero total de clicks a cajas coloreadas. DHTML and CSS CAPTCHA
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
Wikipedia, para aquellos que no la conozcan, es una enciclopedia libre escrita de forma colaborativa, que usa la tecnología wiki. Está realizada mediante el software llamado MediaWiki, creado especialmente para Wikipedia, el cual podemos instalarnos en nuestro sitio web.
Los requerimientos mínimos son: Apache, PHP, MySQL y el propio MediaWiki. Yo recomiendo, al igual que en Lifehacker, el uso de WAMP Server, para instalar Apache, PHP y MySQL de forma sencilla, yo es el que uso para mis cosas y es muy sencillo y va muy bien, a parte incluye un gestor de BD para facilitar la tarea.
Puedes ver el resto de la explicación de como instalar tu propia Wikipedia en Lifehacker, está bastante bien explicado, paso a paso, lo cual se agradece mucho.
Vía / Lifehacker
Es curioso como el uso del pseudo-elemento :first-letter no es muy usado en la web, mientras que en papel si se suele usar con frecuencia. En este caso se trata de crear letras capitales mediante este pseudo-elemento. Para ello habrá que usar un fondo común para todas y luego modificar la letra inicial para que encaje en el marco.