Existen problemas cuando se está armando con capas y css una web, ya que muchas veces necesitamos tener una columna a la izquierda de la otra. Para lograr esto, necesitamos poner los tamaños de anchos exactos para que no se mueva para abajo la capa que debe estar al costado, pero también se debe trabajar con una capa contenedora y esto es lo que a muchos les trae problemas cuando el alto de la capa  (height) es dinámico.
Para solucionar este inconveniente siempre debemos tener una capa contenedora, pero como no sabemos el alto que ésta debe tener, le debemos de poner

<style type="text/css">
div.contenedor{
     display: inline-block;
}
</style>

Así, la capa crecerá en base a las capas que estén adentro, aunque estas tengan la propiedad “float”. Veamos un ejemplo

<style type="text/css">
div.contenedor{
	width: 450px;
	background-color: #000000;
	padding: 5px;
}
div.contenedor div.izquierda{
	float: left;
	width: 150px;
	background-color: #FF0000;
	margin-right: 10px:;
}
div.contenedor div.centro{
	float: left;
	width: 280px;
	background-color: #0000FF;
}
</style>

Por cierto, ven que utiizo herencia de capas, si no están muy familiarizados con el armado de CSS vean este link para armar sus página webs con CSS y DIVs

<div class="contenedor">
     <div class="izquierda">
     <p>Izquierda</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
     <div class="centro">
     <p>Centro</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     </div>
</div>

Al final van a ver que obtendrán este resultado, el cual no quieren:

Pero si le agregan el atributo display al estilo “contenedor”, tendrán justamente lo que necesitan, que la capa contenedor crezca verticalmente como las que están dentro de él:

<style type="text/css">
div.contenedor{
	width: 450px;
	background-color: #000000;
	padding: 5px;
	display: inline-block;
}
</style>

Aquí está lo que quieren

¿Qué les pareció? ¿Les sirvió?

Este arreglo que les doy, les puede servir para ponerlo directamente en un combobox o meterlo en la base de datos, ya ustedes hacen el bucle y el insert. Espero les sirva. Por cierto, estos paises los saqué de Wikipedia el 12 de mayo de 2010.

array('Afganistán' , 'Albania' , 'Alemania' , 'Andorra' , 'Angola' , 'Antigua y Barbuda' , 'Antillas Holandesas' , 'Arabia Saudí' , 'Argelia' , 'Argentina' , 'Armenia' , 'Aruba' , 'Australia' , 'Austria' , 'Azerbaiyán' , 'Bahamas' , 'Bahrein' , 'Bangladesh' , 'Barbados' , 'Bélgica' , 'Belice' , 'Benín' , 'Bermudas' , 'Bielorrusia' , 'Bolivia' , 'Botswana' , 'Bosnia' , 'Brasil' , 'Brunei' , 'Bulgaria' , 'BurkinaFaso' , 'Burundi' , 'Bután' , 'Cabo Verde' , 'Camboya' , 'Camerún' , 'Canadá' , 'Chad' , 'Chile' , 'China' , 'Chipre' , 'Colombia' , 'Comoras' , 'Congo' , 'Corea del Norte' , 'Corea del Sur' , 'Costa de Marfil' , 'Costa Rica' , 'Croacia' , 'Cuba' , 'Dinamarca' , 'Dominica' , 'Dubai' , 'Ecuador' , 'Egipto' , 'El Salvador' , 'Emiratos Árabes Unidos' , 'Eritrea' , 'Eslovaquia' , 'Eslovenia' , 'España' , 'Estados Unidos de América' , 'Estonia' , 'Etiopía' , 'Fiyi' , 'Filipinas' , 'Finlandia' , 'Francia' , 'Gabón' , 'Gambia' , 'Georgia' , 'Ghana' , 'Grecia' , 'Guam' , 'Guatemala' , 'Guayana Francesa' , 'Guinea-Bissau' , 'Guinea Ecuatorial' , 'Guinea' , 'Guyana' , 'Granada' , 'Haití' , 'Honduras' , 'HongKong' , 'Hungría' , 'Holanda' , 'India' , 'Indonesia' , 'Irak' , 'Irán' , 'Irlanda' , 'Islandia' , 'Islas Caimán' , 'Islas Marshall' , 'Islas Pitcairn' , 'Islas Salomón' , 'Israel' , 'Italia' , 'Jamaica' , 'Japón' , 'Jordania' , 'Kazajstán' , 'Kenia' , 'Kirguistán' , 'Kiribati' , 'Kósovo' , 'Kuwait' , 'Laos' , 'Lesotho' , 'Letonia' , 'Líbano' , 'Liberia' , 'Libia' , 'Liechtenstein' , 'Lituania' , 'Luxemburgo' , 'Macedonia' , 'Madagascar' , 'Malasia' , 'Malawi' , 'Maldivas' , 'Malí' , 'Malta' , 'Marianas del Norte' , 'Marruecos' , 'Mauricio' , 'Mauritania' , 'México' , 'Micronesia' , 'Mónaco' , 'Moldavia' , 'Mongolia' , 'Montenegro' , 'Mozambique' , 'Myanmar' , 'Namibia' , 'Nauru' , 'Nepal' , 'Nicaragua' , 'Níger' , 'Nigeria' , 'Noruega' , 'NuevaZelanda' , 'Omán' , 'OrdendeMalta' , 'Países Bajos' , 'Pakistán' , 'Palestina' , 'Palau' , 'Panamá' , 'Papúa Nueva Guinea' , 'Paraguay' , 'Perú' , 'Polonia' , 'Portugal' , 'Puerto Rico' , 'Qatar' , 'Reino Unido' , 'República Centro africana' , 'República Checa' , 'República del Congo' , 'República Democrática del Congo' , 'República Dominicana' , 'Ruanda' , 'Rumania' , 'Rusia' , 'Sáhara Occidental' , 'SaintKitts-Nevis' , 'Samoa Americana' , 'Samoa' , 'San Marino' , 'Santa Lucía' , 'Santo Tomé y Príncipe' , 'San Vicente y las Granadinas' , 'Senegal' , 'Serbia' , 'Seychelles' , 'SierraLeona' , 'Singapur' , 'Siria' , 'Somalia' , 'SriLanka' , 'Sudáfrica' , 'Sudán' , 'Suecia' , 'Suiza' , 'Suazilandia' , 'Tailandia' , 'Taiwán' , 'Tanzania' , 'Tayikistán' , 'Tíbet' , 'TimorOriental' , 'Togo' , 'Tonga' , 'Trinidad y Tobago' , 'Túnez' , 'Turkmenistán' , 'Turquía' , 'Tuvalu' , 'Ucrania' , 'Uganda' , 'Uruguay' , 'Uzbequistán' , 'Vanuatu' , 'Vaticano' , 'Venezuela' , 'Vietnam' , 'WallisyFutuna' , 'Yemen' , 'Yibuti' , 'Zambia' , 'Zaire' , 'Zimbabue');

Hoy en día, tenemos que probar nuestras páginas webs en tantos navegadores que resulta tedioso, sobre todo cuando si funciona en firefox pero en internet explorer no. ¿Nunca les ha pasado que si funciona en firefox, pero en ie8 no, pero en ie7 si? Sobe todo cuando armas una página web con estilos y sin tablas. Y es que Internet Explorer nos vuelve locos! Pero lo bueno, es que nuestros “amigos” de Microsoft han creado una forma para que una página que esté corriendo en Internet Explorer 8, simule que está corriendo en Internet Explorer 7. Solo debes de poner después de la etiqueta HEADER esta simple línea.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Listo, eso es todo!

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

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 crear thumbnail de una imagen fácilmente. Vamos a crear una función que se llame CrearThumb y le mandaremos los siguientes parámetros: Imagen Original, Imagen de Destino, Ancho Original, Alto Original, Nuevo Ancho, Nuevo Alto y La Calidad de la Imagen.

Al momento de llamar a esta funcion, en los dos primeros parámetros hay que dar el nombre de los archivos pero con la ruta absoluta del servidor.

function CreateThumb($pImageOrigen, $pImageDestino, $pWidth, $pHeight, $pMaxWidth, $pMaxHeight, $pCalidad){
		// SI WIDTH ES MAS ALTO, LO CORTO POR WIDTH Y VICEVERSA
		if($pWidth > $pHeight){
			$_porcentaje = $pMaxHeight*100/$pHeight;
			$_height = $pMaxHeight;
			$_width = ceil($_porcentaje*$pWidth/100);
		}else{
			$_porcentaje = $pMaxWidth*100/$pWidth;
			$_width = $pMaxWidth;
			$_height = ceil($_porcentaje*$pHeight/100);
		}
		$_pic = @imagecreatefromjpeg($pImageOrigen);
		$_tmp = imagecreatetruecolor($pMaxWidth, $pMaxHeight);
		imagecopyresized($_tmp, $_pic, 0, 0, 0, 0, $_width, $_height, $pWidth, $pHeight);
		imagejpeg($_tmp, $pImageDestino, $pCalidad);
		imagedestroy($_pic);
		imagedestroy($_tmp);
	}

Con esta función se creará un thumb. Claro que si los tamaños originales de la imagen son proporcionales a los nuevos tamañas de la imagen, no cortará la imagen. Pero si ese no es el caso, la imagen será cortada luego de ser reducida lo máximo posible.

Hagan la prueba!

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.

Descargar Ejemplo

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