Sugerencias para crear tutoriales paso a paso de desarrollo web para Nettuts +

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.

Conjunto de habilidades

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.

Planifique y tenga una lista de verificación

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:

  1. Planea tu tutorial.
  2. Escriba su lista de verificación.
  3. Investiga bibliotecas de código, complementos, técnicas..
  4. Decidir sobre el conjunto de características de su código de demostración.
  5. Escribe tu código, prueba y refínalo hasta que estés satisfecho.
  6. Escribe el texto del tutorial..
  7. Incorpore su código de demostración en fragmentos, en el tutorial (según nuestras Pautas de tutoriales).
  8. Haga una lista de las deficiencias del código que conoce. (Es decir, no funciona en Internet Exploder 6.0+, etc.)
  9. Proporcione elementos visuales adecuados (imagen, captura de pantalla, animación, etc.) que no superen los 600 píxeles.
  10. Edite el texto del tutorial y numere cada sección con "Paso 1", "Paso 2", etc..
  11. Si ha usado imágenes que no son suyas, no solo debe dar atribución, debe tener permiso implícito (por ejemplo, licencia CC en Flickr) o explícito para usarlas. Esto incluye imágenes visibles en tu tutorial y en tu demo..
  12. Prepare el código fuente para descargarlo y comprímalo. En el mismo archivo ZIP, incluya los archivos de demostración de trabajo.

Háztelo más sencillo

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ó:

  1. Piense en una idea y envíemela a través del enlace del formulario en la página de Pautas del tutorial. (Use un archivo ZIP en blanco, ya que el formulario lo requiere). O si me ha enviado una idea / tutorial anteriormente, tiene mi dirección de correo electrónico de NETTUTS y puede enviarme directamente.
  2. Si no ha escrito previamente un tutorial para el sitio, hay un par de etapas:
    1. El interés en tu idea no es una promesa de publicación. Después de lanzar una idea y obtener interés, deberá mostrar el código de demostración (aunque solo sea en su propio servidor).
    2. Si hace el código de demostración y es adecuado para NETTUTS, le pediré, pero no la solicitud, si desea escribir el tutorial, pero sin garantía de publicación..
    3. Tenga en cuenta que esto suena injusto, pero en realidad no es diferente si envía el tutorial completo por adelantado. De esta manera, tiene algunas etapas en las que puede cambiar de opinión, lo que reduce su esfuerzo general. Si prefieres enviar tu tutorial y tus archivos por adelantado, también está bien..
  3. Por otro lado, si ya ha escrito un buen tutorial que requiere poca edición, soy mucho más indulgente. Puedes lanzar la idea, hacer que mi adelante, y escribir el tutorial.

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.

Hazlo fácil en el editor

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:

  1. Utilice su nombre real y correo electrónico en el envío. (También debe tener una cuenta de PayPal para que podamos pagarle).
  2. Describa claramente lo que mostrará su tutorial y lo que demostrará su código de demostración.
  3. Presentar el código de demostración que funciona y no requiere que haga mucha configuración (además de cargar algunos archivos en un servidor).
  4. No me envíe un código de demostración que requiera que agregue mis propias imágenes u otra cosa, especialmente si no se molesta en decirme por adelantado. Mi deseo de ayudarte choca con la falta de tiempo..
  5. En general, minimice la cantidad de tiempo que tengo que dedicar a configurar su código de demostración solo para evaluarlo. Cuanto más esfuerzo tome, más probable será que sea rechazado. (Siempre puedes comenzar con una demostración en uno de tus sitios, aunque eventualmente tendrás que proporcionarme archivos).

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).

Describe cada paso completamente

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??

Tono y estilo de escritura

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).

Pautas y Formateo

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.

Decidir sobre su tema

¿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.

Reunión creativa

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:

  1. Lluvia de ideas sobre algunas ideas de aplicación..
  2. Investiga las bibliotecas, complementos, características, limitaciones, etc. necesarios..
  3. Esquema de las características deseadas, bocetos o maquetas de pantallas del navegador. (Recuerda, puedes usar instantáneas de las maquetas terminadas en tu tutorial).
  4. Escribe el código, prueba y refínalo. (Prueba en Browsershots, descrita en la siguiente sección.)
  5. Escriba el tutorial en torno a su código e incorpore fragmentos en fragmentos fácilmente digeribles, formateados según las Pautas del tutorial.
  6. Edite el tutorial si es necesario. Ponte en la mente de un lector. Si están consultando su tutorial porque el título llamó su atención, entonces probablemente no entiendan su código sin una explicación adecuada. No se limite a mostrar el bloque de código y suponga que el lector debe entenderlo. De lo contrario, estás escribiendo código, no un tutorial..
  7. Añadir elementos visuales (capturas de pantalla, etc.). Vea la sección de imágenes a continuación.

Código de demostración y problemas de navegador cruzado

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..

Visuales

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:

  1. Imagen relevante.
  2. Capturas de pantalla de su aplicación en varios estados de uso..
  3. Screencast de su aplicación en uso, o algo relevante para su tutorial.
  4. Un diagrama o mapa mental que representa información sobre su aplicación, su uso o su diseño y creación..
  5. Contenido de video relevante, tal vez incluso un screencast de su código de demostración en uso.

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.

Cite sus fuentes

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.

Artículos

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.

Respuesta

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..

Conclusión

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..