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:

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.

Volver arriba

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.

Volver arriba

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.

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.

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.

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.

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.

Volver arriba

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

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

Volver arriba

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 .

Volver arriba

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
  
  
  
• Á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
  
  
  
• 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
  
  
  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
  
  
  

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:

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:

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.

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

Volver arriba

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.

Volver arriba

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

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.

Volver arriba

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.

Volver arriba

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!

Volver arriba

Descargar

Información sobre métodos de descarga

Recursos

Aprender

• "Authoring with the developerWorks XML templates" (developerWorks, abril de 2010): Comience su experiencia de creación en developerWorks con nuestras instrucciones completas y nuestro paquete de creación descargable.
  
  
• "Authoring with the developerWorks Word and Writer templates" (developerWorks, abril de 2010): Si, en lugar de usar las plantillas XML, usted prefiere componer su contenido en Microsoft Word u OpenOffice.org Writer, también ofrecemos plantillas de Word y Writer para su uso.
  
  
• Guías para autores y política editorial de developerWorks: Aprenda más acerca de nuestra política editorial y vea la "lista de deseos" de contenido de cada editor de developerWorks.
  
  
• Eventos técnicos y webcasts de developerWorks: Manténgase actualizado con relación a los productos de IBM y temas de TI.
  
  
• Sesiones informativas Live! gratis de developerWorks : Actualícese rápidamente con relación a los productos y herramientas de IBM, como también las tendencias de la industria de TI.
  
  
• Demostraciones on demand de developerWorks: Vea demos que van de instalación y configuración de productos para principiantes a funcionalidad avanzada para desarrolladores experimentados.
  
  
• DeveloperWorks en Twitter: Síganos.
  
  

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

• Formulario de envío de contenido: Envíe una idea de artículo o tutorial a developerWorks y comience a conversar con un editor de developerWorks. Vea qué tipo de contenido es más deseado en la lista de deseos de contenido.
  
  
• Información de contacto con el editor de developerWorks: Si tiene dudas, contacte al editor de la zona de producto o tecnología en la cual está interesado.
  
  
• Comunidad My developerWorks: Conéctese a otros usuarios de developerWorks mientras explora los blogs, foros, grupos y wikis para desarrolladores.
  
  

Sobre los autores

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

Califique este artículo

Comentario

Volver arriba

Tabla de contenidos

• Iniciación
• Types of graphics
• General guidelines
• Evitando errores de accesibilidad
• Creando figuras técnicas
• Creando capturas de pantalla
• Optimizando su captura de pantalla
• Creando una fotografía del autor
• Delivering your graphics
• Después de la entrega de sus gráficos
• Contáctenos
• Descargar
• Recursos
• Sobre los autores
• Comentarios