Este artículo analiza un enfoque para escribir tutoriales paso a paso. Si bien el enfoque aquí es para NETTUTS, gran parte del enfoque puede aplicarse a cualquier sitio. Si planea escribir tutoriales para NETTUTS, debe leer / navegar este artículo. También hay un artículo paralelo en PSDTUTS que escribió el editor Sean Hodge, que realmente inspiró a este.
NETTUTS tiene que ver con tutoriales para el desarrollo web. Eso significa codificación basada en navegador web, que requiere al menos una comprensión de HTML, algo de CSS y algún lenguaje de codificación web. Todo lo demás depende de lo que cubra tu tutorial. Esto podría ser la codificación de la plataforma de CMS / blog, PHP, bibliotecas de JavaScript, marcos de trabajo CSS, bases de datos, etc..
Probablemente habrá notado que los tutoriales más populares aquí se centran en los desarrolladores web que tienen un elemento de diseño-y. Así que saber cómo usar un software de gráficos como Photoshop o Fireworks puede ayudar. Al menos, sepa cómo obtener una captura de pantalla, ya que este es el mínimo que desea incluir en su tutorial para elementos visuales.
No tiene que ser realmente formal, pero debe planificar su tutorial y aplicar una lista de verificación. Aquí hay una lista de verificación sugerida, aunque siéntase libre de modificarla a su gusto:
Hay un par de maneras en las que puedes publicar publicaciones en NETTUTS. Una forma es enviar sus archivos de demostración de trabajo, el código fuente, el texto del tutorial y las imágenes (todos comprimidos juntos) a través del enlace del formulario en la página de Pautas del tutorial. De esta manera, obtendrás una respuesta mucho antes, pero es mucho trabajo que hayas hecho si no es adecuado para NETTUTS. (Esto todavía se recomienda si nunca ha enviado un tutorial).
Hazlo más fácil en ti mismo. En lugar de escribir un código de demostración y un tutorial primero, lanza una idea primero. En realidad, se recomienda si ha enviado previamente un tutorial completo, incluso si no se publicó:
En cualquier caso, si una demostración muestra potencial pero el tutorial necesita trabajo, intentaré trabajar con usted de manera limitada para mejorar el texto. Sin embargo, no puedo escribirlo por ti. Un montón de fragmentos de código y un texto que solo describe funcionalmente lo que está sucediendo no es un tutorial.
A medida que crezca el número de lectores de NETTUTS, tendré menos tiempo para evaluar si un tutorial es adecuado para NETTUTS. Hazlo fácil para mí, quiero que use tu tutorial y tu demo:
Ponte en mi lugar y piensa en lo que me hace querer aceptar tu tutorial. No me lance una serie si aún no ha aceptado y publicado un tutorial. Lo mismo ocurre con las series entre sitios (es decir, la Parte 1 para PSDTUTS, la Parte 2 para NETTUTS).
En última instancia, el tutorial es para los lectores del sitio, no para mí. Si el título del tutorial los atrae, y si leen el tutorial después de ver la demostración o incluso la imagen visual inicial (imagen, diagrama, etc.), ellos quieren aprender. Si bien no necesita controlar y describir cada línea de código como si un lector nunca hubiera codificado antes, sí necesita describir las líneas de código relacionadas específicamente con las bibliotecas, complementos o técnicas especiales que esté utilizando.
El mayor problema con los envíos hasta ahora: usar una biblioteca de código o un complemento, mostrar un fragmento de código pero no describir realmente las líneas de código relevantes. Decir "aquí está el código para hacer X" no es suficiente. ¿Por qué un lector se molestaría con su tutorial si no está revelando el cómo hacerlo??
Antes de enviar el texto del tutorial real, lea algunos de los tutoriales de Collis aquí, como punto de partida. Si bien es bueno tener tu propio estilo, también debes recordar que la mayoría de los lectores de sitios tienen algo (o mucha) experiencia de codificación web. Habla con ellos, no con ellos. (Soy un tipo detallado, que proviene de haber sido un asistente de enseñanza / instructor de laboratorio para estudiantes no informáticos que toman un curso obligatorio de informática).
Ya existe una página de Pautas de tutorial, que tiene un enlace a un ZIP de tutorial en blanco. Consulta esta página y usa esta plantilla ZIP.
¿Realmente sabes qué tipo de tutorial quieres hacer? No elegí a nadie aquí, pero algunas presentaciones me dieron la impresión de que la persona simplemente quería la pluma en su gorra de haber sido publicada en un sitio como NETTUTS. Su tutorial y la descripción del código de demostración era vaga, y a pesar de que me di cuenta de qué intentar, no mordieron.
Una de las mejores formas de planificar y construir un tutorial es esbozar sus ideas y describir las características, así como lo que está demostrando. Dado que los tutoriales de NETTUTS están basados en códigos, usted tiene el requisito adicional de tener un código funcional para presentar. Aquí está mi proceso preferido para crear un tutorial, pero no olvide la lista de verificación mencionada anteriormente:
Si bien sería bueno que tu demostración funcione en todos los navegadores, no siempre es posible. Algunas bibliotecas de código, por ejemplo, jQuery, simplemente no son compatibles con navegadores antiguos. Como mínimo, su código debería funcionar para los navegadores que admiten las bibliotecas que está utilizando.
Por cierto, a pesar de las protestas por los comentarios de algunos lectores de NETTUTS, Firefox 3 no está en uso generalizado en el momento de escribir este artículo. También está lleno de errores y sigue siendo un montón de memoria, según algunos usuarios de Twitter y Plurk. Tendremos que considerar la compatibilidad del navegador caso por caso, pero trataremos de cubrir los navegadores estables más recientes. Indique si su código no funciona en algún lugar, y por qué es así..
Una herramienta que lo ayudará a realizar pruebas entre navegadores es el sitio Browsershots, que es una forma fácil de probar su código en múltiples navegadores (virtuales) para Linux, Windows, Mac OS y BSD..
A diferencia de nuestro sitio asociado PSDTUTS, cuando se trata de tutoriales de desarrollo web, no siempre es fácil crear imágenes atractivas. Sin embargo, los elementos visuales hacen que un tutorial sea más interesante, así como también ayuda a demostrar conceptos. Por lo tanto, los elementos visuales de su tutorial son obligatorios y es posible que tenga que ser creativo. Aquí hay algunas opciones:
Incorpore imágenes tan a menudo y tan pronto como sea posible en su tutorial. Muchos de los tutoriales que he rechazado hasta ahora no tienen ninguna imagen. No es tan difícil tomar una instantánea de la pantalla de su aplicación en uso, o la creación de una pantalla de maqueta en Photoshop, o lo que sea relevante. No necesita docenas de imágenes, pero incluso algunas capturas de pantalla seleccionadas con criterio pueden ser suficientes.
Nota: Si usa imágenes de otras fuentes, ya sea en el texto de su tutorial o en su demostración, debe tener un permiso explícito o implícito y debe citar la (s) fuente (s). Por ejemplo, puede usar imágenes de una fuente como Flickr, bajo una licencia comercial de CC adecuada.
Además de acreditar imágenes, asegúrese de acreditar cualquier biblioteca de código, fuentes, etc. Esto no significa que pueda presentar el código de otra persona como propio, sino que si tiene un gran tutorial y utiliza una técnica presentada originalmente por otra persona, darles crédito.
Además de los tutoriales, publicamos un artículo por semana relacionado con el desarrollo web. Las contribuciones del artículo son una vez cada dos semanas. Los artículos de recursos son buenos candidatos, como mi artículo de CSS Grid Frameworks, aunque el tuyo no tiene que ser tan extenso.
Mi preferencia es aceptar lanzamientos para artículos de personas que son escritores / bloggers experimentados, aunque no es necesario que haya escrito un tutorial ya que el estilo es diferente.
Intento responder a todos lo más rápido posible, aunque en algunas semanas el volumen de envíos es lo suficientemente alto como para que sea fácil perder el rumbo. Tenga la seguridad de que responderé, aunque puede darme un codazo si no ha recibido una respuesta en un par de semanas después de haber enviado una idea o un tutorial..
Espero ansiosos la continuación de los lanzamientos de ideas y las presentaciones de los lectores de NETTUTS. Si no sabe por dónde empezar, los tutoriales de Collis aquí en NETTUTS y en PSDTUTS son un gran modelo a seguir, tanto en términos de ajustes de pantalla como de codificación y estilo de escritura..