Cada día me doy cuenta que esto no se termina mas, que el diseñador de hoy es y será un eterno estudiante, la tecnología avanza hacia el infinito a pasos agigantados y todos los días me encuentro con algo nuevo. No me quejo por la adquisición de conocimientos, me fastidio por como las empresas elaboran los perfiles de sus futuros empleados, hoy buscan al empleado que tenga el conocimiento necesario para hacer la tarea de 3 o 4 personas.

Las ofertas laborales

Como decia, hoy muchas empresas pretenden tener una sola persona y que esta tenga todo el conocimiento de la web, que sepa programar, diseñar, posicionar sitios, maquetar interfaces de aplicaciones, hacer animaciones profesionales… y así, puedo hacer una lista bastante extensa del perfil buscado.

Me animo a decir que hoy se busca al Empleado Empresa, una persona que pueda cubrir 4 o 5 perfiles laborales al precio de uno, una realidad que se ve en las ofertas laborales de los portales mas conocidos de la web.

Portales que estuve visitando en estos días para ponerme al tanto de la actualidad, para finalmente desencadenar en la siguiente conclusión, hoy las empresas buscan un empleado empresa.

HTML/CSS

Además de ser la base fundamental, estos lenguajes son la moneda corriente hoy en dia, en las ofertas laborales se piden alta capacidad para maquetar sitios Crossbrowser y aplicaciones web compatibles con todos los navegadores existentes. HTML5, CSS3 y la web móvil, son otros de los ingredientes que se suman en este requisito.

Javascript y Ajax

Lo que mas ví en las busquedas fue el dominio avanzado de Javascript y el conocimiento intermedio de frameworks como jQuery, sumado a conocimientos intermedio de Ajax. Esto se traduce en que la persona tiene que ser un programador profesional, porque si uno domina javascript, ya tiene la base necesaria para dominar los frameworks y Ajax.

Flash

Flash esta en decadencia pero todavía las empresas requieren del empleado un alto dominio del programa. Esto supone que ademas de manejar bien el software, hay que tener creatividad y experiencia en el diseño de animaciones. Recalco que entre las ofertas vi que se requiere el dominio de ActionScript 2 y conocimientos intemedios de ActionScript 3.

PHP

Este lenguaje también figura entre los requisitos actuales, pero solo vi una o dos ofertas que pedían el total dominio del mismo (lo que ya me pareció una burla). En todas las otras ofertas el requisito era tener el conocimiento básico o intermedio para poder trabajar con los sistemas prefabricados de las empresas.

Diseño Gráfico

Además ser técnico por el dominio de lenguajes de programación, se requiere que le persona sea creativa y tenga la capacidad de crear diseños detallistas y de alto impacto.

Posicionamiento SEO

Este aparto es menos contundente en las ofertas, y se lo puede encontrar en formatos como “Optimización de sitios para buscadores” y bueno… lo demas es historia

Lo demás es Historia

La lista sigue y cada día se van sumando nuevos requisitos en el perfíl del diseñador web, requisitos que se van acumulando en pila porque el proceso de migración tecnológica es muy lento, sobre todo por las diferencias que existen entre los navegadores web.

Estoy seguro que me faltaron varios puntos importantes, pero también estoy seguro que ustedes ya los están pensando y junto a este post tiro la pregunta:
¿Vale la pena cumplir todos estos requerimientos y trabajar como empleado en una empresa?.

Recursos complementarios

Que estudiar para ser diseñador web

Un post de hace unos años pero muy relacionado con el que acabas de leer.

Este pequeño script jQuery permite crear enlaces externos XHTML válidos usando la etiqueta “rel”. Este atributo se relaciona directamente con el script y adquiere el valor de enlace externo, para que pueda abrirse en una nueva ventana.

Para mantener la semántica de los microformatos usamos la etiqueta rel con el valor external, y lo llamamos a través de jQuery. Simple y muy útil, ya no hay excusa para no validar en la W3C.

Enlaces válidos

	
		
		

		
	
	
		Google!
		My site!
	

Fuente

No margin for errors

Word-wrap es una propiedad creada por Microsoft para la nueva versión de CSS. Esta propiedad soluciona el “problema de cadena de texto” cortándolo en partes para que las palabras largas no desborden de su caja o contenedor.

La propiedad con el valor a utilizar en la hoja de estilos seria word-wrap: break-word, y para este caso declararlo en la clase “Texto” para que el párrafo de dicha clase muestre el efecto.

En la primera gráfica se puede ver como desborda la cadena, y en el segundo como la clase texto la corta y la distribuye en el div.

Código CSS

.caja{
width:200px;
border:1px solid #999999;
color:#333333;
background-color:#FFFFCC;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
margin-bottom:20px;
}
.texto{
word-wrap: break-word;
}

Código xHtml

<p>Lorem ipsum dolor sit amet, consectetur
adipiscingelitVestibulusedsemutloremsemperportaVestibulumanteipsump
ultrices posuere cubilia Curae <p>


<p class="texto">Texto con word - wrap Lorem ipsum dolor sit amet, consectetur
adipiscingelitVestibulusedsemutloremsemperportaVestibulumanteipsump
ultrices posuere cubilia Curae <p>

Resultado

Text-Shadow es una de las nuevas propiedades en CSS3 que permite estilizar las fuentes. Esta propiedad es la solución a muchos trucos que se idearon para simular sombras en las fuentes de los sitios web.

Esta propiedad actúa a modo gráfico sin duplicar el texto y sin generar una imagen. Los valores para la propiedad Text-shadow tienen varios parámetros, en primera instancia hay que definir el color, luego el eje X e Y de la sombra y el efecto de difuminado. Es una propiedad oficial que funciona eficientemente en Firefox.

Código CSS:

.sombra{
color:#000000;
font:22px Arial, Helvetica, sans-serif;
text-shadow:#CCCCCC 2px 1px 2px; /*Color de la sombra - Eje X - Eje Y - Difuminado*/
}

Código xHtml:

<p class="sombra">Texto con Sombra<p>

Resultado:

En este tutorial usaremos jQuery para crear un pequeño script que cambie el tamaño de la fuente al presionar un botón. Vamos a crear una sencilla interfaz con 3 botones, un texto y un poco de jQuery, uno de los frameworks javascript mas fáciles de usar.

La estructura xHtml y CSS

Antes que nada, debes establecer la llamada al archivo CSS y JS en el head del documento, para este ejemplo uso la versión 1.3.2 de jQuery.

En el “Body” tenemos el div “Botones” que contiene en su interior tres divs llamados “Boton” que alternarán el tamaño de la tipografía del texto cada vez que se haga click sobre ellos. Como podrás ver “Texto grande” y “Texto chico” tienen unas ID que se llaman “aumentar” y “disminuir”, esas ID son las que vamos a usar en el script para determinar cuando cambiar el tamaño tipográfico usando el condicional If/Else.

En el CSS, debemos especificar un tamaño de fuente para el “Body” que será el “Texto normal” y también crear las clases “grande” y “chica” con sus respectivos font-size.

Texto Grande
Texto Normal
Texto Chico


Titulo del texto

<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis
at. Vivamus eleifend convallis nunc non scelerisque. Nulla tincidunt neque sed tortor
venenatis viverra. Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet.
 Nunc sit amet neque ut lacus adipiscing gravida vel sit amet ante.</p>
<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis at.
Vivamus eleifend
convallis nunc non scelerisque. Nulla tincidunt neque sed tortor venenatis viverra.
Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet. Nunc sit amet
neque ut lacus adipiscing gravida vel sit amet ante.</p>

body{
font-size:12px;
background-color:#FFFAE6;
font-family:Arial, Helvetica, sans-serif;
}
#cuadro{
border:1px solid #CCCCCC;
width:700px;
}
/*Botones*/
#botones{
border:1px solid #CCCCCC;
padding:10px;
float:left;
margin-bottom:10px;
margin-right:30px;
}
.boton{
border:1px solid #FFFFCC;
background-color:#003366;
color:#FFFFFF;
font-size:14px;
float:left;
margin-right:10px;
padding:6px;
}
/*Tamaños de tipografías*/
.grande{
font-size:16px;
}
.chica{
font-size:9px;
}
/*Efecto de boton activo y hover*/
.seleccion{
font-weight:800;
}
.sobre{
background-color:#CC0000;
cursor:pointer;
}

El Script jQuery

El script en si es muy sencillo de entender, lo único que hace es agregar y quitar las clases “grande” y “chica” que están activas sobre el “Body”.

$(document).ready(function(){
$('#botones .boton').click(function(){ /*al hacer click en un botón*/
$('body').removeClass();    /*borre todas las clases*/
if(this.id == 'aumentar'){   /*si la clase botón tiene el ID aumentar*/
	$('body').addClass('grande');  /*cargue desde el CSS la clase grande*/
	}
else if(this.id == 'disminuir'){ /*si el ID es disminuir*/
	$('body').addClass('chica'); /*cargue la clase chica*/
}
$('#botones .boton').removeClass('seleccion'); /*elimine la negrita del boton*/
    $(this).addClass('seleccion');/*agregue la negrita al botón activo*/
 });
});

/*EFECTO HOVER*/
$(document).ready(function() {
  $('#botones .boton').hover(function() {
    $(this).addClass('sobre'); /*agregue efecto hover*/
  }, function() {
    $(this).removeClass('sobre');  /*quite efecto hover*/
  });
});

Resultado

En el siguiente enlace esta el ejemplo funcional del script. Con un poco de astucia se lo puede mejorar agregando botones y combinándolo con nuevas ideas.

Ver el ejemplo

Recursos complementarios

Descarga el framework jQuery

Además de poder descargar el framework, el sitio oficial tiene infinidad de recursos y tutoriales interesantes.

Ordena tus hojas de estilos

Stylenet es una herramienta online que ordena hojas de estilos CSS.