Particularmente soy bastante reacio a utilizar hacks CSS en mis diseños, principalmente porque me gusta que validen, aunque como sabemos que no lo hagano cambia en anda el aspecto visual en el navegador. Sin embargo, creo que es bueno conocerlos por si en algún momento sea necesario utilizarlos.

Con la última versión de Internet Explorer, es decir, la 7, los diseñadores tenemos un nuevo problema ya que no todo se ve igual que en Firefox ni que en IE6, por lo que a veces es necesario realizar modificaciones sólo para este navegador. Un hack conocido es el de colocar un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7. Algo así:

body {
background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */
}

Es decir, en Firefox, Opera y los demás navegadores el fondo será blanco, pero en Internet Explorer 6 y 7 el fondo será negro, ya que lee la propiedad con el asterisco, cosa que los demás navegadores pasan por alto. Es importante la ubicación, es decir, la propiedad con el asterisco debajo de la normal (respetando la cascada).

Otra opción que se utiliza para dar diferentes estilos a navegadores es el uso de !important lo cual es aceptado por Firefox, IE7 y los demás navegadores, pero no por IE6. Por lo que se utiliza cuando no queremos dar cierta propiedad a IE6. Lo bueno de esto es que si valida y así se usa:

body {
background: #fff !important; /* Firefox, IE7 y los demás */
background: #000; /* IE6 y anteriores */
}

Firefox, IE7, Opera, Safari y los demás tendrán fondo blanco, pero IE6 tendrá fondo negro. Ahora para crear un hack exclusivo para IE7 combinamos estas dos técnicas que hemos repasado. Es decir, agregando un asterisco e !important a la propiedad. Lo hacemos de la siguiente manera:

body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important;  /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}

De esta forma podremos lograr 3 estilos direfentes dependiendo el navegador que estemos usando, es decir, en el primer caso, Firefox y los demás navegadores tendrán fondo blanco, Internet Explorer 7 fondo negro e Internet Explorer 6 fondo gris.

En estos días he estado muchas horas adelante de archivos PHP y CSS trabajando en algunos themes para Wordpress, para los cuales he tenido que hacer algunas modificaciones en las llamadas a los posts. Quería aprovechar para mostrarles como aplicar algunos condicionales al loop de Wordpress para obtener ciertos resultados que pueden sernos útiles.

Lo primero que quiero explicarles es como excluir alguna categoría específica del loop, es decir, que al cargar por ejemplo en el index, se excluyan los posts pertenecientes a una categoría específica. Esto puede sernos útil si utilizamos por ejemplo miniposts y los cargamos en la parte superior de la página, luego para que no vuelvan a aparecer entre los posts normales, excluímos esa categoría.

No quiero extenderme en los ejemplos, ya que ustedes sabrán mejor como utilizar esta opción. Pasemos al código, al cual, debajo de la llamada por defecto agregaremos <?php if (in_category('7')) continue; ?>, donde “7″ es el ID de la categoría que queremos excluir. Así, una llamada completa por defecto quedaría de la siguiente manera:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if (in_category('7')) continue; ?>
<div class="post">
<h2><a xhref="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?></div>
<?php endwhile; else: ?>
No hubo resultados
<?php endif; ?>

En caso de que sean varias las categorías a excluir, la sintaxis debe ser la siguiente:

Otra opción, a la cual he tenido que recurrir, y que también quiero comentarles es la de poder incluir elementos o mensajes dependiendo de la página en la cual nos encontremos, es decir, si estamos en la primera de la paginación o en las demás.

Por ejemplo, queremos que en la portada de nuestro blog aparezca el mensaje “Bienvenido, este es mi blog.”, pero que al pasar a la “Page 2″, haciendo click en “Ver entradas antiguas”, este mensaje desaparezca. Como dije antes, las utilidades son muchas y seguramente ustedes sabrán como aplicarlas.

Para esto, debemos realizar en index.php, category.php, archive.php o cualquier sección donde se realiza paginación de entradas, lo siguiente:

<?php if ( $paged < 2 ) { // Para la primera página ?>
Bienvenido, este es mi blog.
<?php } else { // Para las que no son la primera ?>
Estas navegando los posts antiguos.
<?php } ?>

Esto podemos cargarlo fuera del loop, aunque dependiendo de lo querramos hacer, podemos cargar los posts dentro de estos condicionales. Podemos modificar la cantidad de páginas en las que aparecerá cada mensaje cambiando el número, que en este caso es 2.

En estos días he estado trabajando en algunos diseños y en uno tuve la idea de aplicar estilos aleatorios en los comentarios. Es decir, que los comentarios tengan un color de fondo random entre unos preestablecidos y que no sigan ningún orden en particular. Para poder hacer esto recurrí a la propiedad rand de PHP.

Los comentarios eran de un theme para Wordpress así que aproveché el loop para que esto se vaya aplicando una y otra vez a cada comentario, y por ejemplo si se recarga la página tomará nuevos colores aleatorios. Pasemos al código:

<ul>
<li class="bgcolor<?php echo rand(1,5) ?>">
Contenido del comentario.</li>
</ul>

Con esto al consultar la página, se generará la clase aleatoria entre el 1 y el 5, es decir, cada elemento de la lista podrá tener la clase bgcolor1, bgcolor2, bgcolor3, bgcolor4 o bgcolor5. Podremos añadir más modificando el 5 por la cantidad que necesitemos. Luego sólo basta aplicar los estilos en el CSS para cada clase, por ejemplo:

.bgcolor1 {
background: #FCFC98;
}
 
.bgcolor2 {
background: #9ED8FC;
}
 
.bgcolor3 {
background: #99FF99;
}
 
.bgcolor4 {
background: #EBEBEB;
}
 
.bgcolor5 {
background: #FFC1FF;
}

Pueden ver un ejemplo de como funciona el resultado en esta página. Al recargarla podrán ver como los colores se van alternando aleatoriamente entre cualquiera de los 5. Además podemos añadir más clases a los elementos, para poder realizar más combinaciones aleatorias, por ejemplo con los estilos de texto. En el HTML hacemos lo siguiente:

<ul>
<li class="bgcolor<?php echo rand(1,5) ?>fontstyle<?php echo rand(1,3) ?>">
Contenido del comentario.</li>
</ul>

Luego en el CSS aplicamos estilos de texto diferentes para fontstyle1, fontstyle2 y fontstyle3, generando así la posibilidad de combinar colores y tipos de fuente aleatorias, lo cual abre más las posibilidades de combinación. Pueden ver un ejemplo en esta página.

Otra opción es aplicar las propiedades directamente en el HTML, en caso de ser estas numéricas, como por ejemplo márgenes, espaciado, tamaños de fuentes, etc. En este ejemplo pueden ver como al actualizar la página el elemento va cambiado de ubicación, aplicando lo siguiente:

<span class="mensaje" style="position:absolute;top:<?php echo rand(1,90) ?>%; left:<?php echo rand(1,90) ?>%">Hola!</span>

También podemos hacer que se impriman propiedades que no sean numéricas, esto podemos hacerlo generando un array de la siguiente manera:

<?php $align = array(
1 => "left",
2 => "right",
3 => "center",
4 => "justify", ); ?>

Con esto, asignamos a cada propiedad un número de los que van a imprimirse al azar, ahora en el HTML aplicamos lo siguiente:

<ul>
<li style="text-align:<?php echo $align[rand(1,4)] ?>">
Contenido.</li>
</ul>

Es decir, que así aplicará un alineación aleatoria entre las que se encuentran en el array que generamos para cada elemento. Pueden ver un ejemplo funcionando en esta página.

Como verán las posibilidades son muchas y las combinaciones interminables, es una buena manera de darle un poco de vida a nuestro sitio sin tener que usar AJAX, aunque sus usos son muy diferentes. Ahora, antes de cerrar se me ocurre que otra posibilidad puede ser tener varias hojas de estilo diferentes e ir cargando aleatoriamente cada una de ellas, lo cual sería algo bastante extraño, pero sobre gustos…

Ser un diseñador web freelance tiene muchísimas ventajas, pero para poder aprovecharlas se necesita conocer sobre bastantes temáticas, las cuales en un momento u otro se deben aplicar a nuestro trabajo. Quien maneje la mayor cantidad de las mismas seguramente tendrá sonando su teléfono constantemente con ofertas, a continuación voy a comentar alguna de ellas.

Lo básico y esencial que un diseñador web debe conocer es XHTML y CSS, el alma y vida de los sitios de internet. Debe conocer cada tag, para que sirve y en que situación utilizar cada elemento. Además debe hacer que ese código sea armónico y valide. Al margen de esto también debe hacer que se vean bien en todos los navegadores, entre los cuales se encuentra Internet Explorer en su versión 6.

Como sabemos podemos hacer sitios enteramente de código y texto con excelentes resultados, pero la mayoría de los casos requieren imágenes que hagan nuestro diseño elegante. Es decir, el diseñador web debe saber manejar las herramientas de edición de imágenes y además tener un muy buen gusto. Conocimientos de arte y dibujo no vienen para nada mal ya que debe ver al diseño como tu todo en sí mismo, balanceado y correcto.

Si bien no es a lo que principalmente debe ocuparse, el diseñador también debe conocer de los lenguajes de programación, por ejemplo PHP o XML, con los cuales se encontrará en sus trabajos. Con esto quiero decir que además de su trabajo, debe comprender como es el que realizan los demás ya que no puede estar ajeno a lo que de alguna manera lo rodea. Un diseñador que sabe programar está muy bien cotizado.

A pesar de ser una tecnología que cada vez se utiliza menos, también es necesario que conozca sobre Flash ya que hay algunos clientes que necesitan (o piensan que necesitan) agregar estos elementos a sus sitios. Eso sí, lo que también debe saber es que no puede hacer un sitio 100% en Flash.

Lo que sí va a necesitar para darle un poco de vida y mejorar la usabilidad del sitio que esté realizando es saber utilizar AJAX. Esta tecnología cada vez es más necesaria, y del modo en que avanzan los modelos de sitios web, quien desconozca sobre esto va a estar un paso atrasado.

Otro aspecto sobre el cual no puede hacer vista gorda el diseñador es sobre SEO (Optimización para buscadores), ya que una buena parte de esto se realiza desde el XHTML. Si desconocemos como funcionan los buscadores no podremos hacer sitios que sean fáciles de indexar y que aparezcan entre los primeros resultados. Esto será un punto que todo cliente valorará.

Como para ir finalizando y dejando algunas nimiedades de lado, quiero destacar lo más importante que el diseñador debe manejar es la relación con el cliente, donde por desgracia no todo es color de rosas y por lo general lo que a uno le parezca oportuno al otro le va a parecer ridículo. Simplemente es cuestión de mantener una buena comunicación y llegar lo más rápido posible al difícil hecho de comprenderse mutuamente.

Ahora bien, como verán son muchas las cosas que el diseñador debe saber, otras tantas puede incorporarlas aunque no sean cruciales y unas varias debe olvidarse a la hora de ponerse a diseñar. Tal vez sabiendo esto, las personas que al escuchar tu presupuesto piensan: “no gracias, prefiero que me haga el sitio mi sobrino que trabaja en un cybercafe”, comprendan un poco más de que se trata todo esto.

Tal como cuenta Samuel en su artículo, me ha pasado también de pecar de joven, inexperto y necesitado y he respondido que sí a muchas cosas que han pedido mis clientes. Con el tiempo, a pesar de no haber sido mucho, me he dado cuenta de que en ocasiones hay que responder no para que nuestro trabajo sea más próspero, agradable y respetable. Algunos ejemplos:

¿Puedes mostrarme un esquema que nos ayude a elegir el diseñador? No. No trabajes gratis ni pierdas tiempo en un hipotético trabajo.

¿Puedes hacerme un descuento en el precio? No. Es poco serio aceptar hacer un descuento, es una forma de decir que puedes hacer este trabajo por mucho menos y que el resto del dinero lo cobras sin saber por qué.

¿Vas a registrar mi dominio y hostear mi web? No. Ese no creo que sea un trabajo que te corresponda. El tema del dominio y el hosting es algo muy personal del dueño del sitio. Además administrar esos aspectos es muy engorroso.

¿Puedes copiar este sitio? No. Ese va a ser un gran problema para vos, puedes perder todo tu respeto por hacer eso, hasta tal vez ganarte algún problema legal. Es un trabajo simple y por ende dinero fácil, pero no caigas en eso.

¿Puedes tener esto terminado para esta noche o para mañana? No. Es muy difícil saber cuando algo puede estar terminado, principalmente cuando debe gustarte a vos, no a mi. Además, en caso de estar apurado, vas a tener que pagar por eso.