No utilizar Flash ProhibidoFlash nos ha acompañado en el diseño Web ya por muchos años, empezó como una novedad el poder hacer animaciones, luego con un poderoso lenguaje de programación que permitía al usuario interactuar y quien no ha jugado alguna vez algún juego hecho en Flash.

El gran problema es que después a alguien se le ocurrió que sería maravilloso hacer un sitio completamente en Flash y porque además no agregarle un intro en Flash que dure horas y por supuesto que tiene que tener música a quien no le gusta que lo hagan saltar de su silla desprevenido cuando tienes las cornetas a todo volumen y llevas 20 minutos esperando que se descargue el sitio en Flash, esto tiene que parar.

Aquí voy a exponer 5 razones de porque no hacer un sitio Web en Flash y porqué no sobreutilizarlo en el diseño.

1. La información no es Accesible

Alguna vez han intentado copiar Texto de una animación en Flash?, inclusive si quieres copiar la información de contacto de la empresa?. Flash no permite copiar texto de una animación, ni el texto dentro de las animaciones es indexado por los buscadores.

Esto es un grave problema, queremos que nuestros usuarios se distraigan con el link que salta de un lado a otro o que consiga la información que está buscando?.

Lo más importante de una Web, es el contenido, la información, es aparecer en un buscador y ser “encontrable” en la Web. Nuestro principal objetivo como diseñador, desarrollador, administrador de un sitio es que el contenido esté disponible y que sea fácil de encontrar por nuestros usuarios.

Otro punto importante es que la mayoría de los teléfonos móviles no tienen soporte para Flash y cada vez se incrementa más los usuarios que accesan la información desde estos dispositivos.

A nadie le interesa el Intro de 5 minutos con música de su Web, es algo duro de escuchar para muchos pero es así, si yo entro en un sitio es a buscar algo que me interesa. Si en dado caso realmente quieres que la gente que le interese vea el intro coloca un link dentro de tu sitio que me permita verlo, no me obligues. Y por favor a menos que tu sitio sea de música no desperdicies mi ancho de banda cargando esa canción que tanto te gusta o un sonido repetido insoportable.

2. Flash es pesado

Los sitios en Flash son más pesados que una Web normal y se tardan en cargar, más si tienes una conexión limitada, y no puedo ver contenido hasta que se cargue por completo. Recuerda que si un visitante no obtiene lo que quiere en segundos simplemente se va de tu sitio y si realmente necesita lo que está ahi ya lo habrás puesto de mal humor cuando termine de cargar.

Piensa primero en las necesidades de tu visitantes, luego en las tuyas.

3. No hay botón Atrás

Cuando la navegación se hace en Flash, en el 99% de los casos se deshabilita el botón de Atrás de tu navegador, que da la casualidad de ser el segundo elemento más importante de navegación para los usuarios. A todos nos pasa entramos a un sitio, le damos a otro link, queremos volver le damos al botón de atrás y así navegamos. Si le quitas eso a tu usuario estás complicándole la navegación en tu sitio y aunque tu menu que da vueltas y cambia de color se puede ver muy bien no es funcional para tu usuario, como en el punto anterior el usuario es primero.

4. Los buscadores son ciegos con Flash

Google, Yahoo, Bing, etc no pueden ver el contenido de tu animación, por lo tanto no indexan tu sitio y no apareces en las búsquedas. Aunque Google recientemente ya indexa las descripciones de las animaciones esto realmente no es suficiente si todo tu sitio es hecho en Flash.

Entre el 80% y 90% de tráfico de una página suele provenir de los Buscadores, por lo que es muy importante aparecer en la búsquedas y ser accesibles a ellos para que seas accesibles a tus usuarios.

5. Flash no es Estándar

Flash no cumple con ninguno de los estándares Web, no toma en cuenta a personas con discapacidades, ni hace más fácil la navegación, la gente que lo utiliza para todo simplemente no tiene claro el concepto de que es un sitio Web y cual es su utilidad.

Muchos de los efectos que antes sólo se conseguían con Flash ahora se pueden conseguir con CSS y Javascript y pronto cuando tengamos HTML5 y CCS3 será aún más obsoleto Flash.

Por cierto saben que Apple ya no soporta Flash en sus nuevos dispositivos?

Conclusión

Es hora que abandonemos las malas prácticas del diseño y pasemos la época del Flash, por supuesto que aún puedes diseñar algún que otro banner en Flash y si quieres desarrollar un juego adelante. Pero por ningún motivo lo utilices como tu principal herramienta de diseño Web.

Si tienes un sitio realizado completamente en Flash actualízate utiliza HTML, Flash, Javascript y verás como incrementa el número de visitantes. Y si eres un diseñador que sólo sabe Flash aprende CSS y Javascript le ofrecerás un mejor servicio a tus clientes y estarán más contentos con los resultados.

Si te toca alguna vez un cliente que quiere todo su sitio en Flash ya tienes más argumentos para defenderte.

Espero que les sea de utilidad este artículo y que me dejen sus opiniones y sugerencias para ir mejorando.

Nosotros en Vensign ofrecemos servicios de diseño y desarrollo de páginas Web para PyMES y corporaciones, puede ver nuestros servicios aquí o Contactarnos

Si quieres recibir más artículos y noticias de diseño y desarrollo Web, Negocios, Software Libre y Linux nos puedes seguir a través de nuestro RSS, Twitter o suscribirte a nuestro Boletín de Noticia

Wordpress 3.0Hoy fue el anuncio oficial del lanzamiento de WordPress 3.0, esta famosa plataforma que alguna vez sólo fue para Blogs pero que ahora ha evolucionado en un manejador de contenidos bastante completo, flexible y robusto.

Esta versión es un hito en el desarrollo de WordPress y es el fruto de todas las mejoras que se han ido incorporando, a los requerimientos de los usuarios y a un gran grupo de desarrolladores y de la comunidad que lo soporta como plataforma de Software Libre.

En este nueva versión tenemos las siguientes mejoras y características:

  • Permite crear categorías de post en la administración. Ya no sólo tenemos la opción de post y páginas sino que podemos crear categorías específicicas por ejemplo una categoría de Noticias, Deportes, Tecnología, etc y dentro de cada una de ellas crear Posts. Esto da mayor flexibilidad a los que manejan el contenido del sitio y permite ofrecerle a los clientes que utilizan la plataforma una forma más sencilla y clara de manejar los contenidos.
  • Nuevo tema por defecto adios a Kubrick y ahora le damos la bienvenida al nuevo Twenty Ten que es un tema que aprovecha todas la nuevas características de WordPress 3.0
  • Crear menús personalizados, ahora podemos crear nuestros propios menús y cuantos queramos sin modificar el código simplemente lo creamos en Apariencia>Menú y podemos elegir como se verán nuestra navegación, que va primero y después y crear varios menús para colocarlos en distintas secciones.
  • Agregar fondo, ahora podemos cambiar el fondo de nuestro sitio también desde la administración, elegimos una imagen y podemos seleccionar centrarla o colocarla en mosaico para que se repita en el fondo. También en vez de una imagen podemos colocar un color.
  • Cambiar imagen de Cabecera, podemos cambiar la imagen de cabecera a nuestro gusto sin problemas, el nuevo tema Twenty Ten tiene varias imágenes que ya podemos utilizar.
  • Links personalizados para cada post. Muy útil cuando los títulos son muy largos.
  • Ayuda en cada página. Ahora la ayuda está disponible en cada página de la administración y despliega la ayuda depende de donde nos encontremos.
  • Además cambio un poco el diseño de la página de administración algunos toques aquí y allá, se arreglaron más de 1.217 errores y permite actualizar los plugins en lote una característica muy esperada por mucho de nosotros.

Les dejo aquí el video donde podrán ver mejor las nuevas características y pronto estaremos publicando tutoriales de como aprovechas al máximo esta plataforma.


WordPress 3.0 promete mucho así que ha actualizar y pronto les enseñaremos como sacarle el mayor provecho para sus sitios Web.

Pueden descargar WordPress 3.0 en español desde: http://es.wordpress.org/

Sus opiniones son muy importantes para nosotros por eso dejen su comentario!!

Aquí en Vensign nos especializamos en WordPress como plataforma de manejo de contenido para su empresa, estamos a la orden para cualquier requerimiento. Contáctenos!

Estaremos publicando una serie de artículos con Tips, Sugerencias y opciones para las empresas así que no olviden seguirnos a través de nuestro RSS, Twitter o suscribirte a nuestro Boletín de Noticias

Recientemente Google a liberado un grupo de fuentes (o letras) bajo una licencia de software libre y totalmente gratuitas para utilizarlas en diseños de sitios y páginas Web.

Aquí te vamos a explicar como utilizar estas fuentes en tus diseños y como sacarles el mayor provecho.

Para este tutoríal se necesita un conocimiento mínimo de HTML.

Vamos a transformar esto:



Fuentes de Google - antes

Antes



A esto:


Fuentes de Google - despues

Después


Utilizando las fuentes Open Source de Google

Puedes descargar los archivos de ejemplo aquí

Un ejemplo Sencillo

Para ver lo fácil que es vamos a empezar con un ejemplo sencillo, vamos a crear dos archivos uno llamado index.html y otro llamado style.css ambos archivos dentro de una misma carpeta. Lo puedes crear con cualquier editor de texto de tu preferencia (evitar utilizar MS Word o OpenOffice ya que le agregan caracteres escondidos que no queremos) puedes utilizar el Block de Notas de Windows o gedit si estás en Linux.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fuentes de Google</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|IM+Fell+DW+Pica|Josefin+Sans+Std+Light">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 <body>
 <h1>Vensign es lo mejor!</h1>
 <h2>El Supertitulo de hoy</h2>
 <p>Este es un art&iacute;culo en como utilizar las nuevas fuentes de Google&trade; que son Open Source y gratuitas en nuestros dise&ntilde;os</p>
 </body>
</html>

Este archivo sin estilos si lo abren en su navegador se verá algo así:


Fuentes Google - Sin estilo

Sin estilo CSS


No muy atractivo verdad?, vamos a ver que podemos hacer con las fuentes de Google para mejorar un poco el diseño. Primero agregamos estas dos líneas dentro de las etiquetas de

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" type="text/css" href="style.css">

Aquí simplemente estamos agregando dos archivos de estilo CSS a nuestra página:

  • http://fonts.googleapis.com/css?family=Lobster. Con esta línea agregamos la fuente Lobster que es una de las fuentes que tiene disponible Google y la vamos a utilizar para nuestro títulos H1. Así es la forma más básica de agregar una fuente de Google.
  • style.css, es nuestro archivo de estilos que vamos a crear a continuación.

Nuestro archivo index.html quedaría así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fuentes de Google</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 <body>
 <h1>Vensign es lo mejor!</h1>
 <h2>El Supertitulo de hoy</h2>
 <p>Este es un art&iacute;culo en como utilizar las nuevas fuentes de Google&trade; que son Open Source y gratuitas en nuestros dise&ntilde;os</p>
 </body>
</html>

Creamos dentro del mismo directorio de index.html un archivo llamado style.css en este archivo agregamos las siguientes líneas:

/*Archivo de ejemplo para utilizar las fuentes de Google
 Autor: Olivers De Abreu
 Compañia: Vensign
 URL : http://www.vensign.com
 Version: 1.0
 */
h1 {
 font-family:'Lobster', arial, serif;
 font-size:48px;
 }

Aquí lo que estamos colocando es que cualquier título h1 que tengamos en nuestra página usará como fuente Lobster y tendrá un tamaño de 48px, noten que utilizamos arial y serif como fuentes de respaldo en caso que ocurra algún problema y no se pueda cargar Lobster. Siempre es importante utilizar fuentes de respaldo!.

Ahora si recargamos nuestra página en el navegador se debería ver así:


Fuentes Google - Fuente Lobster para h1

Con Fuente Lobster para h1


Mucho mejor pero aún le falta, vamos a agregarle otro tipo de fuentes a nuestro título h2 y al párrafo (p). Como hacemos para agregar más fuentes de Google muy sencillo modificamos esta línea en nuestro index.html:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">

Y la cambiamos por esta para agregar las fuentes IM Fell DW Pica para nuestros títulos h2 y Josefin Sans Std Light para nuestro párrafo:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|IM+Fell+DW+Pica|Josefin+Sans+Std+Light">

Noten que hemos separado los nombres de las fuentes con | y que las fuentes que tienen nombres de más de dos palabras unimos las palabras con +.

Ahora modificamos el archivo style.css agregando estas líneas al final

h2 {
 font-family:'IM Fell DW Pica', verdana, serif;
 font-size:40px;
 color:#F25835;
 }
p {
 font-family:'Josefin Sans Std Light', arial, serif;
 font-size:18px;
 }

Aquí como observan estamos utilizando las dos fuentes que agregamos anteriormente, si recargan la página verán algo como:




Con estilo para h1 h2 y p

Mucho mejor!. Aquí ya tenemos toda una página con tres tipos distintos de fuente.

Puedes encontrar toda la lista de fuentes de Google Aquí

Además de colocarles los estilos normalmente como lo hacemos a través de CSS, el API de las Fuentes de Google nos permite definir si las letras son itálicas o en negritas al momento de cargarlas, por si quieres especificar el estilo al momento de cargarla. Este cuadro y ejemplo los tomé de la página de Google.

Estilo Modificador
itálica italic or i
negrita bold o b o un peso numérico como 500
itálica y negrita bolditalic ó bi

Por ejemplo para pedir por una fuente Cantarell itálica y Droid Serif en negrita, utilizaríamos cualquiera de los siguientes URL:

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Pronto veremos otro tutorial donde le agregaremos estilos a través de una librería de javascript llamada WebFont Loader que nos permite darle efectos como sombras, cargar las fuentes después de cargar la página y otro par de cosas útiles.

Nosotros en Vensign ofrecemos servicios de diseño y desarrollo de páginas Web para PyMES y corporaciones, también ofrecemos servicios de PSD a HTML para diseñadores, puede ver nuestros servicios aquí o Contactarnos


Si quieres recibir más artículos y noticias de diseño y desarrollo Web, Negocios, Software Libre y Linux nos puedes seguir a través de nuestro RSS, Twitter o suscribirte a nuestro Boletín de Noticias

Paginas web corporativasEn el mundo que vivimos ya no debería ser una pregunta si una empresa necesita una página Web, el porcentaje de penetración de Internet en la mayoría de los países latinoamericanos y europeos es alto y cada día crece más. La forma en que buscamos la información ha cambiado totalmente, todo o casi todo lo buscamos por Internet, desde la noticia de hace 5 minutos hasta el apartamento que queremos comprar o buscar.

El principal problema que enfrenta una empresa no es el tener la página Web como tal, sino hacer una buena página Web que sirva a sus usuarios y mantenerla actualizada, ya paso la época en que las páginas Web corporativas sólo servían para presentar una página de Quienes Somos o Nosotros a ser una extensión más de nuestra empresa una vitrina hacia nuestros clientes y al mundo y la debemos tratar con el mismo cuidado que trataríamos cualquier otra inversión de nuestra empresa.

Entonces que elementos debe tener el Diseño una página Web Corporativa:

  1. Diseño claro y conciso Lo primero que nota un usuario al entrar a una página Web es los colores, las imágenes y la posición de los elementos, es decir el diseño no el contenido. El diseño debe ser claro, simple y limpio, fácil de procesar por nuestra vista.
  2. Colores acordes con el Logotipo y la imagen que quiera transmitir la empresa, los colores son un gran medio para transmitir emociones y estados de ánimos. Hay colores que nos transmiten seriedad y otros diversión (piensen en IBM vs McDonalds que colores le vienen a la mente), no es raro ver páginas web de empresas donde los colores de la página no tienen nada que ver con el logotipo o con el mensaje que transmiten y no se complementan sino que simplemente son los colores que mejor le parecieron al que diseñó la página, esto causa un impacto en el usuario y puede estar transmitiéndole el mensaje equivocado acerca de su empresa, productos y servicios.
  3. Diseño uniforme entre las páginas, es importante que el usuario a medida que navegue entre las páginas de su empresa sienta que siempre está dentro de la misma página, a veces ocurre que no se mantiene ningún elemento en común entre las páginas, ya sea el color, menús, forma, y de repente cuando pasas de una página a otra sientes que estás en otro sitio, esto es muy perjudicial para la experiencia del usuario y puede ocasionar que no relacionen lo que presente en la página con su empresa o simplemente se vayan por sentirse perdidos o confundidos.
  4. Espacio en blanco, el espacio en blanco ha sido despreciado por muchos diseñadores pero es un elemento clave para que un buen diseño, permite que el usuario preste más atención a los distintos elementos y sea más fácil la navegación, un ejemplo claro del uso del espacio blanco es la página de Apple. Recuerda que a veces menos es más.
  5. No sobre utilizar animaciones y efectos, sólo se tienen de 5 a 8 segundos para captar la atención del usuario si su página tarda más de eso en cargar es muy difícil que los usuarios se queden, asegúrese de no tener más de 2 animaciones en flash en su sitio (1 es lo recomendado), y que se carguen una vez que toda la página esté cargada, así el usuario podrá ver la información rápidamente.
  6. NO hacer sitios 100% en Flash, aunque los sitios en Flash son muy llamativos, no son muy útiles, primero suelen ser lentos para cargar y segundo el contenido no puede ser visto por los buscadores como Google y Yahoo, por lo que dificilmente su página aparecerá en las primeras páginas de búsquedas de estos. Recuerde que una página Web se trata de darle información al usuario no de entretenerlo o poner los efectos más llamativos. Si un diseñador le ofrece hacer un sitio 100% en Flash no confíe en que sabe lo que hace.
  7. Cuide la programación y cumpla con los estándares, como en toda industria los estándares son importantes en páginas Web los estándares lo rige la WC3, es lo que permite que su página se vea más o menos igual en todos los navegadores y además le permite un diseño más rápido, fácil de actualizar y amigable con los buscadores lo que le traerá más visitas y potenciales clientes. Muchas veces este aspecto es pasado por alto y a la larga no trae más que problemas.
  8. Asegúrese de tener un buen título en sus páginas y cuide las palabras claves, una página que en el título que aparece arriba en el navegador diga Sin Titulo o Untitled es una página descuidada, los títulos de las páginas y las palabras claves son fundamentales para que su página Web pueda ser encontrada.
  9. Contenido, contenido, contenido, este es uno de los aspectos más difíciles de una página Web, el contenido es lo que trae visitas, es lo que hace que nuestra página suba en las posiciones de los navegadores, y es lo que hace que sus usuarios y clientes lo encuentren y vuelvan, el mundo de hoy se mueve es por la información y dar información a los usuarios acerca de no sólo sus productos sino de su industria hará que se fidelicen y pasen su página, productos y servicios de boca en boca, no hay campaña publicitaria que pueda vencer esa clase de publicidad. La mayoría de los clientes que he tenido es difícil de convencerlos de que generen contenido pero al ver la gran herramienta que es a largo plazo quedan convencidos. Si lleva tiempo y esfuerzo pero si es dirigida correctamente paga con beneficios.
  10. Comparta e interactúe con sus usuarios, el impacto que han tenido las redes sociales en nuestro día a día es innegable y es necesario llevar a las empresas a ese mundo, el interactuar con sus usuarios saber que piensan de sus productos, escuchar sus necesidades, es uno de las herramientas más poderosas que se puedan tener. Utilice Twitter, Facebook, Linkedin en su empresa y hágalos parte de su página Web.

Estos son los primeros 10 consejos en el diseño de páginas Web corporativas que sirven tanto para pequeñas y medianas empresas como grandes corporaciones.

Si ya tiene su página Web vea si cumple con estos requerimientos, los cambios no tienen que ser radicales ni inmediatos puede ser un proceso paso a paso, una página Web es un organismo viviente que debe ir cambiando con el tiempo y adaptándose a los tiempos.

Otro que no puede faltar es que siempre confíe en un profesional, ya sea un diseñador gráfico que se especialice en páginas Web o una empresa como nosotros. Puede sonar a propaganda y puede que lo sea pero así como ud no le daría a construir su casa a cualquiera no lo haga tampoco con su página Web

Y si no tiene página Web que está esperando?

 

 

Nosotros en Vensign ofrecemos servicios de diseño y desarrollo de páginas Web para PyMES y corporaciones, puede ver nuestros servicios aquí o Contactarnos

 

Si quieres recibir más artículos y noticias de diseño y desarrollo Web, Negocios, Software Libre y Linux nos puedes seguir a través de nuestro RSS, Twitter o suscribirte a nuestro Boletín de Noticias