Este es un artículo como invitada de Paula Barros de Aprendelo.com, un portal dirigido a la comunidad hispana en donde los usuarios podrán encontrar recursos e información dentro del ámbito educativo: cursos, becas, universidades, noticias, eventos, convenciones, y mucho más.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

En la actualidad, las redes sociales se han convertido en un factor fundamental en nuestra vida diaria. No solo nos comunicamos a través de ellas, sino que seguimos la actualidad diaria.

En el caso de Facebook, las cifras hablan por sí mismas: más de 800 millones de usuarios disponen de un perfil en esta plataforma, y la mayoría de ellos siguen la actualidad de sus marcas favoritas.

Para las empresas, el auge de Facebook supuso un nuevo mercado a través del que captar clientes o fans, pero también un mundo desconocido ante que surgió una pregunta: ¿cómo realizar una página de Facebook eficaz?

La respuesta puede explicarse en una serie de aspectos fundamentales que toda fan page debe cuidar:

Actualidad:

Los usuarios quieren estar informados de las novedades de sus marcas preferidas: nuevos productos, servicios… de los que debe proporcionarse toda la información necesaria de
forma sencilla y clara, sin dar lugar a confusiones.

Promociones, ofertas, sorteos y regalos:

Se trata del factor que más usuarios atrae hacia una página, pues el ofrecer obsequios o productos a bajo precio siempre ha sido un buen reclamo para las empresas.

Creatividad y originalidad:

A los usuarios les gusta ser sorprendidos, y está demostrado que aquellas actualizaciones de estado más originales son las que más éxito logran.

En este aspecto puede mencionarse también la parte visual de la página: las publicaciones que contienen fotografías o vídeos resultan mucho más interesantes y atraen más clics que aquellas que simplemente proporcionan un link.

Debate:

A las personas les gusta compartir sus opiniones sobre temas que les afectan a diario. Ofrecerles contenidos sobre los que debatir es una buena oportunidad de fomentar la participación en la página y, además, crear una comunidad fiel.

Humanidad:

Hablar con robots no suele gustar a los usuarios. Las actualizaciones y respuestas de forma personal son mucho más valoradas por los usuarios que los mensajes automáticos.

Este es un artículo como invitado de Jose Lopez, blogger de Ser Feliz con lo que Tienes, un sitio para ayudar a motivarte y cumplir tus metas.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Mucho ruido y pocas nueces, es una frase medio conocida, pero que pocas veces hacemos mucho caso, en la red encontramos muchas cosas, y tristemente nos damos cuenta que mucho de lo mismo y poco que nos sirva, eso pasa porque mucha gente, escribe solo por escribir, y se que también hay quienes escriben con un don mágico que deslumbra y que deja mucha enseñanza, he leído algunos comentarios en los blogs que visito de vez en cuando, sin embargo, en los que leo, me doy cuenta que debo leer como 20 blogs para saber lo que quiero, o que solo aprendo muy poco de cada uno.

Yo creo que esto se debe a que no escribimos pensando como el lector, escribimos y lo hacemos pensando que el lector debe entendernos, así que yo he numerado los 3 pasos para que un lector nuevo o continuo, este claro en sus pensamientos y lea hasta el final de nuestro articulo, te las comparto.

1. ¡Cuerpo de pordiosero!

En más de una ocasión, cuando le regalas algo a alguien y le queda bien lo que le regalaste, este dice, tengo cuerpo de pordiosero, eso significa que le queda muy bien, creo que algo que tienen los libros que se convierten en best seller, es que la mayoría de la gente se identifica con ellos, si es para aprender, es algo que puede aplicar cualquiera, si es una historia de amor, el lector dice, “me pasa igual”, y si es de aventura, todos queremos vivir aventuras, así que el secreto es que le quede al lector, si logras escribir algo que el lector identifique como propio, este además de leer el articulo hasta el final, lo más seguro es que lo recomendara.

2. ¡Tres tristes tigres, tragaban trigo en un trigal!

El 80% de la población, tiene dificultad para decir más de un trabalenguas y les es muy complicado leer uno, por lo que sera más fácil que escribas en un lenguaje y en un contexto muy digerible, sobre todo recordando el punto anterior, matemáticamente te digo, el éxito de tu blog es directamente proporcional a la facilidad de lectura del mismo, así que cuando escribas, lee tu blog, o mejor aún, pide a un niño que lo lea, si el lo entiendo, difícilmente alguien no lo hará, esto te hará mas popular, pues escribes para la gente.

3. ¿Para qué escribo este articulo?

Existen tres cosas que debes tener en mente cuando vas a escribir un artículo:
A.- Antes de comenzar, debes plantearte un objetivo, que quieres obtener con ese artículo, o bien, que quieres que el lector obtenga con tal artículo?
B.- Al terminar de escribir, debes cerciorarte que se cumple el objetivo.
C.- Cuando estes a punto de publicarlo, debes fijarte si pasa por los tres filtros de Sócrates, es veraz, es necesario que lo sepa el lector, y tercero, es bueno lo que escribo, si pasa estos filtros publícalo, te irá bien.

Cuando escribes, quien plasma tus letras es el corazón, las faltas de ortografía no existen pues los sentimientos las corrigen. Sé feliz cuando escribas, más feliz cuando te lean y sobre todo, practícalo.

Este es un artículo como invitado de Luis, blogger de Negocios y Finanzas, un sitio para aprender a mejorar tus finanzas personales y a iniciar un negocio en Internet de forma fácil y rápida.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Como en cualquier área de la vida, cuando somos nuevos en algo, es normal cometer errores por falta de conocimiento o experiencia. Sin embargo, cuando nos quedamos estancados haciendo una y otra vez lo que no debemos hacer es cuando el verdadero peligro llama a nuestra puerta.

Cometer errores está bien, es normal, pero lo mejor es informarnos lo más posible para evitarlos o al menos para no quedarnos estancados en ellos. A continuación te presento 5 errores comunes en los negocios por Internet que nos impiden progresar cuando recién comenzamos.

1. Demasiada Información y Poca Acción

En Internet existen millones de páginas Web, de artículos, videos e información gratuita de donde podemos aprender. Esto representa una gran ventaja porque podemos aprender de cualquier tema (en este caso negocios y marketing) en cuestión de minutos con un par de clics. El conocimiento y la información son lo que más cuenta hoy en día. Sin embargo, esta ventaja también puede representar un gran peligra para nuestro progreso.

Es muy común que nos la pasemos horas y horas leyendo, escuchando audios y viendo videos de negocios y marketing, pero sin hacer nada al respecto. No hay acción, no se implementa nada y por consecuencia no hay resultados de ningún tipo.

Te sugiero dejar de leer y aprender tanto. Comienza a tomar acción y a tener progreso REAL en tu negocio. Sin esto es imposible tener éxito.

2. Capacitación Errónea

La mayoría de las páginas Web y productos no ofrecen educación de calidad. Muchos prometen resultados inmediatos, ofrecen información basura, muy atrasada o sin la calidad suficiente para en verdad capacitar a alguien que apenas va comenzando su aventura por Internet.

Te recomiendo elegir muy bien de dónde y de quién aprendes.

3. Falta de planeación

Como dice la famosa frase, “Aquel que falla en planear, está planeando fallar”. Sin un plan no hay un rumbo establecido, todo lo que se hace es sin fundamento alguno y sin una motivación que de verdad impulse a seguir adelante y progresar.

Desde un principio crea un plan, elige qué vas a hacer, cómo lo vas a hacer y cuándo lo vas a hacer. De esta forma tendrás mucha más claridad, enfoque y atención en todas tus acciones diarias.

4. Muchos proyectos al mismo tiempo

En Internet hay tantas oportunidades que en muchas ocasiones nos entra la ansiedad y deseos por querer hacer muchas cosas y enfocarnos en muchos proyectos al mismo tiempo. Esto puede llegar a alentar mucho nuestro progreso y resultados. En lugar de tener 4 o 5 proyectos, ve poco a poco, enfócate primero en terminar uno y después pasa al otro. Lograrás mucho más de esta forma que queriendo hacer todo de forma simultánea.

5. Brincando de una cosa a otra

Parecido al punto anterior. Imagina que estoy en un proyecto de un sitio de marketing de afiliados que aún no termino. Me meto a un blog de negocios por Internet y veo que hay un nuevo producto que enseña la creación de productos digitales. Al ver esto me emociono, compro el producto y ahora decido trabajar mejor en crear mi propio producto digital para venderlo en Internet.

¿Qué paso con mi proyecto de marketing de afiliados? Queda completamente olvidado. No pasará mucho tiempo para que surja un “nuevo y novedoso” método para ganar dinero, en ese momento probablemente olvide el curso de crear productos y pruebe el siguiente.

En lugar de estar “saltando” de oportunidad en oportunidad, termina uno por uno los proyectos y planes que tengas y después busca otras opciones. Así tendrás mejores y más rápidos resultados.

Al evitar estos 5 errores notarás que tu negocio va progresando a un ritmo mucho más acelerado y constante. Si ya estás cometiendo alguno, haz hoy mismo algo para eliminarlo y tomar otro camino que te pueda ayudar a lograr tus objetivos establecidos.

Internet cada día es un lugar donde puedes encontrar de todo, cualquier cosa. Quieres aprender un nuevo idioma?, un nuevo lenguaje de programación?, buscas casa?, allí está todo lo que necesitas. Si lo que deseas es tener todas las herramientas a la mano para facilitarte el desarrollo y diseño de sitios web, anteriormente había publicado 74 sitios web útiles para desarrolladores y diseñadores web pero ahora te traigo 95 recursos y utilidades para diseño y desarrollo web.

Este artículo esta dividido en las siguiente categorías:

• Tipografía
• Javascript
• HTML
• Imágenes
• Diseño
• CSS
• Varios

Tipografía

Fount

Esta utilidad te ayudará a identificar cualquier tipo de fuente que veas en Internet.

FitText

FitText te permite hacer que el  texto de tus sitios web sean flexibles, esto con el fin de ser utilizados tanto en sitios web normales como sitios web móviles.

Kerning

Con esta utilidad podrás programar junto a CSS algunas increíbles formas de presentar el texto de tu web.

jFontSize

Esta utilidad te permite poner un botón con el cual los usuarios redimensionen el tamaño del texto.

Javascript

Zeon.js

Esta herramienta te ayuda a encontrar errores en tu código JavaScript.

WOW Slider

Esta utilidad te permite incluir Sliders o Carruseles de imágenes en tu sitio web.

Vogue

Vogue te permite recargar la hoja de estilos CSS en el navegador web el el sitio que estés modificando.

yepnope.js

Con esta utilidad puedes decidir cargar solo los scripts que tus usuarios necesitan en tu sitio web.

jQuery Waypoints

Este plugin de jQuery te permite ejecutar diferentes funciona al hacer scroll sobre un elemento en tu sitio web.

jQuery Plugin Boilerplate

Este sitio te muestra una guía para que puedas desarrollar tus propios plugins de jQuery.

Placeholder

Este plugin de jQuery te permite habilitar el atributo placeholder de los formularios en los navegadores que no lo tienen.

Doctor JS

Este sitio analiza tu código JavaScript en busca te problemas y te da en reporte en formato JSON.

HEAD.js

HEAD.js te permite cargar todos tus scripts de JavaScript de una sola vez y en paralelo.

Enkoder

Este sitio te permite codificar en JavaScript tu dirección de email para evitar recibir Spam en él cuando lo publiques en tu sitio web.

JavaScript Garden

Este sitio te muestra una guía detallada sobre todo lo que necesitas saber sobre el lenguaje de programación JavaScript.

Augment.js

Esta librería te permite habilitar métodos modernos de JavaScript.

CamanJS

Esta librería en JavaScript te permite manipular imágenes gracias al Canvas de HTML5.

Share Count JS

Con esta librería en JavaScript  puedes mostrar y combinar tu número de seguidores, fans, etc en las redes sociales de forma sencilla y rápida.

Neon Javascript Library

Esta es un framework para JavaScript que recopila las funciones más usadas en un archivo de tan solo 4 kb.

glfx.js

Esta librería te permite aplicar una gran cantidad de efectos las imágenes de tu web.

spin.js

Con esta librería puedes generar el gráfico de ‘cargando’ sin necesidad de imágenes.

Mobilize.js

Este es un framework de JavaScript y HTML5 con el que puedes transformar tus sitios web en sitios web para dispositivos móviles.

HTML

HTML Email Boilerplate

Este sitio web te ofrece una plantilla base para enviar tus emails en formato HTML y que se vea igual en todos los proveedores (Gmail, Hotmail, Yahoo, etc.).

Fractal

Este sitio te ayudará a validad tus plantillas de HTML para emails y te dirá que errores tienen el código.

Mobile Boilerplate

De los mismos creadores de HTML5 Boilerplate, nos traen una plantilla base para que desarrolles tu sitio web para móviles.

320 and up

Este sitio te provee los archivos necesarios para desarrollar tu sitio de 320px hacia arriba. Se basa en HTML5 Boilerplate.

Canvas Loader Creator

Este sitio utiliza el canvas de HTML5 para generar una imagen de carga para tu sitio web.

Kendo UI

Este sitio te proporciona un framework para mejorar la interfaz de usuario de tu sitio con HTML5.

CanvasText

Con esta librería podrás modificar el texto de tu sitio de formas sorprendentes utilizando la característica canvas de HTML5.

PhoneGap

Este es un framework basado en HTML5 que te proporciona todo lo necesario para crear aplicaciones móviles que funciones en todos los dispositivos móviles.

Mobile Design

En este sitio puedes leer un libro sobre diseño web y de aplicaciones para dispositivos móviles, completamente gratis.

Imágenes

 Aviary

Este sitio te proporciona una forma fácil y en línea de editar tus imágenes.

Placehold.it

Con este sitio serás capaz de utilizar sus imágenes como imágenes de ejemplo en tus diseños.

iPiccy

Este es otro editor en línea de imágenes.

PunyPNG

En este sitio puedes comprimir tus imágenes JPG, GIF y PNG sin perder la calidad de la imagen.

Adaptive Images

Con los archivos que te da este sitio puedes hacer que tus imágenes se adapten al tamaño de la ventana del navegador.

JPEGmini

Utilidad web con la que puedes comprimir al máximo tus imágenes en formato JPG.

Default Icon

Esta página te proporciona una colección de 653 pictogramas que puedes usar en tus diseños web.

NoisePNG

Con esta aplicación podrás crear una imagen con ruido en formato PNG para el fondo de tus diseños.

Imagine

Con esta librería en PHP puedes manipular las imágenes de tu sitio web.

Diseño

DinPattern

En DinPattern encontrarás una gran galería de patrones para el fondo de tus diseños.

bgMaker

Con este sitio podrás crear pixél a pixél el diseño del fondo de tu sitio web.

Pattern Cooler

Aquí encuentras una gran colección de patrones de fondo y además puedes editarlos en línea.

Tartan Maker

Este sitio te ayuda a generar un patrón para el fondo de tus diseños web.

Striped Backgrounds

En este sitio web puedes crear un fondo en forma de barra verticales o puedes encontrar una buena paleta de colores para tu diseño.

Dotted Background Generator

Este sitio genera un fondo con puntos en diferentes tamaños.

Palette Creator

En este sitio puedes crear una paleta de colores para utilizar en tu próximo diseño web.

Kuler

Sitio web donde puede encontrar una gran cantidad de paletas de colores para tus diseños.

Color Palette Generator

Esta herramienta te permite generar una paleta de colores sacados de una imagen que puedes especificar.

Color Scheme Designer

En este sitio también puedes crear tu propia paleta de colores.

Pictaculous

Con esta herramienta puedes subir una imagen y obtener la paleta de colores que la compone.

ColorMunki

Aquí también puedes generar una paleta de colores para tu diseño web.

RoundedCornr

Este sitio genera el código necesario para hacer bordes redondeados en tu diseño.

Tabs Generator

Con esta aplicación puedes generar los tabs para tus proyectos web.

Patternizer

Con este sitio puedes generar fácilmente un patrón para el diseño de tu sitio web.

CSS

CSS Sprites

Esta herramienta web te ayudará a crear el sprite de tus imágenes de una forma más fácil.

Fluid Grids

Con esta herramienta puedes generar una plantilla de columnas fluidas de CSS.

LESS CSS

Herramienta que te permite extender el lenguaje CSS, añadiendo la posibilidad de crear funciones, variables, hacer operaciones y más, y así escribir menos código CSS.

LESS Boilerplate

Este sitio te proporciona una plantilla base para poder trabajar más fácil con LESS CSS.

Stripemapper

Con Stripemapper puedes generar un stripe utilizando una simple imagen y Phyton.

CSSsitemap System

Este sitio te presenta un sistema para poder hacer un mapa del tu sitio web utilizando CSS.

Normalize.css

Con este CSS puedes hacer que tu web se vea más consistente e igual en todos los navegadores. Es un reemplazo al ya famoso CSS Reset.

holmes.css

Este archivo de CSS te ayuda a descubrir algunos que tengas en el estilo de tu sitio web.

CSS Crush

Este es un preprocesador de CSS basado en el lenguaje PHP que extiende el lenguaje CSS y lo compila minimizado y con compatibilidad entre navegadores.

CSSPrefixer

Con esta herramienta puedes modificar tu CSS para ponerle los prefijos de cada navegador.

CSS Pivot

Con esta herramienta puedes probar cambiar el estilo CSS de cualquier sitio web que desees.

PCSS

Este es otro preprocesador de CSS que le añade funciones, variables, etc.

GridCalc

Con esta aplicación podrás calcular y generar una plantilla de columnas de CSS.

CSS3 Button Generator

Esta herramienta te permite generar un botón solo con CSS3.

CSS3 Button Generator

Otro sitio que te ayuda a generar botones utilizando solo CSS3.

CSS Button Generator

Otro sitio que te ayuda a generar botones solo con CSS3.

CSSWARP

Con esta herramienta puedes hacer que un texto predeterminado se vea  en forma ondulada o circular.

CSS Text Shadow

Con esta herramienta puedes generar muy buenos efecto utilizando las sombras de los textos de CSS3.

CSS Border Radius Generator

En este sitio puedes generar fácilmente el código necesario para tener bordes redondeados en tu diseño.

Prefixr

Esta aplicación te permite ponerle los prefijos de todos los navegadores a tus estilos en CSS.

Google+ UI Buttons

Botones totalmente realizados en CSS3 con el estilo visual de Google+.

Button CSS3 UI

Framework con botones realizados totalmente en CSS3.

CSS Load

Este sitio te permite generar spinners de carga solo mediante CSS.

CSS Button

Con este sitio web puede crear botones o editar los ya existentes en la galería.

Prefix Free

Con esta librería puedes poner los prefijos al CSS solo cuando estos sean necesarios, o sea, dependiendo del navegador en que se esté mostrando tu sitio web.

Animate.css

Este sitio te provee el código CSS3 necesario para hacer gran cantidad de animaciones sin necesidad de utilizar otra cosas sino CSS.

Varios

Chop

Con este sitio puedes compartir código con tus usuarios o con quién quieras.

mokk.me

Sitio que te permite realizar la estructura para tu aplicación web para poder mostrarla a tus usuarios.

Zen Coding

Con este plugin puedes hacer que programar HTML y CSS sea mucho más fácil.

griddle.it

Sitio que te proporciona una imagen con columnas al estilo Framework de CSS para que pongas en tu diseño para alinearlo correctamente.

Swiffy

Con esta utilidad puedes convertir archivos de Flash (SWF) a HTML5.

Launchlist

Este sitio te ayuda a verificar que tu nuevo diseño web salga sin errores.

Bounce

Con esta herramienta puedes hacer una captura de pantalla de cualquier web y hacer comentarios o dejar ideas sobre ella.

Screenfly

En este sitio puedes ver como se ve tu página en diferentes resoluciones de pantalla.

loads.in

Esta utilidad te ayuda a saber cuanto demora en cargar tu sitio web.

Domainr

Este sitio actúa como un buscador de dominios para ver si está disponible o no.

iOS Boilerplate

Este sitio ofrece una plantilla base para desarrollar aplicaciones móviles para el sistema iOS de iPhone, iPad e iPod Touch.

Touchy Boilerplate

Este sitio te ofrece una plantilla para desarrollar aplicaciones móviles para cualquier dispositivo.

YOURLS

Con esta librería puede crear tu propio acortador de URLs.

IM CREATOR

Con esta aplicación puedes crear un sitio web completamente funcional y muy fácilmente.

Infografía

• Pixelco
• 1st Web Designer
• Smashing Magazine
• Web Design Ledger
• Web Resources Depot
• Smashing Hub
• Slodive
• Web and Designers
• Web Design Shock
• Admixweb

Alguna vez te has preguntado como hacen los diseñadores para que sus diseños se vean tan bien, tan consistentes visualmente. La mayoría de ellos utilizan Grid Frameworks de CSS, no todos.

Estos son sistemas de columnas (Grids) con los que puedes diseñar más fácil tu sitio web, darles una mejor estructura. Algunos traen, además del sistema de columnas, estilos en CSS ya predefinidos para que no tengamos que codificarlos nosotros mismos, estilos para formularios, tipografías, tablas, dispositivos móviles, etc.

Con estos frameworks para CSS puede alcanzar una cohesión visual para tus diseños, reducir los errores en tu CSS, alcanzar una buena compatibilidad con todos los navegadores y dispositivos móviles y te ayuda a reducir el esfuerzo de crear una plantilla nueva para tu diseño web.

Para ahorrarte la tarea de encontrar un buen framework para CSS aquí te traigo 35 grid frameworks para CSS con los que diseñar sitios web se te hará mucho más fácil.

1. Less Framework

2. Grid

3. inuit.css

4. Baseline

5. Gravity

6. Columnal

7. Perkins CSS3 LESS Framework

8. 520 Grid System

9. Gridless

10. The Square Grid

11. Fluid Grid System

12. Frameless

13. Fluid 960 Grid System

14. Logic CSS

15. Blueprint

16. CSS Boilerplate

17. The 1kb CSS Grid

18. YAML CSS Framework

19. Easy front-end framework

20. SenCSs

21. The Simpler Grid

22. Elastic CSS Framework

23. FEM CSS Framework

24. BlueTrip CSS Framework

25. Not Just a Grid

26. The Golden Grid

27. The 1140px CSS Grid System

28. Golden Grid System

29. 960 Grid System

30. The Semantic Grid System

31. Magazine Grid

32. SimplerGrid

33. BluCSS

34. Cabin CSS Framework

35. Toast

Este es un artículo como invitada de Paula López, blogger de Basekit, un sitio que te ayuda a crear fácilmente tu página web.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Normalmente las empresas adaptan sus logotipos ya existentes a sus páginas web, así como al resto de soportes en los que se plasma su comunicación (catálogos, merchandising, etc). Pero ¿qué pasa si nuestra empresa es sólo nuestra página web? ¿Hemos de dar los mismos pasos para el diseño de nuestro logo que para el de un logo convencional? ¿Y si no sabemos diseñar?

Para las dos primeras preguntas la respuesta sería sí y no. Hay pasos indispensables a la hora de crear cualquier logotipo, sin importar el soporte en el que va a ser visualizado, pero hay muchos otros que deben ser considerados de manera independiente, especialmente si esto se vincula con la respuesta a la pregunta 3: no sabemos diseñar. Tal vez no nos gusta, no nos interesa el diseño o simplemente no se nos da bien.

A continuación te dejo 10 consejos para la creación de un logotipo para una página web pensando en estas personas que precisan su logo pero no disponen ni de las herramientas ni de los conocimientos adecuados para hacerlo de un modo profesional.

1. Hacer un boceto a mano es esencial

Antes de empezar a “montar” nuestro logo con la herramienta de diseño de la que dispongamos, es esencial hacer un boceto a mano para plasmar exactamente qué es lo que queremos. Teniendo muy claro el diseño de nuestro logo será mucho más sencillo poder llevarlo a cabo en el ordenador.

2. Disponer de un programa de dibujo en el ordenador

Photoshop o Illustrator serían los ideales, pero sin saber diseñar pueden parecer complejos. Hay muchos muy sencillos que, aunque no nos convertirán en artistas, podrán ayudarnos en nuestra tarea de diseñar un logo para nuestra web.

3. Trabajar con un editor web

Si hemos creado o estamos creando nuestra página web en un editor HTML, esta herramienta nos permitirá crear nuestro logo in situ, en la misma página, ya que podremos arrastrar ilustraciones propias y textos para crear nuestro logo directamente.

4. Utilizar fuentes “ decentes”

Por favor, nada de Comic Sans. En nuestro ordenador tenemos infinidad de fuentes que pueden encajar a la perfección con el estilo de nuestra página web. Si ninguna nos convence, podemos descargar fuentes gratuitas de Internet. Es aconsejable, además, no utilizar más de dos fuentes en un mismo logotipo.

5. Crear el logo pensando en nuestra audiencia

Son ellos quienes van a verlo (y a juzgarlo) cuando entren en nuestra página web. Lo ideal es que el logo refleje quiénes somos y de qué trata nuestra página, pero no de una forma absolutamente literal.

6. Sencillez, sencillez y sencillez

Un diseño de logotipo complicado no sólo nos creará problemas a la hora de reproducirlo, y más si no tenemos los conocimientos adecuados, sino que además, posiblemente hará que nuestra audiencia no lo entienda.

7. Elegir los colores adecuados

El uso adecuado del color es básico en el diseño de cualquier logotipo, especialmente por la interpretación psicológica que tienen los colores. No es aconsejable utilizar más de dos o tres colores. De esta forma, por mucho que el rojo, por ejemplo, sea nuestro color preferido, si no encaja con el resto del diseño de nuestra web ni es un color que se relacione con nuestro producto o público objetivo, mejor dejarlo a un lado.

8. Optar por un tamaño y una resolución óptimos

No hay un tamaño ni una resolución establecidos para todos los logotipos para páginas web. Depende de nosotros y de las características de nuestra página. Es aconsejable, en este punto, tener en cuenta si nuestra página va a ser vista, principalmente, en monitores con resolución de 1024×768 o en pantallas más pequeñas de 800×600.

9. Guardar el logo en el formato adecuado

Para poder subir nuestro logo a nuestra web necesitamos guardarlo antes en uno de los siguientes formatos: PNG, GIF o JPG. Si nuestro logo tiene el fondo transparente o un gradiente de color, lo mejor es guardarlo como GIF o como PNG (este último menos pesado). Sino, un JPG sería una buena opción.

10. Contratar los servicios de un profesional

Si a pesar de todo seguimos sin poder crear el logo que queremos para nuestra web, el mejor consejo a seguir es el de contratar los servicios de un profesional del diseño gráfico, quien seguro creará un logo excelente que reflejará a la perfección la idiosincrasia de nuestra página web.

El HTML5 ha sido un tema realmente interesante, que ha tomado mucha importancia en los últimos años en el desarrollo web. Ahora la mayoría de los navegadores modernos (Safari, Chrome, Firefox, IE10 y dispositivos móviles) soportan la mayoría de las características de este nuevo estándar web, aún cuando no está completa todavía.

Para ayudarte a hacer que tu migración a HTML5 sea más rápida y fácil, aquí he recopilado 23 sitios web útiles o herramientas que te ayudarán a entender y a empezar con HTML5.

1. HTML5 Boilerplate

Este sitio web te proporciona una plantilla base de HTML/CSS/JS con las últimas normas del HTML5, CSS3, normalización del CSS, JavaScript. Este sitio te proporciona varios tips y técnicas para empezar correctamente con el uso del HTML5.

2. Modernizr

Esta es una librería de JavaScript que te ayuda a implementar las nuevas ventajas del HTML5 y del CSS3.

3. Sprite.js

Sprite.js es una librería javascript que te permite realizar animaciones en tu sitio web sin la necesidad de Flash, utilizando la característica Canvas de HTML5.

4. Video.js

Esta es una librería en Javascript para reproducir video en HTML5 y que se vea igualmente en todos los navegadores. Trae también un reproductor en flash para los navegadores que no soporten la etiqueta  <video> de HTML5.

5. Audio.js

Audio.js es una librería en Javascript con las misma características de Video.js, pero para la etiqueta <audio>. Compatibilidad entre navegadores de esta nueva función.

6. Lime.js

Este es un framework completo en Javascript que te ayudará a realizar juegos para escritorio, web o dispositivos móviles con la ayuda de HTML5.

7. 52framework

Framework que te ayuda a utilizar lo último de HTML5, CSS3 y Javascript.

8. HTML5 Reset

Framework para HTML5 que acumula las mejores prácticas y técnicas para empezar con este nuevo estándar.

9. G5 Framework

Otro framework para HTML5 que te sirve para comenzar con un nuevo sitio web.

10. JoApp

Este es un framework para desarrollar aplicaciones móviles utilizando HTML5.

11. PressWork

Framework en HTML5 que puedes utilizar para crear temas de WordPress.

12. Bones

Bones es un framework de HTML5 optimizado para crear nuevos temas para WordPress.

13. Roots

Roots es otro framework de HTML5 para temas en WordPress.

14. Reformed

Este sitio te ayudará a crear formularios para tu sitio web con las nuevas características del HTML5.

15. SwitchToHTML5

Este sitio te proporcionará algunas opciones para que tu puedas generar una plantilla base de HTML5 a tu gusto.

16. HTML5 Template Generator

Este sitio generará una plantilla base en HTML5 para que empieces a crear tu sitio web.

17. Initializr

Initilizr es un sitio que genera plantillas para HTML5. Te ofrece varias posibilidades: Descargar la plantilla por defecto, personalizar un poco tu plantilla o personalizar completamente todas las opciones de la plantilla.

18. HTML5 Visual Cheat Sheet

Este documento ofrece un vista simplificada y explicada de las nuevas características de HTML5.

19. HTML5 Pocket Book

Sitio web que te enseña lo más básico de las nuevas características de HTML5.

20. HTML5 Canvas Cheat Sheet

Este sitio te ofrece un documento con todo lo que necesitas saber para poder utilizar la función Canvas de HTML5.

21. Aloha Editor

Este sitio te proporciona un editor WYSIWYG completamente en HTML% para que lo incluyas en tu sitio web.

22. Deck.js

Con Deck.js podrás crear presentaciones como las de PowerPoint o Keynote pero totalmente realizadas en HTML5.

23. Wallaby

Con esta utilidad de Adobe podrás convertir tus animaciones en Flash (FLA) a HTML5.

El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños.

Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web.

Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:

/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }

Demostración

Letra capital

Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Demostración

Enlaces que gradualmente se desvanecen

Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:

h2 {
font-size:24px;
font-weight:bold;
color: #262626;
opacity: 1.0;
-webkit-transition: opacity 0.4s linear;
}
h2 a {
color: #262626;
}
h2:hover {
opacity: 0.7;
}

Demostración

Rotar una imagen

Este Código CSS te permite rotar una imagen los grados que gustes:

img {
transform:
rotate(45deg)
scale(-1, 1);
/* para firefox, safari, chrome, etc. */
-webkit-transform:
rotate(45deg)
scale(-1, 1);
-moz-transform:
rotate(45deg)
scale(-1, 1);
/* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
/* opera */
-o-transform:
rotate(45deg)
scale(-1, 1);
}

Demostración

Mover 1px el enlace al hacer clic

Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:

a:active {
position: relative;
top: 1px;
}

Demostración

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc):

/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}

Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM

Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

Hacer que el cursor se vuelva un apuntador de enlace

Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en estos elementos solo debes poner el siguiente código:

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}

Quitar la linea de color que rodea los elementos input

Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes poner el siguiente código CSS:

input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}

Crear un efecto giratorio y de zoom en las imágenes

Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert    { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}

Demostración

Hacks de CSS dependiendo del navegador

Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen algunos hacks para hacer código CSS dependiendo de cada navegador:

/***** Hacks de Selectores CSS ******/

/* IE6 y anteriores */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Todo menos IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Solo Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Hacks de Atributos ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Todo menos IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- actúa como !important */
#veintesiete { color: blue !ie; }

Animar una lista de enlaces

Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:

#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}

#animateList li a:hover {
padding-left: 10px;
}

Demostración

Transparencia / Opacidad en todos los navegadores

Con este código podrás poner transparencia a elementos de tu diseño y que funciones en todos los navegadores

div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Estilo para enlaces externos

Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un icono al lado del enlace:

a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Demostración

Estilo del enlace dependiendo de una palabra predefinida

Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL del enlace:

a[href*="trazos"] {
color: #39486c;
}

Demostración

Estilo del enlace dependiendo de extensión del archivo enlazado

Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG, etc:

a[href$=".jpg"] {
color: red;
}

Demostración

Utilizar fuentes de Google

Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:

Debes agregar el código que te genera la página de Webfonts entre las etiquetas <head> y </head>:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>

y luego este en el archivo de tus estilos CSS:

h1 {
font-family: 'Ubuntu', sans-serif;
}

Demostración

Hacer texto con bajo relieve

Con este código CSS haces que el texto se vea con un efecto de bajo relieve:

body {
background: #222222;
color: #131313;
font-size: 100px;
}

p {
text-align: center;
text-transform: uppercase;
text-shadow: #2d2f2d 2px 2px 4px;

}

Demostración

Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Solo debes poner esto en donde quieras que aparezcan los tabs:

<div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab 1</label>

<div class="content">
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab 2</label>

<div class="content">
<p>Aquí va algún contenido para el tab 2</p>

<img src="http://lorempixum.com/200/100/technics/">
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab 3</label>

<div class="content">
<p>Aquí va algún contenido para el tab 3</p>

<img src="http://lorempixum.com/200/100/nightlife/">
</div>
</div>

</div>

y luego poner esto en el archivo de estilos CSS:

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform:    translateX(-100%);
-ms-transform:     translateX(-100%);
-o-transform:      translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-ms-transition:     all 0.6s ease;
-o-transition:      all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform:    translateX(0);
-ms-transform:     translateX(0);
-o-transform:      translateX(0);
}

Demostración

Infografía

• BlueFaqs.
• David Walsh.
• Six Revisions.
• Design Shack.
• Nettuts+.
• Design your Way.
• 1st Web Designer.
• Web Expedition 18.
• CSS-Tricks.

Esta vez vengo con una nueva serie de temas gratuitos para WordPress, ya antes había hecho dos colecciones de temas gratuitos (70 Themes (temas) gratuitos de alta calidad para WordPress y 78 nuevos themes (temas) gratuitos de alta calidad para WordPress) pero últimamente has salido varios nuevos temas para WordPress que vale la pena mencionar. Así que si estás buscando un buen diseño para tu blog, de buena calidad y lo mejor, gratuito, aquí te dejo esta lista con los últimos 57 temas gratuitos para WordPress de gran calidad.

1. Corporattica

Demo | Descargar

2. Gameliso

Demo | Descargar

3. Molox Magazine

Demo | Descargar

4. Sirmium Magazine

Demo | Descargar

5. Tag Magazine

Demo | Descargar

6. Leptocaros Magazine

Demo | Descargar

7. Casandres Magazine

Demo | Descargar

8. Heliumified Reloaded

Demo | Descargar

9. Ytterbiumoid

Demo | Descargar

10. Thuliumy

Demo | Descargar

11. Gadoliniument

Demo | Descargar

12. Europiumite

Demo | Descargar

13. Promethiumize

Demo | Descargar

14. Xenonymous

Demo | Descargar

15. Iodineering

Demo | Descargar

16. Telluriumic

Demo | Descargar

17. Antimonified

 Demo | Descargar

18. Tincredible

Demo | Descargar

19. Cadmiumize

Demo | Descargar

20. Silverine

Demo | Descargar

21. Palladiumize

Demo | Descargar

22. Rhodiumite

Demo | Descargar

23. Technetiumastic

Demo | Descargar

24. Molybdenument

Demo | Descargar

25. Ikonik

Demo | Descargar

26. Yoko

Demo | Descargar

27. Splendio

Demo | Descargar

28. Graphite

Demo | Descargar

29. Parallax

Demo | Descargar

30. Fungus

Demo | Descargar

31. Smasher

Demo | Descargar

32. Echonoid

Demo | Descargar

33. Alphatude

Demo | Descargar

34. Zesty Zen

Demo | Descargar

35. Xi Xen

Demo | Descargar

36. Ready Randy

Demo | Descargar

37. Agency

Demo | Descargar

38. Lucky Guess

Demo | Descargar

39. NuBlu

Demo | Descargar

40. Strategies

Demo | Descargar

41. Character

Demo | Descargar

42. Elegant

Demo | Descargar

43. The Blog

Demo | Descargar

44. Gabix

Demo | Descargar

45. Scylla Lite

Demo | Descargar

46. Triton Lite

Demo | Descargar

47. MagzBook

Demo | Descargar

48. ProStats

Demo | Descargar

49. Redome

Demo | Descargar

50. Crema

Demo | Descargar

51. Revita

Demo | Descargar

52. Relevance

Demo | Descargar

53. MagWire

Demo | Descargar

54. Cakifo

Demo | Descargar

55. Cudazi Mono

Demo | Descargar

56. Busby

Demo | Descargar

57. BonPress

Demo | Descargar

Este es un artículo como invitada de Julie Linares, creadora de Bloggeate, blog que trata sobre tutoriales, recursos, SEO y herramientas para tu blog y la web, y también creadora de los productos  Crea una pagina web tu mismo, Optimiza tu blog y  SEO +Tráfico Orgánico.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

En la primera parte de éste artículo,  mencioné 3 diferentes formas para  crear contenidos para nuestros blogs, en esta segunda parte voy a ahondar en cómo encontrar, evaluar y conseguir el contenido procedente de cada una de las fuentes mencionadas en la primera parte de éste artículo.

Antes de empezar a indagar en estas fuentes, es importante hacer referencia  a lo que se conoce como Copyright o en español derechos de Copia.

Para cualquier persona que escribe un artículo, compone una canción o una melodía los derechos de copia son automáticos. Es decir esa persona es dueña de su creación, de su contenido.  Aun cuando no veamos una notificación sobre estos derechos de copia, no significa que esos derechos no le pertenecen a alguien. La ley de Copyright no requiere ninguna notificación.

Por ejemplo si contratamos a alguna persona para que escriba en nuestro blog  y no especificamos que nosotros como dueños del blog seremos los dueños también de los derechos de copia,  entonces el autor de ese artículo continúa siendo el dueño de los derechos de copia y por lo tanto puede utilizar ese artículo en donde desee.  En términos generales así funcionan los derechos de copia.  Básicamente si no es algo que haya sido producto de nuestra invención, o que no hayamos estipulado por medio de un contrato que nos pertenece,  entonces no tenemos derecho a copiarlo o publicarlo en nuestros blogs y a nuestro gusto.

Ahora bien, existen algunas excepciones como por ejemplo:

Si es algo realmente viejo, entonces se puede utilizar. Los derechos de copia expiran eventualmente. Cualquier cosa publicada antes de 1923 está libre para el uso de cualquier persona.

El contenido publicado por el gobierno americano, se encuentra libre de copia; contenido procedente de esta fuente puede ser utilizado.

Otra excepción es si el autor de un artículo  ha donado públicamente los derechos de copia.  Muchas veces las personas quieren que sus artículos sean publicados y entonces permiten que cualquier otra persona los utilice en sus sitios web.

Bien habiendo dicho esto,  entonces voy a continuar con una explicación más amplia de como Cazar El Contenido de Otras Personas.

1. Información de Productos:

Si estas promocionando determinado producto en tu sitio web o blog,  entonces tomate el tiempo de conocer más a fondo ese producto,  trata de contactar al creador  y solicitar especificaciones técnicas del mismo, manuales, explicaciones etc.  Cualquier tipo de información pertinente al producto o los productos que promociones y que te puedan ayudar a alimentar tu blog  y al mismo tiempo a promocionar ese producto.

Por ejemplo puedes postear en tu blog manuales en PDF para que los lectores puedan descargarlos, también puedes convertirlos en html para que se pueda rankear mejor en los buscadores. .

2. Páginas Web y E-mail Newsletter:

Internet como lo he mencionado varias veces es un océano de información. ¿A cuantas noticias electrónicas no te has inscrito? ¿Cuanta información diaria recibes en tu correo electrónico directamente?  ¿Por qué no coger un par de artículos de tu interés y por supuesto referentes a tu blog para publicarlos en el tuyo?

Cuidado no te estoy diciendo que copies y pegues información, eso es infringir los derechos de copia,  lo que te estoy diciendo es que puedes hacer esto siempre y cuando pidas permiso al autor del contenido  o tú mismo re-escribas esos artículos con tus propias palabras y por supuesto hagas mención a su fuente original.

Hace pocos días publique un artículo en mi blog titulado: Encontrando Nuestro Sitio en La Blogosfera Por Medio de YouTube. Inicialmente caí en el error de publicar el artículo sin hacer mención a su fuente original. Inmediatamente realice tremendo error, quite el artículo de mi blog y lo republique correctamente.

 3. El Gobierno:

En el caso del  contenido publicado por el Gobierno de los Estados Unidos, se encuentra libre de los derechos de copia, lo que significa que cualquier persona los puede utilizar.

El Gobierno Americano  invierte millones de dólares en la creación de contenido,  ésta es una fuente inagotable de información que te puede ser de mucha utilidad si por supuesto dominas el idioma inglés.

En el caso de los gobiernos de otros países, las leyes pueden ser diferentes,  por lo que mi mejor recomendación sería que averiguaras  si tu Gobierno  también publica contenido sin restricciones de copia

Algunos sitios para encontrar material procedente del Gobierno de U.S son:

• www.foia.cia.gov,
• www.access.gpo.gov/su_docs,
• www.fedworld.gov,
• http://catalog.gpo.gov/F,
• www.foia.fbi.gov

También puedes tratar buscando por tus palabras claves si tienes un sitio web o un blog en inglés.  (site:.gov your keywords).

4. Sitios de Sindicación de Contenido:

Los sitios de sindicación de contenido  son aquellos sitios donde autores publican su información para que los dueños de páginas web o editores de noticias puedan tomarla y utilizarla gratuitamente.  Pero, ¿por qué hacen esto? Bueno porque al final de su artículo siempre hay un link que llevará a los lectores a la página del autor del artículo.

Algunos sitios de sindicación de contenido  son: Article Dashboard: www.articledashboard.com, Ezinearticles.com: www.ezinearticles.com , FreeSticky.com: www.freesticky.com; GoArticles.com:www.goarticles.com, IdeaMarketers.com: www.ideamarketers.com; World Wide Information Outlet: www.certificate.net; entre muchos otros.

5. Contenido Abierto y sin restricciones de copia:

Este tipo de contenido es el que se conoce como copyleft es decir que los derechos de copia se han dejado de lado.

Si has escuchado sobre open-source software, sabrás que esto es un tipo de software creado por medio de la contribución de múltiples individuos quienes han acordado  permitir a cualquier persona  utilizar el software sin ningún costo.

Otro movimiento que no tiene tanta atención como el open-source software,  es el llamado Open-content,  o contenido abierto que hace referencia a contenido de la web que está completamente libre para el uso de cualquier individuo.

Mucha información es publicada bajo los términos de copyleft, lo que quiere decir que se puede utilizar porque no tiene derechos de copia.

Puedes encontrar este contenido en:

• Creative Commons:  www.creativecomoons.org
• The Open Directory Project- Open Content: dmoz.org/computers/Open_source/Open_Content.

También puedes encontrar una lista de contenido abierto en el contenido abierto de Wikis, o mejor conocido como Wikipedia.org  dirección:

http://en.wikipedia.org/wiki/List_of_wikis

6. Buscador de Paginas.

Esta estrategia es muy sencilla, y consiste en efectuar en Google una búsqueda con tus palabras claves. Vas a ver un listado de sitios web que se despliegan bajo esa palabra clave,  lo que puedes haces es coger los primeros sitios abrir esas páginas copiar el contenido y pegarlo en tu sitio web. Por supuesto debes pedir autorización al dueño o dueños del contenido original  para que tú puedas utilizar su contenido en tu sitio.  Lo que esta práctica te genera es  artículos o información enriquecida de palabras claves y a la vez vas a darle links de vuelta o backlinks al o los artículos originales.  Se puede  decir que es un win-win (gana-gana) para ambas partes.

7. Press releases- Noticias:

Los Press releases o noticias en español pueden utilizarse sin necesitar ningún permiso del creador de los mismos.

Por supuesto no puedes modificar el press release. Debes utilizar el contenido exactamente igual.

Puedes encontrar Press releases en español en Google,  también puedes encontrarlos  en las siguientes páginas web:

• www.emailwire.com
• www.free-press-releases.com
• www.prweb.com
• www.openpr.com
• www.prlog.org
• www.onllinepressreleases.com

8. Preguntas Frecuentes y Respuestas:

Las preguntas son una de las fuentes de inspiración más sencillas y más ricas que puedes encontrar para producir contenido para tu blog.  Si tienes una sección en tu blog de preguntas y respuestas,  muchas de las preguntas que te pueden hacer tus lectores, incluso comentarios o sugerencias puedes utilizarlas para crear artículos para tu sitio web.

También puedes indagar en otros sitios web relacionados con el tuyo; buscar  que preguntas ellos reciben y tomar ideas de allí para componer tus propias respuestas y así poder crear tus propios artículos.

9. Foros:

Los foros son una excelente herramienta para promocionar tu blog, para promocionar tu marca, tu nombre, pero también para encontrar ideas para tu sitio web.

Los foros de discusión son precisamente eso, sitios donde las personas preguntan, responden, sugieren, comentan, comparten.  De allí puedes sacar muchísimas ideas para poder componer artículos para tus lectores y para compartirlos en el foro y atraer más lectores a tu sitio web a la misma vez.

Es cuestión de participar en el foro, envolverse, ser un miembro activo del foro y producir contenido que responda a las necesidades de los usuarios que se encuentren en tu nicho de mercado.

Espero como siempre que esta información te haya sido de alguna utilidad, y por favor recuerda que si tienes algún comentario, sugerencia o pregunta,  todas ellas son cordialmente recibidas.