Ilustrando su Artículo o Tutorial para developerWorks

Como crear gráficos efectivos

Este artículo se destina a autores; muestra cómo desarrollar y enviar gráficos técnicos (como figuras y capturas de pantalla) para el artículo o tutorial que está escribiendo para developerWorks. Al seguir estas recomendaciones y guías, usted mejorará el contenido y acelerará su publicación en developerWorks.

Ami Dewar, developerWorks Advanced design team lead, IBM

Ami DewarAmi Dewar es Team Leader de Diseño Avanzado de developerWorks. El equipo de Diseño Avanzado es un grupo híbrido formado por diseñadores, desarrolladores y arquitectos que trabajan para que developerWorks siga estando a la vanguardia. Ami, que anteriormente se desempeñaba como diseñadora gráfica, ha trabajado como diseñadora para IBM durante seis años, en los cuales creó más de 1200 gráficos de funciones y 8000 ilustraciones técnicas. Conozca más en el Perfil de Ami en My developerWorks.



Victoria Ovens, developerWorks graphic designer, IBM developerWorks

Victoria OvensVictoria Ovens es la diseñadora gráfica líder de developerWorks. Es egresada de la Universidad de North Carolina en Greensboro, titulada en diseño gráfico. Cuando no está encontrando formas interesantes de expresar gráficamente conceptos de programación abstracta, rescata animales abandonados, juega con sus perros Basenjis y pasea en su Suzuki SV650S.



08-06-2011

Evite estos elementos en sus gráficos

  • Sombras proyectadas
  • Títulos
  • Comentarios emergentes numerados
  • Efectos de bordes decorativos

Si los gráficos que envió contienen alguno de esos elementos, es posible que su editor o diseñador gráfico tenga que pedirle a usted que vuelva a hacer los gráficos, lo que probablemente retardará la publicación de su contenido.

Para evitar retrasos, consulte las guías generales para todos los tipos de gráficos, como también las guías específicas para capturas de pantalla.

Iniciación

  1. Revise las guías para autores de developerWorks.
  2. Use el formulario de envío de contenido para proponer su idea a un editor de developerWorks.
  3. Un editor de developerWorks se pondrá en contacto con usted y, si se aprueba su idea, usted obtendrá más instrucciones de cómo proceder con su contenido.
  4. Vuelva a este artículo para obtener recomendaciones acerca del desarrollo de gráficos efectivos para su contenido y eliminar el redibujo, que lleva tiempo.

Las recomendaciones e instrucciones en este artículo pueden ayudar a producir gráficos que se asemejan mucho a la versión final publicada. Antes de la publicación en el sitio de developerWorks, todos los gráficos que usted envía serán revisados, corregidos o devueltos a usted para retrabajo, según la necesidad del equipo de diseño gráfico de developerWorks.

¿Preguntas? Contacte a la diseñadora gráfica Victoria Ovens.

Paso 1. Seleccione los tipos de gráfico que mejorarán su contenido

Los gráficos que mejorarán su artículo o tutorial incluyen figuras técnicas, capturas de pantalla y, en algunos casos, archivos de medios ricos. Su editor de developerWorks puede ayudar a determinar los tipos de gráficos que mejorarán su contenido. He aquí algunas muestras:

Figura 1. Figura técnica
Figura técnica
Figura 2. Captura de pantalla
Captura de pantalla
Figura 3. Figura técnica fusionada con capturas de pantalla
Figura técnica fusionada con capturas de pantalla
Figura 4. Fotografía del autor
Fotografía del autor


Archivos de medios ricos Incluyen audio, Flash, imágenes animadas y video. DeveloperWorks tiene un conjunto separado de estándares para esos tipos de archivo. Contacte a su editor para tratar de la inclusión de archivos de medios ricos en su contenido.


Paso 2. Siga las nueve guías generales para todos los tipos de gráficos

1. ¿Necesario?
Los gráficos se usan para explicar o mejorar los mensajes del contenido. No deben ser subutilizados ni sobreutilizados. Piense en cómo el lector usará el material. Por ejemplo: si usted quiere incluir un código que los lectores pueden usar en sus aplicaciones, proporcione un listado de código que los lectores puedan cortar y pegar en sus aplicaciones — en lugar de una captura de pantalla, que no soporta el recurso de cortar y pegar código.
2. ¿Apropiado para un público mundial?
Evite elementos visuales que sean significativos sólo para una región específica o que puedan ser interpretados como polémicos. Por ejemplo: no use símbolos de días festivos, símbolos religiosos, imágenes/ gestos de mano, buzones, banderas y mapas de países específicos, aviones a reacción o aeronaves o cualquier tipo de símbolo relacionado con armas.
3. ¿Legible?
Todos los gráficos deben ser legibles.
4. ¿Accesible?
Para lectores que son ciegos o tienen problemas de visión, lectores de texto pueden leer el texto, pero con las imágenes la cosa es diferente. Para hacer las imágenes accesibles a lectores que tienen problemas de visión, cerciórese de incluir texto antes o después de la imagen para describirla. Proporcione también una breve descripción de la imagen en el atributo "alt" de la etiqueta <img>. No cree imágenes a partir de tablas ni use demasiado texto contenido en una imagen. Evite usar color en una imagen para comunicar un significado. Vea ejemplos de esos errores de accesibilidad en imágenes . Para aprender más acerca de la accesibilidad del contenido Web, consulte Web Content Accessibility Guidelines 2.0 para ver recomendaciones y técnicas.
5. ¿Sin títulos, marcos, sombras proyectadas o comentarios emergentes numerados?
No incluya títulos, marcos, sombras proyectadas o comentarios emergentes numerados.
6. ¿Colores seguros para la Web?
Si usa colores en sus gráficos, selecciónelos desde la paleta de colores seguros para la Web de developerWorks, que incluye los porcentajes de RGB para que usted pueda replicarlos fácilmente.
7. ¿Altura y ancho adecuados?
En los artículos y tutoriales publicados, las imágenes no deben tener más de 580 píxeles de ancho y 800 píxeles de alto a 72 ppi (píxeles por pulgada), optimización estándar para Internet.

Haga su imagen o captura de pantalla tan grande como lo necesario para ser legible. Si su gráfico tiene menos de 580 píxeles de ancho, no hay problema. Si su gráfico tiene que rebasar los 580 píxeles para ser legible, envíe la imagen original en tamaño grande y el equipo de diseño gráfico la redimensionará para evitar distorsión.

8. ¿Formato correcto?
Estos formatos son ideales: jpg, gif y png (pero, en el caso de los archivos png, nuestros diseñadores gráficos los convertirán a jpg o gif para el contenido publicado). Si desea usar otros formatos, verifique con la diseñadora gráfica Victoria Ovens.
9. ¿Nombres de archivo adecuados?
Mantenga los nombres de archivo cortos (menos de 20 caracteres alfanuméricos es lo ideal) y en minúsculas (por ejemplo: figure1.gif y screen1.gif). Evite símbolos y espacios.

Ahora revise recomendaciones y guías adicionales específicas para errores de accesibilidad, figuras técnicas y capturas de pantalla.


Evitando errores de accesibilidad

Personas que son ciegas o tienen problemas de visión usan aplicaciones de lector de pantalla para escuchar el contenido basado en texto de una página Web. La información tabular presentada como imagen — y no como elementos codificados en XML (<tables>)— es inaccesible. Si se presenta una tabla como imagen, el lector de pantalla no puede leer el contenido de la imagen de tabla. Siempre es mejor codificar una tabla con elementos XML, ya que los lectores de pantalla pueden leer el texto en la tabla.

La Figura 5 muestra una tabla presentada como una imagen inaccesible.

Figura 5. Ejemplo de una tabla inaccesible presentada como una imagen
Ejemplo de una tabla inaccesible presentada como una imagen

Hay otro error de accesibilidad en la Figura 5. El color usado en la imagen añade significado al contenido. Ya que la interpretación del color depende de la visión, la representación del color no tiene significado para una persona ciega o con visión limitada. Además, las referencias a color también pueden ser una dificultad para personas daltónicas.

La Figura 6 es un ejemplo de imagen que usa color, pelo el color no añade significado a la imagen ni al contenido de la imagen.

Figura 6. Ejemplo de una imagen que usa color, donde el color no tiene ningún significado especial
Ejemplo de una imagen que usa color, donde el color no tiene ningún significado especial

Todas las imágenes deben tener un atributo "alt" significativo en la etiqueta <img>. El atributo "alt" es importante por dos razones. Primero, es lo que el lector de pantalla lee al encontrar una imagen. Por tanto, el texto significativo para el atributo "alt" es crítico para que la persona con problemas de visión entienda lo que es la imagen y el papel que tiene en el contexto. En segundo lugar, las imágenes que no tienen el contenido de "alt" o tienen un contenido de "alt" inadecuado son consideradas inaccesibles.

La Figura 7 tiene un contenido inadecuado de "alt". Observe que se puede ver el contenido de "alt" al pasar el ratón sobre la imagen.

Figura 7. Ejemplo de una imagen con contenido inadecuado de "alt"
Ejemplo de una imagen con contenido inadecuado de

El contenido de "alt" de la imagen es inadecuado para describir su propósito. "Image1" no dice nada acerca de lo que está contenido en la imagen ni de su propósito dentro de la página Web. Aunque la presencia de contenido dentro del atributo "alt" pueda satisfacer una aplicación de lector de pantalla (como JAWS), aun así el texto no descriptivo (como Image1) es considerado inaccesible.

La Figura 8 es un ejemplo de la misma imagen con el contenido de "alt" apropiado siendo mostrado.

Figura 8. Ejemplo de una imagen con contenido de "alt" apropiado
Ejemplo de una imagen con contenido de

En la Figura 8, el contenido de "alt" describe más claramente la imagen y su propósito.

La inclusión del contenido adecuado de "alt" es sólo una parte de lo que se debe hacer para asegurar que las imágenes de un artículo o tutorial cumplan con los estándares de accesibilidad. La relación contextual entre una imagen y el contenido circundante también es fundamentalmente importante para cumplir con los estándares de accesibilidad.

Los comentarios a lo largo de las plantillas XML guían a usted en el cumplimiento de los estándares de accesibilidad referentes al contenido y las imágenes.


Creando figuras técnicas

Además de las nueve guías generales para todos los tipos de gráficos, estas guías y recomendaciones son específicas para figuras técnicas.

Programas que puede usar

Puede crear sus figuras técnicas con Microsoft® Paint, Adobe Illustrator, Adobe Photoshop, Microsoft Word y otros programas gráficos.

Estilo

Las figuras técnicas más efectivas son simples, directas y sin muchos detalles:

  • Las flechas deben usar un estilo común.
  • Las líneas deben tener un punto de espesor.
    Figura 9. Ejemplos de flechas aprobadas y líneas de 1 punto
    Ejemplos de flechas aprobadas y líneas de 1 punto
  • Las formas deben tener un marco negro de 1 píxel.
  • Todo texto en el gráfico, como rótulos o comentarios emergentes numerados, debe:
    • Usar la fuente Arial de 12 puntos
    • Usar resalte en negrita según lo necesario para enfatizar, pero mínimamente
    • Evitar el resalte en cursiva, ya que resulta difícil de leer
    • Usar mayúsculas en el estilo de sentencia
    • Usar abreviaciones y nombres de producto aprobados (verifique con su editor)

    El equipo de diseño gráfico puede ajustar el estilo de texto en el gráfico según la necesidad.

  • Incluya imágenes comunes de la colección a continuación según sea necesario.
  • No use sombras proyectadas, gradientes o imágenes tridimensionales
  • No incluya leyendas o títulos de imagen junto con la imagen
  • No incluya un marco alrededor de la imagen

Imágenes comunes

El equipo de diseño gráfico es propietario de una variedad de imágenes estándar relacionadas con computadoras (como laptops, teléfonos móviles, PDAs, etc.) para evitar problemas de copyright. Por razones de consistencia y sencillez, puede usar cualquiera de esas imágenes en sus figuras técnicas. Para añadirlas a su figura, descargue el archivo ZIP de todas las imágenes, seleccione la imagen que desea e insértela en su aplicación gráfica.

Figura 10. Ejemplos de imágenes comunes
Ejemplos de imágenes comunes

¿No ve la imagen que necesita? Solicítela al equipo de gráficos — tenemos muchas otras imágenes estándar y tal vez tengamos lo que usted busca. También puede usar una imagen suya, pero mantenga el estilo sencillo, como el de las imágenes mostradas aquí.


Creando capturas de pantalla

Además de las nueve guías generales para todos los tipos de gráficos, estas guías y recomendaciones son específicas para capturas de pantalla.

Las cuestiones más importantes para capturas de pantalla son tamaño, formato de archivo y herramientas disponibles.

Dimensionando su captura de pantalla

Intente tomar la captura de pantalla más pequeña posible, pero aún legible, al ajustar el tamaño de la ventana del navegador para que incluya sólo la información que desea capturar. No altere la captura de pantalla original, aun si rebasa el ancho especificado en las nueve guías generales para todos los tipos de gráficos. Simplemente envíe el archivo de origen original al enviar el borrador del artículo o tutorial; se redimensionará la captura de pantalla según sea necesario.

Formatos de archivo para capturas de pantalla

Los mejores formatos para salvar sus capturas de pantalla son jpg y gif, ya que están optimizados para gráficos de alto contraste, como interfaces de aplicaciones. Evite formatos comprimidos, como bmp de 24 bits y tif.

Herramientas para capturas de pantalla

Las herramientas de captura de pantalla están disponibles para la mayoría de las plataformas de software. Por ejemplo: SnagIt es una herramienta muy conocida basada en Windows (vea el enlace en Recursos a continuación); además, las herramientas integradas de captura de pantalla específicas de su plataforma también son buenas para usar. Por ejemplo: las herramientas que vienen con Microsoft® Windows®, Apple Macintosh y Linux® son suficientes para capturas de pantalla. (Si necesita capturar algo que no sea una pantalla, como el cursor o puntero, tal vez necesite otra aplicación.) Vea a continuación una recomendación específica para capturas de pantalla perfectas .


Optimizando su captura de pantalla

Elimine todas las barras de herramientas antes de tomar la capturar de pantalla. (Por ejemplo: en una PC, seleccione View > Toolbars > Unselect all toolbars. En una Mac, seleccione View > Collapse Toolbars.)

Usando SnagIt

Los usuarios de Windows pueden utilizar SnagIt para capturas de pantalla (vea el enlace en Recursos a continuación). Recomendamos estos valores para obtener los mejores resultados— y para asegurar que sus gráficos coincidan con el estilo de developerWorks y minimizar el retrabajo:

  • Flechas
    En el SnagIt Editor, seleccione Paint Tools > Arrow Tool. Haga clic en el botón Style y seleccione la primera flecha. Defina Width como 1 y Opacity como 100 (el valor predeterminado), marque Antialias y desmarque Drop shadow:
    Figura 11. Valores de SnagIt referentes al estilo de flecha
    Valores de SnagIt referentes al estilo de flecha
  • Áreas de énfasis
    En el SnagIt Editor, seleccione Paint Tools > Shape Tool. Seleccione la forma que desea usar — preferentemente un rectángulo o círculo. Defina Width como 1, Opacity como 100 (el valor predeterminado), marque Antialias y desmarque Drop shadow:
    Figura 12. Valores de SnagIt para áreas de énfasis
    Valores de SnagIt para áreas de énfasis
  • Comentarios emergentes
    En el SnagIt Editor, seleccione Paint Tools > Callout Tool. En Category, seleccione Arrows o Balloons. En este ejemplo, estamos usando burbujas para los comentarios emergentes, pero los mismos valores se aplican a los comentarios emergentes en forma de flecha. Defina Opacity como 100 (el valor predeterminado) y desmarque Drop shadow:
    Figura 13. Valores de SnagIt para comentarios emergentes
    Valores de SnagIt para comentarios emergentes
    Para el color del comentario emergente, seleccione gray (R:192,G:192,B:192) como color de primer plano (vea la Figura 14) y white (R:255,G:255,B:255) como color de fondo. (Para el texto del comentario emergente, seleccione black (R:0,G:0,B:0), Arial, 12 pt. font.)
    Figura 14. Valores de SnagIt para el color del comentario emergente
    Valores de SnagIt para el color del comentario emergente

Usando herramientas de captura de pantalla de Windows

Windows ofrece dos combinaciones de tecla diferentes para enviar capturas de pantalla al área común. Al usar una de las siguientes combinaciones de tecla, puede pegar la imagen en Microsoft Paint u otro programa gráfico y luego salvarla:

Tabla 1. Capturando pantallas en Windows
Combinación de teclasResultado
Alt+PrtSc (Alt + PrintScreen)Captura la ventana activa, incluso los marcos de la ventana
PrtSc (PrintScreen)Captura toda la exhibición de la pantalla

Si necesita capturar una exhibición de menú, puede hacer clic con el botón izquierdo del ratón mientras presiona Alt+PrtSc o PrtSc. Aplicaciones diferentes tienden a tratar esas combinaciones de teclas en forma diferente — por tanto, usted tendrá que intentar ambas combinaciones de teclas.

Usando herramientas de captura de pantalla de Macintosh

Tres combinaciones de teclas diferentes pueden capturar pantallas:

Tabla 2. Capturando pantallas en Macintosh
Combinación de teclasResultado
CMD+SHIFT+3Captura la pantalla entera
CMD+SHIFT+4Permite arrastrar y seleccionar un área para capturar
CMD+SHIFT+4, luego presione la barra espaciadoraCaptura una ventana, barra de menús, bandeja u otra área (posicione el puntero para resaltar el área seleccionada y luego haga clic con el ratón)

Salve las capturas de pantalla como archivos PDF en el escritorio o péguelas en una aplicación gráfica o documento.

El programa de captura de pantalla de Mac OS X, Grab, también está disponible en OSX y versiones superiores.

Usando las herramientas de captura de pantalla de Linux

La mayoría de las distribuciones de tienen varias herramientas de captura de pantalla. Herramientas gráficas como el GIMP (GNU Image Manipulation Program) y ksnapshot. Las herramientas de línea de comando incluyen el comando import de ImageMagick.

Con el GIMP, use el diálogo File > Acquire > Screen Shot... para capturar una única ventana o toda la pantalla. Análogamente, puede usar ksnapshot para capturar una única ventana o toda la pantalla. Ambos programas de GUI permiten definir un retardo después de la solicitud de la captura, para que usted pueda enfocar la ventana correcta o los menús abiertos.

En ksnapshot, recuerde salvar la captura después de tomarla. Si está usando el comando import desde ImageMagick, puede combinarlo con el comando sleep para que ocurra un retardo para la configuración de la ventana.

Tabla 3. Capturando pantallas en Linux
Combinación de teclasResultado
sleep 5; import -frame snapshot1.pngAguarda 5 segundos y luego captura una ventana (incluyendo su trama) donde usted hace clic con el ratón
sleep 7; import -frame -window 0x1e00079 snapshot2.pngAguarda 7 segundos y luego captura la ventana con id 0x1e00079. Use el comando xwininfo para determinar el ID de una ventana
sleep 3; import -window root snapshot3.pngAguarda 3 segundos y luego captura la pantalla entera

Para verificar el tamaño de sus imágenes, intente el comando identify desde ImageMagick.


Creando una fotografía del autor

Si desea que se incluya su foto al final del artículo o tutorial, envíe una fotografía digital sin retoques. Lo ideal es una foto suya de cara a la cámara, del pecho hacia arriba, con orientación vertical y tomada contra la luz o un fondo blanco sólido. La foto debe tener por lo menos 200 x 250 píxeles para que haya espacio para ajustes. La imagen resultante en el contenido publicado será una foto del pecho hacia arriba (64 x 80 píxeles). Use su nombre y apellido como nombre del archivo.


Paso 3. Envíe sus gráficos a developerWorks

Lista de comprobación final para gráficos

Antes de enviar sus gráficos, usted:

  1. ¿Obtuvo la aprobación de un editor de developerWorks respecto a su idea de contenido original?
  2. Eligió el tipo adecuado de gráfico para mejorar su contenido?
  3. Incluya gráficos que sean necesarios, apropiados para un público mundial, accesibles y legibles; no tengan títulos ni marcos; usen colores seguros para la Web y tengan el tamaño, formato y nombre adecuados (Consulte las guías generales para todos los tipos de gráficos, como también las guías específicas para capturas de pantalla).
  4. Adopte un estilo sencillo y directo.
  5. Use sólo Imágenes estándar relacionadas con computadoras (disponibles para descargar) de propiedad del equipo de diseño gráfico de developerWorks.
  6. Revise las guías para enviar sus gráficos.

Al enviar el borrador final de su artículo o tutorial al editor de developerWorks, envíe también los archivos gráficos. Siga estas recomendaciones:

  • No altere de ninguna manera los archivos de origen de imagen (incluyendo el redimensionamiento).
  • Si usó un programa de tratamiento de texto para desarrollar su contenido e insertó los gráficos — como capturas de pantalla — en el archivo del documento, entregue los archivos de origen de imagen separados del archivo de documento.
  • Si el tamaño total de los archivos de origen que está adjuntando a un e-mail rebasa los 10 MB, sálvelos en un archivo zip/stuffit/infozip antes de enviar por e-mail.
  • Incluya las instrucciones especiales respecto a corte, etiquetado, colores o redibujo. Si sus gráficos no deben alterarse (por ejemplo: fueron generados por computadora o por un programa con UML), avísenos.
  • Si desea fusionar tipos diferentes de imágenes (como añadir fotografías o capturas de pantalla a una figura técnica, como muestra la Figura 3, envíe todas las fotografías y capturas de pantalla originales, como también la imagen alterada, para que puedan ser revisadas según la necesidad pero aún retengan la legibilidad.

Después de la entrega de sus gráficos

El editor de developerWorks revisará todas las imágenes que usted envíe y luego las enviará al equipo de diseño gráfico. El equipo de diseño gráfico puede recolorear, redimensionar, reformatear, cortar, revisar o devolver las imágenes, según sea apropiado. La conclusión de ese proceso normalmente lleva de cinco a siete días.

Color

La Figura 8 muestra la paleta de colores seguros para la Web de developerWorks. Si se necesita alterar un color, el diseñador gráfico intentará dejarlo lo más semejante posible al original.

Figura 15. La paleta de colores de developerWorks
La paleta de colores de developerWorks

Contáctenos

¡DeveloperWorks quiere divulgar su contenido importante a los lectores lo más rápido posible! Si tiene alguna duda acerca de la ilustración de su contenido, contacte a la diseñadora gráfica Victoria Ovens. ¡Esperamos trabajar con usted!


Descargar

DescripciónNombretamaño
Common computer imagestecharticons.zip109KB

Recursos

Aprender

Obtener los productos y tecnologías

  • SnagIt: compre o descargue una copia de evaluación de SnagIt desde TechSmith. Con él, usted puede capturar lo que sea en su pantalla, como una pantalla entera, parte de una pantalla o incluso una pantalla con desplazamiento.
  • GIMP y ImageMagick: esos programas gráficos están incluidos en la mayoría de las distribuciones de Linux y también están disponibles para otras plataformas, como Microsoft Windows y Apple Macintosh.
  • Evalúe productos de IBM: descargue una evaluación de producto, pruebe un producto en línea, úselo en un entorno de nube o pase algunas horas en Recinto de seguridad SOA aprendiendo a implementar la Arquitectura Orientada a Servicios con eficiencia.

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=WebSphere
ArticleID=678868
ArticleTitle=Ilustrando su Artículo o Tutorial para developerWorks
publish-date=06082011