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.

PhpMyAdmin es muy sencillo aprender a usar y es una gran herramienta para muchos de los diseñadores/programadores que desarrollan themes de CMS o aplicaciones propias en PHP. En este post al que titulo “Poniendo primera en la Consola Mysql” voy a realizar las acciones y consultas que se pueden hacer en la interfaz amigable de PHPMYAdmin pero desde la Consola MySql de mi servidor local.

1 – Acceder a la consola de Mysql

El server local que uso para la administración de bases de datos MySql es el Wampserver (Desgargar), me gusta por su simpleza y estabilidad como server local. Una vez instalado se puede acceder a la Consola muy facilmente haciendo doble click en el icono del programa.
De esta manera pongo en funcionamiento el servidor, y una vez iniciado hago click izquierdo con el mouse sobre el icono Wampserver de la barra del reloj de windows para poder seleccionar la consola en el menu.

2 – Crear una BD y llamarla

Para todo el tutorial voy a crear una base de datos que guardará una lista de autos en venta. Para crear la base de datos escribo la siguiente linea en la consola y presiono Enter.

mysql > create database ventadeautos;

Una vez creada la base de datos, necesito llamarla para empezar a guardar datos en ella, esto lo hago a través de la siguiente linea de código:

mysql > use ventadeautos;

3 – Crear usuarios y asignar privilegios

Ahora necesito crear un usuario que sera el administrador de la base y tendrá todos los permisos para administrar todas las bases y tablas del servidor, el nombre será Usuario y la contraseña “123″.

mysql > GRANT all ON * to usuario identified by '123' with GRANT OPTION;

4 – Crear tablas para guardar datos adentro

La tabla que contendrá los autos se llamará Autos en Venta y su estructura estará compuesta por 4 campos: Indice, Marca, Modelo, Precio y Stock. La columna Indice será la clave primaria, esta clave le permite a la tabla relacionarse con otras, como por ejemplo con una tabla de clientes.

mysql > create table autosenventa
mysql > (indiceid int unsigned not null auto_increment primary key,
mysql > marca char (40) not null,
mysql > modelo char (20) not null,
mysql > precio char (20) not null,
mysql > stock char (10) not null
mysql > );

5 – Mostrar tablas, bases y mostrar detalles

Ahora que ya tengo mi base y mi tabla voy a comprobar si estas se crearon sin errores, para eso uso los siguientes comandos:

mysql > show tables;

mysql > describe autosenventa;

Recursos complementarios

Descargar Wampserver

Descarga el servidor Wampserver desde la pagina oficial, tambien tienes el enlace al principio del post por si este falla.

Tutorial de instalación de Wampserver

Un tutorial para aprender a instalar el servidor en nuestra pc, ademas explica como integrarlo con Dreamweaver lo que me parece un bonus especial para los lectores.

Newsticker fue recomendado hace un tiempo por Xiberneticos, un script JQuery que permite crear cajas animadas con noticias breves, esto desencadeno este post donde voy a fusionar Newsticker con WordPress.

El efecto logrado es similar al que se puede ver en los post aleatorios de la sidebar del theme actual de Puente Cromático. A continuación vamos a crear los archivos newsticker.php, newsticker.css, newsticker.js, vamos a agregar algunas funciones a functions.php y descargaremos el framework jQuery.

Configurando el Header

En el header necesitamos poner los enlaces a los archivos .js, .css y una función llamada jQuery.noConclict() que se encarga de evitar el conflicto con los otros scripts jQuery que usa WordPress.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newsticker.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/newsticker.js"></script>
<script type="text/javascript" > jQuery.noConflict();</script>

newsticker.php

Hacemos una consulta a la base de datos y obtenemos los Post del blog en orden aleatorio (orderby=rand), los artículos pasan al bucle While mostrando los resultados a traves de las funciones de WordPress. Para mostrar los Thumbnail implemente un script creado por Metacortex, el cual toma las imágenes directamente de la BD sin necesidad de estar cargándolas con un campo personalizado.

<ul id="listticker">
<?php $my_query = new WP_Query('orderby=rand'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();?>
	<li>
    <?php mi_imagen($tamano = 'mini');?>
	<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="news-title"><?php the_title(); ?></a>
	<span class="news-text">Categor&iacute;a:<?php the_category(); ?></span>

	</li>
	<?php endwhile; ?>
</ul>

newsticker.css

Basicamente es el CSS que trae Newsticker, solo modifique el tamaño de las imagenes.

body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#listticker{
	height:200px;
	width:400px;
	overflow:hidden;
	border:solid 1px #DEDEDE;
	padding:6px 10px 14px 10px;;
}
#listticker li{
	border:0; margin:0; padding:0; list-style:none;
}

#listticker li{
	height:60px;
	padding:5px;
	list-style:none;
}
#listticker a{
	color:#000000;
	margin-bottom:
}
#listticker .news-title{
	display:block;
	font-weight:bold;
	margin-bottom:4px;
	font-size:11px;
}
#listticker .news-text{
	display:block;
	font-size:11px;
	color:#666666;
}
#listticker img{
	float:left;
	margin-right:14px;
	padding:4px;
	border:solid 1px #DEDEDE;
	width:50px;
	height:50px;
}

newsticker.js

Para que el script no genere conflictos en wordpress, hay que modificar el identificador “$” agregandole un nombre único, en este caso le puse $e. Esta variable se define en la primera linea con el valor de jQuery.noConflict();.

var $e = jQuery.noConflict();
$e(document).ready(function(){

	var first = 0;
	var speed = 700;
	var pause = 3500;

		function removeFirst(){
			first = $e('ul#listticker li:first').html();
			$e('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$e(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$e('ul#listticker').append(last)
			$e('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);

});

El archivo jQuery y la modificación de functions.php

Hay que agregar estas lineas de código al principio del archivo functions.php para poder llamar las imágenes automaticamente. Este script puede devolverlas en 3 tamaños, en este caso vamos a usar “mini” para tomar las miniaturas creadas por WordPress. No es necesario cambiar la configuración de las mismas desde el panel del blog, ya que en newsticker.css les puse dimensiones fijas.

<?php
// Función para extraer imagen de artículo. Autor: Darío Ferrer (alias: metacortex) 13/12/2008 - 4:45
// http://www.forosdelweb.com
// Licencia GNU/GPL. Puedes remover estos créditos si quieres.
      function mi_imagen($tamano = '') {
        if ( $images = get_children( array (
          'post_parent'    => get_the_ID(),
          'post_type'      => 'attachment',
          'numberposts'    => 1,
          'post_mime_type' => 'image'
         )));
        {
          if(!empty($images)) { //Solo añadí esta línea
              foreach( $images as $image ) {
                if($tamano == 'mini') {
                $imagen = wp_get_attachment_image( $image->ID, 'thumbnail' );
                } if($tamano == 'medio') {
                $imagen = wp_get_attachment_image( $image->ID, 'medium' );
                } if($tamano == 'grande') {
                $imagen = wp_get_attachment_image( $image->ID, 'full' );
                }
                echo $imagen;
              }
          } // y su respectivo cierre
        }
      }
?>

Por ultimo se necesita el archivo jQuery que se puede descargar desde este enlace. Al ser un archivo .txt, se debe remplazar la extensión a .js o copiamos el texto y creamos el archivo .js con cualquier editor web.

Colocamos jquery-1.3.2.js y newsticker.js dentro de la carpeta js del theme, si no existe hay que crearla. Los archivos newsticker.php y newsticker.css van en la raiz del theme donde se encuentra functions.php, index.php, sidebar…

Llamando a Newsticker desde el Theme

Para ver a Newsticker en cualquier parte del blog, hay que usar la función include con la ruta a newsticker.php.

<?php include (TEMPLATEPATH . '/newsticker.php'); ?>

Nota:
Los archivos aleatorios se dejan de visualizar una ves que se termina el While. Esto no es un problema para los blogs que tienen muchos post. Seria muy bueno si alguien puede colaborar con un poco de código, este script puede ser muy útil para todos los bloggers.

No quiero hablar de optimización de tiempo, por naturaleza sabemos que los frameworks acortan las horas de trabajo, pero lo mas importante es que ofrecen soluciones concretas y sin errores.

Porque programar puede ser una pesadilla para cualquier iniciado en PHP, aunque puede ser fácil aprender, aplicar lo aprendido conlleva otros factores como familiarizarse con los servidores y la seguridad.

Gracias a Dreamcss nos encontramos con estos 10 frameworks PHP, CodeIgniter,CakePHP, Zend PHP y otros que no conocía como Prado.

Descarga los Frameworks PHP

José Anderson Mariñas envió este script a a la comunidad de illasaron.com, especialmente dedicado a los iniciados en programación PHP. Este pequeño script te permite crear la paginación de los datos obtenidos de una BD.

El .RAR* adjunta imagenes a modo de ejemplo del resultado de la paginación, un archivo con las clases y el ejemplo práctico con sus respectivos comentarios. Muy pequeño y facil de implementar, solo hay que tener minimos conocimientos de php para hacer correr este script de paginación.

Descarga el script de paginación php desde este enlace.