Miguel Manchego » Diseño

Graficos Satisfacción 100% Garantizada

admin — Fri, 16 Jul 2010 17:05:28 +0000

Hice unos gráficos vectoriales del clásico sello “Satisfacción 100% Garantizada” se los paso en formato PNG24 bits(con fondo transparente)

Pueden bajarlos AQUI100% Garantizado (23)

CSS3: Esquinas redondeadas

admin — Sun, 30 May 2010 23:12:10 +0000

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:

1
2
3

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

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:

1
2
3
4

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;

Para firefox sería muy similar:

1
2
3
4

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;

1
2
3
4
5

En Opera e IE9 sería
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

¿Cómo hicieron esa web?

admin — Mon, 24 May 2010 13:22:23 +0000

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:

Facebook: FBML para personalizar nuestra fanpage

admin — Tue, 04 May 2010 16:01:47 +0000

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

1	<img src="http://www.miservidor.com/miimagen.jpg">

¿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:

1
2
3
4
5
6
7
8

<tr>
<td>

swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/qvhUdNOMDiI'
imgsrc='http://www.miservidor.com/facebook/greghall/images/greghall-main_05.jpg' width='419' height='306' />
</td>
</tr>

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

Elementos de interfaz(UI) para web

admin — Mon, 08 Feb 2010 14:48:29 +0000

Siempre ando buscando recursos para web y me encontré con esta interesante colección de elementos de interfaz totalmente gratis lista para usar en algún proyectos con ajax. Incluye botones, avisos, barras de desplazamientos, menus, combos, etc.

Pueden bajarla AQUI

Ni bien publiqué este post me encontré con otras opciones muy interesantes que incluyen no sólo botones, también cursores e incluso elementos de interfaz, pueden verlo AQUI