Qué es Artisteer? Comenzando un Proyecto

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.

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 ( Posibilidad de maquetar y exportar contenido)
  • Template para Joomla ( también con la opción de incluir el contenido de los artículos y exportarlo a una instalación del CMS, hay algún problema con la versión 3.6 en la presentación de los módulos)
  • Theme para Drupal ( hasta la versión 7 )
  • Template para DoNetNuke ( lenguaje .ASP soporta hasta le versión 7 )
  • Plantilla para Blogger
  • Plantilla para Tumblr
  • Y otras plataformas

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

 

Menú Artisteer

 

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.

menu pestañas artisteer

 

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

 

edicion paginas artisteer

 

 

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:

 

Artisteer seleccion zona a editar

 

Está manera nos da una rápidez a la hora de editar cualquier parte de la plantilla así como el contenido de la misma.

En breve empezaremos con tutoriales detallados de cada sección.

8 respuestas a Qué es Artisteer? Comenzando un Proyecto

  • Tengo la versión estandar, es posible quitarle los créditos de wordpress y artisteer que están en el footer al final de todo ??
    No me parece muy razonable que con un programa de pago siga manteniendo los créditos del creador, si lo compras y lo pagas.
    Muchas gracias por toda tu ayuda que no es poca.

    Un saludo.

    • Hola Jordi, claro que es posible, para quitar estos créditos debes ir en la pestaña “Inicio” al apartado “Opciones” y en la ventana que aparece ir a la sección “Nota al pie de página” , aquí puedes ver una casilla para activar/desacivar esta opción.

  • Muchas gracias, efectivamente he visto como eliminar los créditos del autor, tal y como me has dicho.

    No quisiera abusar y molestarte pero tengo un problema con el menú de Artisteer.

    No he visto como crear pestañas del menu principal, sin necesidad de que tengan ningún hipervínculo, es decir para crear una pestaña que solo tiene la misión de abrir las subpestañas.De manera que si clicas sobre la misma pestaña principal en el menu, no pasa nada porque no está enlazada a ninguna página.

    Hasta ahora no se como abrirla, parece que estoy obligado a abrir una nueva página para hacerlo ?

    Tienes fanpage en facebook ??
    Muchas gracias.

  • https://dl.dropboxusercontent.com/u/52530216/pesta%C3%B1as.jpg

    Aqui te dejo una imagen de ejemplo de la web que tengo que montar.

    Verás que hay una pestaña principal “serveis”
    y dos subpestañas, ( mecànica y carrosseria)

    Lo que necesito es como hacer la pestaña “serveis” sin crear ninguna página, que solo sea una pestaña
    inactiva, solo para abrir las subpestañas.

    Muchas gracias.

Deja un comentario

Qué es Artisteer? Empezando un Proyecto Web - HTML, WordPress, Joomla