Share
Así que has creado un tema, plantilla o aplicación web impresionante. Ahora para la parte tediosa; la documentación. Escribir el contenido no será necesariamente tan problemático, es más probable que se creen los archivos de ayuda que tomarán un tiempo precioso. Markdown, una sintaxis de formato liviana y * realmente * simple puede resolver todo eso por ti.
Creado por John Gruber, Markdown es una sintaxis de formato de texto plano que facilita mucho la creación de elementos HTML básicos.
En lugar de usar etiquetas HTML (que, relativamente hablando, tardan mucho tiempo en escribir), el trabajo de Markdown es apartarse de su proceso de pensamiento, lo que le permite concentrarse en el contenido. Debido a que la sintaxis es tan básica, es fácil para ambos escribir y leer Reducción. Más adelante en este tutorial, veremos los pasos para crear la documentación del tema usando Markdown, para que veas lo ligero y rápido que es.!
Una vez que se haya familiarizado con la escritura de Markdown, necesitará algún tipo de aplicación de análisis para convertir su Markdown a HTML..
El convertidor original de Markdown se creó en Perl, pero desde entonces han aparecido muchas aplicaciones (en múltiples plataformas). Veamos algunas de las opciones, tanto en línea como en su propio sistema..
Dingus es una aplicación web creada por las mismas personas que te trajeron Markdown. Simplemente copie y pegue su código Markdown desde un editor de texto (o ingréselo en el área de texto) y con un clic de un botón, aparecerá su código HTML (así como una vista previa). Nada sofisticado, pero una forma simple de convertir Markdown en HTML.
MarkdownPad es una excelente aplicación de Windows que te permite crear fácilmente archivos de Markdown (¡y es gratis!) Incluye características increíbles como vista previa instantánea de HTML, formateo fácil con atajos de teclado, personalización de CSS, exportación HTML e incluso un modo "sin distracciones".
Mou es una gran aplicación gratuita para Mac que te permite escribir Markdown de una manera simple y hermosa. Cuenta con excelentes funciones, como estilo personalizado, métodos abreviados de teclado, HTML en vivo, exportación HTML (con estilo CSS opcional), exportación a PDF, soporte de dictado y más. Para este tutorial, vamos a utilizar Mou para crear la documentación de nuestro tema.
MarkdownNote es otra gran aplicación para escribir Markdown, y la aplicación iOS es perfecta si desea escribir Markdown sobre la marcha. Al igual que las otras aplicaciones que hemos cubierto, tiene algunas características excelentes, que incluyen vista previa HTML en vivo, atajos de teclado y sincronización de Dropbox..
Hasta ahora, hemos cubierto qué es Markdown y hemos buscado algunas herramientas que puede utilizar para escribir Markdown. Ahora creamos algo de documentación de tema para un tema inexistente, cubriendo lo que normalmente debe incluir en la documentación, la sintaxis de Markdown y las mejores prácticas.
Durante los siguientes pasos, veremos Markdown según se aplique a nuestras necesidades. Para una mirada más profunda de la sintaxis de Markdown, revisa Markdown: The Ins and Outs en Nettuts+.
Porque tú Ya conozca las entradas y salidas de su aplicación de tema / plantilla / web, puede parecer un poco tedioso cubrir lo básico. El propósito de un archivo de documentación es servir como una guía para otros usuarios y compradores. A menudo, hay instalación, personalización y algunos ajustes involucrados que los usuarios deberán conocer, y su trabajo es educarlos. Esto es lo que podríamos querer incluir:
Recuerde, la documentación debe ser lo suficientemente simple para que cualquier persona con conocimientos básicos pueda entender, pero también debe cubrir cómo cambiar archivos importantes. Por ejemplo, no necesariamente tiene que mostrar cómo cambiar valores específicos de CSS, sino que debe mostrar cómo acceder a estos archivos.
¡Ahora es el momento de las cosas divertidas! Continúa y abre tu editor de Markdown (usaré Mou para Mac). Cree un encabezado para su archivo de documentación:
# Documentación del tema
Los elementos de encabezado se pueden escribir simplemente agregando uno a seis # 'delante del contenido. En el ejemplo anterior, usamos un signo # para crear un h1 Elemento con el texto 'Documentación del tema'. Si quieres crear un h3 elemento, tu escribirías ### Título 3.
Ahora, vamos a crear una regla horizontal (
***
Una sección importante para agregar dentro de su documentación es una sección de información..
* Nombre del tema: * Tema * Autor: * Suhail Dawood * Creado: * 08/08/2012 * Versión: * 1.0.1 *** ¡Gracias por su compra! Si tiene alguna pregunta sobre este tema, no dude en enviarme un correo electrónico a **[email protected]** o enviarme un tweet ** @ tutsplus ** ***
Echemos un vistazo al equivalente HTML del código Markdown anterior:
Nombre del tema: Tema
Autor: Suhail Dawood
Creado: 08/08/2012
Versión: 1.0.1
Gracias por su compra! Si tiene alguna pregunta sobre este tema, no dude en enviarme un correo electrónico a [email protected] o twitame @tutsplus
Con solo mirar las dos fuentes diferentes, puede ver instantáneamente que Markdown es mucho más intuitivo de entender y crear. En lugar de tener que añadir constantemente <y >'s, Markdown le permite centrarse en el contenido. Para enfatizar, agregue un asterisco antes y después del texto (por ejemplo,. *Texto enfatizado*). Para envalentonar, añadir dos asteriscos antes y después del texto (por ejemplo,. ** Texto en negrita **). Para agregar un salto de línea, simplemente agregue dos espacios en el punto donde desea insertar un salto de línea.
Ahora agreguemos una lista de contenidos a nuestro archivo Markdown:
## Tabla de contenido 1. Estructura HTML 2. Archivos CSS 3. Archivos Javascript 4. Archivos PSD 5. Estilos de temas 6. Ajustes de Javascript 7. Ajustes de CSS 8. Compatibilidad del navegador ***
Si tuviéramos que crear esto en HTML, aquí es cómo aparecería:
Tabla de contenido
- Estructura HTML
- Archivos CSS
- Archivos de Javascript
- Archivos PSD
- Estilos de temas
- Tweaking Javascript
- Tweaking CSS
- Compatibilidad del navegador
En lugar de tener que crear una lista ordenada y elementos de lista separados, simplemente escriba 1. Primer elemento y continuar agregando elementos incrementados.
Es importante permitir a los usuarios cómo se distribuyen los archivos del sitio. Ya que estamos creando documentación para un tema, debemos describir cómo está estructurado el código HTML del tema. Podemos resumir esto con el siguiente código:
## 1. Estructura HTML La estructura HTML para cada página es la siguiente: * Meta * Enlace a archivos CSS * Encabezado * Logotipo * Enlaces sociales * Navegación * Contenido principal * Control deslizante de contenido * Artículos * Barra lateral * Buscar * Publicar archivos * Lista de correo * Enlace a Javascript Archivos * Javascript ***
Sencillo. Para crear nuestra tabla de contenidos, utilizamos una lista ordenada. En esta sección, utilizamos anidado listas desordenadas Para crear una lista desordenada en Markdown, simplemente agregue un asterisco y un espacio antes del texto (por ejemplo,. * Objeto 1). Para anidar elementos de lista, simplemente sangra hacia adentro y crea otro elemento de lista.
Particularmente en temas, la documentación CSS es muy importante. Es una buena idea delinear los diferentes archivos CSS que se incluyen en el tema, así como una breve descripción de cada archivo:
## 2. Archivos CSS Hay 3 archivos CSS en este tema: * main.css * colors.css * skeleton.css ##### main.css Este archivo CSS es la hoja de estilo principal del tema. Contiene todos los valores para los diferentes elementos del tema y la combinación de colores predeterminada. ##### colors.css Este archivo CSS contiene el estilo de todos los demás esquemas de colores que se incluyen en el tema. ##### skeleton.css Este archivo CSS permite que el tema sea sensible y se adapte a diferentes tamaños de pantalla. ***
Asegúrese de utilizar encabezados para separar diferentes secciones del archivo de documentación. Un archivo de documentación bien diseñado llevará a menos usuarios confundidos!
Si su tema incluye archivos Javascript, es una buena idea al menos delinearlos en la documentación:
## 3. Archivos de Javascript Hay 2 archivos de Javascript en este tema: * jquery.js * slider.js ##### jquery.js Este tema usa la biblioteca de jQuery Javascript. ##### slider.js El control deslizante de contenido en el tema se ejecuta en este archivo Javascript. Hay algunas configuraciones que se pueden modificar, esto se tratará en la sección "Ajustar Javascript". ***
Asegúrese de no solo enumerar, sino de describir los archivos en su tema. Esto hará que sea mucho más fácil para el usuario comprender el contenido de cada archivo y decidir si quieren o no meterse con él..
Aunque hay una sección separada para las plantillas PSD en ThemeForest, muchos autores decidieron incluir archivos PSD con sus plantillas codificadas para permitir al usuario la libertad de realizar cambios de diseño. Si su tema tiene archivos PSD incluidos, podría ser una buena idea delinearlos tal como lo hemos hecho con todos los demás archivos:
## 4. Archivos PSD Incluidos en este tema hay 5 archivos PSD diferentes: 1. homepage.psd 2. about.psd 3. portfolio.psd 4. blog.psd 5. contact.psd Estos archivos PSD serán útiles si desea crearlos Cambios en el diseño del tema. También puede crear un nuevo diseño de página utilizando los archivos PSD existentes como base para trabajar. ***
Es una buena práctica nombrar sus archivos PSD claramente (por ejemplo, full-width-page.psd) en lugar de nombres vagos (por ejemplo, template-003.psd). De esta manera, los usuarios pueden encontrar lo que necesitan sin tener que abrir cada archivo.
Lo más probable es que su tema incluya una selección de combinaciones de colores para que los usuarios puedan elegir. Si este es el caso, asegúrese de describir cómo se hace esto:
## 5. Estilos de temas Con este tema se incluyen 10 estilos de temas diferentes: 1. Claro 2. Oscuro 3. Gris 4. Verde 5. Rojo 6. Naranja 7. Azul 8. Púrpura 9. Marrón 10. Azul oscuro Para cambiar estos estilos, vaya a el backend de WordPress, seleccione ** Opciones> Estilos ** y seleccione el estilo que desea. ***
En el ejemplo anterior, he enumerado los diferentes esquemas de color incluidos en el tema y he mostrado cómo cambiarlos..
Si su código incluye archivos Javascript que tienen parámetros de personalización (por ejemplo, un script de control deslizante), sería una buena idea mostrar a sus usuarios cómo manipular estos valores:
## 6. Ajuste de Javascript El control deslizante de contenido en el tema se ejecuta fuera de slider.js, y hay un par de valores que se pueden cambiar para alterar la apariencia del control deslizante. ##### Cambio de valores En slider.js, puede modificar estos valores:auto: verdadero* Booleano: animar automáticamente, verdadero o falso *velocidad: 1000* Entero: Velocidad de la transición, en milisegundos *buscapersonas: cierto* Booleano: Mostrar buscapersonas, verdadero o falso *nav: falso* Booleano: Mostrar navegación, verdadero o falso * ***
El código anterior describe cómo un usuario puede cambiar los valores. Para codificar el estilo, envuelva el texto relevante dentro de etiquetas Las aplicaciones como Mou agregan estilo a estos elementos en la vista previa en vivo, y también puede exportar el código para mantener el estilo. Hablaremos un poco sobre la exportación de su documentación más adelante..
Los archivos CSS son muy a menudo personalizados por un usuario. Sin duda, lo considerarán útil si agrega una sección a la documentación que muestra cómo acceder a los archivos CSS para que puedan editarlos..
## 7. Ajustar el CSS El tema se basa en un marco sensible, que permite que el contenido se vea de manera óptima en todos los tamaños de pantalla. ##### Cambiar el inicio de CSS entrando en el backend de WordPress, ** Temas> Tema> Ver código de fuente **. Seleccione el archivo * style.css * para ver y tener la capacidad de editar el código. Aquí, puedes cambiar cosas como las fuentes, tamaños, colores, etc. ***
Ahora que el usuario tiene acceso al archivo CSS, puede realizar los cambios que desee..
Es una buena idea notificar al usuario sobre cualquier problema de compatibilidad del navegador:
## 8. Compatibilidad del navegador Este tema funciona bien (-) o excelente (X) en los siguientes navegadores: ** IE 6-8 ** - ** IE 9 + ** X ** Chrome ** X ** Firefox ** X ** Safari ** X ** Opera ** X ***
Si desea ampliar esta sección, puede explicar qué características del tema sufren en ciertos navegadores..
Para completar nuestra documentación, agregaremos una sección para que nuestros usuarios sepan cómo contactarnos si tienen más preguntas. Vamos a añadir este bit de código:
Accentsconagua
