Tips para redactar un buen tutorial en tu sitio web

Al escribir un tutorial, deberás tener en cuenta algunas consideraciones más que en las que usualmente piensas a la hora de escribir un artículo tradicional.

Los lectores deben seguir pasos, leer código, visualizar demos o examinar imágenes. En esta nota te daremos algunos tips para hacer más eficientes tus tutoriales.

1. Hazlo breve pero directo

Seamos honestos, muy pocos lectores van a leer el tutorial completo. Como con cualquier contenido web, analizarán el contenido en lugar de leerlo. Sólo si encuentran interés en lo que estás mostrando es que lo van a leer. Evita los párrafos largos y las serie de párrafos sin fragmentos de código o de imágenes. También evita describir cada pequeña cosa que el usuario debe hacer, sino más bien muestra los puntos clave en el camino hacia la realización del tutorial. Sin embargo, no debes omitir nada importante. Por ejemplo, es importante explicar cómo un elemento será animado con jQuery, pero es completamente innecesario explicar y mostrar la estructura de cada línea de código HTML o CSS usado en el Tutorial.

2. Explica cada tarea de forma corta

Debes ser capaz de explicar cada tarea en unas pocas frases sencillas. Einstein dijo: “Si no lo puedes explicar simplemente, no lo entendiste lo bastante bien”. Imagina lo que piensan los lectores de tu conocimiento del tema y la forma en que lo entenderían. Si lo has hecho demasiado largo, vuelve atrás y reescríbelo.

3. Sepáralo en pasos lógicos

Esto ayudará a los usuarios a leer y seguir el tutorial con más facilidad, y volver a un paso específico, si lo necesitan. Cada paso debe contener varias tareas después de las que lector podrá ver realmente algún resultado.

33

4. Incluye código pero no lo sobrecargues

Si tienes código para mostrar, hazlo, pero no pegues el demo completo en el tutorial. Nadie va a estar interesados en leer pantallas de código. Muestra sólo los fragmentos clave. Los lectores que estén interesados en el código completo echarán un vistazo a la demo o descargarán el código fuente. Lo que nos lleva a la siguiente sugerencia.

5. Provee demos

Siempre intenta poner demos a disposición de los usuarios. Muchos de los usuarios ven primero el demo y si les interesa, siguen leyendo el tutorial. No te olvides de poner un link al tutorial en cada página del demo para que los usuarios puedan volver a éste con facilidad.

53

6. Visualiza las tareas más complejas

También puedes proporcionar imágenes que expliquen las tareas más complejas o pasos a seguir. Cuando los lectores ven una demostración, entenderán cómo funciona, pero se entiende cómo se hace solamente si leen la demo o ven la imagen explicando el proceso de creación. Estas imágenes también ayudan a los lectores a visualizar algunos pasos o el tutorial completo.

6

7. Siempre brinda código fuente

A algunos lectores les gustaría tener el código del tutorial disponible offline. De esta manera pueden examinar el código, incluso si no son capaces de acceder a su tutorial por cualquier razón. Debes comprimir los archivos y dar un nombre significativo al archivo comprimido. Lo mismo se aplica a todos los demás archivos. También deberías incluir un enlace al tutorial en sus páginas de demostración para que el lector pueda volver fácilmente si es necesario.

8. Pon los links de descarga y demos en lugar prominentes

Este es uno de los aspectos más importantes. Es importante colocar el demo al principio del artículo y de forma prominente. La posición es usual es debajo de una pequeña introducción y/o imagen pero antes del primer paso del tutorial. Hemos probado 3 versiones diferentes del mismo tutorial:

* Tutorial con un link de demo prominente en la parte superior del mismo.

* Tutorial con un link plano al demo en la parte superior.

* Tutorial con un link a la página demo colocado al final del mismo.

La primera versión es la que mejores resultados tuvo.

9. Únete a la discusión

Una vez que publicas el tutorial tu trabajo no termina. Los lectores tendrán diferentes opiniones sobre éste, puede que lo critiquen o que hagan sugerencias. Contesta los comentarios. Así, les mostrarás a los usuarios que te importa su opinión y que tus tutoriales están ahí realmente para ayudar.

10. Actualiza el tutorial si es necesario

Si te equivocaste en algo, o si alguien realiza una mejora, modifica tu tutorial. Esto logrará satisfacer a los usuarios que han notado alguna falla y motivará a otros a leer tus tutoriales y comentar acerca de ellos.

¿Qué esperas para crear tus propios tutoriales?

Fuente: Janko at Warp Speed


0 comentarios to "Tips para redactar un buen tutorial en tu sitio web"

Publicar un comentario

Datos personales

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip