CSS3: Esquinas redondeadas

En un post anterior expliqué como hacer esquinas redondeadas sin muchos líos usando imágenes sin embargo usando CSS3 es mucho más sencillo y funciona en todos los navegadores modernos, esta demás decir que Internet Explorer no es moderno y por lo tanto sólo soporta este atributo en su versión 9.

Todas las esquinas iguales

Si queremos todas las esquinas redondeadas con el mismo efecto, nuestro código quedaría así para navegadores basados en Webkit(Safari, Chrome), Mozilla, Opera y también Internet Explorer 9:

Bordes con distinta redondez

Podemos hacer que sólo algunos bordes sean redondeados o que tengan distinto tamaño
En navegadores basados en Webkit sería:

Para firefox sería muy similar:

¿Cómo hicieron esa web?

Debido a un problema con mi hosting, se perdieron algunos post asi que voy a publicarlos de nuevo.

Es usual que me pregunten ¿Cómo hicieron esa web?, ¿Eso es un Joomla?, ¿Usaron un CMS gratuito?, ¿Será jquery?, entre otras. Para responder suelo dar una ojeada al código fuente en busca de pistas sin embargo existe una herramienta mejor y más rápida para hacer esto, lo mejor de todo es que además me da una breve explicación de la tecnología encontrada.

Este excelente addon para Firefox es completamente gratuito, lo pueden descargar AQUI. Una vez instalado aparecerá un pequeño ícono verde en la esquina inferior derecha, basta doble click y nos presentará un completo informe como este:

¿Como convertir videos a otro formato?

Muchas veces requerimos subir videos a youtube o si tenemos una página web debemos subirlo y reproducirlo usando flash, el lio usualmente es ¿Qué formato debo utilizar? ¿Cómo lo convierto? ¿Cómo lo edito?, entre otras. Veamos algunos tips

¿Qué formato debo utilizar?

Para responder esta pregunta debemos tener claro lo que deseamos hacer con nuestro video, si queremos subirlo a youtube casi cualquier formato funciona ya que youtube automáticamente lo convierte, sólo debemos considerar que no debe durar más de 10 minutos. Si usamos Windows Movie Maker podemos usar el formato WMV y youtube lo convertirá automáticamente.
Si la idea es grabarlo en un DVD que se pueda ver en un reproductor de video común lo mejor sería usar MPEG y al quemarlo en un DVD lo hacemos como DVD de video y no de datos.
Si lo vamos a reproducir usando nuestro propio reproductor flash lo mejor es usar FLV aunque yo sugiero usar servidor externos debido al gran consumo de ancho de banda.

¿Cómo convierto de una a otro formato?

Primero debemos descargar el software conversor, hay gran variedad de programas disponibles en la red en este caso usaré uno gratuito llamado AnyVideoConverter que pueden descargar AQUI.

Paso1

Seleccionamos el video que deseamos convertir dando click al botón “Añadir video” y buscamos el video a convertir con lo que aparecerá en la lista de videos y en la columna derecha se verán las propiedades del video (frames por segundo, tamaño, duración, etc.)

Paso2

Ahora que el video esta en nuestra lista en el combo de la derecha debemos elegir un perfil, es decir el formato al cual deseamos convertir nuestro video

Paso3

Finalmente ya podemos convertirlo el video dando click al botón convertir, el tiempo requerdio puedo oscilar entre minutos y algunas horas según el formato y la duración del video.

Facebook: FBML para personalizar nuestra fanpage

Prometo retomar luego los artículos sobre CSS3 sobre todo selectores y transiciones (varias de esas características aún no funcionan en FF o Safari aún).
En un post anterior hablé de las fanpage en Facebook y sus posibilidades como nuevo producto para nuestrso clientes, ahora voy a hablar de una aplicación llamada FBML y que interesantes posibilidades nos brinda.

¿Qué es FBML?

FBML es una aplicación que nos permite mostrar una página HTML personalizada incluyendo imágenes alojadas en un servidor externo, archivos flash, videos de youtube, links a nuestro sitio principal, landing page, etc; todo esto se mostrará en una pestaña adicional de nuestra fanpage que podemos ponerle el título que querramos.

¿Cómo instalo FBML?

Primero nos logeamos en nuestra cuenta de Facebook, damos click a “Aplicaciones” y buscamos FBML, en su página veremos que debajo del avatar hay un link para activarlo y podremos selecionar cualquiera de nuestras fanpage dando click al botón “Add to page” como se muestra en el screenshot.

¿Y ahora cómo lo personalizo?

Primero en nuestro perfil, vamos al link “Ads and pages” y configuramos la página a la que agregamos el FBML, veremos que ha aparecido una nueva opción llamada FBML en la categoría “Applications”, esta tiene opciones de configuración para mostrarse como una caja o como una pestaña(tab), yo prefiero desactiva box y activar tab. En la imagen esta paso por paso lo que he explicado.

Agregando contenido

Una vez configurada nuestra pestaña, ya podemos agregar nuestro código HTML, ojo si usamos CSS este debe ser en linea y no al inicio o intentando usar una hoja de estilos externa (la idea de maquetación es similar a la que se usa para un correo electrónico), luego lo grabamos y si todo esta bien deberiamos ver en nuestra fan page la nueva pestaña con nuestro contenido.

Para agregar imágenes no podemos subirlas directamente a Facebook, para esto las subimos a un servidor externo y las cargamos usando la ruta absoluta

¿Cómo añado flash o videos?

No podemos insertarlos usando javascript o directamente pegando el embed, facebook tiene su propia etiqueta para esto además la película flash no se ejecuta desde el inicio, primero se muestra una imagen y al darle click a esta recién se ejecuta el flash o el video. El código sería como este:

Como vemos en este caso estoy usando una tabla en la que indico el color de fondo, swfsrc nos indica la ubicación del flash (en este caso una pelicula youtube) y finalmente imgsrc nos indica la imagen que se mostrará en vez del flash hasta que le demos click.

Finalmente para los que quieran ver como queda esto, les dejo la direccion de una fanpage que hice como prueba
http://www.facebook.com/pages/Arequipa/Vietnam-Restaurant/313742104162?v=app_4949752878

Firequery: Depurando jquery con firebug

Firebug tiene excelentes herramientas para depurar código javascript sin embargo se queda corto en algunas cosas sobre todo cuando se trata de averiguar si los selectores funcionan correctamente y si nuestros eventos en realidad son considerados por jquery, es ahí donde viene otro excelente plugin del plugin llamado Firequery.

¿Cómo lo instalo?

Lo podemos descargar de la página de Addons para Firefox AQUI, si deseamos ver más detalles y darle una ojeada a su documentación en su web oficial

¿Cómo funciona?

Luego de instalarlo a simple vista no hay cambios en nuestro firebug salvo una pestaña adicional llamada jquerify en la consola, esta pestaña nos permite añadir nuestro script jquery a cualquier página web, en caso que ya exista no hará la indicación correspondiente.

Los detalles interesantes se ven la pestaña inspeccionar HTML que ahora adiciona las funciones que se viene ejecutando y los elementos afectados
En esta imagen por ejemplo estoy usando el jquery cycle para hacer un slider como vemos se ha añadido un pequeño texto adicional donde muestra la función que viene ejecutándose si le doy click me va a dar más detalles como los valores que le estoy enviando.

En este segundo caso estoy usando tooltips, firequery me da información adicional, además de la función que es invocada y los parámetros que se le dan, me indica además el evento que se está utilizando (mousehover en este caso).

Tiene algunas otras funciones adicionales que podemos probar en su página de ejemplo