01.

El fondo de la Web

Disear el fondo de la Web

El fondo de la web y como repetir muchas veces a lo largo del curso es algo que
mal manejado arruinara una Web, podemos pensar que no es importante pero
para ver si lo es o no solo necesitars poner un color realmente llamativo o una
foto psicodlica para ver como afectan estos cambios al fondo de la web.
Si a mi me pregunta alguien yo dir que el fondo para una Web en la que se quiere
destacar el contenido debera de ser blanco en un 80 o 90% de las ocasiones,
pero claro si es una Web de fotografa, artistas musicales o servicios
relacionados con la imagen como esttica, belleza, peluquera pues ah ya
puede ser necesario agregar algn detalle, poner una imagen o darle un color
relacionado con la marca.
Vamos a ver las opciones de configuracin de fondo.
Fondo

En este panel tenemos tres opciones, la primera es la de Sugerir que nos

perseguir por todo el programa y luego podremos definir tanto el color del fondo
como el degradado.
Textura o imagen

Desde estas opciones podemos establecer una imagen de fondo o una textura y
hacer los ajustes necesarios para que la imagen encaje y se muestre
correctamente.

Efectos de luz

Los efectos de luz son unos efectos en los que una imagen se superpone a la
imagen de fondo pudiendo definir algunos parmetros como la transparencia, el
tamao y la posicin as como si queremos voltear la imagen.
Y ahora ya podemos ver el vdeo espero que os guste.

02. Diseando la cabecera

Diseando la cabecera
La cabecera es uno de esos elementos importantsimos y que dependiendo del
tipo de Web suele constar de unas funciones u otras ya que puede ser un rea en
el que albergar unos mens, imgenes, sliders o todos estos combinados de forma
que las combinaciones son infinitas.
Adems podemos ajustar varios aspectos como el ancho y el alto del mismo y
algunas otras funciones de integracin con la Web tal y como vamos a ver primero
a travs de las siguientes imgenes y tras estas con sus respectivas
descripciones, veremos el vdeo en el que estar trabajando con la cabecera.
Ideas

Si no sabemos por donde empezar tal vez debamos empezar por aqu para
tomar unas ideas
Composicin

Elegir la posicin, la altura de la cabecera o el si queremos que se limite el ancho a

la hoja o que por el contrario queremos que tome todo el ancho de la web son
algunas de las opciones que tenemos, pero dependiendo de las configuraciones
de estas podremos acceder a las opciones de borde y sombra que nos pueden
ayudar a destacar esta parte de la web o plantilla.
Fondo

Aunque es un men que se muestra pequeo al solo contar con tres opciones lo
cierto es que nos permitir personalizar en gran medida la cabecera de nuestra
pgina
web.
Podemos empezar por lo ms sencillo, el color que queremos que muestre y la
transparencia,
pudiendo
definir
cuanta
transparencia
necesitamos.
Pero cuando abrimos la ficha de efectos nos encontramos con una nuevo y
completo set de opciones que son las siguientes:

Radio: Para definir si queremos los bordes redondeados

Sombra: Esto nos permite agregar un efecto de sombra para el encabezado

Textura: Las texturas nos ayudan a dar un toque diferente y son un complemento

muy utilizado
Gradiente: Es posible que queramos un degradado pero recuerda no abusar o no

hacerlo muy acentuado puede resultar muy agresivo

Fulgor: El efecto de fulgor es como una textura a la que se le aplica una

transparencia y se funde con el resto del diseo del encabezado

Mscara: La mscara es una especie de textura solo que en esta ocasin se
conservaran las partes rellenas y se eliminarn las partes transparentes

Estas opciones bien trabajadas harn que nuestra cabecera tenga un aspecto muy
llamativo as que no dudes en combinar efectos, agregar, quitar y cambiar hasta
dar con la cabecera que estabas buscando.
Imagen de fondo

Las opciones de imagen de fondo tambin son muy utilizadas en la mayora de

Webs de Internet ya que permiten incluir alguna resea de la web o empresa,
veamos que opciones tenemos.
Posicin: Aqu podemos definir el corte de la imagen que queremos integrar en la
cabecera, mejor lo vemos con una imagen por aquello de que una imagen vale
ms que mil palabras

Luego tenemos la posibilidad de agregar la imagen desde un archivo de nuestro pc

por si queremos subir la que nos de la gana a nosotros y por ltimo efectos, estos
son dos y se limitan a recolorear la imagen que es como una cambio del tono de
color y la otra por si queremos aplicar una difusin a la imagen del encabezado.
Insertar

Desde este men podremos agregar algunos detalles a nuestra cabecera como:

Imagen: Desde aqu podremos agregar imgenes, no una ni dos, no, tantas como
queramos para hacer nuestro collage personalizado ya sea con las imgenes de
muestra de Artisteer, con las nuestras propias o porque no? combinando ambas.
Forma: Aqu podremos agregar algunas formas que bien utilizadas pueden
servirnos para darle un toque diferente a nuestra cabecera o por ejemplo, para
enmarcar el ttulo de la web.
Controles: Desde aqu podemos agregar imgenes con enlaces, accesos a redes
sociales, opciones de buscar e incluso campos de texto para el ttulo y el eslogan
de la Web.
Pase de diapositivas

Esta es una de las funciones que ms dinamismo puede darle no solo a la

cabecera sino a toda la web ya que agregar un slider que ira rotando imgenes.
Las opciones de configuracin son sencillas aunque tambin se expanden mucho
sobre todo en cuanto al navegador.
Nueva diapositiva: Esta opcin creo que es muy clara nos permite agregar
diapositivas
Jugar: Esto lanza una preview y pasa las diapositivas que hemos configurado para
que
veamos
como
quedar
con
las
animaciones
elegidas
etc
Movimiento: Aqu una traduccin que nos ayudara a entender mejor lo que quiere
decir podra ser animacin o incluso transicin ya que nos permite elegir como
se
realizar
la
transicin
entre
una
diapositiva
y
otra
Navegador: Aqu encontramos montones de opciones que nos permiten elegir
como ser el navegador que son esos botoncitos de colores que tienen los sliders
y que nos permiten pasar de una diapositiva a otra sin tener que esperar a que lo
haga de forma automtica
Flash

Aunque (al menos para mi) esta cada vez ms en desuso podemos agregar si
queremos unos curiosos efectos en flash a nuestra cabecera, algo que a mi no me

gusta por aquello de que ya requiere ms complementos la web para funcionar y

luego llega alguien con un iPhone antiguo y no puede ver bien ese

efectillo

03. Definir la composicin de la Web o plantilla

Definir la composicin de la Web o plantilla

A travs de estas opciones y como vamos a ver podremos llevar a cabo muchas
configuraciones generales del sitio que ms tarde podremos refinar ms desde los
otros mens, como por ejemplo y el que acabamos de ver, el de la configuracin
de la cabecera.
Vamos a repasar todas la configuraciones de esta cinta de opciones.
Ideas

Bueno pues el men de ideas.. por si la inspiracin nos abandona.

Composicin de diseo

Mediante las opciones de Composicin de diseo podremos hacer algunos ajustes

que se puede decir que afectan al esqueleto de nuestra Web pudiendo definir en
que posicin se mostrarn algunas reas de nuestra Web como el men o el

encabezado, su tamao o su integracin con el resto del sitio. Pero adems de

estas tenemos otras tres opciones que nos permitirn dar unos retoques ms.
Encabezado: Podemos definir su posicin y su ancho de forma individual
Men: Al igual que con el encabezado podemos definir su posicin y su ancho
Pie de pgina: Sucede lo mismo que con los anteriores
Recordemos que las opciones de composicin las podemos definir con mucha ms
precisin en otras cintas de opciones.
Composicin de hoja

En esta nos encontramos con menos opciones, pero tambin muy interesantes ya
que por ejemplo podemos definir el ancho de nuestra web, ya se de forma relativa
o absoluta, es decir, o mediante porcentaje o mediante un ancho fijo.
Adems tenemos la posibilidad de definir los mrgenes de nuestro diseo, tanto el
que tiene con la parte superior de la pantalla como con el contenido de la web.
Columnas

Las columnas son uno de los elementos que ms me gustan, las considero
imprescindibles salvo en casos muy excepcionales en los que requerimos del
mximo ancho posible pero cualquier blog requerir al menos de una de estas
columnas o sidebar en la que alojar mens, banners, widgets de login y otros.
Las configuraciones que nos permite este men son las siguientes:

Ancho de columna: Aqu podemos definir el ancho de las columnas que hemos
insertado, es algo muy importante ya que a veces trabajaremos con algn widget que
requerir de un poco ms de ancho, o sencillamente, podremos reducir el ancho de

este para darle ms espacio a la parte que muestra el contendido.

Estilo de columna: Esta es una opcin que no suelo utilizar mucho pero que
puede darle un toque diferente a nuestro sidebar, por ejemplo estableciendo un color
de fondo que lo destaque ms, o utilizando otros elementos como fulgor o una simple
lnea separadora.

Margen: Esto realmente afecta al margen de toda la hoja as que no le veo

mucho sentido a que est en este men.

Bloques

Esta es una seccin 100% dedicada a CMS, al menos a WordPress que es lo que
yo manejo habitualmente, los bloques y widgets son esas mini aplicaciones que
encontramos en los CMS y que por ejemplo nos muestran las categoras, el
dialogo de login u otros.
Las opciones de Nuevo Bloque, Widgets y Bloques nos permitirn justamente
agregar este tipo de elementos aunque no olvides que con el uso de WordPress e
instalando algunos plugins los Widgets que podrs implementar desde el propio
CMS ir amplindose, de todas formas y por mi experiencia yo nunca he utilizado
estas funciones ya que es algo que puedo realizar sin problemas desde el propio
CMS, otra cosa ser si estamos trabajando con una Web HTML ya que ah si, ser
necesario agregarlos desde Artisteer.
Y ahora ya puedes ver el vdeo

04. Diseando el contenido

Diseando del contenido

El contenido es el rea en la que se mostrar eso mismo, el contenido de la Web,
es por ello que dependiendo del tipo de Web deberemos de trabajar en un tipo de
diseo u otro.
Yo personalmente para Webs en las que se ofrece informacin y en las que la
lectura es la tarea que el visitante llevar a cabo considero las Webs con fondo
blanco o colores muy claros ideales, con un diseo muy minimalista que distraiga
al lector lo menos posible.

Por otro lado, una web por ejemplo de un pintor, en la que lo importante son sus
obras (imgenes) y en las que la lectura es secundaria podemos sobrecargar ms
el fondo con motivos relacionados con la actividad, servicio o producto ofrecido por
la Web que en este caso puede ser un fondo muy artstico o incluso una de las
obras del autor.
Es por esto que el fondo es importante y afectar en gran medida al contenido,
aunque bueno, podremos definir un fondo distinto para algunas reas del sitio
como veremos ms adelante.
Vamos a proceder ahora a analizar las opciones de contenido de Artisteer.
Ideas

Sin duda Artisteer esta hecho pensando que los usuarios andamos faltos de
imaginacin jejejj
Estilo

Estamos trabajando con la seccin de contenido, es decir, donde mostraremos la

informacin de nuestro sitio, el contenido, y aqu tenemos algunas opciones que
pueden ayudarnos a destacar o enmarcar ests reas, vamos a ver los dos
cuadros de opciones.
Forma: Esta hace referencia al marco donde se muestra el contenido, podemos
especificar un color de fondo, si queremos bordes redondeados o el nivel de
transparencia de ese color que hemos definido. Tambin tenemos la opcin de
eliminar ese marco y dejar el contenido integrado en la hoja.
Estilo de contenido: Aqu entramos en una serie de opciones que depender
directamente de otras configuraciones y que esta muy orientado a CMSs como los
mrgenes entre artculos o publicaciones por ejemplo, pero como ya comento,
depender en este punto de la estructura o de la forma en la que se muestran los
artculos.
Estilo y fuente

Aqu entramos en configuraciones muy orientadas a blogs, aunque tambin

podemos hacer uso de estos en webs HTML ya que podemos utilizar Artisteer para
realizar un sitio Web completamente en HTML incluyendo el contenido del mismo.
Aqu entramos en configuraciones que se puede decir entran muy de lleno en el
mundo del HTML ya que podemos configurar principalmente estilos de:

Ttulos o etiquetas H
Textos
Hipervnculos
Imagen
Tablas
Citas

Podemos ver el impacto de estas configuraciones desde el panel de la izquierda

clicando en Typography.
Parrafo

Estas son opciones que a mi me gsuta llamar opciones de Word ya que estn
muy orientadas al trabajo con el texto al poder configurar por ejemplo la sangra o
mrgenes izquierdo y derecho, espaciado de lnea y entre caracteres, formatos de
listas y alineacin de los prrafos, aqu yo siempre utilizo el prrafo justificado, tal
vez soy demasiado cuadriculado.
Metadatos

Aqu de nuevo vamos con opciones muy enfocadas a CMSs ya que podemos
establecer configuraciones del ttulo de los datos de la parte superior de un artculo
y de la parte inferior veamos un par de imgenes que nos van a ayudar.
En esta primera imagen vemos lo que hace referencia al ttulo, resaltado en rojo.

La siguiente imagen muestra el encabezado de publicacin.

Y por ltimo el pie de publicacin.

Como vemos podemos hacer que se muestre cierta informacin que puede ser
interesante como el autor de una publicacin, la fecha de esta o las categoras
relacionadas entre otras.
Y despus de tanto dibujito podemos ver el vdeo.

05. El men de navegacin

El men de navegacin
Al igual que sucede con el resto de elementos de la Web, este es uno muy
importante, solamente porque es el que va a permitir a los usuarios navegar por
nuestro sitio Web de una forma intuitiva, aunque lo cierto es que no es necesario
un men de este tipo para permitir la navegacin
A continuacin vamos a ver las opciones de configuracin para nuestro men, que
no son pocas ni mucho menos y que nos van a permitir configurar nuestro men
en muchos aspectos.
Ideas

Pues seguimos con las ideas Te has bloqueado y no sabes como empezar?
dale clic a ese botoncito
Composicin

Seguimos con unas opciones que ya nos deben de ser muy familiares, vamos a
verlas.

Posicin: Aqu definiremos donde se ubicar nuestro men, lo ideal para entender

bien las diferentes posiciones es sin duda probarlas y ver como afecta a su posicin
Longitud: aqu tenemos dos opciones, si queremos que ocupe todo el ancho de la
web (pantalla) o si queremos que se ajuste a la seccin del contenido.

Margen: Con esto podemos especificar el margen del men. Recuerda que
dependiendo de su posicin esto afectar de una forma u otra, as que como siempre
digo, lo mejor es que lo pruebes.

Estilos de men

Con esto podemos configurar el como se ve y se mostrar el men, pero para

entender mejor a lo que se refiere esta opcin pienso que lo mejor es ver las
posibles configuraciones que ofrece de base, aunque no olvides que despus
podrs refinar esta configuracin con las opciones siguientes.

Men

Esta configuracin junto con la configuracin de submens son sin duda las ms
complejas debido al gran nmero de opciones y configuraciones que podremos
encontrar, para tratar de facilitar la comprensin de estas dar una breve
descripcin de cada una de ellas.

rea de men: esto hace referencia al rea donde se mostrar el men, ni a los
botones ni a los textos, solamente a la zona que abracar el men y podremos
configurar opciones como el relleno, el borde o si queremos agregar texturas y

gradientes
tem: el tem hace referencia a cada uno de los botoncitos del men y podremos
configurar montones de parmetros como la forma y el tamao, la alineacin y el

margen, la textura, el gradiente o los estilos de texto

Colorear: Aqu tendremos la posibilidad de definir algunas configuraciones

preestablecidas pero que podremos refinar desde las opciones siguientes

Activo, pasivo y seleccionado: El men se compone por decirlo de alguna forma de
botones, aunque no necesariamente tiene que tener este formato. Estas tres opciones
configuran opciones de los tres estados posibles de cada elemento o tem del men y
podremos configurar colores y textos

Submen

La configuracin de submen es prcticamente idntica a la de men salvo por un

par de detalles, vamos a verlos.
No tenemos la opcin de colorear pero si tenemos la opcin de Niveles que
configura la apariencia de este submen, y como he dicho, digo y dir lo mejor
es probarlo.
La segunda gran diferencia y que en un principio puede que no entendamos es
que el submen consta solo de dos estados, pasivo y seleccionado, esto es
porque al hacer clic sobre un elemento de este submen se cerrar por lo tanto no
se muestra el estado activo.
Pgina

Desde aqu podemos elegir algo muy sencillo, Qu pginas queremos que se
incluyan en el men?
Vamos a ver el vdeo

06. Diseo de la hoja

Diseo de la hoja
La hoja se podra definir como toda el rea de la Web y es una parte muy
importante al contener todos los dems elementos de la misma.
La hoja puede constar de varias formas, anchos, mrgenes internos y externos,
tipos de bordes, sombras, transparencia, tipos de bordes y texturas, todo esto bien
combinado nos dar como resultado un diseo espectacular, pero recuerda, un
punto importante del diseo es sobre todo que sea navegable y funcional para el
usuario, una Web sobrecargada de diseo es muy bonita para visitarla una vez
pero si no es navegable, intuitiva y prctica el visitante no querr volver.
Ideas

Bueno, pues otra vez ms y lo que nos queda si nos atascamos siempre
podemos echar mano de este botoncito mgico.
Hoja

La hoja es lo que engloba toda nuestra Web, el contenido y las columnas y desde
este men podremos hacer muchos ajustes de diseo que afectan entre otros a la
forma, los mrgenes y el relleno.
Yo personalmente prefiero no abusar de todas estas opciones ya que soy
partidario de los diseos limpios.
Textura o imagen

Si somos de los que nos gusta llenar de imgenes nuestras webs esta es la opcin
que buscamos, podemos elegir entre la biblioteca de Artisteer o una imagen propia
que ser incrustada en la hoja.
Debemos de tener en cuenta que esta imagen no interfiere en la imagen de fondo
u otras, por lo que podemos buscar combinaciones que den un buen resultado,
aunque repito, soy ms partidario de los diseos limpios.
Ahora vamos a ver un vdeo en el que trabajaremos con la hoja.

07. Los bloques y el men vertical

Los bloques
Los bloques son pequeas reas del sitio Web en las que podemos alojar textos o
cdigos HTML y que son utilizados habitualmente para poner un banner de
publicidad, un logotipo del sitio u otros que ofrezcan funcionalidades o mejoras en
el diseo as como los widgets que puede ser parte del CMS o aparecer con la
instalacin de nuevos plugins.

A continuacin pasaremos a ver las opciones de configuracin de los bloques.

Ideas

De nuevo una ayudita para cuando andemos escasos de imaginacin.

Estilos de bloque

Esta configuracin es muy similar a la de contenido, podremos configurar como se

muestra el encabezado y la parte en la que se mostrar el contenido del bloque,
tambin el fondo y algunas otras opciones que afectan al espaciado entre los
diferentes bloques.
Contenido del bloque

Los bloques pueden contener textos, imgenes u otros y desde estas opciones
podremos configurarlas pero recordemos que estos tendrn una configuracin
distinta a la del contenido del sitio, por lo que debemos prestar atencin ya que lo
ms conveniente suele ser que los estilos de toda la web sean coincidentes y no
que cada parte e esta cuente con estilos diferentes.

El men vertical
Los mens verticales son utilizados para ofrecer un toque diferencial en el diseo,
podemos ver por ejemplo en la webhttp://blog.soporteti.net como se muestra la
seccin de categoras, esta esta integrada en un men vertical.
En este caso si nos detenemos sobre Cursos de informtica on-line y GRATIS
veremos como se despliega el men, estas opciones se configuran a travs de las
siguientes opciones.
Ideas

Si sigues falto de creatividad tal vez este botoncito que siempre se repite te pueda
dar una ayuda.
Composicin

En el supuesto de que estemos trabajando con un sitio HTML o que queramos

dejar listo este men desde aqu podremos indicar la ubicacin del mismo.
Estilos

Si queremos realizar una configuracin rpida esta opcin nos puede servir ya que
cuenta con algunas configuraciones preestablecidas que nos pueden ayudar, si no
tomando un diseo completo si al menos a tener una base con la que seguir
trabajando.
Estos son los diseos que encontramos.

rea de men

Aqu podemos configurar el rea donde se alojar el men vertical, pudiendo

definir los siguientes:

Bloque del men: En este podemos configurar si el men vertical contar con
encabezado, si el encabezado estar aislado del contenido, si estar integrado y
algunas otras opciones
rea del men: Esto afecta a como interactuar el espacio de un men con otro as
como el margen o el tipo de borde
Fondo: Aqu podemos definir el fondo que se aplicar a todo el men vertical y
tenemos las opciones habituales de Artisteer como color de fondo, transparencia y
gradiente entre otras
Encabezado: Aqu podremos ajustar el diseo del encabezado o ttulo del men
vertical y podemos definir configuraciones para el texto, icono, relleno y gradiente
entre otras
Contenido: Esto afecta a la parte en la que se mostrar el contenido del men
vertical y las configuraciones son margen interior, relleno, transparencia, borde, textura
y gradiente

tem

El tem es el elemento principal del men vertical, si hiciramos que se mostraran

pginas en el men vertical digamos que el tem sera la pgina principal y el
subitem la pgina que esta dentro de otra.
Las configuraciones de tem se dividen en:

tem: Aqu podemos configurar la forma, la distancia entre opciones del men y la
altura, Por otro lado podemos configurar el Ancho del borde, la textura, el gradiente, la
sombra el icono o el separador y para terminar tenemos opciones de configuracin de
texto
Colorear: Aqu de nuevo tenemos una serie de preconfiguraciones que podremos
utilizar y que preestablecen valores para el siguiente apartado
Activo, pasivo y seleccionado: Aqu podemos configurar los tres estados posibles
para los tems. Podemos configurar el relleno, texturas y gradientes, color del borde,
transparencia y las opciones de texto, esto para los tres estados.

Submen

Los submens son mens anidados dentro de los tems y se pueden entender
como subpginas, aunque no necesariamente deben de tener este
comportamiento.
En las opciones de Niveles podemos definir el comportamiento de apertura del
submen, pudiendo por supuesto elegir si queremos que este siempre abierto.
La opcin de rea de submen controla el diseo de la zona donde se mostrarn
estas opciones, suele ser interesante por ejemplo dar un color al fondo diferente a
este rea para que se identifique con mayor facilidad.
El resto de opciones son similares a las de tem as que para no ofrecer
informacin redundante no las detallar de nuevo.
Pginas

Esta configuracin es idntica a la de men pudiendo definir que pginas

queremos que se muestren.

En este caso no podemos realizar configuraciones ms personalizadas pero si

trabajamos los mens verticales desde WordPress (puedes ver o realizar el curso
de esta misma Web sin coste alguno) podremos realizar algunas configuraciones
ms.
Y ahora Vemos la peli?

08. El pie de pgina

El pie de pgina
El pie de pgina puede ser una de las reas de una Web que ms desapercibida
pase, pero cuando estamos trabajando con un blog debemos recordar que en esta
zona podemos integrar Widgets, por lo tanto su visibilidad ser mayor y por ende
deberemos de cuidar el diseo de esta zona tambin.
Vamos a repasar al igual que con el resto de secciones las configuraciones que
podemos aplicar.
Ideas

Supongo que has estado leyendo los textos del curso

Composicin

Aqu tenemos dos opciones bastante sencillas, vamos a verlas.

Longitud y posicin: Aqu tenemos tres posibilidades, integrar el footer en la hoja,
dejarlo fuera, o dejarlo fuera y con un ancho que ocupe el 100% de la pantalla.

Margen: Aqu tenemos la separacin que tendr con la hoja (o visto de otra
manera, con el resto de la web) pudiendo incluso configurarlo con un valor
negativo que dependiendo del diseo puede ser una opcin que le de un toque
muy interesante.

Estilo de pie de pgina

Este es el panel de configuracin ms completo de los tres as que vamos a

proceder con el desglose de las opciones que encierra.

Relleno: Aqu podemos elegir un color de fondo para el pie de pgina,

normalmente se utiliza un color que contraste con el resto de la web pero que
mantenga relacin, por ejemplo, si es una Web azul y blanca y predomina el azul en la

Web podemos escoger el blanco para el footer o viceversa

Separador: Esto no es ms que una lnea que podemos utilizar para separar
claramente el footer o pie de pgina del resto de contenido, ideal si mantenemos el

mismo color que en la seccin de contenido

Efectos: Aqu tenemos dos clsicos ya de Artisteer, la textura y el gradiente
Alinear: Con esta opcin podemos alinear el contenido que especifiquemos en el
pide de pgina durante la edicin, recuerda que si luego aades Widgets estos

pueden alterar esta configuracin

Margen interior de texto: Bueno, esta es clara, es el margen que se quedar

entre el contenedor del footer y el contenido

Formateo de texto: Las ltimas opciones relacionadas con el texto, enlaces e
imgenes entre otras afectarn al contenido que se integre en el footer, si queremos
podemos trabajar con una configuracin distinta al resto de la web pero si decidimos
alterar esta deberemos de ser conscientes de que deberemos de configurar todo, ya
que si decidimos utilizar unos colores distintos, o por ejemplo poner borde a las
imgenes tendremos que hacer que todo quede bien integrado. Recuerda que muchas
webs utilizan el footer para poner un mapa de navegacin de la web, banners etc por
lo que es un apartado que puede resultar de utilidad tener en consideracin

Y a continuacin vamos con un vdeo que nos aclarar estas configuraciones.

09. Controles y formularios

Controles y formularios
Los controles nos permiten definir varios elementos de nuestro sitio tales como
botones, campos de texto, los iconos de redes sociales, las cajas de comentarios y
otros, al igual que sucede con el resto deberemos de elegir controles que se
integren bien entre s as como con el resto del diseo de la Web, a continuacin,
vamos a repasar que opciones tenemos.
Ideas

Eso necesito yo, ideas para seguir rellenando esta descripcin una y otra vez
Botn

Desde este panel de opciones podemos configurar los botones de la Web o del
CMS, podemos definir colores del botn, tamaos, borde y efectos como
degradados, texturas y sombras adems de configurar los textos, pero no olvides
configurar los tres estados habituales de este objeto ya que siempre le da un toque
un pequeo brillo al poner el puntero del mouse encima y un efecto adicional para
cuando este se encuentra presionado.

Controles

Este panel podra decir que esta dividido en dos partes, la primera nos permite
configurar el diseo de controles para formularios como el cuadro de entrada, las
casillas o el botn de radio, la segunda esta ms enfocada tal vez a CMS ya que
cuenta con la configuracin del cuadro de bsqueda, el pager o paginador y
comentarios, este ltimo elemento imprescindible para blogs.
Quiero destacar que la parte de comentarios es muy importante, podemos
aprovechar estos para romper con el diseo y darle un toque diferente al sitio
por cierto, vers que doy muchos consejos y que muy pocos los aplico a mis sitios,
esto es porque soy un nefasto diseador y mi imaginacin es inexistente, por esto,
no se me ocurren cosas interesantes para aplicar a mis sitios
Social icons

Bueno.. aqu no hay mucho que contar, es la configuracin de los iconos de redes
sociales que podemos utilizar en el diseo, bsicamente podremos elegir entre
diferentes sets de iconos o mucho mejor, podremos disear los nuestros propios o
utilizar algunos de internet ya que podemos subir nuestros propios iconos.
De nuevo recuerda, es muy importante la integracin, debes utilizar iconos que no
solamente estn acordes con el resto del sitio, si no que tengan una apariencia
similar, poner un icono redondo, otro cuadrado, uno en color otro en blanco y
negro.. no va a quedar muy bien as que intenta que todo el grupo guarde relacin.
Adems recuerda, en el panel de la izquierda de Artisteer tienes una pgina con el
nombre de Controls puedes utilizar esta para ir viendo como se mostrarn los
controles, recuerda, no tengas prisa y dedica el tiempo que estimes necesario a
este apartado.

Y ahora, ya podemos ver el vdeo.

10. Los deslizadores (Sliders)

Los deslizadores (Sliders)

Los deslizadores son sin duda un elemento de diseo importantsimo, nos dan la
posibilidad de agregar gran dinamismo a nuestro sitio Web y destacar
promociones, una seccin especial o incluso utilizarlo para felicitar a nuestros
visitantes por unas fechas especiales, o. una combinacin de todas estas!
Las posibilidades que nos ofrece un slider son enormes, podemos combinar
montones de imgenes en cada diapositiva, podemos realizar un diseo de las
diapositivas con un software externo y luego simplemente cargar estas imgenes
en Artisteer y podemos decorarlo con algunas formas, fondos etc, sin duda una de
esas partes de la web a las que si les dedicamos un buen rato el resultado puede
ser espectacular.
Vamos a ver las opciones de configuracin
Ideas

Si no sabes ni por donde empezar con esto del deslizador, tal vez quieras darle clic
a este botoncito.
Composicin

Aqu tenemos opciones que afectan al contenedor de las diapositivas, podremos

definir la posicin de este, su altura y su ancho, si queremos que disponga de un
margen y algunos detalles que pueden darle un toque ms llamativo como el
borde, la sombra y el radio, todas estas opciones con las que debemos de
experimentar ya que nos podemos sorprender al poner un borde fino o grueso,

agregando una sobra suave o con un borde redondeado mediante la opcin de

radio.
Pase de diapositivas

Aqu entramos en una configuracin que puede confundirnos, algunas de estas

opciones afectarn a la diapositiva actual, otras afectarn al conjunto de
diapositivas vamos a verlas en detalle.

Nueva diapositiva: Si queremos agregar una nueva diapositiva a nuestro slider o

deslizador esta es la opcin que estbamos buscando. Al hacer clic sobre esta
tenemos
varios
opciones:
1. Vacio: esta nos sirve si queremos simplemente agregar una nueva diapositiva sin
nada
2. Duplicar: Esta es ideal cuando queremos hacer por ejemplo cambios en algunos
textos o algunas imgenes pero queremos manetener el diseo general
3. Desde archivo: Tienes las diapositivas en imgenes? esta es la opcin que
necesitabas
4. Ms online: Si quieres probar buscando algunas imgenes por Internet esta es la
opcin
Aadir imagen: Aqu podemos optar por utilizar las imgenes de Artisteer, buscar
algunas por la red o utilizar alguna que tengamos preparada, cabe destacar que esta
funcin esta ms orientada a agregar una imagen a un diseo existente, aunque
podramos cargar una imagen de diapositiva desde este men en una diapositiva
vacia
Aadir forma: Podemos agregar algunas formas a nuestras diapositivas, dentro
de estas formas podemos alojar algn texto o logo y as darle un toque a nuestra
diapositiva
Fondo: Esta es una opcin bastante clara, nos permite configurar el fondo de la
diapositiva, para ello podemos utilizar imgenes o colores y una gran set de efectos
como recolorear, borroso, texturas, gradientes, fulgor o mscara
Jugar: Quieres ver como esta quedando tu pase de diapositivas? haz clic aqu
Movimiento: Desde aqu podremos decidir entre las diferentes transiciones que
nos ofrece Artisteer
Navegador: El navegador son esos puntitos, circulitos o cuadraditos que nos
permiten desplazarnos de forma manual a travs de las diferentes diapositivas
Hipervnculo: Con esta opcin al mantener seleccionado algn objeto del slide
podremos hacer que al clicarlo acte como un link normal y corriente

Y ahora Vemos el vdeo de todas estas opciones?

11. Formateando el texto

Formateando el texto
El texto es un elemento importantsimo y esto es por una parte porque cualquier
motor de bsqueda lo utiliza para saber que hay en esa Web, poder indexarla y
catalogarla de la mejor forma posible, pero, no solo los buscadores requieren el
texto, los usuarios de todo el mundo buscan informacin en formato de texto cada
da, miles de millones de bsquedas se hacen y tu sitio Web puede ser uno de los
que aparezca en esa bsqueda, que te llevar a un usuario y que querr leer ese
contenido, tu contenido.
Por esto, el texto debe ser claro, que facilite la lectura, que no tenga un contraste
agresivo ni un tamao que haga incmoda la lectura, ni por exceso ni por defecto.
Como veremos en el siguiente vdeo hay decenas de textos a configurar, ttulos,
enlaces, listas, prrafos y cada uno de estos elementos puede pertenecer a una
parte diferente del diseo por lo que pulir y hacer un buen trabajo en este sentido
no ser una tarea de cinco minutos, ser una tarea tediosa y a la que debemos de
dedicarle el tiempo necesario.
A continuacin puedes ver el vdeo, pero recuerda, prueba, practica y poco a poco
vers como te resulta ms y ms fcil tomar el control de todo el diseo de tu
nuevo sitio web, debido a que el vdeo pone a prueba una serie de problemas que
podemos tener en esta leccin y de forma especial no describir las opciones a fin
de que prestes ms atencin al vdeo.

12. Ejemplos de trabajo con Artisteer

Ejemplos de trabajo con Artisteer

YA hemos visto todo el entorno de trabajo y solo nos quedar aprender a Exportar
el proyecto, pero recuerda, lo mejos para sacarle el mximo partido a tu Artisteer
es que pruebes, muchas veces creers que algo no puedes hacerlo pero poco a
poco irs descubriendo formas de conseguir personalizar al 100% tu diseo, ya
sea una Web o una plantilla para un CMS.
A continuacin vas a ver tres vdeos en los que he trabajado con el software, pero
tranquil@, esta vez no hay examen, as que solo te pedir algo, presta atencin
porque son una parte muy importante de este curso, en ellos podrs repasar y
recordar montones de conceptos y ver algunos tips muy interesantes que no he
trabajado antes en el curso.

13. Exportar el proyecto

Exportar el proyecto
Ya hemos aprendido bastante con Artisteer, has podido ver en accin casi todas
las funciones y ahora solo te quedar probar y probar pero para poder probar
falta una cosa, sacar esa plantilla o proyecto de Artisteer a HTML o a plantilla de
WordPress.
A la hora de exportar tenemos muchas opciones no solamente podemos exportar a
WordPress o HTML, tambin podemos exportar a:
Plantilla
Blogger
Drupal
Joomla
Tumblr
Sitio de DotNetNuke

de

eBay

Y otros que podremos agregar como por ejemplo sitios PHP.

Ahora presta mucha atencin, porque este ya es el ltimo vdeo y un ltimo
examen te separan de tener un certificado que demuestre que realizaste este
curso, recuerda, la prctica es el mejor maestro as que dejo de tu mano el que
quieras practicar y asimilar correctamente estos conceptos ya que a lo largo de
todo el curso he sido muy meticuloso en explicar las opciones, pero las de exportar
al salirse de la cinta de opciones complican un poco esta tarea por lo que
Quieres hacer valioso este curso? presta atencin al vdeo y haz unas prcticas
antes del examen para que puedas superarlo sin ningn problema.