Artisteer: Guía completa para diseñar plantillas web

¿Qué es Artisteer?

Artisteer es una aplicación para Windows que permite diseñar plantillas para páginas web y blogs.

¿Qué es un editor WYSIWYG?

Un editor WYSIWYG (acrónimo de What You See Is What You Get) te permite crear diseños geniales y atractivos con solo hacer clic en las opciones, e inmediatamente verás los cambios reflejados en pantalla.

¿Para qué plataformas de contenidos realiza plantillas?

Las plataformas para las que realiza plantillas son: Blogger, Joomla, Wordpress, Drupal y aplicaciones .NET.

¿Cuáles son sus formatos?

Sus formatos son: .artx, .html, .zip y .xml.

¿Qué partes o sectores posee?

• Barra de título: Aquí se podrá ver el nombre del programa y el archivo que está activo en este momento.
• Barra de Acceso Rápido: Aquí se podrán ver las opciones utilizadas más frecuentemente como abrir, deshacer, guardar, etc. Esta barra se puede desplegar si es necesario.
• Área de trabajo: Aquí se mostrará la plantilla y los cambios efectuados en esta.

¿Qué es la banda de opciones?

La banda de opciones muestra las acciones organizadas en pestañas, tales como Ideas, Color y Fuente, Disposición, Fondo y muchas más.

¿Qué es el botón Artisteer?

• El botón Artisteer desplegará un menú con las principales operaciones de Archivo, tales como: crear un nuevo archivo, abrir uno ya existente, guardarlo, exportarlo y realizar una vista previa en el navegador.
• También podemos acceder a las activaciones y a la información del programa, además de los dos botones que se encuentran en la base del menú, uno para entrar a las opciones del Artisteer y el otro para salir del mismo.

Pasos para subir la plantilla a Blogger

Una vez terminada la plantilla, debes exportarla en un formato acorde al sitio web donde se va a utilizar. Para ello, presiona el botón Exportar o el comando del menú Artisteer y, en el cuadro de diálogo que se abre, escribe el nombre de la plantilla que desees y la carpeta donde guardarás los archivos.

Selecciona también la opción "Exportar como un archivo ZIP" para comprimir y empaquetar los archivos de la plantilla. Si exploras el contenido del archivo zip, notarás que hay muchas imágenes y la plantilla en formato .xml. Todos ellos conforman tu plantilla.

1. Iniciar sesión en Blogger y activar el blog.
2. Ingresar en la sección “Diseño” del blog y hacer clic en el vínculo “Editar Plantillas HTML” en la barra de pestañas.
3. Es recomendable hacer una copia de seguridad de la plantilla que tienes.
4. Para cargar una plantilla que reemplace a la actual, presionar el botón Examinar, explorar el disco y seleccionar el archivo main.xml de la nueva plantilla. Presionar Subir y, al terminar el proceso, guardar los cambios.

Explicación de las solapas

• Disposición: Se podrá cambiar la composición de la página y la ubicación de los elementos.
• Colores y Fuentes: Permite elegir temas de 3 colores predeterminados por el programa o elegir individualmente 3 colores que queramos utilizar y guardarlo como un tema. Se pueden hacer varios cambios a los colores elegidos. Para las fuentes se pueden elegir la tipografía y su escala.
• Menú: Aquí se elegirá cómo queremos que sea cada parte del menú: la barra, los ítems y los subitems. También se encuentra la opción de composición de la página, además de formatos y configuraciones para esta.
• Ideas: Esta pestaña permite generar automáticamente plantillas al azar, modificando el diseño completo o solo algunos elementos que elijas individualmente. Te sugiere colores, tipografías, disposición de tu plantilla, fondo, hoja, encabezado, menú, diseño de artículo, bloques, botones y pie de página, algo que es de gran ayuda cuando recién se comienza a utilizar el programa.
• Fondo: Se puede elegir una opción predeterminada, abrir desde un archivo ya existente o simplemente elegir un color y, a estos, agregarles fulgor, gradiente y textura o imagen que queremos. Si hacemos clic en opciones, se abrirá una ventana en la que podemos colocar la alineación y la transparencia de nuestro fulgor, elegir opciones de textura, la ubicación de la misma, y la altura y el contraste del gradiente.
• Hoja: Puedes elegir una forma predeterminada de la hoja o crearla tú mismo combinando las opciones de ancho, desplazamiento (desde el borde superior), margen interior, radio, ancho y color del borde, la transparencia y variedad de sombras.
• Encabezado: Puedes ajustar el ancho y alto de la cabecera, así como características del bloque de texto y su fondo. También se pueden poner una imagen en primer plano y ajustar su tamaño y posición; un efecto flash; y elegir estilo de título y su color. Si se quiere escribir un título, debes escribirlo en esta pestaña donde dice título, además del slogan.
• Artículo: En esta pestaña te permite definir las características del contenido de los artículos, entradas o post. Puedes configurar:
  • Una imagen base y su estilo, incluyendo la forma, margen, margen interior del texto, relleno, borde, radio y sombra.
  • El formato del texto, tanto del cuerpo del artículo como del título o encabezado y del pie del mismo.
  • Otros elementos como los hipervínculos, las citas, las viñetas, las imágenes y las tablas.
• Barra Lateral: Podemos colocarle estilo a la misma con relleno, fulgor o, en su defecto, no colocarle ninguno. Se puede determinar su composición al igual que en la pestaña “Composición”. Se puede colocar estilos al bloque: su fondo, el espacio entre sus objetos, el encabezado y el contenido. También ajustar los márgenes, el espacio entre las letras y las líneas, el color del texto, los vínculos, las viñetas.
• Menú Vertical: Las mismas opciones que se encuentran en la pestaña “Menú”, aquí las tienes para configurar el menú vertical.
• Botones: Se pueden elegir entre estilos de botones ya existentes o, en su defecto, diseñar tú mismo la forma, el borde, la textura, la gradiente, la sombra, el color de relleno, el color del borde y las características de la fuente del texto.
• Pie De Página: Hay opciones para darle estilos, como ser, el relleno, la textura, la gradiente, la alineación, el margen interior del texto, su transparencia, la fuente del texto, el ícono de RSS y el aspecto del hipervínculo.