Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.
No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.
En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.
Creamos un contenedor al que daremos la propiedad display: table
.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;
.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.
.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}Centrado Vertical con CSS, ejemplo 1
Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.
Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.
.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}
.contenedor[class] {
position: fixed;
display: table;}
.centrado {
position: absolute;
top: 50%;}
.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}
.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.
Si estás buscando plantillas en (X)HTML y CSS que puedas destripar, modificar, utilizar a tu gusto y redistribuir según mejor te convenga, seguro que estas dos páginas se hacen un hueco en tus favoritos.
Open Source Web Design:
Decana en este tipo de páginas, fundada en el año 2000.
Actualmente pone a nuestra disposición 1688 diseños.
Open Source Templates:
http://opensourcetemplates.org
Destinada a organizaciones sin ánimo de lucro, aunque sus plantillas están publicadas bajo licencia Creative Commons (atribución) lo que nos permite utilizarlas a cualquiera.
De momento ofrece pocas plantillas pero de bastante calidad.
Seguro que muchos de tus favoritos de del.icio.us son articulos con referencias y fragmentos de código que “seguro usarás en tu próximo desarrollo”.
Si quieres tener todos esos fragmentos bien clasificados por lenguaje, etiquetados y siempre disponibles seguro que le encuentras uso a Snipplr.
Además, debido a su caracter de red social podrás buscar entre el código enviado por el resto de usuarios y añadir lo que te interese a tus favoritos. Sin duda una buena herramienta para localizar ese código que hace justo eso que necesitas.
Enlace: http://snipplr.com/
Via Genbeta
GD es un paquete para procesar imágenes por medio de PHP, si has estado instalando alguna galería de imágenes seguro que ya lo sabes, que suele estar instalado por defecto en la mayoría de servidores web.
Dependiendo de la versión de PHP que estemos empleando tendremos disponibles unas funciones u otras, con este pequeño script podremos comprobar tanto el estado de GD como las funciones de las que disponemos
function showGDinformation()
{
echo "GD support on your server: ";
// Comprueba si la función gd_info existe
if(function_exists("gd_info"))
{
echo "YES";
$gd = gd_info();
// Muestra el estado de todos los valores soportados
foreach($gd as $key => $value)
{
echo "" . $key . ": ";
if($value)
echo "YES";
else
echo "NO";
}
}
else
echo "NO";
}Artículo Original en Inglés: Test GD support on server
Via Pixel Groovy
Ya lo sabemos, no todos los navegadores son igual de compatibles con los estándares web, pero no siempre sabemos hasta qué punto.
Web Browser Standards Support es un completo estudio de compatibilidad de los navegadores Firefox, Opera e Internet Explorer, centrada en las tecnologías CSS, HTML, DOM y ECMAScript.
Via Pixel Groovy
Parece que el boom de este tipo de páginas dedicadas a recopilar los mejores diseños web realizados de acuerdo con los estándares, usando (x)html y css, no remite.
A través de Guistyles descubro CSS Bloom, una página con formato de blog, de actualización diaria que, al igual que la mayoria de sus hermanas mayores, nos permite votar los diseños.
Enlace: http://cssbloom.com/
Es fácil creerse que sólo con utilizar hojas de estilo en nuestros sitios web ya habremos optimizado sus tiempos de carga. A pesar de que, en principio, utilizar CSS aligera los sitios, una hoja de estilo llena de propiedades redundantes o espacios en blanco puede resultar excesivamente pesada.
Ante todo, nuestro CSS debe ser válido y para comprobarlo nada mejor que la herramienta que nos ofrece el W3C
Servicio de Validación de CSS: http://jigsaw.w3.org/css-validator/
Además de crear páginas con código válido, puede ser interesante optimizarlas para conseguir tiempos inferiores de carga. La optimización puede ser un proceso tedioso de hacer a mano y para ello existen gran número de herramientas online. Estas herramientas pueden optimizar tanto el código que lo vuelvan ilegible, por tanto, mi recomendación es que las uséis más como referencia y ayuda a la hora de hacer ajustes a mano.
Clean CSS
CSS Tweak
CSS Formatter and Optimiser
Online CSS Optimiser
CSS Optimizer
Y, como no hay hoja de estilos perfecta sin (x)html válido:
Servicio de Validación de Marcado: http://validator.w3.org/
Esta clase Javascript te permite añadir una ventana a una página HTML.
Se basa en Prototype y se inspira en los efectos de Scrip.taculo.us, incluso puedes usarlos para animar las ventanas.
Ha sido probado en Safari, Camino, Firefox e IE6.
Puedes ver algunos previews en la página del script
Prototype Window Class: http://prototype-window.xilinus.com/index.html
Prototype: http://prototype.conio.net/
Scrip.taculo.us: http://script.aculo.us/
Via DZone
Si buscas ejemplos de código listos para descargar, que puedes tanto estudiar como emplear en tus proyectos personales o comerciales, Dynamic Drive y su libreria de CSS seguro que se convertirán en uno de tus favoritos.
Recuerda leer las condiciones de uso ya que los ejemplos descargados tienen algunas restricciones.
La mayoría de las técnicas para hacer el contenido web accesible para los lectores de pantalla son invisibles para los usuarios visuales. El texto alternativo (alt), las etiquetas de encabezado de las tablas, sumarios de tablas, y los elementos label de los formularios son ejemplos de técnicas que marcan una gran diferencia para los usuarios de lectores de pantalla pero tienen muy poco o ningún impacto en la apariencia visual del contenido web.
No obstante, muy de vez en cuando, los diseñadores web afrontan situaciones en las que la adición de marcado accesible tiene un impacto en la presentación visual. En algunos casos, este impacto visual puede decrecer la usabilidad del contenido para usuarios visuales. En otros casos, los diseñadores simplemente quieren proveer una estructura o apariencia más agradable que esté comprometida al incluir todo el texto en una forma semánticamente correcta.
(más…)
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
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios