Cada vez se perfeccionan más los servicios en línea que nos permiten construir un sitio web y Roxer no es la excepción.  Cualquiera con los mínimos conocimientos puede crear sitios muy buenos, digamos sitios que antes solo un profesional podía crear y solo con un par de clicks, arrastrar y soltar algún contenido e ingresar texto, podemos tener nuestro sitio en línea en unos pocos minutos, claro que dependiendo de la complejidad de nuestro diseño.

Como nos puede ayudar esto con un blog?  Facil nos puede inspirar en la etapa de diseño de nuestro blogs.  Elementos de inspiración pueden ser las plantillas, los colores, las zonas en donde colocar elementos como imágenes, texto, sectores para publicidad y más.

Posee varias plantillas que nos permiter comenzar a armar un sitio en cuestión de segundos.  La gestión del texto es similar a trabajar con un procesador de palabras tipo Microsoft Word, ya que podemos cambiar la fuente, el tamaño, color y muchas otras cosas más que nos permite darle al texto de nuestro sitio, un estilo personal.

Si tenemos más de una página en Roxer, podemos copiar elementos entre esas páginas, como películas, fotos, formatos de la página y otros componentes.

También nos permite configurar los bordes, el fondo y la transparencia de cualquier elemento.  No necesitamos conocer absolutamente nada de código HTML, como bien dije al principio con solo arrastrar y soltar basta.

Cuando trabajamos con imágenes, Roxer nos permite redimensionar las mismas en tiempo real, allí mismo, en el espacio en el cuál queremos ver la imágen.

Otra característica importante es que si tienen un dominio, lo pueden apuntar directamente al espacio que tenemos asignado en Roxer.

Muy buen servicio para los que no tienen o tienen muy poca experiencia en esto de armar sitios web y como dije anteriormente, aquí, construyendo una página, nos puede servir de inspiración para diseñar nuestro blog.

Hoy en día, muchos son los recursos que tenemos como para comenzar o transformar un blog.   Themes?  hay a montones y si eligen como plataforma a Wordpress, es increíble la cantidad de themes gratuitos que tenemos la posibilidad de usar en nuestro blog.   La cuestión es que como son gratuitos, la mayoría de ellos vienen con formato standard al momento de incluir el título del blog.

Si queremos transformarlo en algo más acorde con estos tiempos, especialmente si no tenemos un logo predefinido, lo bueno sería incluír un título que impacte, llamativo, atractivo.   Si uno es diseñador, no existe ningún tipo de problemas, ya que o crear el logo o directamente arma un título con las fuentes que se se nos antoje, ya que con el Photoshop se puede hacer de todo.  

Pero qué hacen los que no tienen nada de diseñadores?  Bueno, para salir del paso y en solo unos pocos minutos, se puede obtener un logo para un blog que nos haga ver como que estamos remando para el lado donde va la corriente, la Web 2.0.   Se trata de una herramienta en línea, llamada SimWebSol Free Logo Generator, que nos permite crear un logo o título del tipo Web 2.o.

Para crear el logo no necesitamos suscribirnos, ni necesitamos aprender absolutamente nada, solo ingresamos los datos de las variables que necesita esta herramienta para crear el logo, presionamos Create Logo y listo, en un abrir y cerrar de ojos tenemos el logo listo.

Los datos que le pasamos son el título del sitio o blog, los colores, el tipo de fuente y hasta le podemos agregar un símbolo como por ejemplo un circulo con la palabra beta (para seguir a tono con la corriente )

No solo a prueba de personas que no se llevan bien con el mundo del diseño, si no también para aquellos diseñadores que no tienen mucho tiempo y necesitan crear un logo de este tipo ya!

Enlace: SimWebSol Logo Generator

Para utilizar esta aplicación en línea solo ingresamos el código RGB o HEX de un color, presionamos submit y como resultado nos entrega los colores que mejor combinan con el color ingresado.  además nos entrega los códigos hexadecimales de cada uno de los colores que nos da en el resultado.

Este herramienta también tiene un botón llamado random, que nos dá una combinación de colores al azar, sin tener que ingresar un color de nuestra elección.

Muy buen recurso, además de sencillo y simple de usar.  Al momento de elegir una combinación perfecta de colores para nuestra web, esta herramienta puede ayudar y mucho!

Enlace: Color Toy 2.0

También agrega: Los motores de búsqueda no ven tu diseño, solo las palabras.

Esto nos dice que por más bonitos que se vean nuestros blogs, a los buscadores no les importa, por eso debemos de tener presente que cuando diseñamos un sitio, debemos hacerlo pensando primero en los buscadores, ya que lo más importante del SEO es eso, crear un blog con código que permita a los motores de búsqueda, acceder a cualquier parte de tu blog, sin ningún tipo de inconvenientes.

Tengan en claro que no siempre es posible lograr un código completamente limpio y a veces debemos de sacrificar algo del código por el diseño en sí.

Cuando hablo de código limpio, estoy hablando de evitar todo aquello que ponga una barrera a los web crawlers cuando visitan tu sitio y les impida indexar el blog en forma correcta.

Por eso es crucial que evitemos algunas malas prácticas, especialmente esas que vienen de tiempo atrás como por ejemplo cuando desarrollamos un blog, debemos de evitar por todos los medios posibles de incluir Frames, Iframes y Tablas.  Ya que estos bloquean a los buscadores y no les permiten encontrar el contenido que nosotros deseamos aparezca en los motores de búsqueda.

Supongamos que utilizamos un theme de Wordpress que el autor define como SEO friendly (amigable) o sea con código claro y facilmente entendible por los crawlers, para que puedan indexar el sitio sin ninguna traba.  Pero, no contentos con el diseño de ese theme, metemos manos a la obra y reposicionamos algunas cosas o incluímos nuevas.  Cuando tomamos la desición de cambiar algo, debemos de hacerlo con cuidado y tratar de no cometer errores, ya que esos errores pueden llegar a evitar que un motor de búsqueda nos visite o no cumpla su tarea en forma completa y eficaz.  Especialmente cuando realizamos algunos cambios al código HTML/XHTML.

Por ahí veo desarrolladores que siguen insistiendo en colocar algún efecto flash, DHTML o mismo algún Javascripts sin descripciones, reemplazando a un texto, el cuál nos interesa que sea indexado.  No lo hagan, los crawlers los ignoran completamente y ese texto no aparecerá en las búsquedas.

Una buena práctica, en algunos casos, es tratar de que el contenido importante de nuestro blog se encuentre bien arriba de la página, no en la parte de abajo.  Con esto, por decirlo de alguna manera, evitamos que algunos errores, que normalmente tenemos en espacios que no tienen nada que ver con el contenido, no sean la causa por la cuál los bots no continuen con su trabajo de indexar el blog.

Tengan presente que no siempre podemos contar con un código perfecto, algún error podemos tener y quizás nunca lo sepamos, pero si debemos de ser concientes y tratar de evitarlos.

En la web existen muchas herramientas de optimización que en parte nos ayudan a eliminar algunos errores del código y si recuerdan, no hace mucho les hablé de una herramienta de este tipo que nos ayuda en esa tarea.  Se trata del servicio WordOff que nos ayuda a limpiar el código HTML.

La lista viene integrada por el nombre del sitio que organiza el concurso, el enlace al mismo, quien envió el concurso, cuando fué creado, cuando termina, cuantos participantes han ingresado hasta el momento y el monto en dólares del mismo.

Hay docenas de concursos, algunos de los cuales no tienen entradas o tienen muy pocas, por lo que es mucho más facil llegar a ganar uno de los premios.

Para participar deben de suscribirse a 99 Designs.

Una vez suscriptos, además de participar en los concursos, también pueden crear uno y si bien no les garantiza la participación de todos los miembros, tienen posibilidades de que participen diseñadores experimentados.

Enlace: 99 Designs

Solo tenemos que configurar 4 parámetros: Color del fondo del box, color del fondo de la página, el radio de las esquinas redondeadas y por último si queremos que el fondo o el frente sean transparentes.

Luego de configurar lo anterior presionamos Create Graphics y automáticamente obtenemos los gráficos de las 4 esquinas, más el codigo CSS y HTML.

Para incluírlos en el sitio aplican el código CSS a las hojas de estilo y el código HTML dentro del código de la pagina y listo.

Recurso sencillo y útil que nos puede ayudar a mejorar nuestro sitio.

Enlace: CornerShop

El uso de esta herramienta es facil.   Ingresamos la URL del sitio o blog, elegimos los navegadores que nos interesan, ya que se van a encontrar con casi todos los navegadores existentes, pero también con las distintas versiones de ellos.   También le indicamos los sistemas operativos que nos interesan y una serie de variables como color, tamaño de pantalla, si utiliza Java, Javascript y/o Flash.

Terminada la configuración, presionamos enviar y automáticamente, un número de sistemas distribuídas abrirá el sitio o web en el navegador indicado y cada sistema realizará la captura de pantalla, para luego mostrarlas todas juntas.

Eso sí, no es algo que se procesa en pocos segundos, ya que todo depende de los valores que ingresamos y además de la carga de trabajo que tienen esos sistemas distribuidos, por lo que en algunos casos deberán esperar por algunos minutos.  Lo bueno de esto es que no es necesario que tengamos esa página de resultados abierta, pues tenemos la posibilidad de copiar la URL de la misma y regresar después.   Pero no mucho después, ya que los resultados solo quedan en el server por 30 minutos, luego de lo cual son borrados.

Para los que nos dedicamos al diseño y porque no también para los detallistas que quieren mostrar un sitio o blog de forma perfecta para todos sus visitantes, esta es una herramienta de las denominadas necesarias.

Enlace: Browsershots

Para utilizarlo lo instalamos en el directorio raiz de nuestro sitio o blog, en donde se encuentra el archivo index.html.  Una vez instalado, podemos generar las esquinas redondeadas incluyendo el siguiente código en la etiqueta head del HTML:

<script type=”text/JavaScript” src=”rounded_corners.js”></script>

Luego creamos un elemento DIV, con un id, como en el siguiente caso:

<DIV id=”myDiv”></DIV>

Curvy Corners tomará la información de estilo directamente del contenido del elemento DIV.  Por último debemos incluir los parámetros necesarios para crear las esquinas redondeadas y por ejemplo si queremos que estas tengan un radio de 30 pixels, incluimos este código en el head:

  window.onload = function()
  {
    settings = {
      tl: { radius: 30 },
      tr: { radius: 30 },
      bl: { radius: 30 },
      br: { radius: 30 },
      antiAlias: true,
      autoPad: false
    }

    var divObj = document.getElementById(”myDiv”);

    var cornersObj = new curvyCorners(settings, divObj);
    cornersObj.applyCornersToAll();
  }

</script>

Diseño: El diseño del blog es un aspecto al que debemos prestarle mucha atención.  Nadie va a opinar que un blog con un diseño visual elegante, no es uno de los motivos para que la gente regrese y se sienta identificada con el blog.  Pero debemos de tener cuidado de que ese diseño no sea negativo para el blog y uno de los motivos que debemos evitar es que por el diseño que hemos elegido, quizás cargado con gráficos muy pesados,insuma mucho tiempo en cargarse completamente.  Siguiendo con el ejemplo de GeeksRoom, el theme que ustilizo allí actualmente, fué el diseño que más me gustó de muchos que ví, pero el gran problema que tiene es que en Firefox tarda en cargarse en forma completa,  Además, la columna central, de entrada, aparece con el color del fondo azul, hasta que se cargan las dos columnas laterales (sidebars) y luego de eso aparece el fondo blanco de la nota, que deja ver el texto en forma clara.  Es solo cuestión de un par de segundos y en algunos casos un poco más, dependiendo de la conexión a Internet.  No es algo muy malo, pero es un poco molesto, por lo que ahora, luego de intentar varios cambios, no solo en el theme, también en algunos plugins que utilizo, sin tener demasiada suerte, tomé la desición de cambiar de theme y actualmente estoy trabajando en ello.

En lo posible debemos de utilizar un theme optimizado pensando en el SEO (SEO amigable) y para que esto suceda se debe de evitar utilizar tablas y el theme que utilizemos o si creamos alguno,  debe de usar CSS/XHTML en un fichero separado, que es lo que le “gusta” a los motores de búsqueda.

La organización de los elementos visuales que componen el blog es algo primordial.  Existen blogs que tienen un contenido estupendo, pero tienen una mezcla de elementos que muchas veces espantan a los visitantes.  Uno no sabe donde buscar la información, no sabemos que es publicidad y que nó, no encontramos un buscador del sitio, ni las feeds para suscribirnos, en fín, es tal la mezcla de elementos y tan mal posicionados, que no atraen visualmente al visitante, al contrario, muchas veces lo hacen desistir de seguir navegando.

Recuerden: Theme placentero a la vista, simple, SEO amigable y organización de elementos.

Plugins: Algunos piensan que los plugins son lo último en lo que debemos pensar y otros hasta se preocupan después de lanzar el blog.  Los plugíns son algo muy importante para el blog y son un aspecto a  planear con anterioridad al lanzamiento del blog.   Los plugíns le dan al blog funcionamiento adicional al básico que nos ofrece la plataforma de blogs que utilizemos.  Por supuesto que con el correr del tiempo podemos agregar otros, pero los más necesarios debemos de instalarlos al principio.

La elección de los plugins a utilizar depende mucho del tipo de blog que vayamos a llevar, aunque algunos plugins son imprescindibles para cualquier tipo de blogs.

Por ejemplo en Wordpress tenemos varios plugins considerados imprescindibles por muchos como por ejemplo All in One SEO Pack, Akismet, Google Sitemap generator o en Nucleus CMS el plugin para agregarle un editor Wysiwyg cuando creamos un artículo, pues el que tiene es muy básico o en la plataforma b2evolution el plugín Advanced Google Sitemap for b2evolution.

De acuerdo a la plataforma que elijamos, lo más conveniente es investigar cuáles plugíns recomiendan instalar los usuarios experimentados de esa plataforma.

Recuerden: Plugins imprescindibles. Consultar a usuarios experimentados.