Cliente: Hotel Suite Albayzín del Mar

Mi aportación al proyecto:

Diseño gráfico, Desarrollo en WordPress, Administración del sitio, SEO y SEM, gestión de redes sociales y perfil profesional, blogging.

Suites Albayzin del Mar es un hotel cuatro estrellas situado en la ciudad de Almuñécar (entre Motril y Nerja) uno de los destinos turísticos más solicitados de la Costa Andaluza .

Desarrollar estrategias para conseguir la mayor ocupación desde la Web oficial de un hotel es una tarea difícil en los tiempos que corren. Los grandes canales de distribución como Booking invierten en promoción y posicionamiento una buena parte de las comisiones que cobran y competir contra ellos requiere de mucho esfuerzo.

La mayoría de los hoteles en España no cuentan con un sitio Web con una estructura abierta a la implementación de estrategias de SEO, ni dispone de personas dedicadas a tiempo completo al mantenimiento del mismo y de sus redes sociales.  No existe aún la voluntad ni el conocimiento necesario para invertir en estos temas, y estos hoteles no son capaces de generar ventas directas porque carecen de personas dedicadas a la busqueda constante de nuevas estrategias para su crecimiento.  Siempre es más fácil recurrir a los canales de distribución privado como Booking o a las ventas tipo flash.

En el Hotel Suites Albayzin del Mar son conscientes de estos problemas y se comienzan ya a dar los primeros pasos en este sentido. Al nuevo diseño se añade la integración a las redes sociales: Facebook, Twitter… y un blog como “estrategia para dar valor al producto”  y “mejorar la experiencia del cliente”. Así como la posibilidad de brindar al usuario otros recursos multimedia con los videos  y la visita virtual de 360.

Tecnología:

Photoshop, Illustrator, xhtml/css, WordPress.

Estado del sitio:

Online. Visitar el sitio Web →

Cliente: Pharmagibam

Mi aportación al proyecto:

Diseño gráfico, Desarrollo en WordPress

Tecnología:

Photoshop, Illustrator, xhtml/css, WordPress.

Estado del sitio:

Online. Visitar el sitio Web →

Cliente: Jenaro Rodriguez

Autor: Gustavo Falcón

Mi aportación al proyecto:

Analisis de proyecto, diseño del logotipo “HacerteFotos” instalación y adaptación de una plantilla wordpress, instalación y configuración de plugins

Tecnología:

Photoshop, Illustrator, xhtml/css, WordPress, ImageOptim, Fontsquirrel.

Estado del sitio:

Online. Visitar el sitio Web →

Cliente: Gar-Anat. Hotel de Peregrinos

Autor: Gustavo Falcón

Mi aportación al proyecto:

Diseño del logotipo “El Retablo de Gar-nat”,  diseño gráfico folleto (díptico), diseño gráfico del cartel Papobo y Delirando, diseño de la presentación y promoción en el sitio Web,  diseño y gestión de la campaña de email marketing.

Tecnología:

Photoshop, Illustrator, xhtml/css, campaignmonitor.

No poder hacer uso de la tipografía como elemento decorativo y de comunicación gráfica ha sido siempre una limitación en el diseño de paginas Web. Hasta hace muy poco si queríamos que nuestros diseños se vieran más o menos igual para todos los usuarios había que conformarse con unas cuantas fuentes que ya sabíamos que estaban  instaladas en la mayoría de los ordenadores, otra solución era la de convertir nuestros textos en imagenes que luego podiamos usar de fondo. El trabajo se complicaba cuando había que traducir esas paginas a diferentes idiomas, o necesitábamos que esos textos cambiarán dinámicamente. En el primer caso habia que crear esas imagenes en todos los idiomas, el segundo no tenia solución.

Durante estos años han ido surgiendo ideas muy ingeniosas para resolver el problema, pequeños “trucos” para engañar y obligar a los navegadores a mostrar nuestras fuentes, pero en su mayoría, al día de hoy, todas estas técnicas todavía presentan muchas limitaciones.

La más simple y flexible de todas estas tecnologías, la que ofrece mayor compatibilidad entre navegadores y parece tener un futuro como la solución definitiva al problema, es @font-face.

¿Que es @font-face? La teoría

Básicamente @font-face es una simple regla css incluida en tu pagina Web  que  enlazada directamente al archivo de una tipografía que previamente has subido a tu servidor. Esta regla es interpretada por el navegador que es el encargado de embeber la tipografía.

El metodo más conocido para implementar la regla @font-face se basa en el siguiente código:

/*Regla @font-face*/
@font-face {
 font-family: 'Mi fuente';
 src: url('mifuente.eot');
 src: local('☺'),
 	url('mifuente.woff') format('woff'),
	url('mifuente.ttf') format('truetype'),
	url('mifuente.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
/*Asignando la nueva tipografía a un elemento html*/
h1 {
	font-family: 'Mi fuente', 'Arial Narrow', sans-serif;
	color: #897048;
	background-color: #fff;
	text-shadow: 2px 2px 2px #000;
	font-size: 15px;
}

Vamos a explicarlo. Primero destinamos un nombre a nuestra fuente, es el nombre que usaremos cuando asignemos a cualquier elemento de texto de nuestra pagina la propiedad font-family, en el ejemplo le hemos puesto “mi fuente”, un nombre cualquiera, pero por una cuestión de lógica y para evitar conflictos debería coincidir con el nombre real de la tipografía. Finalmente le decimos al navegador donde esta alojada la fuente que queremos que sea embebida.

Habrás notado que en vez de cargar simplemente un archivo .ttf o un .otf,  estamos llamando además a varios tipos de archivos (woff, eot, svg) en realidad  son archivos de la misma tipografía convertida a diferentes formatos y esto hay que hacerlo así por un inconveniente, el de siempre: La incompatibilidad de los navegadores.

Aunque la regla @font-face esta incluida oficialmente en la especificaciones Css3 de la  W3C y ha sido ya incorporada a todos los navegadores modernos, cada uno de ellos la interpreta a su manera y necesita de un  formato de tipografía diferente:

• Internet Explorer solo soporta EOT (.eot)
• Algunas versiones de Firefox soportan OTF (.otf) y otras TTF (.ttf)
• Crome soporta TTF (.ttf) y SVG (.svg)
• Safari para el iphone o el ipad soportan SVG (.svg)
• WOFF (.woff ) es el nuevo formato soportado por Firefox 3.6 y se comenta que en el futuro será el formato estándar para embeber fuentes en la web

Continuamos explicando el resto del código, justo debajo de la regla @font-face aparece una regla css común y corriente que nos hemos inventado para demostrar como una vez declarada  la regla @font-face se puede empezar a aplicar esta a los diferentes elementos de nuestra pagina.  A modo de ejemplo le hemos asignado a todos los titulares del tipo h1 la tipografía “mi fuente” seguida de otras fuentes más comunes que podrían funcionar en su defecto ( esto es por si algo fallara)

En el ejemplo he añadido a propósito la propiedad “text-shadow” que pone sombra debajo del texto, con ello quiero destacar que la combinación de @font-face y otros efectos como sombras, gradientes o transparencias, que han sido incluidos recientemente en las especificaciones Css3, ofrecen una solución y un control de la tipografía hasta ahora nunca visto.

Bueno, si has llegado hasta aquí seguramente estarás pensando en lo laborioso que sería tener que convertir tu tipografía a todos estos formatos. Afortunadamente ya hay soluciones para  resolverlo rapidamente y  lo vamos a ver con un ejemplo práctico, utilizando la herramienta online @font-face Generator

@fon-face en 3 sencillos pasos

Nuestro ejemplo

Vamos a crear una pagina donde usaremos dos tipografías open source. Podríamos usar cualquiera de nuestras fuentes siempre que sean libres de derecho o poseamos las licencias correspondientes ( Tipografía digital licencia de uso )

Tipografía Raleway [ Descargar ]
Tipografía Junction [ Descargar ]

Una vez descargadas las tipografías, nos dirigimos a la pagina de @font-face Generator, y realizamos los pasos descritos a continuación:

1. Agregar los archivos fuentes

   Presionando el botón addFonts añadimos los archivos desde nuestro ordenador, pueden estar en formato .ttf o en .oft (eso da igual)

2. Aceptar las condiciones

   Marcar este campo, es obligatorio y significa que somos concientes de que nuestra tipografía esta libre de derechos o la hemos adquirido legalmente.

3. Descargar el paquete

   Una vez aceptadas las condiciones, aparecerá debajo el bótón Download your kit , haciendo clic en el obtendremos los archivos ya convertidos, y una pagina de ejemplo con los códigos necesarios para poder aplicar estas tipografías en nuestra propia pagina Web

Las reglas @font-face que hemos obtenido en nuestro ejemplo son las siguientes:

/*Regla @font-face*/
@font-face {
	font-family: 'RalewayThin';
	src: url('raleway_thin-webfont.eot');
	src: local('☺'), url('raleway_thin-webfont.woff') format('woff'),
	url('raleway_thin-webfont.ttf') format('truetype'),
	url('raleway_thin-webfont.svg#webfont7lM6WtMu') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
@font-face {
	font-family: 'JunctionRegular';
	src: url('junction_02-webfont.eot');
	src: local('☺'), url('junction_02-webfont.woff') format('woff'),
	url('junction_02-webfont.ttf') format('truetype'),
	url('junction_02-webfont.svg#webfont8tPLjOKT') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
/*Creando clases para aplicar estas reglas*/
 
.RalewayThin {
			font-weight: normal;
			font-style: normal;
			line-height:normal;
			font-family: 'RalewayThin', sans-serif;
			font-size-adjust: 0.52;
		}
 
.Junction {
			font-weight: normal;
			font-style: normal;
			line-height:normal;
			font-family: 'JunctionRegular', sans-serif;
			font-size-adjust: 0.55;
		}

Otras opciones para implementar @font-face:

¿No quieres complicarte la vida convirtiendo tipografías? Aquí tienes algunos servicios que harán esta tarea aún más fácil.

FontSquirrel Kit

Si no queremos usar nuestras propias fuentes FontSquirrel nos ofrece cientos de tipografías libres de derecho que no será necesario convertir, porque se nos permite descargar el Kit o el paquete con todos los archivos y el código necesario.

Librería de fuentes FontSquirrel

Awesome Fontstacks

Esta herramienta es muy útil, nos permite visualizar las fuentes disponibles en FontSquirrel a la vez que sugiere mediante ejemplos de estilos una combinación de fuentes optima para obtener los mejores resultados.

Awesome Fontstacks

Google Font Directorio

Un servicio de Google para implementar @font-face, donde se puede elegir entre un número todavía bastante limitado de fuentes (prometen aumentar su número en los próximos meses), pero de muy buena calidad y la ventaja de que el código que te proporcionan no requiere que la tipografía este alojada en tu propio servidor.

Google Font Directorio
Google Font API
Visor de Fuentes
Fontcomparer

Conclusiones

Antes de ponerte manos a la obra ten en cuenta un aspecto fundamental,  comprueba que la tipografía que quieres usar este lo más completa posible, que reúna los caracteres necesarios para el idioma que vas a mostrar, los acentos o los estilos…

Deberías saber que existen muchos servicios de pago por mesualidades o de pago único que ofrecen una amplia variedad de tipografías de alta calidad. Previo pago, estos servicios se hacen responsables de las licencias de la fuente y te proporcionan el código @font-face que podrás usar en tu pagina,  en todos los casos, la tipografía no estará alojada en tu servidor.

Con la combinación de @font-face y el resto de las reglas CSS3 se pueden lograr diseños verdaderamente hermosos.

¿Porque este blog?

Lo que se escribe se recuerda mejor que lo que se lee, así que escribir me ayudará a organizar mis pensamientos mientras trabajo y aprendo. Como tu también vas estar por aquí será estupendo poder compartir opiniones. Yo te iré contando de lo aprenda, porque es bueno enseñar como requisito previo para aprender. Intentaré explicar bien cada tema, lo evidente debería ser  siempre correctamente explicado y argumentado aunque se corra el riesgo de parecer tonto.

Un blog temático

En el blog se abordarán temas relacionados con el diseño Web y el diseño gráfico en general. Hablaremos también de estrategias de marketing, y de  Seo,  así como de otros temas relacionados con la tecnología. Ocasionalmente contaré alguna que otra vivencia personal.

Anatomía del blog

El blog y la pagina de Acuapixel en su totalidad se gestionan con WordPress, en mi opinión uno de los mejores CMS que existen actualmente para desarrollar un blog, principalmente por su orientación al tratamiento de los estándares Web y la usabilidad.

Para lograr la apariencia actual del sitio y crear  las funcionalidades que yo deseaba,  antes tuve que modificar todo el código y los estilos de la plantilla seleccionada. Explorar en las entrañas de WordPress fue divertido y nada complicado teniendo en cuenta la extensa documentación que existe en la red acerca de este sistema de gestión de contenidos. Cumple su objetivo, funciona!

Paralelamente he instalado algunos plugins de corte “social” para enriquecer el contenido, trasladando hacia el blog una parte del  flujo de información que voy generando en Twitter y en Flickr.

¿Porque se llama Acuapixel?

El nombre evoca dos largos periodos que marcan mi vida. El primero (acua) esta relacionado con el mar, porque yo estudie la carrera de Geofísica y pase luego mucho tiempo vinculado al tema de las investigaciones marinas. El segundo periodo (píxel) evidentemente tiene que ver con el trabajo que realizo actualmente.

Sientase libres de opinar. Como en vuestra casa.

Cliente: Hotel Finca Los Llanos

Autor: Eideo

Mi aportación al proyecto:

Análisis y redacción del proyecto, arquitectura de la información, wireframing, diseño de la interface de usuario, diseño gráfico, maquetación css, implementación de funcionalidades javascript.

Tecnología:

Photoshop, Illustrator, xhtml/css, jQuery, Cufón

Estado del sitio:

Online. Visitar el sitio Web →

Cliente: Nomade

Autor: Eideo

Mi aportación al proyecto:

Diseño gráfico y composición del flyer plublicitario, diseño gráfico para el fondo del expositor acrílico.

Tecnología:

Photoshop, Illustrator.

Estado del proyecto:

Finalizado.

Cliente: Lasergrand

Autor: Eideo

Mi aportación al proyecto:

Diseño del logotipo, desarrollo de la imagen de marca, elaboración del manual de identidad.

Tecnología:

Illustrator, Photoshop

Estado del proyecto:

Terminado.