En la actualidad sabemos que la mayor parte de nuestras páginas deben atender a una serie de estándares de usabilidad, accesibilidad y codificación que sean entendidas por los navegadores y usuarios. Junto a ello, el empleo de estilos para adaptar el diseño al aspecto visual y funcional de nuestros proyectos se convierte en un elemento clave.
El empleo de técnicas avanzadas, trucos, etiquetas o fragmentos de código que hacen posible visualizar determinadas capas, aplicaciones o recursos en nuestras webs dependen todavía más de cómo interpretemos y ejecutemos las hojas de estilos en cascada (CSS).
Existen recomendaciones que debemos recordar para un correcto funcionamiento de nuestros sitios y que se adapten lo máximo posible a las necesidades del target y las condiciones de la tecnología.
– Por lo que más quieras no emplees Flash: déjalo para un elemento concreto, exclusivo o reducido. La mayoría de usuarios y nuevos dispositivos no tiene por qué disponer de la última versión descargada de Adobe y resulta invasivo descargarlo contra nuestra voluntad. Google no se lleva bien con Flash y con los sitios construidos íntegramente en este lenguaje. No le gusta posicionarlos y no distingue entre texto plano e imágenes. Lo concibe como una película con bucles.
– Crea contornos blancos en las fotografías: si lo que pretendes es variar la forma en que la programación inserta imágenes en nuestra web puedes optar por dar un giro a la forma de presentarlas. Opta por generar un sencillo código que muestre un marco blanco alrededor de las imágenes sin necesidad de editarlas en Photoshop o Corel Photo Paint. Para imitar los contornos blancos de una fotografía puedes emplear:
.photo {border:4px solid #FFF}
<img sr=”imagenes/mimagen.jpg” class”photo”>
– Aplica sombreados a texto o imágenes o a ambos: en ocasiones puedes llegar a pensar que el empleo de estilos fuera de los programas de diseño 2D y 3D es más que limitado, sin embargo con CSS podemos llegar a controlar sombras proyectadas sobre los objetos. La manera de aumentar el contraste de elementos flotantes sobre el Background o sobre otro elemento podrías hacerlo utilizando este código sobre el elementos que desees.
img.dropShadow {background: miweb(imagenes/dropShadow.gif) right bottom no-repeat}
Añadiendo class=”dropShadow” a la etiqueta <img> en cada una de tus imágenes y sabiendo que son de ancho y alto un poco menores que la sombra creada, podrás disfrutar de este efecto.
– Distingue el código de programación de las anotaciones sobre el mismo con color: A nadie nos gustaría tener que retomar un proyecto de programación web realizado por otra persona y no entender absolutamente nada ni saber por dónde empezar. Indentar el código y distinguir las líneas de comentario por colores ayuda a ubicarnos entre la maraña de etiquetas, para así localizar aquello que nos interesa editar.
// Forma en que se envía el formulario de contacto
- echo'<p>’ has enviado el siguiente mensaje a’;
- echo $recipient;
- echo’:<br/><em>
- echo stripslahes($_GET[‘sender_message’]);
- echo ‘</em></p>’;
– Centra el contenido de tu web usando divs: no hay nada más molesto y obsoleto que estar diseñando o visualizando una web y observar como el contenido y el contenedor comienzan en la esquina superior izquierda de nuestro navegador. Por un momento nos extrañaremos y comenzará nuestro instinto visual a dirigirse hacia el lado derecho de la ventana porque, seguramente, no haya contenido y desaparezca la web dando paso a un Background blanco y vacío. Procura adaptarte a los tiempos y a la comodidad de los usuarios y presenta los contenidos a partir del eje central del navegador; que los elementos que componen el Body se expandan hacia los lados y hacia abajo. Posiciona el div de tu contenedor en el centro pero jamás empleando <div align=”center”>. Todo ello provocará que texto e imágenes de tu contenedor se centren y eso no es lo que pretendemos. Para centrar únicamente el contenedor de tu web emplea:
.contenedor {
position: absolute;
top:0px;
magin-left: auto;
margin-right: auto;
}
– Aprende de los que saben y maqueta en columnas: tomando como referencia la prensa escrita y su poder de atracción y constancia sobre los lectores, procura diseñar y maquetar tu contenido empleando columnas para ubicar texto e imágenes. La coherencia y disposición ordenada de los contenidos creando un flujo estético es básica para no provocar rebotes en alguna página de tu sitio. Para maquetar en columnas puedes optar por 2 ó 3 y situar el contenido que desees.
<div id=”col1″>Contenido columna 1</div>
<div id=”col2″>Contenido columna 2</div>
<div id=”col3″>Contenido columna 1</div>
#col1 {float: left; width:20%;}
#col2 {float: left; width:60%;}
#col3 {float: left; width:20%;}
Desde Agencia La Nave nos esforzamos porque todos nuestros proyectos online cumplan los estándares de html y de estilos css se ajusten a lo que demandan las aplicaciones y el público. La forma de presentar de manera profesional y coherente nuestros contenidos empleando clases, ids o bien hojas de estilos fuera del documento principal es más que una constante en nuestro trabajo diario con el cliente. Crea tu propia hoja de estilos y preséntala de forma que no sólo el navegador sino otros profesionales la puedan entender.
