Tutorial de Tutoriales

Tutorial de Tutoriales Introduccin Mi mtodo para crear tutoriales para AdictosalTrabajo.com Creacin del tutorial en formato Word Insercin de imgenes Uso de tablas para enmarcar cdigo Exportacin del tutorial Conclusin

Introduccin
Los tutoriales son un medio muy rpido de compartir la informacin que usamos habitualmente tanto usuarios como desarrolladores para realizar nuestro trabajo. Desde que se comenz a utilizar por el pblico en general Internet, all por los aos 90, los usuarios han compartido la informacin de modo altruista. Muchos, y es mi caso particular, hemos aprendido mucho con la informacin publicada en Internet, por lo que ya es hora de devolver el favor.

Los tutoriales no tienen por qu ser exhaustivos, sino deben ser una orientacin, algo sobre lo que nosotros luego podamos trabajar. Basta con que el tutotial contenga dos o tres ideas tiles, de las que te orientan o te resuelven un problema, para que ya sean enormemente tiles.

Los tutoriales tambin deben ser cortos. Si has escrito mucho, divdelo en ms pequeos (mi primer tutorial de Struts tiene ms de 30 pginas, por lo que debera haberlo dividido pero para eso escribo este tutorial, para evitar estos errores).

Mi mtodo para crear tutoriales para AdictosalTrabajo.com

Para crear un tutorial para la pgina de www.adictosaltrabajo.com, podemos utilizar mltiples herramientas: Word y otros procesadores de texto, editores de texto, editores html, entornos de desarrollo

Dado que los tutoriales los hacemos con poco tiempo (siempre vamos con prisas), lo mejor es usar la herramienta y el mtodo ms rpidos posibles. Personalmente, uso Word y Eclipse para hacer los tutoriales. El mtodo que os describo a continuacin es a mi juicio uno de los ms rpidos.

Creacin del tutorial en formato Word

Utilizar Word como editor para el tutorial tiene varias ventajas:

Es rpido (todos estamos muy familiarizados con l) Corrige nuestros errores (a veces, corrige demasiado). Nos permite pegar imgenes y texto rpidamente Nos genera la tabla de contenidos

Por lo tanto comenzamos abriendo el Word y creando un documento en blanco (es lo que he hecho para este tutorial), y vamos rellenando el texto.

Un primer consejo: no formatees el texto. Usa slo listas indentadas (con bolas negras, la lista por defecto).

Para separar las diferentes partes usa los estilos de ttulos de Word. Si escribes una lnea de texto y pulsas Control +Mayscula+1 se cambia el estilo de la lnea a Titulo 1. Evidentemente tambin hay uno para el Titulo 2 y para el Ttulo 3

Separa los prrafos con una lnea, para que se aprecie visualmente la separacin. La forma de aadir espacios intermedios en HTML es un poco ms compleja que sta.

Tambin es conveniente aadir la tabla de contenidos al principio del tutorial, que te har las veces de ndice del mismo. No olvides actualizarla antes de exportarlo.

Insercin de imgenes
Para aadir las imgenes al tutorial, basta con pegarlas aunque hay algn truco. Lo primero que tienes que hacer es asegurarte de que la imagen no es demasiado ancha, ya que slo se soportan imgenes de 800 pixels de ancho. Tampoco debes intentar redimensionar la imagen, ya que te puede luego dar problemas al hacer la exportacin a HTML.

No olvides dejar una lnea en blanco tanto delante como detrs de la imagen, pues queda muy feo si el texto se pega a la imagen.

Para capturar pantallas. O bien usas el botn de imprimir pantalla o una utilidad de captura de pantallas. Si vas a capturar pantallas de una aplicacin, primero redimensiona la ventana de la aplicacin, y as es slo hacer la secuencia Alt+Imp.Pantalla, luego Alt+Tabulador y luego Control+V, que es muy rpida.

Uso de tablas para enmarcar cdigo

Si tienes que aadir cdigo fuente, no es buena idea pegar directemente el texto de los ficheros de texto del cdigo. Esto probabablemente te generar un cdigo que se ver en el documento final pegado a la izquierda del tutorial, muy feo.

Yo uso la siguiente tcnica, que queda muy bien en pantalla e impreso:

Abro el fichero de cdigo fuente en el Eclipse (normalmente trabajo con Java), y lo selecciono. Luego hago Control+C Ahora me voy al Word y creo una tabla de una sola celda (uso el icono de insertar tabla de la barra de herramientas de Word, seleccionando una tabla de una columna y una fila (dos si quiero meter una fila inicial con el nombre del fichero de cdigo fuente) Pego el texto copiado del Eclipse, eligiendo Texto RTF si me deja (en pegado especial). Ajusto el tamao del tipo de letra. Es mejor usar letras pequeas y evitar que se te rompan las lneas que tanto trabajo te ha costado formatear.

Fijaos en el resultado:

Ejemplo.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1" isELIgnored="false" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"> <title>Pgina principal</title> </

a que queda profesional?

Exportacin del tutorial

Una vez completado el tutorial ahora lo guardamos como pagina web filtrada, que es una de las opciones del cuadro Guardar como del Word. La pgina web filtrada se compone de un fichero HTM y una carpeta con el mismo nombre que el fichero ms la cadena .

Ya que para la web de adictosaltrabajo.com hay que respetar algunos convenios, procederemos a modificar la pgina filtrada. Lo primero que hacemos es quitar esa cadena al nombre de la carpeta (el explorer nos pedir confirmacin, ya que va ligada a la pgina web).

Lo segundo que hacemos es abrir el fichero HTM con el bloc de notas u otro editor de texto (no vale con el Word). Ahora vamos a introducir varias modificaciones a mano:

Buscamos y lo reemplazamos por (lo borramos). Esto har que las imgenes se carguen correctamente. Aadimos los campos meta al principio del fichero. Por defecto el Word nos genera un par de ellos. A continuacin te doy un ejemplo de algunos tiles: Eliminamos los estilos. Por defecto que el word aade al principo del fichero. Esto permitir que al incluir el tutorial dentro de la pgina de www.AdictosalTrabajo.com , al incluir una hoja de estilos, se ajusten los estilos de nuestro tutorial sin problemas para nosotros.

En este recuadro ponemos un ejemplo.

TutorialTutoriales.htm <html>

<head>

<meta http-equiv=Content-Type content="text/html; charset=windows-1252"> <meta name=Generator content="Microsoft Word 11 (filtered)"> <meta name=keywords content=""> <meta name=description content="Tutorial sobre para adictos al trabajo por Cristbal Gonzlez Almirn"> <meta name="author" content="Cristbal Gonzlez Almirn"> <meta name="copyright" content="(C) 2006 Cristbal Gonzlez Almirn"> <title>Tutorial de Tutoriales</title>

<style>

<!-/* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:12.0pt; font-family:"Times New Roman";} h1 {margin-top:12.0pt; margin-right:0cm; margin-bottom:3.0pt; margin-left:0cm; page-break-after:avoid; font-size:16.0pt; font-family:Arial;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 3.0cm 70.85pt 3.0cm;} div.Section1 {page:Section1;} /* List Definitions */

ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style>

</head>

<body lang=ES>

En amarillo he resaltado lo que hay que quitar, y en verde lo que hay que aadir, ajustado para nuestro tutorial.

Por ltimo, cuando tengas todo listo, empaqutalo en un zip o rar y envalo a www.adictosaltrabajo.com segn te indiquen..

Conclusin
En este tutorial hemos aprendido a hacer tutoriales de una forma sencilla, sin apartarnos mucho de nuestro trabajo principal, y que adems tengan buena presentacin visual.

Ya no tienes excusa para no hacer algn tutorial. Y porqu tienes que hacerlo? Hay muchas razones:

Porque luego no te acuerdas de cmo hacas determinada cosa. Porque compartes tu conocimiento con otros o es que no has leido nada escrito or los dems como estos tutoriales, y que te han sacado de apuros?

Porque tambin es una buena publicidad para ti(as luego les podrs contar a los dems tus avances)

Y ya sabes, la prxima vez que vayas a probar un nuevo tipo de desarrollo o aplicacin, abrete un Word y ve capturando pantallas, metiendo breves notas de texto. Si llegas a buen puerto, lo completas y lo publicas como tutorial.