Artisteer es un programa para crear el diseño de nuestra web sin necesidad de conocimientos de HTML, CSS Javascript o PHP. Dispone de una interfaz amigable de la cual explicaremos paso a paso su funcionamiento.
*Aviso: está discontinuado su desarrollo desde hace unos años, por lo que ya no lo podremos usar para hacer plantillas para CMS (WordPress, Joomla!, etc). Aunque podremos seguir utilizándolo para hacer webs en HTML
Hay una versión gratuita del programa , pero no permite guardar nuestro trabajo y añade marcas de agua si lo exportamos a los formatos que permite, que son:
- Proyecto Web en HTML
- Theme para WordPress*
- Template para Joomla*
- Theme para Drupal ( hasta la versión 7 ) *
- Template para DoNetNuke ( lenguaje .ASP soporta hasta la versión 7 ) *
- Plantilla para Blogger *
- Plantilla para Tumblr *
- Y otras plataformas
* ADVERTENCIA: las plantillas y themes de Artisteer ya no funcionan con PHP 7.2 y superiores
El proyecto no se actualiza desde 2015, salvo pequeños parches en cuanto a compatibilidad de las últimas versiones de los Gestores de Contenido WordPress y Joomla y hace poco para poder exportar el proyecto de manera que lo podamos importar en el programa Themler que pertenece a la misma empresa. Otra pega es que su última versión no está disponible para el sistema operativo Mac, para utilizarlo en está tendriamos que instalar previamente una Máquina Virtual con Windows y hacerlo funcionar sobre ésta.
No utiliza Bootstrap para el Resposive Web Design, utiliza su propio framework CSS que explicaremos más adelante, aunque lo podemos incluir tocando el código generado por Artisteer pero esto haaría que aumentaramos considerablemente los ficheros a cargar en nuestra web, afectando en la velocidad de carga ralentizan.
Utiliza JQuery versión 1.9.1 y su propio script de javascript para aplicar el diseño adaptable tanto en el contenido como en el Header.
Una ventaja respecto a otros programas para hacer plantillas de modo visual es que en cualquier momento un mismo proyecto lo puesdes exportar para cualquier plataforma que soporte. En otros programas tienes que especificar en un principio para que plataforma queremos luego exportar nuestro trabajo.
Instalación de Artisteer
La instalación es muy sencilla, una vez descargado el programa hacemos doble click sobre el instalador y damos a siguiente, en el proceso tendremos la opción de elegir el idioma de la interfaz y seguiremos con siguiente –> siguiente hasta que lo tengamos instalado en nuestro disco duro.
Empezando un proyecto
Cuando hacemos click en “Nuevo Proyecto” nos aparece un cuadro de dialogo en el que podemos diferenciar 3 zonas. Podemos elegir entre crear un proyecto desde cero ( bueno… bastante limpio ), cargar una las plantillas que gratuítas que vienen con el programa, pudiendo filtrar en la parte de arriba por temática ) o elegir en la parte derecha alguno de los proyectos que hayamos guardado anteriormente.
La Zona de Trabajo
Una vez cargado el proyecto elegido en el paso anterior entramos en la interfaz del programa.
En la parte superior tenemos un pequeño menú con el típico “Archivo” que nos permite :
- Abrir o Guardar proyectos
- Exportar los proyectos a los formatos de las plataformas soportadas
- Importar el contenido de otro proyecto que tengamos guardado
- Ir a una vista previa en los navegadores que tengamos instalados
Tenemos también una interfaz con pestañas que nos permiten configurar y dar formato tanto a las distintas partes de las plantillas como al contenido de éstas, que podremos incluir a la hora de exportar nuestro proyecto como plantilla.
En la parte izquierda disponemos de la estructura de nuestro proyecto, pudiendo crear páginas y subpáginas así como acceder a una vista donde podemos ver todos los estilos de la tipografía y otra de los controles ( botones, inputs, etc. ) para editarlos más rápidamente.
Las páginas creadas son las que nos aparecerán cuando exportemos el proyecto a HTML o cuando decidadmos exportar el contenido creado a nuestra instalación del Gestor de Contenidos ( WordPress o Joomla ). Podemos crear “Páginas” y “Entradas”.
En la parte central se nos mostrará como van quedando las páginas de nuestro proyecto. Clickando dentro de esta pantalla en cualquier zona se nos seleccionará en el menú superior de pestañas aquella que corresponda para editar la zona seleccionada.
En la parte derecha de la pantalla nos aparecerán opciones más detalladas de la región seleccionada, en la imagen siguiente vemos que ocurre cuando hacemos click en el Encabezado:
Está manera nos da una rápidez a la hora de editar cualquier parte de la plantilla así como el contenido de la misma.
Esquemas de color en Artisteer
Artisteer nos permite fácilmente elegir los colores con los cuales basaremos nuestro diseño. Dentro de la pestaña de menú “Colores y Fuentes” comienza permitiéndonos elegir unos cuantos esquemas de color predeterminados y también una interesante opción que a través de una imagen propia puede sugerirnos un esquema atendiéndo a los colores predominantes en dicha imagen. Luego una vez elegido podremos ajustarlo o cambiarlo totalmente a nuestro gusto.
Elección de Fuentes
En esta pestaña de menú también tenemos las opciones para la elección de las fuentes tipográficas que utilizaremos en nuestro proyecto. Artisteer nos permite elegir dos fuentes, si necesitamos más tendremos que tocar un poco de código, aunque con dos es más que suficiente para tener una buena consistencia en el diseño, utilizar más de dos no es aconsejable, ya que haríamos que aumentase el peso de las páginas siéndo contrapruducente en lo que a velocidad de carga se refiere. Artisteer nos permite elegir entre las fuentes típicas del sistema así como Google Fonts.
Una vez elegidas las fuentes podemos guardarlas como preset para otros diseños
Además de personalizar el tamaño, espaciado entre caracteres o parrafos y demás opciones de manera más rápida haciéndo click en el botón “Tipografía > Editar Tipografía”, aquí nos aparece una ventana donde podremos elegir directamente la tipografía a editar y en la parte de abajo sus opciones.
MENÚ «COMPOSICIÓN»
El menú “Composición” de Artisteer nos permite configurar el Layout / Diseño general de nuestro proyecto web, es decir, aquí podemos elegir qué elementos principales ( Cabecera / Header , Deslizador de imágenes / Slideshow, Ancho del Contenido, Barras laterales y Pie de Página / Footer ).
Composición de Diseño
En primer momento nos encontramos con un selector donde podremos elegir entre unos cuantos presets y justo al lado tenemos unos botones donde podemos personalizar los elemetos del layout. Más adelante veremos que cada elemento dispone de su propia pestaña de menú donde encontraremos más opciones disponibles y personalizar totalmente estos elementos.
Vemos abajo que desde aquí también podemos elegir el ancho de nuestro contenido: fijo en píxeles ( Fixed ) o fluido en porcentaje ( Fluid ), aunque también vemos que a continuación podemos afinar más a la hora de elegir este ancho:
Composición de Hoja
Vemos abajo de estas opciones “Más anchos de hoja” donde al hacer click se nos abrirá a la derecha de Artisteer la columna de opciones avanzadas, a esta columna también podremos acceder haciendo click en el icono de la flechita.
Columnas
Aquí tenemos las opciones para añadir columnas laterales a nuestro diseño pudiendo elegir su ancho, el estilo de las mismas, o sea, si tendrá separador o fondo diferemte al del contenido y luego el margen respecto a la Cebecera, pudiendo poner un margen negativo si queremos que se ponga por encima de nuestro Header. Todo es bastante intuitivo y gráfico.
Bloques
En este apartado configuraremos los apartados que podemos disponer en las barras laterales, encima o debajo del contenido, en WordPress los llamamos “Widgets” y en Joomla “Módulos”, los añadiremos aquí para ver como quedarían en nuestro diseño. Estos bloques son : Menú Vertical, Buscador, Login, Últimas Entradas, Categorías, Archivos y más adelante los podremos personalizar totalmente en la pestaña de menú “Bloques”.
MENÚ “CONTENIDO” ARTISTEER
En este menú de Artisteer tenemos las opciones para el diseño general de nuestro contenido, tanto de páginas como de las entradas o post ( Página de presentación de entradas de una categoría y presentación individual de estos artículos / post del nuestro futuro blog.
Estilo
Básicamente aquí elegimos los márgenes tanto exterior como interior ( padding ), si estará delimitado cada artículo por un borde y si este será redondeado, color y transparencia del fondo si lo tuviera así como si queremos ponerle algún sombreado a la caja lo contiene.
Estilo y Fuente
Opciones de las fuentes que utilizamos en el contenido desde todos los títulos ( H1 … H6 ), párrafos, hipervínculos. Y también las opciones respecto a las imágenes, cual sera su margen respecto al demás contenido, si nuestras tablas llevarán borde por defecto y su color más las opciones de las citas, estas citas las podremos incluir en nuestro contenido vía código, sería el texto que iría dentro de las etiquetas HTMl
* ADVERTENCIA: las plantillas y themes de Artisteer ya no funcionan con PHP 7.2 y superiores
y se suelen utilizar para destacar un texto que fué citado por un autor externo.
Párrafo
Opciones típicas de un editor de texto para los párrafos que aquí editaremos de modo global, afectarán a todos los párrafos de nuestro proyecto web.
Metadatos
En esta parte podemos editar como presentaremos los datos que se presentan debajo del títulos de los post de nuestro Blog, estos suelen ser el icono de la fecha, autor, impresora para imprimis el post, etc. Podemos configurar si se mostrarñan a no, si también mostraremos el icono y elegir este icono entre los que trae Artisteer o subir una imagen propia.
MENÚ “FONDO” ARTISTEER
Opciones de Artisteer en este menú para configurar las propiedades del fondo de nuestra web:
- Color de relleno
- Gradiente (degradado)
- Imagen ( podemos insertar nuestras imágenes. aunque sólo una)
- Efecto ( capa que se superpone al fondo, También podemos insertar propias )
Es interesante poner atención a las opciones detalladas que nos aparecen en la barra lateral derecha para configurar opciones más avanzadas, como es si el fondo se mantendrá fijo o no al hacer scroll en la web o la posición que tendrá la imagen de fondo:
MENÚ “HOJA” ARTISTEER
La “Hoja” en Artisteer se refiere a las opciones del formato de la parte en la que presentamos el contenido principal ( Páginas, Artículos, Post, Barra Lateral y Bloques ). Estas opciones nos permiten especificar si esta parte tendrá borde, ancho de este borde y su radio, si querremos ponerle algún tipo de sombreado y otra vez las opciones de ancho, margen respecto al Encabezado y margen interior ( Padding ).
También podremos elegir el color de fondo y si tendrá alguna imagen o textura de fondo. Y como siempre muy interesante repasar las opciones avanzadas del panel derecho lateral donde encontramos opciones extra de posición de la textura elegida y configuraciones del modo Responsive que analizaremos más adelante
MENÚ “ENCABEZADO” ARTISTEER
Entramos aquí en las opciones para el diseño de nuestro Encabezado o Header de nuestro proyecto web en Artisteer, parte muy importante en todo diseño web y que Artisteer nos da un sin fin de posibilidades. desde las típicas de insertar logo, ancho y alto, fondo, hasta la posibilidad de poner iconos de redes sociales y su enlace, buscador, incluir “posiciones” para que luego en nuestro CMS podamos insertar Widgets o Módulos a nuestro antojo o un pasador de imágenes ( SlideShow ).
Composición
Aquí tenemos las opciones de longitud, margen superior por si queremos que no quede pegado al inicio de la página, altura, borde y sombra, todas bastante intuitivas si vamos viendo sus opciones de configuración.
Un buena practica en configurar el encabezado con la posición en “Hoja Externa” ya que así será más fácil si queremos hacer ciertos efectos con Javascript personalizado una vez exportemos el proyecto finalmete.
Fondo
Elegimos aquí el color de fondo de nuestro encabezado, su transparencia y diversos efectos como gradiente ( degradado ). También podemos añadir dos capas más que Artisteer las llama Textura y Fulgor que se aplican a todo el encabezado y otras capas, las que nosotros queramos que se denominan “Máscaras” pudiendo elegir su forma y estilo así como su posición
Imagen de Fondo
Podemos añadir aquí una imagen de fondo y ajustarla, también editar el color y si atendemos a la barra de opciones avanzadas de la derecha nos aparece una opción más para configurar el Resposive Design o como aparecerá está imagen en dispositivos móviles.
Insertar
Opciones para insertar imágenes en primer plano que luego podremos transformar en Pasadores de imágenes si queremos , “Formas” que son capas configurables en las que podremos insertar textos y capas de fondo y “Controles” que abarca el Logo, Título y Slogan de la página, iconos de redes sociales y “Posiciones” para “Widgets” o “Módulos”.
Luego ya nos quedan las opciones para configurar el pasador de imágenes si hemps optado por poner uno y opciones para inserta archivos Flash ( que no profundizaremos ya que está técnología está en desuso ).
MENÚ “DESLIZADOR” ARTISTEER
Está parte la utilizaremos para configurar un deslizador de imágenes o SlideShow principal en nuestra página que tanto está de moda desde hace unos años y nos sirven para destacar nuestro contenido importante de un vistazo.
Lo malo de está incluir esta opción en Artisteer es que nos lo incluye en todas las páginas que creemos y normalmente se sule utilizar en únicamente en la página principal. Para un proyecto que queramos exportar a HTML la solución sería borrar pa parte de código que incluye al pasador en las pñaginas que no queramos que se muestre, pero si nuestro proyecto lo vamos a exportar a WordPress o Joomla la mejor opción es no incluirlo y optar por algún plugin con esta funcionalidad que de seguro tebdrá más opciones y podremos controlar cuando aparec y cuando no así como crear varios diferentes según nuestras necesidades y contenido de nuestra web.
MENÚ “MENÚ HORIZONTAL” ARTISTEER
Accediendo a está pestaña del Menú de Artisteer tenemos las opciones de configuración de lo que suele ser el menú Principal de toda página web.
MENÚ “BLOQUES” ARTISTEER
Los bloque en Artisteer son porciones de contenido o funcionalidades que suelen presentarse en todas o algunas de nuestras páginas y son independientes del contenido principal que suele ser una página o la presentación de una categoría de artículos esos artículos de forma individual.
Al utilizar WordPress o Joomla estos Bloque se transforman en “Widgets” o “Módulos” en los cuales podemos decidir que funcionalidades se incluirán en estos bloques
MENÚ “MENÚ VERTICAL” ARTISTEER
Opciones para configurar un Menú Vertical en Artisteer que podemos poner en la posición de cualquier bloque. Como siempre en el caso de que nuestro proyecto web se base en WordPress o Joomla lo trataremos como de un Widget o Módulo.
MENÚ “CONTROLES” ARTISTEER
En esta pestaña de menú de Artisteer podremos configurar el diseño de:
- Botones
- Elementos de Formulario ( Casillas de entrada, Checkbox, selectores radiales )
- Casilla del Buscador
- Paginador
- Comentarios
- Iconos Redes Sociales
MENÚ “PIE DE PÁGINA” ARTISTEER
Las opciones para configurar el “Pie de Página” o también llamado “Footer” en Artisteer. Podemos hacer que acupe el ancho total de la página y que quede siempre al final de ésta aunque el contenido no acupe todo el alto de la pantalla del dispositivo en el cual estemos navegando por las páginas. Los demás parametros son como en los demás menús aunque especial mención hay que hacer a que si hacemos click en el footer en la pantalla de trabajo se nos cambiará a la pestaña “Editar” donde podremos configurar un Layout particular para esta parte de la plantilla ( Filas y Columnas ). Si exportamos el proyecto para WordPress cada celda de este Layout la encontraremos como un Widget o en Joomla como un Módulo.
También al abrirse está pestaña de “Edición” veremos que nos permita insertar controles y contenido en las celdas creadas. En los CMS se mostrará en un principio este contenido a no ser que lo personalicemos con un Widget o Módulo.