WoW players discriminated at work. Should employers think creatively?

Apparently some employers are discriminating against some online gamers. To be fair, the source of this news is a post in a forum that has been picked up and repeated throughout several blogs probably making it much more of an issue than what it really is. Nevermind, we are going to latch on to it.

From the forum post it seems that some employers don’t want to recruit World of Warcraft players because their mind is never 100% on their work. Of course the first thing one ever thinks is “whose is?” I mean, we all have a life, family, friends, hobbies, threatening Russia mafia trying to collect gambling debts, etc. and the mind will tend to drift from work to other lesser pursuits at various times during the day.

Sure, WoW may not have the mainstream appeal of traditional time-wasters like “Dancing with the Stars” (now, there’s something employers should discriminate against), sports (golf included), and general office gossip; but as far as obsessions go it could be much worse. In fact, if anything, employers should be encouraging their employees to get hooked on WoW.

Hear me out, here are the reasons why it’s good for an employee to play WoW:

  • WoW players are used to constant grinding (think mindless repetitious tasks)
  • WoW players can wait for hours on end for the last member of a raiding party  (think endless meetings that lead nowhere).
  • WoW players require little in way of stimulus, some XP and a new armor will do (think unpaid extra time)
  • WoW players know how to persevere to attain a goal, like killing a real tough boss (ok, bad example, tell them the real boss is a competitor’s CEO)
  • WoW players are used to interact with mindless NPC characters that give the same answer over and over (think complains to HR)

There are so many advantages to playing WoW over going to work in real life and, at the same time so many similarities, that one of the best moves a company could do is move entirely into virtual existence in WoW. Players Employees could be paid in XP and loot while grinding through reports and spreadsheets, or battle promotional campaign monsters.

WoW Workplace

Hey, have you seen the new elf in Marketing? She’s hot! — ok, so maybe not even then they’ll be totally focused on work. Screenshot by Juanpol

Sure, you would still need to give them some money to send kids to school and that sort of thing, but they’ll be happy whith much less as long as the loot is good and they’ll spend much less time in unproductive activities like chit-chatting about Letterman, commenting football games or discussing politics.

Should employers discriminate against World of Warcraft players? – Boing Boing

Como ponerle marcos decorativos a las capas

Uno de los retos que surgen cuando se hacen páginas web por medio de capas y css es como poner un marco decorativo o esquinas redondeadas. El reto es mayor cuando se está haciendo un diseño flexible o líquido y el tamaño de la ventana deba ser variable, ajustándose al tamaño de la letra o al de la ventana del visitante.

La manera de hacer eso es mediante el uso creativo de las posiciones absolutas de diferentes capas y sus fondos. Por ejemplo, teniendo el siguiente código:

      <div class="cajabonita">
        <div class="sup-izq"></div>
        <div class="sup-der"></div>

        <div class="caja-externa">
          <div class="caja-interna">
          <p>Por fin, aquí va el contenido de nuestra caja. El ancho de la caja debe variar con el ancho de la ventana del navegador.</p>
          </div>
        </div>

        <div class="inf"></div>
        <div class="inf-izq"></div>
        <div class="inf-der"></div>
      </div>

Hemos creado varias capas dentro de nuestra caja para poder colocar los diferentes segmentos de nuestro marco. Para colocar todo como se debe ponemos el css:

    .cajabonita {
      width: 50%;
      margin: 0 auto;
      color: #000;
      background: url('sup.gif') top repeat-x #fff;
      position: relative;
      border: 0 none #fff;
    }
    .sup-izq {
      width: 80px;
      height: 80px;
      background: url('sup-izq.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; left: 0;
    }
    .sup-der {
      width: 80px;
      height: 80px;
      background: url('sup-der.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; right: 0;
    }
    .caja-externa {
      width: 100%;
      padding: 80px 0;
      background: url('izq.gif') left repeat-y transparent;
    }
    .caja-interna {
      margin-left: 80px;
      padding-right: 80px;
      background: url('der.gif') right repeat-y transparent;

    }
    .inf {
      width: 100%;
      height: 80px;
      background: url('inf.gif') bottom repeat-x #fff;
      position: absolute;
      bottom: 0;
    }
    .inf-izq {
      width: 80px;
      height: 80px;
      background: url('inf-izq.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; left: 0;
    }
    .inf-der {
      width: 80px;
      height: 80px;
      background: url('inf-der.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; right: 0;
    }

Como ves primero posicionamos nuestra caja principal de manera relativa para después poder posicionar las esquinas de manera absoluta dentro de esta caja. Como tenemos un fondo para el lado izquierdo y otro para el lado derecho necesitamos poner dos cajas, una encima de otra. Las imágenes de las esquinas deben tener el mismo alto que las imágenes de los bordes superior e inferior y el mismo ancho que las imágenes de la izquierda y derecha. Mira el ejemplo terminado.

Este código funciona en Firefox, Safari, Opera e IE7. El único que tiene un problema menor es IE6 que pone los fondos inferiores un pixel arriba de donde debería. Esto tal vez se pueda arreglar mediante comentarios condicionales o con una elección de colores que haga que no se note.

Ten en cuenta que esta puede no ser la mejor forma de lograr este efecto ya que estamos añadiendo varias capas sin contenido y sin ningún significado particular dentro de la página. Una mejor solución podría ser añadir las capas adicionales mediante javascript para que nuestro código html quede más legible.

CSS3 incluye varias nuevas propiedades para bordes y fondos múltiples que pueden hacer que esta técnica quede inútil, pero mientras tanto te puede ayudar en algo.

Actualización

En Foros del Web Mikmoro me señala un par de técnicas más. La primera usa solo una imagen y la segunda requiere de cuatro. El primer caso ingeniosamente acomoda las capas de las esquinas y usa las propiedades para posicionar el fondo (bottom left, top left, etc.) según se requiera para cada esquina. En el segundo ejemplo cada esquina tiene su fondo.

Obviamente es mejor usar el menor número de imágenes, clases y capas en el código, reducirlos lo más posible para facilitar su manejo y mantenimiento. El único inconveniente con las técnicas de Mikel es que, aunque puedes hacer las capas flexibles o líquidas, el tamaño máximo que pueden tener es algo más que el del alto y ancho de las imágenes de fondo. Más allá se rompe el efecto del borde.

Esto no necesariamente es importante y si haces las imágenes de buen tamaño (un borde de colores comunes en gif no debe pesar demasiado) el efecto funcionará para cualquier capa de dimensiones prácticas. Esto será lo preferible en la mayoría de los casos.

Por otro lado, si necesitas que el efecto rodée enormes áreas sin tener que preocuparte por el alto o ancho que puedan llegar a tomar o por hacer imágenes grandes, entonces la técnica de aquí será mejor.