Karmacracy. El foursquare de los acortadores de urls. @karmacracy

En primer lugar, antes de hablar de Karmacracy hemos de explicar que son los acortadores de urls. Desde la irrupción de twitter en la red y su limitación de 140 caracteres, las urls de las direcciones a las que apuntan muchos post de los blogs (las cuales realmente son muy largas) han sido reemplazadas por enlaces cortos a los post con urls largas. Hay muchos y muy famosos acortadores, como bit.ly, y prácticamente cada plaforma web tiene la suya, como: fb.me de facebook, goo.gl de google, nyti.ms del New York Times, t.co de twitter o 4sq.com de foursquare.

Con esta base, aparece Karmacracy. Un acortador de urls de origen español, que va un paso más allá, añadiendo funcionalidades a su acortador y un sentido social a este, con la posibilidad de ganar medallas -badges- mediante el uso de la plataforma. Además, un ranking global de todos lo usuarios en el que puedes comprobar tu posición, ahí comienza la parte viral - el juego-, la necesidad intrínseca del ser humano de ser mejor que sus semejantes se plasma en la intención de tener más placas/medallas que los demás, y ser el primero del ranking (global o actual).

Es por esto, que se ha denominado a Karmacracy, el FourSquare de los acortadores de urls. El juego comienza tratando de ganar en ranking a tus propios amigos.

Una funcionalidad muy importante es su integración con aplicaciones como Tweetdeck a través de una API muy fácil de usar, bookmarklets y extensiones para navegadores y aplicaciones para móviles.

Aunque está en Beta, admite nuevos usuarios, así que si os interesa podéis crear vuestra propia cuenta accediendo al siguiente enlace Karmacracy usando el código jmaciaslovesyou

Website: http://karmacracy.com
Twitter: @Karmacracy

Leia Mais…

Obtener Huso en Google Maps

cómo obtener el HUSO a partir de la latitud y longitud:

   1:  /* devuleve el HUSO */ 

   2:  function getHUSO(lat, lon){

   3:   var txtHuso = "S"; 

   4:  if(lat > 0){ 

   5:   txtHuso = "N" 

   6:    } 

   7:    for(var i = -30; i <> (i*6) && lon < (1+i)*6){ 

   8:     return "" + ((i+30)+1) +""+txtHuso; 

   9:    } 

  10:   } 

  11:  }

Leia Mais…

Recursos del buen maquetador

from MacBookers 2 by Jose

Siempre digo que tengo que escribir un pequeño post con todos los recursos que suelo usar cuando trabajo, soy demasiado vago para meterlos en delicious y muchos los tengo por ahí guardados o listas de correo.

El caso es que pretendo que este espacio me sirva también para tener ordenado todos aquellos tutoriales, demos, prácticas varias o curiosidades con los que me he ido encontrado en estos tiempos, si de paso le sirve a alguien más, mejor que mejor.

Problemas con esquinas redondeadas, sean de la complejidad que sean:

Nifty Corners Cube: Los de toda la vida, los de la abuela, para hacer redondeos más o menos típicos

Shaded Border: Para los que buscan grandes emociones, con fondos degradados y demás historias.

Reemplazo de fuentes

Cufón: Mi nuevo muy mejor amigo, funciona generalmente bien (a veces se pega con otros niños-plugins) , es fácil de implementar y las librerias no ocupan demasiado

Sprites

CSS Sprite Generator: Reconozco que yo soy más de hacerlo a mano, pero una buena herramienta se agradece (no penséis mal leches)

Tooltips

Simpletip: Claro y consiso, para hacer tooltips, sin chorradas.

Beauty Tips: Todo lo contrario al anterio plugin, con todas las opciones y chorraditas varias que se puedan imaginar.

Lightboxs

Shadowbox: Muy chulo, con bastantes opciones

Thickbox: El rey de la selva, básico fundamental en todos mis proyectos

Retícula

Jquery-reticulator: Basada en el reticulator de Ale Muñoz, una creación de Manuel Muñoz, básico para cualquier maquetación que tenga que estar al pixel.

Transparencias en IE6

IE Png Fix: Mi otro mejor amigo, este es el que te salva el culo siempre, especialmente cuando llegan diseños puteantes complejos.

Tablas Ordenadas:

Tablesorter: Salvador para aquellos proyectos llenos de tablas con datos de ordenados de usuarios y demás rollos

Bola extra: Google Buttons Style: Fáciles de implementar y quedan chulísimos en cualquier proyecto

Leia Mais…

Sexy Alert Box

Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Está basado en PBBAcpBox — un script que lamentablemente el autor paró de desarrollar — sin embargo, el código fue publicado bajo una licencia libre, con lo cual pude mejorarlo y adaptarlo a la versión 1.2 de Mootools.

Entre las características de SexyAlertBox encontramos:

• Estilo: Mostrar mensajes de error de una manera más bonita.
• Compatibilidad: Funciona tanto en navegadores modernos, como en Internet Explorer.
• Requiere: Mootools 1.2

Puedes descargar Sexy Alert Box desde el blog www.coders.me

Leia Mais…

Animated JavaScript Slideshow

Posted by Michael in JavaScript

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics.

Images

imgSpeed = int; (10) navOpacity = int; (25) navHover = int; (70) letterbox = “string”; (#000) required color for letterbox on portrait images link = “string”; class name for link hover state

Auto Slideshow

auto = boolean; (false) speed = int; (10)

Information Dialog

info = boolean; (true) infoID = “string”; required for information dialog infoSpeed = int; (10)

Thumbnail Slider

thumbs = “string”; id of thumbnail slider, disabled if not set scrollSpeed = int; [1-20] (5) thumbOpacity = int; [0-100] (70) active = “string”; required for thumbnail active border spacing = int; (5) spacing between thumbnails left = “string”; id of left navigation link, required for slider right = “string”; id of right navigation link, required for slider

Click here for the demo.

Click here to download the source.

Leia Mais…

PrestaShop: ideal para implementar la primer tienda online de la empresa

from Tecnología Pyme by Eugenio Velázquez

Tarde que temprano muchas de las empresas deciden implementar una tienda online dentro de su web site, o bajo un dominio propio, para comenzar a ejercer comercio electrónico. Hoy veremos una herramienta que puede apoyarnos en nuestros primeros pasos en este rubro.

Para ello partiremos de una aplicación gratuita relativamente nueva, diseñada para implementar tiendas online los más sencillo posible; su nombre PrestaShop.

PrestaShop es una solución para crear un sitio e-Commerce (comercio electrónico) en código abierto con gran facilidad y en poco tiempo. Esta preconfigurada para usar servicios de pagos como PayPal, realizar etiquetado de productos, generar nubes de etiquetas, administrar contenidos sindicados (RSS), destacar productos, así como ofrecer prácticamente todo los necesario para comenzar tu tienda online. PrestaShop pesa apenas 5 MB y se instala con una facilidad sorprendente. Una vez instalada, el panel de administración de la herramienta nos brinda todo lo necesario para poner en marcha nuestra tienda online. El software es completamente gratuito y requiere para funcionar de un servidor web Apache, PHP 5.0 y MySQL 5.0 (o superiores).

Si se le dificulta la instalación de las aplicaciones open source citadas anteriormente, no hace mucho publicamos un post relativo a este tema, donde mencionamos instaladores automatizados para estos software. Claro, esto si es que tiene su propio servidor web, que si usa hosting compartido estas aplicaciones comúnmente ya están preinstaladas por el proveedor en su cuenta de hosting.

Respecto a PrestaShop, si bien la información en el sitio oficial solo está disponible de momento en idioma ingles y francés; la herramienta cuenta con un pack de idioma español, con el que podemos dejar la plataforma en nuestro idioma, y además ya cuenta con una comunidad hispana en todoprestashop.com, en la cual podemos apoyarnos y sobre todo con la disponibilidad de tutoriales para las cuestiones más fundamentales y básicas en el lanzamiento de esta tienda online.

Al momento PrestaShop apenas está haciendo presencia en el universo de la web, y por eso aun son pocas las tiendas online que son soportadas por esta herramienta, ello en comparación con osCommerce, que es la plataforma opensource predominante en este campo. Sin embargo, si comparamos PrestaShop contra osCommerce encontraremos que la primera va dirigida a organizaciones o usuarios que desean implementar tiendas online sencillas, y con ello la simplicidad del software; mientras que osCommerce es mucho más robusta y por ende requiere mayores recursos de administración y gestión.

Si desea ver si PrestaShop puede servirle para algún proyecto de comercio electrónico sencillo y no desean hacer instalaciones; en el sitio oficial se disponen un par de cuentas de DEMO con las que podemos ver una demostración en línea tanto de la parte de la tienda, como de su administración. Esperamos esta herramienta les sea de utilidad.

Sitio Oficial | PrestaShop

Leia Mais…

Dreamhost Apps, alojamiento gratuito de aplicaciones

Dreamhost es un proveedor de hosting bastante conocido por ofrecer grandes cantidades de espacio en disco y de transferencia por un precio bastante reducido. Podríamos discutir sobre su calidad y velocidad, pero lo cierto es que tienen una gran cantidad de clientes y funcionan razonablemente bien.

Pero no quiero hablar de su hosting de pago, sino de Dreamhost Apps, su nuevo servicio con el que ofrecen alojamiento gratuito para diversas aplicaciones web, de forma que dispondremos de software gestionado por ellos, que se encargan de la instalación, actualización,... sin pagar nada.

Entre las aplicaciones soportadas actualmente se encuentra Wordpress, Drupal, ZenPhoto, MediaWiki o phpBB, además de las Google Apps, a las que tienen intención de añadir de nuevas en el futuro.

Estas aplicaciones podrán usar un dominio ya existente, uno nuevo o un subdominio de dreamhosters.com. La idea de Dreamhost es que una parte de sus usuarios se acaben pasando al servicio de pago, pero parece una buena opción si necesitamos algún software y no queremos pagar nuestro propio hosting.

Más información | Dreamhost Apps.

Leia Mais…

Uso creativo de jQuery

from Clip de Película by admin

Uso creativo de jQuery

Leia Mais…

Easy Slider: Plugin para jQuery

from Intenta

easySlider es un plugin para generar carruseles de imágenes, también llamados "slideshows", para jQuery. Su uso es muy sencillo y posee bastantes opciones de personalización. A continuación un listado con los parámetros que se pueden configurar y sus valores por defecto:

prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false

• controlsShow: Por defecto a true, pero si está establecido en false no añade ningún control. Puede ser utilizado junto con auto-deslizante cuando se quiera desactivar la interacción del usuario.
• controlsBefore y controlsAfter: En el caso de que se quiera añadir algunos métodos adicionales para obtener más control sobre los botones, puedes hacerlo mediante el uso de estos parámetros.
• controlsFade: Por defecto asignado a true. Si se pone a false deshabilitará el ocultamiento de botones cuando el slider llega al final.
• firstShow and lastShow: Estos parámetros ocultan (o muestran) los botones "ir a la primera" e "ir a la última".
• auto: Esta opción habilita el auto-deslizante. Sólo tienes que ponerla a true.
• pause :Esta opción se configura en milisegundos y representan la duración de cada diapositiva cuando el plugin está configurado para auto-deslizante.
• continuous: Si es asignado true cuando hacemos click en el botón "Siguiente" cuando hemos llegado al final se saltará al principio (y viceversa). La combinación de esta opción con auto (ambos establecidos a true) obtendrá una animación sinfín.

 En la web oficial del plugin encontraremos más información, unas cuantas demos y la descarga del plugin.

Easy Slider 1.5 » »

Leia Mais…

Los 50 mejores sets de iconos para aplicaciones web

from Intenta

Otra enorme recopilación de iconos. En este caso centrados en que sean adecuados para el desarrollo de aplicaciones web. La mayoría ya los conoceréis pero siempre puede haber alguna sorpresa. En mi caso ha habido más de una sorpresa.

50 of the Best Ever Web Development, Design and Application Icon Sets » »

Leia Mais…

Reemplazo de alert(), confirm() y prompt() de JavaScript con jQuery

from elWebmaster.com by Micaela

jQuery Alert Dialogs se trata de una serie de métodos que nos proveen de una forma completamente personalizable por medio de CSS de mostrar las alertas, confirmaciones y notificaciones JavaScript.

jQuery plugin busca reemplazar las funcionalidades básicas que se logran mediante la implementación de los comandos estándares JavaScript alert(), confirm()y prompt(). Para implementarlo solo tenemos que añadir estas líneas a nuestro :

<link href="%E2%80%9D/path/to/jquery.alerts.css%E2%80%9D" rel="”stylesheet”" type="”text/css”" media="”screen”">

Una vez hecho esto debemos llamar a las funciones que mostrarán las alertas.

jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.

jAlert(’This is a custom alert box’, ‘Alert Dialog’);

El sustituto de prompt() nos permite introducir un valor desde la ventana, se llama así:

jPrompt(’Type something:’, ‘Prefilled value’, ‘Prompt Dialog’, function(r) { if( r ) alert(’You entered ‘ + r); });

Y finalmente la elternativa a confirm() nos permite ofrecer al usuario la opción de aceptar o cancelar una acción, la implementamos de la siguiente manera:

jConfirm(’Can you confirm this?’, ‘Confirmation Dialog’, function(r) { jAlert(’Confirmed: ‘ + r, ‘Confirmation Results’); });

Desde Anieto2k nos proponen, además, un sistema para implementar esta opción como una alternativa y que en caso de fallar nos muestre la funcionalidad original. Para ver el articulo completo haz clic aquí>>

Leia Mais…

Rollover sobre imágenes con jQuery

from Intenta

Para realizar un efecto de rollover con imágenes, quizá la mejor opción sea la utilización de sprites con CSS, pero ésta solución puede resultar más sencilla a bastante gente. En "Easy Image Rollover Script With jQuery" me he encontrado una función que de una forma sencilla nos permite crear rollovers.

Con esta función podemos interactuar con todas las imágenes a las que le hayamos asignado la clase "'roll". Únicamente deberemos nombrar a la imagen del rollover del mismo modo pero añadiendo '_hover'. Por ejemplo, para la imagen "MiBoton.gif", la imagen de rollover será "MiBoton_hover.gif".




Ver ejemplo en funcionamiento en la web del autor
Descargar ejemplo completo

Leia Mais…

Texturas grunge de alta resolución

via Intenta on 1/11/09

Interesante colección de paquetes de texturas grunge, de aspecto oxidado y en formato de gran resolución, obtenidas desde Deviantart.

Free High Resolution Grunge Rustic Textures » »

Leia Mais…

Marcas de agua con CSS

via Intenta on 1/7/09

CSS Watermark es una forma sencilla de crear una marca de agua para nuestras imágenes. Se puede personalizar el lugar donde aparecerá la marca de agua: superior-izquierda (topleft), superior-derecha (topright), inferior-izquierda (bottomleft) e inferior-derecha (bottom-right).

Simplemente hay que incluir el CSS:

<link href="Watermark/Watermark.css" 
type="text/css" rel="stylesheet"></link>

y añadir el siguiente código cada vez que deseemos añadir una imagen con marca de agua:

<div class="watermark posicion">
<div class="text">Marca de agua</div>
<img src="Nombre_Imagen.jpg" width="300" height="199" 
alt="alt imagen" >
</div>

donde "posicion" puede tomar los valores: topleft, topright, bottomleft, bottomright.

Podemos modificar tanto el formato del texto, como la opacidad del mismo si modificamos la siguiente clase CSS incluida en el fichero Watermark.css:

div.watermark .text {
position: absolute;
cursor: default;
font: bold 22px Verdana, Arial, Sans-serif;
color: White;
margin: 4px;
line-height: 20px;
filter: 
progid:
DXImageTransform.Microsoft.Alpha(opacity=50);
opacity: .5;
-moz-opacity: .5;
}

Ver ejemplo en funcionamiento » »

CSS Watermark » »

Leia Mais…

Distinguir Google Chrome y Safari con CSS

via Intenta on 1/6/09

No es lo más ortodoxo pero a veces no hay más remedio que echar mano de ellos: dos hacks para distinguir los navegadores Chrome y Safari.

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {    
/* Propiedades para Google Chrome */
}

/* Safari hack */
body:first-of-type .elementOrClassName{
   /* Propiedades para Safari */
} 

Leia Mais…

SimpleTabs

via Intenta on 1/5/09

SimpleTabs es un script no intrusivo para realizar "tabs" (pestañas). Quizá la gran ventaja es que no depende de ninguna biblioteca como jQuery, Mootools, etc. Lo que significa, por un lado, que nos podremos evitar posibles conflictos entre librerías o incompatibilidades con otros scripts, y por otro qe el tamaño final del script será mucho menor. También cabe destacar que es capaz de recordar el último tab al que se ha accedido si se recarga la página.

Para implementarlo hay que incluir los ficheros simpletabs.js y simpletab.css files y replicar una estructura XHTML similar a la siguiente:

<div class="simpleTabs">
       <ul class="simpleTabsNavigation">
           <li><a href="#">Tab 1</a></li>
           <li><a href="#">Tab 2</a></li>
            <li><a href="#">Tab 3</a></li>
       </ul>
       <div class="simpleTabsContent">
Contenido llamado cuando a "Tab 1" se le hace click.</div>
        <div class="simpleTabsContent">
Contenido llamado cuando a "Tab 2" se le hace click.</div>
       <div class="simpleTabsContent">
Contenido llamado cuando a "Tab 3" se le hace click.</div>
</div>

Ver ejemplo en funcionamiento en la web del autor

SimpleTabs by Komrade

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…