lunes, 23 de febrero de 2015

Mantener un blog en vacaciones

Hola a todos,

Durante las próximas dos semana voy a estar de vacaciones fuera del país, aunque aún así voy a intentar mantener un ritmo de actualización del blog diario de lunes a viernes. Aprovecho para hablaros de algo que creo que es importante en los blogs, y es el hecho de que el algoritmo de Google también calcula constantemente la introducción de nuevo contenido. Durante las próximas dos semanas mi ritmo de publicación de entradas va a descender y seguramente esto tendrá consecuencias en el SEO, así que una vez vuelva de vacaciones escribiré un post reflejando los cambios que puedan haber sucedido y si ha sido perjudicial esta caída de publicaciones (pasaremos de una media de 2 posts diarios a uno, una bajada del 50%).

Mantendré el contacto! 

Y por cierto, he recibido la primera visita de fuera de españa y del bot de google de estados unidos, desde Google Nederlands, bienvenidos! :D

viernes, 20 de febrero de 2015

Recursos para diseñar (VI) Donde encontrar texturas (licencias libres)

Después de revisar donde podemos encontrar fotografías con licencias libres o de Creative Commons, vamos a hablar de donde podemos encontrar, hoy vamos a hablar de otro apartado, también en modalidad de licencia libre, iremos actualizando este post conforme vayamos encontrando más webs.

Texturas

Como ya comentamos en este post, las texturas son básicas en diseño grafico ya que son un recurso que envuelve nuestras creaciones y aporta sensación de superficie y/o volumen. Al igual que en las fotografías, nos habremos preguntado si podemos tener problemas de copyright en función del origen del archivo, de ahí a que creemos este post para poder extraer y tratar texturas con total seguridad jurídica.



CGTextures: La página tiene un diseño algo antiguo pero es muy intuitivo y construido a modo de explorador de Windows, con una barra lateral que nos permite movernos por los temas donde están segmentadas las texturas. A excepción de texturas en tamaños muy grandes, el resto son gratuitas. Para poder bajarnos las texturas debemos registrarnos, aceptar las condiciones (entre ellas comprometernos a no revender las texturas) y confirmar el alta. El único problema que veo es que nos dan una cuota de 15MB y realmente no tengo claro que pasa cuando los acabas, si se renuevan o no.

Mega-Tex: Parecido a la anterior, un diseño de página bastante antiguo, en este caso, eso si, todas son gratuitas, aunque la calidad (no por variedad sino por definición) es claramente inferior, es el único inconveniente.

Seamlesstextures: Esta web deriva automáticamente a otra, pero te da la opción de descargar un paquete de texturas si les das me gusta en su página de Facebook. La calidad del paquete es baja, pero son bastante buenas para utilizar para pequeños trabajos. Son un total de 117 texturas con un peso de 67MB.

Pattern8: Una página web realmente brillante de texturas. Cuando entras tienes las texturas en mosaico, ordenadas por gamas de colores y puedes elegir cual descargar, aceptando sus términos y condiciones (no redistribuirlas, no colgarlas en tu web, pero si puedes utilizarlas para tus trabajos personales y comerciales). El único problema es que son texturas realmente pequeñas, las utilizaremos más para patronaje.

En el siguiente post sobre recursos enseñaremos donde encontrar buenos patrones de licencia libre.

jueves, 19 de febrero de 2015

Posicionando tu blog (VI) Posicionamiento externo: Lista de Directorios

Como os comentamos ayer en este post, los directorios son un importante recurso inicial para mejorar nuestro posicionamiento externo, ya que genera los primeros backlinks (links externos que apuntan hacia nuestra web) y esto mejora nuestra perfomance general de SEO al aumentar la difusión de nuestra página o blog.

A continuación os iré apuntando una lista (que iré actualizando conforme vaya creciendo) con el alta de los directorios en los que he registrado este blog y la forma de realizarla, de esta forma tendremos una visión general y actualizada de las posibilidades que nos ofrece esta técnica. En los casos en que encuentre un directorio en el que no me dé de alta también os indicaré el mismo y el motivo.

Importante a tener en cuenta

Tenemos que controlar la calidad del directorio donde damos de alta, Google como ya sabéis, aparte de indexar los enlaces que hay dentro de las webs también indexa el contenido, si el directorio donde damos de alta nuestra web tiene más enlaces que contenido NO demos de alta nuestra web, ya que puede penalizar el posicionamiento SEO ya que el algoritmo los considerará como enlaces tóxicos. Vale más la calidad que la cantidad.

Listado de directorios en alta
  1. Som-hi: Directorio gratuito. Al darse de alta da un código HTML para que introduzcas un enlace en su página, pero no tengo claro si es obligatorio o no (yo no lo he puesto).
  2. Pergamino virtual: Un directorio serio donde se realizan las altas manualmente y revisan el contenido. Puedes esperar en cola para que den de alta tu sitio o bien pagar para que lo den de alta hoy mismo.
  3. Foro Industrial: Web seria y que revisan los contenidos, recomendada y de pasos sencillos para dar de alta tu site.
  4. Pegasus: Un directorio con un diseño bastante llamativo (aunque algo mediocre) pero que si parece serio, la revisión es manual y no piden nada a cambio.
  5. Tsection: Directorio anglosajón serio que revisa los sites y además pide confirmación de correo electrónico.
Listado de directorios rechazados
  1. Directorio de Hispavista: Es de pago, y además indican alta Express, entiendo que será rápida debido a que se revisará la página manualmente, pero no esta asegurado.
  2. Web Designers Directory: Es de pago, aunque parece un sitio profesional.
  3. aDirect2z: Directorio de pago. Tiene listados menos de 4.000 directorios en más de 1.000 categorías, he consultado algunos de los indexados al azar y son de contenido completo. La interfaz no está muy actualizada, pero por lo demás correcto.
  4. Flesko: He encontrado este directorio referido en una página web como bueno para dar de alta, pero realmente te hace instalar una aplicación de seguimiento y no parece en absoluto un directorio.
  5. Linksnativos: Te lleva a una web en árabe en la que no soy capaz de saber si es un directorio.
  6. Request: Web de directorios en la que hay que rellenar un formulario demográfico y luego debes enviar tu URL por correo. De momento nunca respondieron.
  7. Anetdirectory: Directorio de pago. Además esta vacío, menos de 100 sites registrados.
  8. Spanish-English: Directorio de pago y parece de muy poca calidad.
  9. Bilbobusca: Tiene seriedad, pero solo aceptan contenidos relacionados con el país vasco.
  10. Itzalist: La web parece que funciona, pero esta congelada y no funciona ningún link.
  11. Turnpike: Parece ser que el directorio ha desaparecido y ahora solo hay una parte de hosting web.
  12. Spheri: Si bien el sitio no esta caído, es una web de publicidad solo.
  13. Searchsight: Exactamente pasa lo mismo que en Spheri
  14. Poddys: Parece un directorio jurásico que he ido perdiendo gloria, además de eso no se admiten nuevas altas.
  15. Pedsters Planet: Piden link de intercambio
Listado de directorios caídos.
  1. Oho: Directorio caído.
  2. Directorio Verdano: Redirige a otra web, que tampoco existe. Directorio caído.
  3. Iozoo: Lo mismo que netinsert, parece ser que la web esta caída.
  4. Netinsert: Directorio gratuito. Aunque parece ser que no están pagando el hosting...
  5. Miradir: Directorio caído o con error PHP temporal.
  6. Directorio Numanzia: Directorio caído.
  7. Donde buscar: Ha sido reconvertido en una web de compras
  8. Seosupreme: Directorio caído
  9. Textilhogar: Directorio caído
  10. Infodatos: Directorio cerrado, y ojo al mensaje: Debido a que el principal motor de búsquedas en Internet considera en estos momentos que TODOS los directorios gratuitos son fuentes de enlaces no naturales, hemos decidido cerrar definitivamente este directorio para no perjudicarnos nosotros mismos y especialmente no perjudicar a quienes en algún momento han confiado en nosotros el listado de sus sitios favoritos. Lamentamos los inconvenientes y agradecemos a quienes honestamente han enviado sus páginas para nuestra revisión e inclusión en el directorio desde 2004, excepto a los spammers a quienes afortunadamente casi siempre pudimos mantener a raya, no que esto haya servido de mucho al parecer.
  11. Raismave: Esta web ya no es un directorio.
  12. Zapin: Era un directorio de blogs pero esta cerrado.
  13. Enlaces: Directorio caído.
  14. Es directorio: Directorio caído.
  15. Megri: Si fue un directorio, fue reconvertido a un portal web.
  16. Earth Directory: Directorio caído.
  17. Directorio negocios: Directorio cerrado.
  18. Posicionamiento web España: Directorio cerrado.

miércoles, 18 de febrero de 2015

Posicionando tu blog (VI) Posicionamiento externo

Después de hablar largo y tendido de posicionamiento interno aquí y aquí, y hablar también de los primeros resultados que obtuve aquí, vamos a hablar de las acciones de posicionamiento externo que debemos llevar a cabo para poder mejorar nuestra perfomance general de posicionamiento en los buscadores.

Que es el posicionamiento externo?

Al contrario que el posicionamiento interno, el posicionamiento externo es el conjunto de acciones y técnicas que utilizamos para aumentar nuestra difusión en la red desde otra páginas web, en forma de menciones de nuestra página y links de enlace principalmente.

A continuación explicamos las acciones para mejorar puntos de cara a los buscadores:

Enlaces relacionados

Debemos conseguir que otras páginas web o blogs de temática paralela o similar a la nuestra enlacen con nuestra web, lo mejor para estos casos es buscar páginas o blogs que sean complementarios a las temáticas que nosotros tratamos. Por ejemplo, si nosotros tenemos un blog de estética y maquillaje deberíamos intentar conseguir colocar enlaces a nuestra página desde blogs o páginas que hablen de técnicas de maquillaje o cursos de estética.

Presencia en las redes sociales

Como ya sabemos todos, una parte muy importante del tráfico mundial de internet circula a través de las redes sociales, Facebook, Twitter e Instagram son solo un ejemplo de la cantidad de redes que hay. Es importante tener presencia en estas redes sociales (que yo todavía no he comenzado) para poder obtener visitas y crear enlaces hacia nuestra web. También hay que tener en cuenta que para Google, el principal motor de búsqueda, el mayor impacto positivo en dimensionamiento que podemos tener es Google Plus, por encima de Twitter y Facebook.

Presencia en directorios

Dedicaremos un post completo a esta sección para explicar donde podemos dar de alta nuestro blog de forma que se generen más links hacia nuestra web, algunos de los directorios importantes son Dmoz y Yahoo. Es cierto que los directorios han ido perdiendo peso en los algoritmos de los buscadores para medir el posicionamiento, pero es un buen comienzo para obtener los primeros backlinks (links que apuntan hacia nuestra página).



Participación en foros especializados

Otro factor a tener en cuenta de los medios sociales son los foros temáticos que estén relacionados con nuestra página web. Es importante no generar spam gratuito en los foros ya que aunque no penaliza directamente al posicionamiento SEO si que perjudica dentro del posicionamiento del cliente, si hay que aportar algo, debe ser coherente y que tenga un valor añadido.

Escribir artículos en otros sitios web

Escribir en otros lugares con un mejor posicionamiento que el nuestro puede ser un activo potente para conseguir visitas de nuestro nicho de buscadores.

En el próximo post relacionado con el posicionamiento, daremos un listado de directorios donde podemos inscribirnos para mejorar nuestro posicionamiento global.

Adobe InDesign (II) Entorno de trabajo

Hoy por fin vamos a comenzar el primer tutorial de Adobe InDesign, en el que explicaremos el entorno de trabajo y como generar los primeros archivos.

Lo primero de todo, identificaré la versión que estoy utilizando de Indesign.


Estoy utilizando Adobe InDesign Creative Suite 6 (versión 8.0) en idioma inglés y en versión de prueba de 30 días (una de las obtenciones que os comenté en este post)

Como sabéis InDesign es un programa de la suite de Adobe destinado especialmente a la composición digital de páginas (es decir, con él podemos editar presentaciones, trípticos, sobrería, cartelería, libros, revistas, diarios y derivados).

Lo primero que vamos a ver es el entorno de trabajo. Por defecto, una vez abierto el programa vamos a encontrar tres áreas de trabajo diferenciadas. En la parte superior encontraremos el menú de comandos que está tan extendido en los programas basados en sistemas Microsoft y Mac (incluye, en español y por orden de izquierda a derecha, los siguientes desplegables: Archivo, Edición, Composición, Texto, Objeto, Tabla, Ver, Ventana y Ayuda) en la imagen vais a ver los equivalentes en inglés. Vamos a verlos por encima ya que realmente lo importante es aprender a utilizarlo con la práctica.


Archivo: Vamos a encontrar las funciones típicas que podemos obtener de cualquier otro programa, como abrir un archivo, imprimir, imprimir en pdf, guardar, guardar como, etc.
Edición: Lo de siempre también en este caso, copiar, pegar, paso adelante, paso atrás, etc.
Composición: Son un conjunto de opciones que nos van a permitir indicarle al programa como vamos a dividir y distribuir el documento dentro del archivo que creemos.
Texto: Todos los aspectos relacionados con tipografía como el tamaño, la alineación, definición, fuente, etc.
Objeto: Orientado a como tratar los objetos que insertamos dentro de la hoja de trabajo de InDesign.
Tablas: Gestionar tablas de contenido dentro de la hoja de trabajo.
Ver: Herramientas orientadas tanto al objeto que estamos diseñando como a las tablas que podemos introducir dentro de la hoja de trabajo.
Ventana: Importante, ya que este nos habilita o deshabilita la vista del resto de paneles que podemos abrir para acceder mejor a las herramientas. (Por defecto vienen activadas las tablas de Control y Herramientas)
Ayuda: Ayuda del aplicativo y versión instalada, además de otros accesos relacionados con la licencia adquirida.

En la misma línea donde encontramos este panel con el que la mayoría estamos familiarizados vamos a encontrar una barra de aplicaciones, que es la siguiente.


La primera que vamos a ver esta relacionada con las guías, con este visor podemos activar y desactivar todas las líneas no imprimibles relacionadas con zonas del documento márgenes y otros espacios.

En el siguiente botón vamos a encontrar los modos de visualización del documento, que son hasta cuatro diferentes y que explicaremos con más detalle una vez comencemos a trabajar en un documento, pero para avanzar un poco de información os diré que el modo previo por ejemplo elimina los márgenes y nos enseña la vista en modo preimpresión del documento, otro de los modos, el presentación, nos dará una serie de presentaciones en diapositivas (del tipo Microsoft PowerPoint) para que tengamos una vista completa del documento en caso de ser más de una hoja.

Pasamos al panel de control superior inmediatamente debajo de la línea de comandos típica.


Aunque os he puesto un ejemplo, este panel de control es muy útil porque desplega las opciones de nuestro panel de herramientas (barra izquierda) que todavía no hemos explicado. Por ejemplo, en caso de que yo seleccione un puntero en el panel de la barra de herramientas este panel superior cambia y nos muestra todas las opciones de puntero disponibles, lo mismo pasa si elijo cualquier otro botón de la barra de herramientas. Esta característica de distribución de herramientas es importante que la asimilemos ya que la vamos a encontrar extendida en toda la suite de Adobe.

Por último vamos a hablar del espacio de trabajo, que es el elemento central de la pantalla y lo que ocupa una mayor extensión con diferencia. A continuación crearé un documento de página en blanco con las características por defecto para enseñároslo (En archivo->Nuevo)


En la izquierda vamos a ver el panel de herramientas con el que nos familiarizaremos en post posteriores, y como veis esta es nuestra mesa de trabajo. En la parte superior veréis que podemos abrir varios documentos a la vez y van ordenados por pestañas, muy similar a lo que podemos haber visto en Microsoft Excel con sus hojas de cálculo, pero en este caso siendo archivos diferentes. También nos visualiza los márgenes estándar (dentro de la propia página) y las guías (esas reglas que salen en la parte superior e izquierda) que más adelante aprenderemos como utilizarlas.

Aprovecho para abrir otro documento y explicaros el último botón de aplicaciones superior, que sirve para visualizar diversos documentos a la vez, como os enseño en la siguiente imagen.



Esta vista es muy útil por si queremos pasar objetos entre archivos y queremos trabajar con diversos elementos a la vez de una misma edición, por ejemplo si tenemos que hacer unas tarjetas y unos trípticos, que podamos comparar el diseño entre ambos a la vez, podemos trabajar en vertical, horizontal, mosaico...lo que necesitemos.

Y por último, vamos a cerrar el entorno de trabajo hablando de la barra de estado y la barra lateral derecha, esta es la barra de estado:

 
La barra de estado nos indica el número de páginas que tiene el documento, un piloto que nos indica los errores que podemos tener en el documento (obviamente esta vacío así que lo tenemos en verde) y el deslizador para que en caso de que ampliemos el documento podamos movernos dentro del mismo.

Y esta la barra derecha:

 
En la barra derecha (también muy extendida en la Creative Suite de Adobe) vamos a encontrar los siguientes botones:
 
Paginas: Donde si desplegamos tendremos una vista de todas las páginas del documento seleccionado y podremos elegir cual queremos visualizar en la mesa de trabajo.
Capas: Los objetos y modificaciones que vayamos haciendo en la mayoría de aplicativos de Adobe se agrupan por capas, que van superponiéndose una encima de otra hasta forma la obra completa, a través de aquí podemos elegir capas, eliminar, crear nuevas, duplicar, etc.
Tenemos otros elementos de los que hablaremos más adelante como los enlaces o la administración del color.
 
Hasta aquí una primera impresión de Adobe InDesign, en el próximo tutorial explicaremos los elementos de la barra de herramientas como paso previo a hacer nuestros primeros trabajos, ya que son el elemento central que da potencia a la aplicación.

martes, 17 de febrero de 2015

Las licencias Creative Commons y Wikimedia Commons

Como ya dije en el post de recursos fotográficos, os voy a hablar un poco de las licencias Creative Commons (en adelante CC).
 
Que es Creative Commons?
 
Las licencias CC son unas licencias de derechos de la propiedad pensadas para aquellas personas que no quieren ejercer completamente todos los derechos sobre su propiedad intelectual que le otorgue su país de residencia. O lo que es lo mismo, sirve para compartir determinados contenidos declinando derechos de la propiedad (compartir con el mundo de internet en definitiva).
 
 
 
Para que se utilizan?
 
En algunos países, especialmente en occidente, se da la situación de que todo el contenido creativo que nosotros podamos generar como personas individuales queda amparado bajo las normas de copyright. En este caso CC sirve para otorgar una cobertura jurídica de peso para indicar que queremos compartir nuestro contenido libremente.
 
Tipos de licencias existentes (con sus respectivos logotipos)
 
 
Reconomicimiento: Será necesario reconocer la autoría de la obra en caso de explotación de ella (es decir, deberemos indicar el autor del archivo original)
 
 
No comercial: El uso de la obra queda limitado a usos no comerciales (no puede formar parte de trabajos con finalidad lucrativa) 
 
Sin obras derivadas: No se puede manipular la obra para crear obras que deriven de la principal (no podemos crear por ejemplo un mosaico de imágenes con la obra original modificada de diversas formas)
 
 
Compartir igual: La modificación o inclusión de la obra en otras esta autorizada siempre que la obra resultante herede las licencias creative commons (en caso de crear una obra basada en una modificación o inclusión de esta licencia CC, la obra resultante deberá heredar las mismas licencias CC)
 
Otros aspectos a tener en cuenta
 
Además de estas licencias que hemos comentado anteriormente, existen combinaciones compatibles entre ellas, que son las siguientes:
 
 
Reconocimiento no comercial: Se permite la modificación de la obra original y utilizar la obra original, siempre que los fines no sean comerciales.


Reconocimiento no comercial y compartir: Se permite la modificación de la obra original, utilizar la misma siempre que los fines no sean comerciales y que la obra resultante herede las licencias CC.
 

Reconocimiento no comercial y no derivar: Se permite la utilización de la obra original para fines no comerciales y no se puede derivar la misma en otras obras.


Reconocimiento comercial y compartir: Se permite el uso comercial de la obra y se puede derivar, pero las obras derivadas deben heredar las licencias CC.


Reconocimiento comercial no derivar: Ser permite el uso comercial de la obra pero no se puede utilizar para hacer otras obras derivadas.

Como incluimos las licencias CC en nuestra obra?

Las licencias se incluyen registrando la obra a través de la web de Creative Commons, que os incluyo más abajo. Para hacerlo debemos rellenar el formulario definiendo los criterios de la licencia y la jurisdicción de nuestro país y a continuación nos darán los datos (enlace a la licencias y logotipo correspondiente) para colgar en nuestra web.

Como lo hacemos en nuestro blog de Blogger?

Os voy a decir los pasos que he seguido yo, de forma que si todo lo he realizado correctamente, debería constar la licencia CC que haya elegido dentro de mi blog, son diez sencillos pasos:

  1. Entramos a la web de Creative Commons
  2. Vamos al menú Licencias, en la parte superior de la web.
  3. Elegimos la frase donde nos indica "esta web nos permite escoger una licencia"
  4. Pasamos a la web principal de CC, en la que rellenamos el formulario y automáticamente nos sale nuestra combinación de licencias adquiridas.
  5. Copiamos el código HTML
  6. Desde el Panel de Control de nuestro blog de Blogger, vamos a la opción "Diseño"
  7. Seleccionamos "añadir un gadget"
  8. Seleccionamos un gadget del tipo "HTML/JavaScript"
  9. Escogemos el título que consideremos adecuado (en mi caso será Licencia Creative Commons) y copiamos el código anterior de HTML
  10. Guardamos los cambios y esta listo!
Y para muestra, esta imagen!



Para cualquier duda que nos pueda surgir acerca de CC podemos acceder a su página web desde aquí, donde tenemos un apartado completo de preguntas frecuentes.

Wikimedia Commons

Por último, y dado que estamos hablando de licencias CC, me gustaría añadir que Wikimedia Commons es otro banco de imágenes gratuitas que siguen los criterios de licencias CC, es un almacén grande y creciente muy útil en materia educativa, ya que Wikipedia nutre con todas sus imágenes de todas sus enciclopedias de idiomas esta almacén de datos.

Recursos para diseñar (V) Donde encontrar fotografías (licencias libres)

Una vez hemos explicado todas las fuentes que podemos usar para diseñar (recordamos: fotografías y texturas, patrones e iconos, fuentes, vectores y logotipos) vamos a pasar a comentar por partes donde podemos conseguir cada uno de estos.

Fotografías

Lo primero que debemos tener en cuenta a la hora de obtener imágenes, y que imagino que más de uno se habrá preguntado, es como obtenerlas sin tener problemas de copyright posteriores (o lo que es lo mismo, problemas legales sobre la propiedad intelectual de las mismas).

La primera noticia que puedo daros (y que también lo es para mí después de haber estado utilizándolo hasta ahora) es que a través de Google Imágenes las fotografías que obtenemos no vulneran los derechos de propiedad. Si bien es cierto que si queremos obtener fotografías más específicas sobre temas concretos para tener una imagen más profesional del blog o web es mejor buscar en portales de imágenes, a continuación os detallo algunos de los que he visitado, todos ellos con la mayor parte del contenido de licencia libre o CC.


Flickr: Flickr es una red social de imágenes (que acabo de descubrir ahora mismo) muy al estilo de Instagram. La diferencia es que en esta red puedes buscar por temática y tienes un buscador de tags para encontrar imágenes que se adecúen a lo que estamos buscando. Además de esto, y muy importante, podemos filtrar las galerías por licencia (todas, licenciadas para Creative Commons* y que se permita su uso comercial).
(*)Para los que no lo sepan, haremos un post en el que explicaremos las licencias Creative Commons, junto con Wikimedia Commons.

Sxc: Antiguamente esta web era sxc.hu pero actualmente ha cambiado su dominio a freeimages (tenéis el enlace actualizado). Es un portal de stock fotográfico con una gran variedad de fotos (más de 400.000) en su mayoría de licencia libre, en caso de que haya alguna restricción de licencia te lo notifica en el momento de bajarte la imagen. Otra cosa positiva que destaco es que comentar es que cuando seleccionas una imagen existe un box donde salen los comentarios de personas que han pasado por la fotografía y aportan ideas de para que se puede utilizar, útil para dar ideas!

MorgueFile: Parecido a FreeImages, pero en este caso MorgueFile actúa como un portal-buscador de fotos. Al inicio puedes seleccionar entrar en fotos gratuitas y luego puedes hacer búsquedas personalizadas, además de la base gratuita de la misma página, sobre otros portales de pago (os daréis cuenta de que son de pago porque llevan marca de agua).

Photl: Portal parecido al anterior, con una galería de gran contenido (más de 500.000 imágenes) y por lo que he estado mirando con un contenido de buena calidad. El único pero que le podemos encontrar si solo buscamos imágenes gratuitas es que algunas fotografías con definiciones muy grandes pueden tener coste.

Wikimedia Commons: Próximo post. (actualizado: información sobre Wikimedia Commons aquí)

Pixabay: Portal con un diseño muy limpio y que emula al buscador de Google Images, en sus resultados la primera línea es patronicada por otra galería de stock de imágenes que si son de pago (de todas formas os daréis cuenta también por la marca de agua). Al descargar las imágenes se especifica la licencia.

123RF: Banco de imágenes (hasta 36 millones) todas de licencia libre en la que podemos encontrar, además de imágenes, videos, audios y vectores. Muy recomendable.

Como veis hay mucha variedad para que podamos hacer los primeros pinitos en diseño y sin tener que invertir un euro (al menos en los recursos, el aplicativo es otra historia...). Más adelante veremos donde encontrar el resto de recursos.

Introducir meta tags en nuestro blog (I) Metadescription

Después de explicaros en este post que son las etiquetas o meta tags, vamos a ver como incluirlas en nuestro blog como parte de nuestro posicionamiento interno.

Lo primero de todo, y lo más visible en los buscadores, vamos a introducir la etiqueta meta description en nuestro blog a través de Blogger. Para ello tenemos que ir, dentro del panel de control de Blogger, a Configuración->Preferencias para motores de búsqueda y editar la descripción, a continuación os cuelgo una imagen con este blog de ejemplo.


Si lo que deseamos es introducirla en cualquier otro blog o web que no forme parte de Blogger también es sencillo. Realizaré un post explicando los fundamentos del código HTML, que es el lenguaje en el que están formadas la mayoría de páginas web, pero mientras os diré que debemos utilizar la siguiente línea de código para añadir nuestra metadescription, y que estará dentro del encabezado de nuestra web (es decir, entre los términos <head> y </head>)

<META NAME="description" CONTENT="lo que queramos decir de nuestra página">

Veis? Fácil y sencillo! Con esto mejoraremos el rastreo de nuestra página web respecto a los buscadores y mejorar a corto y medio plazo nuestro posicionamiento.

lunes, 16 de febrero de 2015

Posicionando tu blog (V) Posicionamiento interno Parte 2

Después de hablaros sobre los resultados obtenidos durante el posicionamiento durante estas dos semanas, vamos a seguir hablando de las acciones de posicionamiento interno en blogs que podemos realizar, aquí tenéis la primera parte, continuamos con la parte más compleja.

Utilización correcta de etiquetas meta

Las etiquetas meta, más conocidas como meta tags, son utilizadas para añadir información sobre la página y son utilizadas por los buscadores de forma que influyen en el posicionamiento web, ya que el buscador cruza la información meta con el criterio de búsqueda de los "clientes" y arroja los resultados pertinentes en la tabla de búsquedas.



Explicado así parece que posicionarse en la web es tan sencillo como añadir etiquetas meta a nuestra web y nuestros post y ascenderemos rápidamente posiciones en los buscadores (debo decir que a mí me ha pasado) pero por lo visto no, esto no es la panacea universal. Los meta tags son solo una parte de los motores de posicionamiento, vamos a explicar de todas formas como utilizarlos correctamente.

Etiqueta meta description: Es una etiqueta HTML que se utiliza para que el buscador logre un "resumen" del contenido de la página, sirve para atraer visitas desde el buscador y darle al usuario una pequeña guía de que contiene la página.

Etiqueta meta keywords: Otra etiqueta HTML que en este caso sirve para indicar al buscador que tags contiene nuestra página (justo lo que he explicado en el encabezado de la sección de etiquetas meta) debido al abuso de etiquetas los algoritmos de los buscadores no les prestan atención prácticamente. (técnicamente este abuso es llamado keyword stuffing).

Etiqueta meta robots: Esta etiqueta si es muy importante, ya que permite dar instrucciones a los robots de búsqueda respecto a lo que tienen que rastrear dentro de nuestra página.

Las etiquetas en desuso: Existen otras etiquetas que por diferentes motivos ya no se utilizan y son Author (indicaba el autor del contenido), Subject (parecido a una síntesis de la descripción), Generator (indicaba el gestor de contenidos con el que se había creado la página, por ejemplo Blogger o Wordpress), Language (el idioma del contenido) y Revisit-after (indicaba al robot del buscador cuantos días debían pasar para volver a rastrear el contenido de la página).

A través de un post explicaremos como poner todas estas etiquetas en nuestro blog.

Optimización de URLs

Las URLs son las direcciones web que tiene cada una de las páginas de nuestra web, que son únicas y diferentes, por ejemplo, no es la misma URL la que tiene este post que cualquier otro post o la página principal de la misma página web. Optimizar las etiquetas consiste en introducir las palabras clave o keywords dentro de las URLs, más adelante veremos como podemos hacer esto mismo a través de Blogger.

Además de esto, es importante utilizar también estas mismas keywords (pero con criterio) para los títulos de nuestros posts.

Utilización de un etiquetado correcto dentro de la web

Tal y como se hace en cada uno de los artículos, segmentar correctamente el uso de las etiquetas dentro de los mismos, de forma que si una persona quiere filtrar, por ejemplo, diseño de blogs dentro de este blog, solo encuentre los posts relacionados con ello y no otros.

Utilización correcta de la publicidad

La publicidad como medio para monetizar un blog es correcta, pero debe ser manteniendo un diseño del mismo adecuado e intentando que la misma se sitúe en la mitad inferior de la página web, de forma que el contenido útil de la misma quede concentrado en la mitad superior. Otro de los factores a tener en cuenta (ya venido a menos con la extensión masiva de las líneas ADSL y redes móviles de tercera y cuarta generación) era el peso total de la página, de forma que se redujera al máximo para conseguir un tiempo de carga óptimo.

Primeros resultados en posicionamiento

Hola a todos de nuevo,

Hoy quiero daros lo que para mí es una buena noticia y que os puede servir también a vosotros para ir comprobando como os posicionáis a la hora de ir creando vuestro blog o página web.

Desde hace unos días voy mirando a diario en Google como van entrando los nuevos artículos al buscador, utilizando los siguientes criterios: jenesaisdesign y jenesais design blog. Por jenesaisdesign obtenemos los siguientes resultados:


Para empezar los resultados han ido incrementándose a diario, hasta alcanzar un total de 30 actualmente, he comprobado que todos los artículos colgados hasta hace dos días ya están indexados, lo cual es muy positivo.

Por otra parte buscando por el criterior jenesais design blog, un criterio más complicado de posicionarse ya que añadimos las palabras genéricas blog y design, obtenemos los siguientes resultados:


Y esto si es una gran noticia! Jenesais como podéis deducir son palabras francesas juntas, con lo cual cuando hacía esta búsqueda a diario siempre salían (hasta las diez primeras páginas de búsqueda) blogs de diseño o franceses o mexicanos (efectivamente, tampoco entiendo porque salían los mexicanos) y ahora estoy en segunda posición en menos de dos semanas! Y fijaros, la búsqueda arroja un total de 803.000 resultados!

Solo queda posicionarse con el tag "diseño grafico blog" aunque eso va a ser mucho más complicado, pero espero poder escribir un post indicando que salgo en las primeras 100 posiciones!

Recursos para diseñar (IV) Vectores y logotipos

Finalizando ya con los recursos para diseñar, solo nos queda hablar de los vectores y los logotipos, de los que vamos a hablar ahora.

Vectores

La mayoría define a los vectores como una de las mejores opciones para crear diseños gráficos, sus principales puntos fuertes respecto a las imágenes normales (formadas por píxeles) es su capacidad de no perder definición cuando se realizan ampliaciones de escala, además de ello permiten controlar con total fidelidad los colores de la imagen, al contrario de las imágenes basadas en píxeles que están formadas por una paleta muy amplia de colores (millones de colores en diferentes píxeles). Para entender esto correctamente, si nosotros cogemos una imagen basada en cualquier formato que se utilice normalmente (bmp, jpg, jpeg, etc. dedicaremos un post posterior a hablar de los diferentes formatos de imagen existentes) y la ampliamos sucesivamente, en función de la definición que tenga comenzarán a aparecer los cuadraditos que componen la propia imagen (píxeles) esta circunstancia con las imágenes vectoriales no puede pasar ya que al contrario que el resto de formatos, este tipo de imágenes están formadas por un conjunto muy amplio de formas poligonales (triángulos, cuadrados, líneas, arcos, etc) que tienen unidos sus ángulos por vectores y estos al no estar formados por píxeles no pierden definición. A continuación tenéis un ejemplo de las diferencias al ampliar una misma imagen siendo una de ellas vector y la otra en píxeles.

 
Suponiendo esto que estoy explicando la siguiente pregunta que me podría realizar es porqué entonces no todo el mundo utiliza imágenes vectoriales para sus trabajos e ilustraciones y es por dos razones: elaboración y complejidad de la imagen resultante. La elaboración de vectores es muy compleja ya que supone ir uniendo manualmente polígonos y líneas para recrear la imagen de partida en píxeles. Por otra parte por este mismo motivo las imágenes en píxeles pasadas a vectores pierden gran parte de sus detalles y no pueden ser utilizadas para cualquier cosa. A continuación os pongo un ejemplo de una misma imagen en modo mapa de bits (bmp) y su equivalente en escala vectorial.


Hay que dejar claro que aunque esta imagen pierde parte de sus detalles una vez vectorizada, es posible también lograr un fidelidad de los mismo mayor, aunque como he comentado anteriormente vectorizar una imagen completamente es muy complejo y por eso existe este inconveniente. Otro punto a tener en cuenta y que no he comentado es que los vectores son representados por píxeles en la pantalla (es decir, es posible que veamos como si la imagen estuviera formada por cuadrados también) pero una vez se pasa a impresión estos desaparecen, simplemente la pantalla solo puede representar los vectores en píxeles porque su arquitectura está basada en estos.

Logotipos

Según la definición que podemos encontrar en Wikipedia, los logotipos, como todos sabemos, son una representación visual para identificar a una organización, producto o servicio. Se ha hablado mucho de logotipos y conocemos una amplia gama, así que seré breve. Para construir un logotipo correctamente tiene que tener las siguientes características:

Legible: El logotipo debe ser entendible y legible siempre sea el tamaño que sea, de ahí a que la mayoría de logotipos carezcan de texto en letras (podemos encontrar letras concretas, pero no texto o palabras como tal).

Escalable: Los logotipos suelen utilizarse en la mayoría de imágenes corporativas de las empresas, tanto para carteles como sobres, hojas, merchandising de empresa, etc. Por este motivo deben ser escalables tanto al tamaño más grande como al más reducido (en este caso utilizar logotipos vectorizados es un gran acierto).

Reproducible: Es importante que la imagen del logo no precise de elementos adicionales a un soporte bidimensional para poder ser reproducido en cualquier lugar, en definitiva, accesible a nivel de material.

Distinguible: Una de las dos premisas básicas que buscamos al crear un logotipo, distinguirnos de la competencia, el logotipo tiene que ser destacable respecto a sus pares tanto para bien como para mal.

Memorable: Que impacte y quede en la mente del consumidor.

Realizar logotipos no tiene más misterio que realizar cualquier otro tipo de gráficos (a nivel de software, así que aprenderemos también junto con el resto de diseño gráfico.

Y con esto damos por concluídas las explicaciones de recursos gráficos por el momento, en próximos posts hablaremos de donde encontrar todos estos recursos.

viernes, 13 de febrero de 2015

Recursos para diseñar (III) Fuentes

Siguiendo con lo comentado aquí (fotografías y texturas) y aquí (patrones e iconos) vamos a continuar la explicación de los recursos para diseñar con las fuentes.

Fuentes

Las fuentes (que son el tipo de letra con el que escribimos) más conocidas en el mundo de diseño y programación como tipografía son un elemento que no parece muy importante pero que realmente lo es a la hora de diseñar una página o blog. El tipo de letra es tan importante porque transmite sensaciones que aunque son menos visuales que los colores también indican estados de ánimo.

En tipografía existen cinco fuentes-tipo básicas: scritp (que es similar a la caligrafía escrita), serif (tipo de fuente), sans serif (otro tipo de fuente), las decorativas (aquí entraría por ejemplo la fuente comic sans y otras letras más creativas) y monospace (todas las letras son igual de anchas, al contrario de lo que pasa con la mayoría de fuentes que solemos utilizar).

Por desgracia la elección de nuestro tipo de fuente es algo totalmente personal y que va a resultar de ir probando diferentes hasta que encontremos alguna con la que nos sintamos realmente bien, aunque si hay que tener en cuenta algunas variantes como las que os detallo a continuación:

Legibilidad: Es importante que nuestra fuente sea totalmente comprensible, hay que evitar fuentes con exceso de creatividad para realizar posts que puedan llevar a confusiones o dificultad a la hora de leer (por ejemplo las fuentes basadas en estilos celtas o medievales, que distorsionan algunas letras del alfabeto latino). Esto descarta directamente las letras de estilo monospace, ya que hacen el texto muy largo y de difícil lectura. Para los textos de post deberíamos recurrir siempre a fuentes de estilo serif o sans serif.

Tamaño: Se debe elegir un tamaño de letra que sea suficiente para no forzar la vista, lo ideal es comenzar con 12px y en función del tipo de letra que utilicemos incrementarlo o disminuirlo.

Que son las fuentes serif y sans serif y en qué se diferencian?

Los tipos de fuentes serif y sans serif se diferencian del resto de tipos por ser las más fieles al la tipografía latina-occidental que utilizamos en la actualidad.

Las principales diferencias entre una fuente serif y sans serif son los motivos decorativos que encontramos en ellas, mientras que las tipo serif tienen bordes decorativos en cada letra (lo que hace más fácil a nuestro cerebro diferenciarlas y con ello más sencilla la lectura) las fuentes tipo sans serif no tiene decoraciones y su uso se extendió con la generalización de la informática. La principal ventaja que tienen las letras sans serif respecto a las serif es que al no tener bordes soportan resoluciones más bajas a la hora de imprimirlas (no se ven pixeladas).

Por norma general las fuentes de tipo serif son más formales y profesionales y las fuentes sans serif están más relacionadas con perfiles más jóvenes y frescos (yo, por ejemplo, utilizo Helvetica, una fuente sans serif)

Os pongo a continuación un ejemplo en que se ve claramente la diferencia entre ambas fuentes-tipo:


En el próximo post acabaremos con los recursos restantes, hablando de vectores y logotipos.