HAPPY NEW YEAR !!!!

HAPPY 2009 !!!!

Leia Mais…

Cargar jQuery desde Google

via Intenta on 12/17/08

En web design tvi podemos encontrar 25 excelentes trucos para optimizar nuestro trabajo con jQuery. De todos ellos, yo me quedo con el primero: cargar jQuery desde Google Code. De este modo ahorraremos un ancho de banda considerable y la librería cargará rápidamente debido a que estaremos usando los CDN de Google (Redes de distribución de Contenido). Este sería un escalón inferior a la utilización del Google App Engine, con el que se pueden ejecutar aplicaciones web escritas con Python en los servidores de Google. La carga del jQuery se podría hacer del siguiente modo:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
   // Load jQuery
   google.load("jquery", "1.2.6");
 
   google.setOnLoadCallback(function() {
         // Your code goes here.
   });
</script>

O incluyendo una referencia directa como ésta:

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>

Lo que hacemos es utilizar el API de bibliotecas AJAX de Google. De esta forma, no sólo podemos cargar jQuery. Al utilizar el cargador de API AJAX de Google google.load(), podremos tener un acceso global de gran velocidad a una lista cada vez mayor de las bibliotecas de JavaScript. En este momento se puede acceder a: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject y Yahoo! User Interface Library.

Otra característica muy interesante es que podemos tanto seleccionar la versión como especificar que la carguemos descomprimida. Por ejemplo:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2", {uncompressed:true});
</script> 

Leia Mais…

¿Que es en realidad el buen diseño web?

via Webnova - Recursos Webmaster by leonardo on 1/22/08

Hace un tiempo, charlando con amigo programador que me mostraba un proyecto que quería lanzar, noté que si bien la idea del sitio era muy interesante y el funcionamiento intuitivo y usable el diseño o aspecto general era demasiado austero, dicho en otras palabras; era horrible. Con buenas intenciones le dije que podía diseñarle algo mejor, hacer una maqueta y que modifique luego él. Mi asombro fue cuando negó mi ofrecimiento y me dijo que un sitio austero y sencillo tiene más posibilidades que un sitio muy elaborado en diseño. Me pareció "medio incorrecta" su observación y pasé a otro tema. Siempre pensé que un sitio debe cautivar por su aspecto.

Sin embargo la idea me quedó en la cabeza, una cosa obviamente es un sitio comercial en donde el buen aspecto debe predominar y mantener una línea de diseño coherente con una imagen corporativa preestablecida. Pero para una aplicación web destinada a cientos o miles de usuarios y que tiene interacción con el usuario todo cambia.

Últimamente me he dado cuenta de que los usuarios de aplicaciones ya no quieren las cosas bonitas, porque eso les transmite la idea inconsciente de "comerciabilidad"; se le transmite la idea de que algo en el fondo quieren venderle, de que algo le van a cobrar. Digo esto después de "encuestar" a muchos usuarios que son fanáticos de aplicaciones simples, casi sin diseño. Hice esto porque estoy desarrollando una aplicación junto con un amigo y deseaba saber que es lo que realmente quieren los usuarios.

Descubrí lo siguiente: El sitio debe ser Funcional: el sitio debe responder siempre a lo que el usuario espera, nunca debería defraudarlo. El usuario entra con una idea fija en la cabeza, lograr o encontrar algo, si no lo logra se verá engañado calificando el sitio como poco útil o poco preciso. La garantía es que nunca más vendrá. En cambio si el sitio cumple nos aseguramos un lugar en sus favoritos.

El diseño debe ser usable: muchos siempre han pensado que un sitio usable es uno que tiene tipografías grandes y colores llamativos. Nada más lejos, un sitio usable tiene solamente lo que necesita el usuario, nada más. No sobra ningún vínculo y se destaca de manera visual lo que más necesita. Todo está a su alcance con el menor esfuerzo visual.

El diseño debe ser Sencillo: creo que esto es lo más importante y al mismo tiempo lo más difícil de lograr. Como diseñadores tenemos una tendencia de cargar las cosas para estilizarlas, pero a veces cometemos el error de entorpecer o saturar el aspecto de un sitio. El ojo del usuario se concentra en pocas cosas, mientras más ornamentos u objetos tenga más demorará en encontrar cada cosa.

El diseño debe "hablar": El usuario debe poder identificar y generar un esquema en un pantallazo de como se compone el sitio y como deberá moverse en el mismo. Esto se logra aplicando los principios de la usabilidad y utilizando recursos visuales de una manera muy sutil. Por ejemplo, se debe determinar claramente lo que es contenido dinámico de lo que es estático. Esto es parte sensible en la navegación general.

Debe estar bien programado: la buena programación ayuda a la sencillez y a la velocidad de carga, creo que el contar con una buena programación es importantísimo. Mientras en menos cosas intervenga el usuario más adicto se hará a la aplicación o al sitio que navega. Por ejemplo, el otro día estaba utilizando un sitio que permitía subir trabajos de diseñadores, cuando hacía el upload de imágenes la aplicación me dijo que las imágenes deberían tener determinado ancho en píxeles. Automáticamente salí del sitio y busqué otra aplicación porque no tenía ganas de editar cada imagen. Mientras más fácil hagamos la vida del usuario más cariño le tomará a tu sitio. Un sitio bien programado también es muy rápido. No precisas tampoco meter AJAS por todos lados, debe existir equilibrio.

El diseño no precisamente debe ser llamativo: Flickr, Youtube, Facebook, realmente no poseen un gran diseño, más bien son austeros y apuntan al uso del texto medianamente estilizados para lograr un buen diseño, pero no impresionan a nadie. La verdad es que ganan por la utilidad del mismo. Cuando conocí youtube hace unos tres años, me dije que este sitio era un fracaso por el diseño pobre que tenía, que equivocado que estaba. El diseño debe se utilizable, no debe porque despistar al usuario ni mucho menos distraer la atención principal. En el caso de flickr nada sobra ni nada falta. Creo que es el mejor modelo de donde nos podemos agarrar.

Simple pero no desagradable: Muchos en el afán de lograr la máxima simpleza rayan la austeridad absoluta o el mal gusto, descuidando combinaciones de colores, tamaños de tipografías y espacios de blancos. Se debe buscar el equilibrio, esa es la clave. Alguien dijo que el buen diseño pasa totalmente desapercibido, no nubla ni distrae al usuario.

Estas son mis observaciones, la verdad es que son muchos los factores que inciden en el éxito de un sitio, pero como siempre digo, si pensamos en el perfil de usuario que visitará el sitio estaremos muy cerca de lograr siquiera que nos vuelvan a visitar.

Leia Mais…

Plantillas (templates) gratis de diseños muy Web 2.0

via Webnova - Recursos Webmaster by leonardo on 4/12/07

Acabo de toparme con el sitio TemplateWorld, que comercializa plantillas de diseño web prefabricadas. Siempre tuve un especial desprecio por las plantillas de sitios. Principalmente porque siempre pensé que eran poco útiles, ya que nunca son diseños 100% "originales" los que te venden, y nunca me agradó la forma "enlatada" de como se comercializan estos diseños.

Aclarado esto puedo comentarte que el mismo sitio tiene un apartado en donde se permite que se descarguen plantillas de diseño XHTML/CSS de forma gratuita pero no para uso de sitios comerciales. El aspecto de estas templates es muy al estilo Web 2.0. Ideal para aquellos que no les agrade la idea de diseñar o que no tengan conocimientos técnicos de maquetación en CSS o de diseño gráfico.

[ENLACE DIRECTO]

Leia Mais…

Los 10 mandamientos de una web corporativa

via PymeCrunch by Nacho Morató on 6/15/08

 

Los 10 mandamientos de una web coroporativa o los 10 errores más comunes a evitar.

Muchas PYMES crean su propia página corporativa para tener presencia en la web. Y encargan a algún empleado sin ningún tipo de conocimiento como webmaster su creación. O incluso son ellos mismos los que realizan la web.

Esto suele llevar a páginas con diseños horrendos y con detalles que en lugar de generar aspectos positivos, llevan a crear desconfianza por parte de los usuario que acceden a ellas. ¿Si una empresa no es capaz de cuidar su imagén debo de confiar en ella?

He hecho una selección de los 10 que considero más importantes y que cualquier empresa debería evitar. Una especie de los 10 mandamientos de una web corportiva.

1. Cuidarás el diseño ante todas las cosas. El diseño de las webs suele ser el punto débil en estas webs realizadas sin ningún experto en el tema. Páginas que dan sensación de dejadez y de poco profesionalidad.
2. No usarás direcciones mail gratuitas. Decenas de clientes me escriben mails desde sus direcciones @hotmail.com, @yahoo.es al igual que antes, esto deja una mala impresión de la empresa sobre la que te estás informando o quieres trabajar.
3. Pondrás el title a todas tus webs. La etiqueta title en una web es la que nos muestra el título de la web en nuestro navegador. Abundan las webs corporativas que no modifican la opción predeterminada que muestra su editor de webs, como el frontpage. Abundan los Untitled, mientras que lo normal sería poner por el nombre de la empresa, por ejemplo.
4. Mostrarás los datos de contacto. Si lo que buscamos es tener presencia en la web y que potenciales clientes nos encuentren, los datos de contacto deben de ser fácilmente visibles. He encontrado casos de empresas medio grandes donde estos no aparecen.
5. No introducirás publicidad no relacionada y abusiva. También es frecuente entrar en una web corporativa y encontrarla repleta de publicidad externa, bien adsense o banners en flash con anuncios muy intrusivos. Una web corporativa debería ser una web informativa sobre la historia, servicios y productos de la web. La inserción de estos anuncios, daña la imagen de la empresa.
6. No usarás direcciones de servicios gratuitos. Hoy en día un dominio y un hosting puede costar 30 € lo que no supone gasto alguno para una empresa. Hay cientos de webs corporativas aprovechando el hosting que ofrece a sus clientes telefónica, ono, yahoo u otras compañías. Nombres dificiles de recordar y
7. No enlazarás webs no relacionadas. Otro "error" que considero daña la imagen de la web es ver el footer lleno de enlaces producto de intercambios para mejorar el posicionamiento. Si los enlaces fueran relacionas aún podría estar medio justificado, pero entrar en una web de venta de azulejos y verla llena de enlaces hacia directorios, páginas de descargas o de sexo, no creo que sea la mejor idea. Hay otras formas para mejorar el posicionamiento sin ser tan agresivos.
8. No mostrarás secciones en construcción. No me gusta entrar en una web y al buscar información en sus secciones, ver que la mayoría tiene el cartelito de en construcción. Para eso es mejor no mostrarlas hasta que tengan contenido.
9. Cambiarás el favicon si usas un CMS. El favicon es la imagen que aparece a la izquierda en nuestra barra de direcciones del navegador. No es que tenga especial importancia, ni sea un error capital, pero cuando nuestra web es un CMS instalado, siempre se queda como favicon el que tenga el CMS, Drupal, Joomla, etc. y parece que nadie seha preocupado por modificarlo.
10. No introducirás elementos multimedia que el usuario no pueda desactivar. Predominan las introducciones flash que no puedes saltar y tienes que esperar hasta que finalicen y la música que no puedes desactivar si no es apagando los altavoces o saliendo de la página. Son situaciones muy molestas que pueden hacer que el navegante cierre tu página sin haber llegado a verla.

¿Se os ocurre alguno más?

Leia Mais…

Maquetar esquinas redondeadas con sombras y degradados

via MacBookers by Jose on 10/20/08

Seguro que más de uno habrá escuchado alguna vez eso de "Dale una vuelta, métele esquinas redondeadas y un par de degradados y quedará mucho más 2.0"

En esta nueva era de la web, parece que está de moda hacerlo todo mucho más "visualmente atractivo", los clientes se olvidan completamente del trabajo de los diseñadores y algunos diseñadores dejan fluir su imaginación y se olvidan completamente de los maquetadores, cuanto más dospuntocerista sea tu diseño mejor.

Ale Muñoz definió un nuevo tag XHTML para cuando nos encontráramos con alguna de estas locas propuestas de los clientes, el CWT (Client Want This) y expresa claramente el ejemplo del que voy a hablar en este post.

Las esquinas redondeadas en un diseño son ya algo normal, maquetarlas se puede hacer de forma sencilla usando alguna técnica como la Slinding Doors, de esta forma lograrás tener un contenedor elástico con bordes redondeados, perfecto!

Pero como esto no es lo suficientemente cool vamos a darle una vuelta de tuerca, las esquinas redondeadas pasan ahora a tener tres o cuatro niveles de sombreados grises tanto en sus bordes horizontales como en los verticales, es decir, más o menos esto:

Mamuso (al cual le tengo que agradecer este post que estoy escribiendo) me dice siempre: "No hay diseños imposibles sino maquetadores sin recursos" , así que vamos a ver como podríamos resolver esta pequeña putadita:

Necesitaremos 6 elementos HTML para definir la estructura, si la caja lleva título podemos usar uno de ellos como encabezado (h2 por ejemplo), de lo contrario necesitamos 6 DIVs, uno para cada esquina y dos para los bordes de los lados ( que deberán crecer a la misma velocidad que crezca el texto):

El código HTML sería algo así como:

Usaremos un div "header" y un h2 para la parte de la cabecera (usando el método de Sliding Doors), dos divs uno dentro del otro, "center_content" e "inner_content", para representar los bordes sombreados de la caja y otros dos divs, "footer" y "footer_content" para la parte del pie.

Ya tenemos la parte fácil, ahora vamos a la CSS:

Tanto la parte del header como la del footer están hechas con la técnica de Sliding Doors que mencionamos antes, es decir, dos imágenes, una muy larga que representa la esquina izquierda y el borde , y la otra que representa la esquina derecha:

Para la parte central utilizaremos dos imágenes, con el borde sombreado justo que usaremos de fondo posicionadas a izquierda y derecha con un repeat-y.

Para que los bordes queden superpuestos en los dos contenedores centrales, debemos de darle un margen negativo de 2px al contenedor interior, de lo contrario los bordes no encajarían ( esto NO habría que hacerlo para IE6).

El resultado es una estructura TOTALMENTE COMPATIBLE con todos los navegadores de uso cotidiano, ELÁSTICA y sobre la que se puede hacer ZOOM (ya que está maquetada con ems).

Y esto es todo amigos, no se si el resultado ha quedado muy claro (entre otras son las tantas de la mañana) pero todo es cuestión de probarlo y a ver que tal

Leia Mais…

22 Plugins para Firefox 3 indispensables para diseñadores

via Guiabreve by Víctor F. Ruiz on 10/2/08

22 Plugins para Firefox 3 indispensables para diseñadores. Un lista completa con muchas alternativas aunque a mi con Web Developer, ColorZilla y Firebug me sobra.

Leia Mais…

Fwd: Flash y AIR como el nuevo Java

via Error500 - Tecnología + Internet + Conocimiento by Antonio Ortiz on 11/19/08

Flash y AIR llegan a la arquitectura ARM, con lo que parece que Adobe va a superar la etapa de Flash Lite y va a llegar con la versión completa a teléfonos y otros dispositivos móviles. Ya se han podido ver versiones para Android y Windows Mobile de Flash 10 (Xataka Móvil), con lo que las páginas con Flash pasarían a ser accesibles desde móviles con esos sistemas operativos; el tema de Adobe AIR también es muy interesante, aplicaciones para el escritorio del móvil creadas mediante tecnologías para la web... y multiplataforma.

En este último aspecto es en el que Adobe configura Flash y AIR como el nuevo Java, como tecnologías para el desarrollo de aplicaciones multiplataforma tanto en la web como en el escritorio. Con ambos Adobe ha ido mucho más allá de lo que era Flash hace unos años - una tecnología para hacer animaciones simplonas - pero no tanto como para encontrarse todos los problemas de incompatibilidad que se ha encontrado Java en movilidad.

Una estrategia realmente interesante, pero que choca con varios rivales (Silverlight móvil, tecnologías como los widgets de Nokia u Opera, y el inminnete JavaFx, del que espero mucho) y también con dispositivos cerrados como el iPhone, del que Apple le dejó fuera. Mucho se está comentando un artículo de Wired sobre esta decisión, al final Apple va a tener que reflexionar sobre el control (de la experiencia y del dinero que gana cada uno) que ejerce sobre el dispositivo y el potencial que añade una tecnología como Flash a un terminal pensado para el internet móvil. Hay quien afirma que Apple podría estar preparando un buscador (Alt1040), es probable que en las tecnologías para las RIA sea donde necesite ofrecer algo... o buscar un aliado.

Leia Mais…

s3Slider: plugin para crear slideshows con jQuery

via Intenta on 11/26/08

s3Slider jQuery plugin es un script realmente espectacular para crear "slideshows". Tan sólo hay que echar un vistazo a la demo para darse cuenta del potencial que tiene. La implementación es realmente sencilla, sólo hay que hacer las pertinentes inclusiones -jquery.js y s3Slider.js-, realizar la llamada y preparar un HTML similar a éste:

<div id="s3slider">
 <ul id="s3sliderContent">
    <li class="s3sliderImage">
        <img src="#" />
        <span>Your text comes here</span>
     </li>
    <li class="s3sliderImage">
        <img src="#" />
        <span>Your text comes here</span>
    </li>
    <div class="clear s3sliderImage"></div>
  </ul>
</div>

En la web del plugin podemos descargar varias versiones, una de ellas con ejemplos completos. El plugin está testado para la totalidad de los navegadores más habituales.

s3Slider jQuery plugin » »

Leia Mais…

Styled Menus

via Intenta on 12/15/08
Styled Menus es un sitio web que ofrece menús de navegación diseñados por profesionales. Los menús están realizados con CSS, y son compatibles con todos los navegadores.

Styled Menus » »

Leia Mais…

Native Client, código nativo desde el navegador

via Genbeta by Sacha Fuentes on 12/9/08

No se como se lo hacen, pero desde Google siempre consiguen sorprendernos sacándose de la manga proyectos que cambian el paradigma existente en ciertos sectores. Gmail fue un ejemplo de ello en los gestores de correo electrónico vía web.

Native Client quiere hacer algo parecido con Flash, Java,... ofreciendo una nueva manera de ejecutar código en el lado del cliente a través del navegador. Pero lo hace de una manera distintas: en lugar de ofrecer una máquina virtual permitirá a los desarrolladores que ejecuten directamente código nativo en el ordenador.

Actualmente, las aplicaciones web no pueden acceder a toda la potencia que ofrecen los ordenadores. Vemos como cada vez tenemos ordenadores más potentes, pero capas y más capas intermedias provocan que esta potencia se vea reducida a los mismos niveles con los que trabajábamos hace años.

La idea de Native Client es poder aprovechar el aumento de velocidad en los ordenadores desde la web. Esto permite ejecutar aplicaciones que, aunque ahora son factibles, pueden resultar demasiado pesadas, como editores de imágenes, juegos 3D,...

La arquitectura de Native Client es la de un compilador y un entorno de seguridad. El código se desarrolla en C o C++, se descarga a través del navegador y desde allí se compila y se ejecuta, tras pasar una serie de pruebas de seguridad que aseguren que no es capaz de afectar al resto del sistema.

Esto último será el factor más complicado de controlar, aunque la idea de Google es que la comunidad les ayude a hacerlo. Para ello, han lanzado Native Client como un sistema de código abierto y gratuito, además de ser independiente del navegador y del sistema operativo.

De momento funciona en Windows, Mac OS X y Linux, con los navegadores Firefox, Safari, Opera y Google Chrome, pero también quieren ofrecerla para otras plataformas hardware como ARM y PPC.

Es pronto para saber todavía hacia donde va a evolucionar esto, pero desde luego si estuvieran desarrollando un sistema operativo basado en web (algo rumoreado pero que yo no me creo), esta sería una de las mejores maneras de aumentar su potencia sin depender de soluciones de otros fabricantes como es el caso de Java o Flash.

Más información | Native Client.

Leia Mais…

Calabria: 20 iconos vectoriales gratuitos

via Intenta on 12/9/08

20 iconos gratuitos en formato Adobe Illustrator, tanto para uso personal como comercial.

Leia Mais…

Rinoa Icon Set

via Intenta on 12/4/08

48 iconos gratuitos, muy aprovechables para aplicaciones web, en formato PNG y de tamaño 24 x 24 px.

Leia Mais…

Función en PHP generadora de passwords aleatorios

via Intenta on 12/1/08

Una función muy útil en el que podemos incluir dos parámetros, la longitud y la fortaleza de la contraseña.

function generatePassword($length=9, $strength=0) {
$vowels = 'aeuy';    
$consonants = 'bdghjmnpqrstvz';    
if ($strength & 1) {        
$consonants .= 'BDGHJLMNPQRSTVWXZ';    
}    
if ($strength & 2) {        
$vowels .= "AEUY";    
}    
if ($strength & 4) {        
$consonants .= '23456789';    
}    
if ($strength & 8) {        
$consonants .= '@#$%';    
}      
$password = '';    
$alt = time() % 2;    
for ($i = 0; $i < $length; $i++) {        
if ($alt == 1) {            
$password .= $consonants[(rand() % strlen($consonants))];            
$alt = 0;        
} else {            
$password .= $vowels[(rand() % strlen($vowels))];            
$alt = 1;        
}    
}    
return $password;
} 

Leia Mais…