Un trabajo mas para el grupo socialtec.
Nueva plataforma de e-learning o formación online.
Realización tanto del diseño del interficie de usuario como el protootipo web.
Categories
Witcamp
Etiqueta: html5
Web para el Master de Estudios internacionales de la Universidad de Barcelona.
Realizado con WordPress creando un theme a medida.
Categories
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.
Categories
Responsive design
Internet ya está dentro de todo, ya no accedemos a la red de redes únicamente desde los ordenadores.
Navegamos desde als pequeñas pantallas de los móviles hasta en grandes monitores o pantallas de smartTV en nuestros salones, pasando por los cada vez mas habituales tabletas.
Al diseñar una web tenemos que ser conscientes de ello, podemos hacer una versión para cada uno de los dispositivos o utilizar la tecnica que llamamos Responsive Web Design (RWD o Diseño web Adaptable) que trata de hacer una plantilla elástica que se adapte a lso diversos anchos y mediante css y un poco de js recolocar los elementos según el tamaño de la pantalla.
Por ejemplo en pantallas grandes podemos mostrar un layout con varias columnas, imágenes a gran tamaño y menús completos, en pantallas de móvil mostraremos el m ismo contenido en una sola columna, escalando las imágenes y ocultando menús.
Aquí un proyecto sencillo utilizando esta técnica. Es un site realizado en WordPress al que he diseñado un theme a partir del 1140gs.
Categories
Ecodigest
Diseño de la imagen corporativa y del website para Ecodigest.
Websit realizado con WordPress creando untema nuevo y adaptable (responsive design).
Todo negocio (empresa, tienda, servicio, etc.) aunque no quiera o no pueda ofrecer servicios online tiene que tener presencia en internet.
Nunca sabremos cuando podremos necesitar un taller mecánico, un buffete de abogados, el supermercado o una peluqueria.
Podemos recurrir a las páginas amarillas, preguntar al vecindário o pasearnos por el barrio buscando lo que necesitamos pero con internet lo tenemos mucho mas facil, tenemos servicios a los que podemos acceder desde nuestros ordenadores, tablets o smartphones. Hoy en dia si no estamos en Google Maps, en Foursquare o Facebook no existimos para muchos potenciales clientes.
Por eso en el desarrollo de una web de este tipo es necesario, a parte de realizar una web atractiva y usable, dar de alta el establecimiento en todos estos otros servicios de geolocalización.
La web de etern centre wellnes es uno de mis últimos proyectos, está realizado con WordPress por lo que es totalmente administrable por el cliente y en el proyecto, a parte de la web en si, se ha contemplado también el tema de Facebook, GoogleMaps y Foursquare así como un servicio de Mailing realizado con MailChimp.
En el diseño, para ahorrar en costes y tiempo, he partido de un tema de Elegant Themes el que he modificado para adaptarlo a la estética y necesidades del cliente.
Categories
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
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:
Object Oriented CSS
View more presentations from Nicole Sullivan
¿Creéis que es una buena metodología?