En PSDTUTS hay un tuto de Photoshop muy piola para crear efectos alucinantes para nuestros textos en solo 5 minutos.

Eso si; como siempre, esta en ingles.

Ver Enlace

sIFR es un script que reemplaza un elemento de texto (o varios) en una página por un archivo flash que despliega el mismo texto. Esto nos permite utilizar tipografías que no estén instaladas para nuestra web y tener texto con suavizado (anti-aliasing).

En Diseñorama podemos encontrar un tutorial -en castellano- que enseña como instalar y utilizar SiFr para utilizar cualquier fuente en nuestra pagina HTML.

Me pregunte como hacer para mandar mensajes de texto SMS desde un sitio web y se me ocurrio que no debe ser tan complicado teniendo en cuenta que las empresas permiten enviar mensajes a celulares desde el correo electronico.

Entonces si queremos mandar un mensaje de texto, por ejemplo, al 0351-156126188 de movistar solo basta con quitar el 0 y el 15 al principio y agregarle el dominio de movistar al final. Entonces quedaria asi: 3516126188@sms.movistar.net.ar


Luego, tan solo creando un formulario comun que envie los mails a las distintas empresas de telefonia ya estaria hecho el trabajo. Ahora, la gracia estaria en conseguirse los @dominio de todas las empresas de celulares.

Los pasos que deberiamos hacer son:

1. crear un formulario que mande los datos a la pagina que va a enviar el mail (por ej: action="sms.asp")
   
2. un campo de texto para ingresar el e-mail del remitente.
   
3. un campo de texto para ingresar el telefono celular del destinatario. (3516126188@etc...)
4. un campo para elegir la empresa de telefonía que utiliza el destinatario.
   
5. un textarea para escribir el mensaje y el boton de enviar.
6. programar una pagina para enviar los mails tipo CDONTS o Asp Mail.
   

Pueden ver el ejemplo de un script con el formulario y el envio de sms o descargarlo directamente. Esta programado en php pero el lenguaje de programacion no es importante, pueden hacerlo en asp tambien.

* Los dominios pueden haber cambiado, sera tarea de ustedes averiguar los dominios actuales.

¿Vieron esas esquinas apenas redondeadas en los botones de Google Analytics? Naturalmente podriamos recurrir a imagenes o javascript pero existe una manera de lograrlo utilizando nada mas que CSS.

Y sino me creen, preguntenle al tipo del CSS.

Amantes de Photoshop, les dejo dos links imprescindibles para facilitarles la vida y sus diseños. PsdFreebee es un espacio donde podemos encontrar varios archivos en formato PSD para tomar prestados, desde iconos y logos hasta templates web 2.0 enteros.

Por ultimo, si no conocian PSDTUTS les recomiendo que se den una vuelta ya que existe una infinidad de excelentisimos tutoriales para lograr los mas impresionantes efectos en Photoshop.

Como diseñadores quizas nos interese mas el aspecto grafico y estetico de nuestra web y solemos dejar de lado puntos clave en el desarrollo de un proyecto. Somos reacios a organizar la informacion, dedicar tiempo al posicionamiento y accesibilidad de nuestras web... ni hablar de la programacion!

Sin embargo es importante afrontar la realidad y darse cuenta que tarde o temprano vamos a lidiar con algunas de estas actividades. Y sin lugar a dudas algo con lo que vamos a tener que lidiar es realizar un sistema de usuarios.

Para los que necesiten -por cualquier motivo- llevar a cabo esta tarea, les dejo un tutorial de como hacer un sistema de usuarios mediante PHP y MySQL, de la mano de Sector Web.

Parece ser que el mayor inconveniente que se planteo por parte de todos nosotors es la maquitacion mediante CSS. A primera vista parece ser muy complicado y, aunque es muy amplio, diseñar con CSS no es imposible si nos subimos las mangas y nos animamos a probar por nuestra cuenta.

Recomendaciones:

• Antes de empezar a diseñar recomiendo tener algunas nociones de XHTML y conocer algunas diferencias con HTML. En W3C hay una lista de preguntas frecuentes sobre HTML y XHTML.

• Si ya conocemos como funciona el CSS y sus ventajas entonces vamos bien encaminados para programar.

• Conocer y repasar selectores, propiedades, valores, etc. de CSS. Guia de referencia rapida de CSS2.
  

• Analizar el codigo xhtml/css de un template (plantilla) diseñado en CSS e intentar reproducirlo. En lo posible empezar con un diseño muy basico.

Explicar como diseñar un sitio en CSS no tiene sentido porque existe una enorme cantidad de tutoriales en internet que explican como hacerlo. Incluso seria hipocrita de mi parte ya que yo tambien estoy aprendiendo... lo que puedo ofrecer es hablar desde mi experiencia y comentarles como me fue.

Un metodo posible:

1. Escribimos el contenido de la web en un documento HTML como si escribieramos en un procesador de texto. No coloquemos ningun estilo aun.
2. Encerramos los encabezados entre las etiquetas de header (<h1>, <h2>, <h3> segun corresponda). No se olviden de cerrar las etiquetas de header.
3. Armamos los contenedores para el contenido utilizando las etiquetas <div>. Vamos anidando todas las div segun su jerarquia. Esto significa que a la parte del contenido que funciona como cabecera de la web, le vamos a colocar una etiqueta <div> al comienzo y cerramos la etiqueta al final. Por ejemplo:
   <div >Esta es la cabecera de la pagina </div>. Hacemos lo mismo con el texto principal, el menu, el pie de pagina, etc.y anidamos las div si es necesario.
   
4. Identificamos cada contenedor con un nombre. Esto se puede hacer utilizando los parametros ID o CLASS dentro de la etiqueta DIV. Por ejemplo: <div class="cabecera">Esta es la cabecera de la pagina</div> .
   
5. Creamos la hoja de estilo y colocamos los parametros para cada contenedor que identificamos. Por ejemplo, si queremos que la cabecera mida 700 pixeles con fondo rojo colocamos lo siguiente: .cabecera {width: 700px; background-color: red;}.
6. Vinculamos la hoja de estilo y aplicamos. Dentro de las etiquetas HEAD de nuestro html establecemos la relacion con el archivo css. Por ejemplo: <link href="estilo.css" rel="stylesheet" type="text/css" />
   

Es una de las formas que probe y funciono. Tambien pueden modificarse etiquetas de html. Obviamente esto es muy basico, solamente para que entendamos como funciona pero no es la unica manera de hacerlo y, por supuesto, esta muy incompleto. Pruebenlo por su cuenta, es simple. De yapa unos links:

Tutoriales
Tutorial para principiantes (LEANLO, OBLIGATORIO)
Manual de CSS (muy completito y facil)
Curso de CSS (breve, conciso pero piola)
Componer un diseño de 3 columnas en XHTML y CSS
Introduction to CSS (manual muy practico en ingles)
Tutoriales de CSS y Javascript de Cristalab

Utiles
Guia de referencia rapida CSS
Generador de CSS
Definicion Wikipedia de CSS
Diferencias xhtml/html (de wikilearning)
Probar fuentes CSS
Trucos y Sugerencias para css
CSS LAB (laboratorio CSS - Excelente)
Sky CSS tools (editor de CSS online)
Simple CSS (otro)
CSS Fly (editor online de Html y Css)
HTML Playground (otro editor online)

Inspiracion/Templates
CSS Mania (diseños muy lindos)
CSS Garden (galeria y sabiduria CSS)
Camaleon CSS (similar a CSS garden)
Open Source Web design (templates open source)
OpenWebDesign
CSS Tinderbox
Css Showcase (galeria de menues en CSS)
30 Templates de 3 columnas
42 Layouts en css


Y no dejen de ver recursos, tutoriales y ejemplos de CSS en este blog.

Ultimamente son cada vez más los sitios que utilizan tipografías en 3D en sus diseños y hay que admitir que algunos se ven muy atractivos. Existen diversas maneras para crear un texto en tres dimensiones... ya sea con programas como Blender o 3D Max los resultados pueden terminar en un producto agradable a la vista. Esta vez vamos a ver como crear un texto 3d en Photoshop.

1. Escribir el texto
Para lo que vamos a usar la herramienta de texto (T) de la manera convencional.
2. Rasterizar el texto y perspectiva
Hacemos clic derecho sobre la capa de texto y sobre "Rasterizar texto". A continuación cambiamos la perspectiva del texto (Ctrl+T) hasta conseguir la forma deseada.

3. Duplicar y mover la capa.
Duplicamos la capa del texto rasterizado (Ctrl+J) y movemos la capa con las teclas de dirección del teclado -por ejemplo, una vez abajo y otra a la derecha. Repetir esta operacion varias veces.

4. Cambiar el color de la ultima capa
Una vez que tenemos el grosor deseado, cambiamos el color/brillo de la ultima capa que seria la cara frontal del texto 3D. Esto se puede hacer de muchas formas.. una de ellas es ir a Imagen/Ajustes/Tono-Saturación. Si todo salio bien deberia verse asi:
5. Toque final
Va tomando forma ¿verdad? Ahora solo resta hacer las decoraciones complementarias hasta que quedemos satisfechos con el resultado.
En You are the designer hay una coleccion de diseños en 3D muy creativos y bellos para buscar inspiracion.

En DezignerFolio hay una recopilacion de 20 tutoriales para hacer tu propio juego con Flash... lamentablemente esta en Ingles. Sorry Folks!

Desde que abri el blog me hice una pregunta existencial: ¿es posible cambiar midominio.blogspot.com por midominio.com.ar? A simple vista es imposible ya que no conozco el DNS de Blogger ni la configuracion para delegar el dominio en nic.ar.

Sin embargo, leyendo el blog de minitutoriales encontre una solucion para mi problema: Un tutorial que explica, paso a paso, como delegar tu dominio de Blogger y crear tu dominio personalizado.

Aun no probe hacerlo pero segun dicen funciona bien aunque el proceso es largo.

Ver Enlace

Me da la sensacion que estando a punto de terminar la carrera hay muchos que estan preocupados porque no tenemos conocimientos solidos en CSS y sobre todo en cuanto al diseño y maquetacion de una pagina web.

Diseñar con tablas solo traeria dolores de cabeza sin contar los problemas de accesibilidad y estandarizacion (W3C). Como profesionales deberiamos conocer en profundidad como se debe diseñar un sitio completamente en CSS.

Les dejo una Guia para CSS que muestra, paso a paso, la construccion de un sitio web completamente diseñado en CSS.

Enlaces:

• Manual CSS en castellano
• Manual original en ingles

Para empezar vamos a aprender como se hace y como colocar un FavIcon en nuestro sitio web. Pero primero lo primero, ¿que es un FavIcon?

Un FavIcon (Fauvorite Icon) es simplemente un Icono que se situa junto a la direccion de una pagina web. Son esos dibujitos que aparecen cuando guardamos una URL a nuestra lista de favoritos/marcadores.


Ahora si, ¡Manos a la obra!

Paso 1: Diseño del icono
Para diseñar el icono de Multimedius ultilizamos Photoshop aunque puede hacer la misma tarea basicamente en cualquier editor de imagenes. El icono debe conservar las siguientes propiedades:

• 16 x 16 pixeles
• En lo posible fondo transparente (excluyente)
• Extension PNG (luego lo transformaremos en ICO)

Paso 2: Convertir la imagen a icono
Una vez que terminamos de diseñar el Icono lo guardamos a formato PNG (si tiene transparencias) y convertiremos el archivo a .ICO con algun conversor como ConvertIcon. ¡Ojo! No es lo mismo cambiarle la extension al archivo, eso no funciona.

Paso 3: Insertar el codigo HTML en nuestras paginas
Si ya tenemos nuestro archivo .ICO lo subimos a nuestro dominio mediante FTP. Luego editamos nuestras paginas web y agregamos el siguiente codigo dentro de las etiquetas HEAD:

<link rel="shortcut icon" href="http://www.tudominio.com/favicon.ico" > (*)

(* colocar el directorio donde se encuentra el archivo.ICO)

Guardamos y subimos las paginas a nuestro dominio. Si todo salio bien deberias ver tu propio icono en la barra de direcciones de tu navegador.

NOTA: En algunos navegadores como el Internet Explorer puede ocurrir que no aparezca el favicon.

Recientemente me llego un mail de la gente de desarrolloweb.com, donde me invitan a participar de curso en vídeo a través de Internet, de introducción a la programación Web con PHP.

Este curso tendrá una duración de 2 días, y se distribuirá en formato vídeo a través de un servidor privado al que sólo tendrán acceso las personas que se registren en el curso. El costo real del curso es de 67 Euros pero es gratuito para quienes se inscriban (sorry si suena a publicidad de Sprayette pero mi deber es informar).

Pueden registrarse desde este enlace: http://www.aulaformativa.com/registro y quienes estén interesados pueden iscribirse y participar de este curso que se llevará a cabo el próximo Lunes 26 de noviembre.

El cupo es limitado.

Si no ven un pomo (como diría mi abuela) probablemente necesiten anteojos o en su defecto una buena lupa. ¡Y qué mejor que tener una lupa en pantalla!


Para quienes quieran conseguir el efecto de lupa para Flash, les dejo algunos tutoriales que explican muy bien cómo lograrlo:

• Zoom con Lupa (flash CS3)
• Panel de Zoom de imagenes (flash CS3)
• Tutorial efecto lupa en Flash 8 (actionscript 2)

Algo que se esta viendo mucho en fondos de pantalla y queda muy bien para hacer diseños cool son aquellos haces de luz que salen de algún costado. Para empezar a hacerlos debemos tener en cuenta el manejo de ciertas herramientas que vemos a continuacion:


1. En una capa hacer un degradado radial.
Seleccionamos la herramienta de degradado (G) y elegimos la opción de degradado radial. Es conveniente que el degradado sea entre dos colores similares, yo elegi hacerlo con el #026583 y #0088c2 pero haganlo según lo que necesiten.

2. Entrar en el Editor de Degradado y seleccionar tipo Ruido.
Dentro del editor seleccionamos Ruido en el tipo de degradado y haciendo clic en Aleatorio surgen distintas combinaciones de degradado. No se preocupen por el color porque no van a afectar al resultado final. Damos Aceptar.


3. En otra capa hacemos un degradado de angulo.
Para ello creamos una capa nueva y aplicamos el degradado. Recomiendo que se haga desde el borde superior hacia afuera de la composicion para que quede algo asi:

Quedo bueno, ¿verdad? Ahora imaginenlo con unas nubes y los rayos saliendo entre medio de ellas. ¡Prueben!

Manga es la palabra japonesa para designar a la historieta. Se traduce, literalmente, como "dibujos caprichosos" o "garabatos" y se la utiliza exclusivamente para referirse a la historieta japonesa.

¿Vieron esos dibujos japoneses donde los personajes tienen unos ojos gigantes y rasgos finos? Esos son manga.

Estan muy en boga esos espacios con secciones plegables/desplegables que resultan muy utiles a la hora de maximizar el espacio en nuestros diseños sin necesidad de usar scroll o pasar a una página nueva. Si no saben a qué me refiero pueden ver un ejemplo.

En diarioTHC hay un buen tutorial que explica, paso a paso, como podemos lograrlo utilizando CSS y javascript.

Zarpado tutorial para crear efecto de brillo de gran nivel, muy elegante para lograr nuestros propios diseños. Eso si, me van a tener que perdonar pero es en ingles.

Ver tutorial

Perdón chicos, está en inglés....


Laser Flashlight Hack! - The funniest movie is here. Find it

Otro aporte de Eze para la comunidad: esta vez se trata de cómo hacer un texto web 2.0. Existen muchas maneras de hacerlo pero veanse este tutorial porque me gusta como habla el tipo.. "fotochop" jaja!