Categories
BackEnd Develop FrontEnd Design FrontEnd Develop Portfolio Social Media UI/UX

Master en Estudios internacionales

Web para el Master de Estudios internacionales de la Universidad de Barcelona.

Realizado con WordPress creando un theme a medida.

http://www.ub.edu/mei/

Categories
FrontEnd Design Portfolio UI/UX

Caro Hotel

Un trabajo mas para el grupo socialtec.

La web para un nuevo Hotel en el centro histórico de la ciudad de Valencia done la imagen cubre un gran protagonismo ocupando el fondo de toda la página.

Realización tanto del diseño del interficie de usuario como el protootipo web.

http://www.carohotel.com

Categories
FrontEnd Design UI/UX

CSS orientado a objetos (OOCSS)

WEBCAT

Ayer asistí al webcat de Septiembre, un evento mensual en Barcelona dirigido a diseñadores y programadores web dónde ellos  mismos proponen un tema durante el mes y lo exponen ese día ante toda la concurrencia, con la única premisa que la exposición no exceda de loa 10 minutos. 10 minutos son pocos, pero conden mucho ya que las presentaciones suelen ser muy preparadas y dinámicas, y luego de ellas hay un turno de preguntas que enriquezen mucho mas lo expuesto.

OOCSS

OOCSS

Entre otros temas muy interesante (distribuciones de Drupal, desarrollo agil, tipografia y css, …) Harold Dennison nos hizo una interesante introducción sobre el OOCSS (Object Oriented CSS), el CSS orientado a objetos.

Nicole Sullivan es la promotora de esta “filosofia” que en principio esta pensada para optimizar código y ahorrar miles de líneas y por tanto Kb y tiempos de carga y respuesta a grandes webs al estilo de Yahoo o Amazon.

En definitiva la pràctica se trata de optimizar el código CSS y reutilizarlo. Normalmente tendemos a focalizar esta optimización en el código HTML, nos gusta sencillo, limpio y con las menos lineas posibles y esto suele generar un CSS mas complejo y generalmente lo que ganamos, en cuanto Kb, en el HTML lo perdemos en el CSS.

Reutilizar

Solemos crear el CSS siguiendo la semántica HTML del sitio, y creamos estilos asociados a los diversos tags HTML. OOCSS propone separar la estructura (HTML) del skin (CSS) y utilizar y reutilizar al máximo las clases. Por ejemplo en vez de definir h2 {font-size:2em;} utilizar una clase .big{font-size:2em;} y alplicarla <h2 class=”big”>. En principio puede parecer más código, pero si reutilizamos esta clase en otras partes de nuestro site nos podemos ahorrar líneas.

Puede uqe para sitios muy sencillos no ganemos mucho, o incluso compliquemos el HTML un poco, pero creo que es una técnica que nos ayudará a estructurar mejor nuestros diseños.

Para mas información podeis visitar la web de Nicole, http://www.stubbornella.org, dónde encontrareis consejos, tips y presentaciones como esta:

 

 ¿Creéis que es una buena metodología?

Categories
FrontEnd Design UI/UX

10 herramientas básicas para el diseño web freelance

Trabajar como freelance requiere generarse un entorno adecuado para realizar con éxito los proyectos, dedicar el tiempo necesario en un espacio físico adecuado y tranquilo lo mas alejado posible de distracciones (domésticas, ociosas, etc.)

En este post reflejo mis 10 herramientas fundamentales para el desarrollo de mis tareas, no son todas ni son las mejores, simplemente son con las que me siento mas cómodo.

Lo indispensable es un hardware, en mi caso un ordenador portátil ligero pero potente, con buena pantalla (16″, 1600x900px) y tarjeta gráfica dedicada. He elegido un portátil porque si se da al caso puedes transportarlo a casa del cliente, reuniones o trabajar ocasionalmente fuera de la oficina. Para mas comodidad en la oficina tengo un monitor extra (23″, 1920×1080) y un ratón y un teclado completo mas ergonómicos, así como una impresora que cada vez utilizo menos. Para estar conectado permanentemente e incluso realizar alguna tarea (consultar y responder emails, twittear, etc) se ha hecho indispensable un móvil con tarifa de datos, en mi caso un Android de HTC. También dispongo de un pequeño netbook con SO Jolycloud que por su ligereza (menos de 1kg) transporto a eventos o reuniones dónde el móvil se queda corto y  el portátil pesado.

A pesar que en este mundo OSX de Apple es el SO mas utilizado como Sistema Operativo, en el portátil de oficina actualmente utilizo Windows 7.

Las aplicaciones básicas las podemos dividir en 2 tipos, las desktop (que te instalas localmente en tu ordenador) y las online (aplicaciones y u utilidades que viven y funcionan en la internet, “la nube”). Para mi el ideal seria que todas estuviesen en la nube, por lo que no dependerías de un hardware único y concreto sino que podrías acceder a ellas desde cualquier dispositivo. Existen aplicaciones gráficas y de programación online, pero aun no son lo suficientemente potentes y manejables para poder desarrollar un proyecto con agilidad. Actualmente de las 10 aplicaciones que mas utilizo únicamente tengo 3 instaladas en mi ordenador (el navegador, el editor gráfico y el editor web)

  1. Navegador web: Es la aplicación reina, siempre abierta, además de  buscar información es el puente para utilizar todas las aplicaciones, herramientas y utilidades online, así como, gracias a sus plugins, ayudarme a realizar algunas tareas básicas en el desarrollo web (inspeccionar y ajustar códigos, capturar pantalla, etc.). Actualmente utilizo Chrome por su velocidad y simplicidad aunque también tengo instalado Firefox, Safari, Explorer y Opera para testear los sitios que desarrollo.
  2. Editor gráfico: Los diseños, después de plantearlos por escrito y esbozarlos en papel hay que plasmarlos en imagen. En este caso Fireworks de Adobe es mi segundo software mas utilizado ya que está específicamente pensado para este propósito (diseño web). Puntualmente utilizo Photoshop para algún retoque fotográfico, y flash y algún editor de vídeo para las animaciones.
  3. Editor web: Para maquetar y “picar código” (HTML, CSS, PHP, js, …) desde ya hace muchos años utilizo Dreamweaver, también lo utilizo como administrador de ficheros y cliente FTP de mis sitios.
  4. Email: El correo electrónico es fundamental, y poder disponer de él desde cualquier dispositivo (móvil, netbook, tablet, etc) y desde cualquier sitio es vital, por eso he optado por  Gmail de Google, es rápido y potente y en él tengo todas mis cuentas de correo. Desde el mismo utilizo la mensajería instantánea que ofrece la plataforma de Gtalk integrada y sin salir de la web.
  5. Ofimática: Aun Microsoft Office es la suite más utilizada, yo en local la he sustituido por Open Office (abierta y gratuita), pero básicamente utilizo Google Docs para lealizar los presupuestos, facturas, presentaciones, etc. ya que estos documentos se quedan en la nube y puedo consultarlos y editarlos desde cualquier sitio.
  6. Almacenamiento/backups: Disponer de una copia de seguridad de tus ficheros, sincronizarlos desde los diversos ordenadores y a la vez poder acceder a ellos desde cualquier sitio ha hecho de Dropbox una herramienta imprescindible.
  7. Redes Sociales: Estar al día, ver que hacen los colegas, observar tendencias, compartir conocimientos, etc. etc. hacen las redes sociales un medio que  ningún profesional puede despreciar. En LinkedIn tengo mi CV y mis contactos mas profesionales (posibles clientes), twitter es básico para intercambiar feedback con los colegas de oficio y facebook con el mundo en general.
  8. CMS: Para construir y, a posterior, gestionar una web, la mejor alternativa es utilizar un gestor de contenidos (Content Manager System) WordPress es gratuito, sencillo y potente gracias a la cantidad de desarrolladores y plugins que dispone esta plataforma.
  9. RSS: Existen cantidad de blogs interesantes, siempre dedico un momento al día para consultar los posts nuevos en el agregador de feeds, en mi caso Google Reader.
  10. Gestor de tareas: Gestionar las tareas es básico para una buena productividad, y más si trabajas en equipo.  Hiveminder es una buena plataforma online para este menester.

Después en mis bookmarks tengo infinidad de enlaces a herramientas para cosas mas específicas y a multitud de librerías de iconos, tipografías, imágenes, plantillas, tutoriales, etc.

¿Cuales son vuestras herramientas esenciales?

Categories
FrontEnd Design Portfolio

Vallado de piscinas

Vallado de piscinas es  una web de producto: Vallado de todo tipo de piscinas, en toda España

Una web sencilla hecha principalmente para posicionar un producto específico en los buscadores, en este caso vallas de seguridad para piscinas.

Al principio pensé hacerla bajo un gestor de contenidos (WordPress) pero al final opté por montarla con php, ayudandome del .htaccess para hacer las urls amigables. Con esto he podido trabajar el SEO con mas flexibilidad y hacer que valide tanto el CSS como el HTML en W3C.

El prosupuesto no era mucho, además  el vallado de piscinas no es un tema muy creativo. Al final esto es lo que ha salido:

www.vallado-piscinas.es

Categories
FrontEnd Design

El poder del CSS

No es un gif, ni un jpg, tampoco un png ni un flash.

Es el Homer Simpson hecho únicamente con CSS, con la fuente Verdana y jugando con los colores y las posiciones.

Esta genialidad es una creación de Román Cortés y podeis ver una animación de como está construido en esta página.

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(

Y aquí el código: