Muchas veces he utilizado íconos para webs que he realizado, pero los íconos que a mi me gustan son los que tienen volúmen bastante color, se ven modernos. Aquí les dejo algunos links para que puedan descargar íconos para su web gratis:

1. Free Icons Web
2. Galería en CristalXP
3. Stinky9 en Devianart
4. Media Design en Devianart
5. Iconspedia

En abril de 2009 abri una empresa con un amigo, esta empresa se llama ExpresArte. Antes de esa fecha, ya había pensado tener mi propia empresa, ya que en los diferentes lugares donde he trabajado he aprendido muchas cosas y me sentí preparado en poner en marcha una empresa que brinde calidad de primera y no ser una empresa más en el gran mercado que hoy existe. Mis conocimientos en programación son por los tantos años que me he dedicado a la investigación y el desarrollo de páginas webs y sistemas para empresas. Expresarte es una empresa que se dedica al desarrollo de páginas webs, desarrollo de sistemas a la medida, diseño publicitario y producción audiovisual. Expresarte es especialista en Tecnología, Marketing y Comunicaciones. Además, Expresarte tiene un blog para compartir conocimientos y experiencias. Si estás interesado en que realice un trabajo para tu empresa o te ayude en algún proyecto, no dudes en contactarnos por nuestra página web www.expresarte.pe. También síguenos en Facebook

Gracias

El uso del acordion en las páginas webs de ahora son muy usados y es más simple de lo que uno se puede imaginar, sobre todo si lo usas con JQuery. En realidad qué es? Puede ser un <div> oculto que los muestras cuando le das clic a otro DIV, bueno yo uso DIVS pero puedes usar un <p> u otra etiqueta.
Primero creamos los div con la información. Vamos a ponerle un número para poder identificar más rápido los títulos y la información en base a al div en el que se encuentran.

<div class="acordion">
 
<div id="item_1" class="item">
 
<div id="titulo_1" class="titulo">Título 1</div>
 
 
<div id="info_1" class="info">Información 1</div>
</div>
 
 
<div id="item_2" class="item">
 
<div id="titulo_2" class="titulo">Título 2</div>
 
 
<div id="info_2" class="info">Información 2</div>
</div>
 
 
<div id="item_3" class="item">
 
<div id="titulo_3" class="titulo">Título 3</div>
 
 
<div id="info_3" class="info">Información 3</div>
</div>
</div>

Hemos encerrado todo en un div con el estilo “acordion”, dentro hay grupos, agrupados por un div con el estilo “item” y dentro hay dos divs, el título (estilo “titulo”) y la información (estilo “info”). Vamos a darle estilo a estas capas.

div.acordion{
	width: 200px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.item div.titulo{
	background-color: #FF6;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 3px;
	height: 21px;
}
div.item div.info{
	background-color:#69F;
	padding: 5px;
}

Le hemos dado tamaño, tipografía, colores, bordes, etc. Esto lo puedes cambiar en base a los colores que quieras utilizar o la tipografía, sin que esto percuta con el funcionamiento. Ahora lo que se debe hacer es ocultar la información, para que solo sea mostrada cuando se le de clic al título, esto lo hacemos en el estilo “info”.

div.item div.info{
	background-color:#69F;
	padding: 5px;
	display: none;
}

Ahora veamos el Javascript, yo llamo a los JS antes de cerrar la etiqueta BODY. Vamos a llamar al los JS jquery.js y jquery.easing.js. Además, cuando termine de cargar el documento vamos a hacer que el acordion funcione, para esto vamos a utilizar el método each de Jquery. Esto lo utilizo para que se sepa cual es el título y la información de cada “item”.

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.easing.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>

Luego recuperamos el titulo y la información por cada “item”, aquí es donde usamos el número que le pusimos a los divs. Cuando le demos clic al título, su info respectiva se mostrará o se ocultará dependiendo del caso.

$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1]; //RECUPERAMOS EL NÚMERO
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			$(info).slideToggle();
		});
	});
});

Como ven, hasta ahí ya funciona el acordio, ahora pongámosle el easing y tiempo, el tiempo es en milisegundos, osea cada 1000 es 1 segundo.

var tiempoAbrir = 1000;
$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1];
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			$(info).slideToggle({duration: tiempoAbrir, easing: "easeOutElastic"});
		});
	});
});

Si prueban hasta este punto, van a ver que cuando se abre uno no se cierra el otro. Para que no estén dos abiertos lo que se debe hacer es que cuando se abra uno se guarda en una variable el que está abierto, entonces si se le da clic a otro se cierra primero éste y luego se abre el otro.

var abierto;
var tiempoAbrir = 1000;
var tiempoCerrar = 500;
$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1];
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			if(abierto == info){
				$(info).slideUp({duration: tiempoCerrar, easing: "easeInElastic"});
			}else{
				if(typeof abierto == "undefined"){
					$(info).slideDown({duration: tiempoAbrir, easing: "easeOutElastic"});
					abierto = info;
				}else{
					$(abierto).slideUp({duration: tiempoCerrar, easing: "easeInElastic", complete: function(){
						$(info).slideDown({duration: tiempoAbrir, easing: "easeOutElastic"});
						abierto = info;
					}});
				}
			}
		});
	});
});

El plugin jquery.easing.js tiene diferentes tipos de movimientos, los pueden ver en bajando el ejemplo

Mira el ejemplo
Descarga el ejemplo

No olvides dejar tus comentarios

Con PHP y su librería GD podemos recortar una imagen fácilmente. Vamos a crear una función que se llame RecortarImagen y le mandaremos los siguientes parámetros: Imagen Original, Imagen de Destino, Ancho a Cortar, Alto a Cortar, Posición de la Imagen Original Horizontalmente, Posición de la Imagen Original Verticalmente y La Calidad de la Imagen.

Por ejemplo, podemos decirle al usuario que seleccione un tamaño de la imagen cuadrada (ancho = alto). En el tercer parámetro mandamos uno de los tamaños que fue seleccionado, por ejemplo el cuadrado será de 100×100 (mandámos el número 100) y en el cuarto parámetro al tamaño que queremos achicarlo y quedaría así.

 imagesx($pic), "height" => imagesy($pic), "picture" => $pic);
    $width = $pic["width"];
    $height = $pic["height"];
 
	if($width > $height){
		$masGrande = $width;
		$porcentaje = $TamanoSeleccionado/$width;
	}else{
		$masGrande = $height;
		$porcentaje = $TamanoSeleccionado/$height;
	}
	$RecortarAncho = $masGrande*$porcentaje;
	$RecortarAlto = $masGrande*$porcentaje;
 
    $imgOriginal = $pic["picture"];
    $imgFinal = imagecreatetruecolor($TamanoFinal, $TamanoFinal);
    imagecopyresampled($imgFinal, $imgOriginal, 0, 0, $x, $y, $TamanoFinal, $TamanoFinal, $RecortarAncho, $RecortarAlto);
    imagejpeg($imgFinal, $ImagenDestino, $calidad);
    imagedestroy($imgFinal);
}
?>

También en este blog puede ver cómo Crear thumbs con PHP

El modificar una imagen en ancho y alto con PHP 5 es muy sencillo con las funciones nativas que tiene la librería GD de PHP. Vamos a crear una función donde le mandaremos los parámetros necesarios para achicar una imagen. Los parámetros que vamos a enviar son: Archivo de Origen, Nuevo archivo (thumb), Ancho, Alto y Calidad de Imagen.
Vamos a llamar a la función CrearThumb

Ahora podemos hacer un “Autoresize” del alto, según el ancho de la imagen. Vamos a modificar la “línea 14″

$fh = ($alto==0) ? $fw * $height / $width : $alto;

En este blog puede ver cómo Recortar una imagen con PHP

Igual que youtube, nosotros con unas pocas líneas de código en PHP podemos convertir nuestro videos o audios a formato FLV automáticamente con PHP. Con este artículo podrán hacer, por ejemplo, una administración de una galería de videos y/o audios para luego ser vistos o escuchados, respectivamente, en su web por un player hecho en Adobe Flash.

El FFMPEG puede ser utilizado en Linux como en Windows. Además con el FLVTool2 podemos manipular el FLV para que tenga lo necesario para poder correr nuestro FLV en un player hecho en Flash.

Veamos sencillamente cómo convertir un WMV a FLV con el FFMPEG

Este ejemplo lo vamos a hacer en Windows pero recuerden que es igual en Linux, solo que no vamos a tener los ejecutables  en la misma carpeta como en Windows, el FFMPEG y FLVTool2 se instalan en Linux. Para este caso copiamos nuestros ejecutables del FFMPEG y FLTool2 en la carpeta “C:\videos”. Yo voy a tener el archivo mivideo.wmv en “C:\videos” para no tener que escribir otras rutas en la línea de comando.

Así estaría la carpeta

Abrimos Command

Ahora escribimos el línea básica para convertir mi video mivideo.wmv a mivideo.flv. “ffmpeg -y -i mivideo.wmv -f flv -vcodec flv -acodec mp3 -s 320×240 -ar 22050 mivideo.flv”

Lo que indica, en rasgos generales, en esa línea es que con mivideo.wmv vamos a crear el mismo video pero en formato FLV y su nombre será mivideo.flv, aunque este archivo exista vamos a reemplazarlo, el tamaño será de 320×240 px.  y tendrá un 22050 Hz. Utilizaremos el codec MP3, para audio y el codec MPEG para video.

Si queremos convertir un audio a FLV, sería la misma línea solo que no ponemos el codec de video ni las dimensiones, por obvias razones.

Si escriben “ffmpeg” en la línea de comandos aparecerán todas las alternativas que pueden utilizar.

Opciones del FFMPEG

Ahora veamos el FLVTool2, es sencillo también. Solo escribimos “flvtool2 -UPx mivideo.flv”. Luego de escribir esto verán, en el Command, un formato XML, éste te muestra las propiedades que recuperó del video o audio que formateamos. Con este XML podemos recuperar información valiosa como la duración del video por ejemplo. Podemos guardar este XML de esta manera “flvtool2 -UPx mivideo.flv > mivideo.xml”.

Algo valioso del FFMPEG es que podemos tomar un frame del video y guardarlo en JPEG. Fácilmente con “ffmpeg -i mivideo.flv -vframes 70 -s 120×90 -f image2 -y mivideo.jpg”
Estamos diciendo que cogemos el frame 70 y guardamos la imagen con las dimensiones 120×90 px.

Ok, y donde entra el PHP? Bueno simple, nosotros con el comando “exec” podemos correr lineas de comando con PHP. Esto quiere decir que si en PHP podemos utilizar cualquiera de las líneas que he comentado, por ejemplo

Muchos que se dedican a Web empiezan con trabajos pequeños como “Freelancer” pero poco a poco van tomando más “cancha” y comienzan a hacer trabajos más grandes y van aprendiendo más. Para hacer estos trabajos tuvieron reuniones con el cliente y sacaron el proyecto excelentemente. Pero nunca han tenido una entrevista de trabajo real. ¿Cómo son estas entevistas? Por intuición sabemos algunas cosas, pero qué es lo que nos preguntan las grandes empresas?

En mi antiguo trabajo entrevisté a muchas personas y me di con muchas sorpresas. Muchos de ellos sabían, pero no sabían cómo explicarlo, se callaban y esperaban que les preguntara todo. Otros hablan mucho pero redundaban en lo mismo y la entrevista caia pesada. Me decían muchas cosas que hacían pero se los tenía que sacar por cucharita y en otros casos no llevaban el hilo de la conversación.

Recuerden siempre que vayan a una entrevista de trabajo, ustedes son los que están buscando ese trabajo, deben de dar a entender que son los mejores para ese puesto y que son capaces de trabajar en esa empresa. Demuestren que saben pero sin “aires de superioridad”. Expliquen a detalle sus trabajos, soluciones que han dado a diferentes problemas, trabajo en equipo (esto es muy importante), experiencia relacionada a la empresa entrevistadora, etc.

Traten de averiguar lo máximo posible sobre esa empresa y traten de buscar algún desarrollo que hayan hecho que le pueda beneficiar a la empresa o que esté dentro del ramo de la misma. Den ideas nuevas pero no den a entender que esa empresa no funciona. NUNCA, NUNCA hablen mal de otras empresas donde hayan trabajo o malas experiencias con clientes ni de sus antiguos jefes porque pueden parecer soberbios. Recuerden que ellos no han estado ahí y jamás van a entender, como ustedes, lo que vivieron.

Recuerden que los conocimientos técnicos no son todo en la vida, deben dar a conocer que ustedes son buenas personas, que trabajan en equipo, que apoyan a los demás, que pueden enseñar nuevas cosas, que tienen buenas ideas y pueden aprender de ellos.

Aquí algunos links que también hablan del tema.

Consejos para superar una entrevista de trabajo
10 claves para tu entrevista de trabajo

Así es. Podemos instalar una extensión de la famosa librería Extjs a nuestro Dreamweaver desde la versión MX 2004 en adelante. Así como cuando escribimos código HTML o CSS en el Dreamweaver y aparece una ventanita mostrándonos el “código” que puede ir con la palabra que estamos escribiendo, esta extensión funciona de la misma forma con el “código” del Extjs. Pueden entrar a esta página para ver más detalles y descargar la extensión.

He visto muchas preguntas en foros de cómo poder modificar un combo según el valor que el visitante selecciona de otro. Esto es más sencillo de lo que muchos creen. Con este video vamos a ver cómo poder modificar un combo utilizando Ajax. En mi caso uso JQuery pero no es necesario, ya lo verán.

Conocer más de JQuery
Conocer más de JSON
Descarga el Add-on Firebug que utilizo en el tutorial
Acerca de la función Sleep en PHP

Smarty es un framework en PHP que te ayuda a trabajar con plantillas y así separar el código de la vista. Esto nos puede ayudar a utilizar el patrón MVC. Cuando programas es bueno tener una buena metodología y separar la lógica de negocio de tu diseño, así podrás separar las tareas de los diseñadores (armadores) y los programadores.

Con este video van a poder aprender a utilizar el Smarty desde cero

Aquí podrás ver la documentación del Smary en español

No se olviden de comentar