Lo mio no es el diseño, por eso mismo no me acababa de convencer el diseño anterior, supongo que dentro de unos meses me pasará lo mismo con el disño actual.
Mientras tanto, espero que no os desagrade mucho lo que he hecho, de todas formas, la mayoría de vosotros me visitáis por feed, así que no notaréis mucha diferencia.
Toda crítica es bienvenida, otra cosa es que le haga caso, me da una pereza enorme volver a tocar el css.
Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.
La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.
Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.
Espero que os sea útil
Feng-GUI es una aplicación online que simula la detección de las zonas más llamativas para un usuario, ya sea de tu página web o diseño.
Mediante inteligencia artificial simular la percepción humana y mediante un mapa de calor resalta las zonas más llamativas.
Se puede enviar una imagen o una URL, a mà no me ha funcionado con una URL, pero si se captura la imagen de la web se puede hacer de la misma manera.
Feg-GUI
Elements of Design es una galerÃa de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas al diseño general. Es como CSSMania pero en vez de diseños completos, enfocado únicamente a elementos.
Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda y tipologÃa de cabeceras.
Elements of Design
La gente de SitePoint han publicado un gran artÃculo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artÃculo cómo podÃa pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artÃculo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box
Un buen artÃculo en el que nos explican cómo pasar nuestro diseño a diseño web 2.0. Claro, cada cual tiene sus gustos y sus conceptos de diseño y puede que no esté de acuerdo con todo lo que se dice, pero aún asà es un artÃculo a tener en cuenta.
Resumiendo un poco el post, nos encontramos con los siguientes consejos:
Web 2.0 how-to design style guide
VÃa / dzone
En Intenta siempre encuentro cosas realmente interesantes (aunque la información la han obtenido de DissenyArt). En este caso se trata de una página que nos enseña diseño y como crear ilustraciones, lo cual para quienes somos unos expertos en el copy/paste conceptual, nos va a venir muy bien para aprender y no necesitar tanto del CTRL+C/CTRL+V.
Los tutoriales está muy muy bien, te explican paso a paso cómo lo han ido realizando, con imágenes de cada paso. La única pega que le pongo es que te tienes que bajar un zip y luego descomprimirlo en tu ordenador para ver el tutorial.
illustrionclass.com
VÃa / Intenta
Texture King es un repositorio de texturas para que las utilices de forma libre en tus diseños ya sea de forma personal o profesional. El que sean libres no quiere decir que tengan licencia Creative Commons, por lo que podemos usarlas, pero no podemos distribuirlas.
Las fotos están divididas por categorÃas que corresponden al material de la textura, pero no estarÃa mal que también se pudieran buscar por tags, tipo color, ya que a veces ese tipo de búsquedas nos puede venir muy bien.
Texture King
VÃa / menéame
En BlogMundi nos ofrecen dos interesantes artÃculos que nos ayudarán en el diseño de nuestro blog. En un primer artÃculo nos comentan que tipo de letra usar, ya que no deberÃa ser una elección a la ligera, ya que se deben basar en tres caracterÃsticas:
Que se ajusten al carácter de tu sitio.
Facilidad de lectura en la pantalla del ordenador.
Estén disponibles en diversos navegadores y sistemas operativos.
En el siguiente artÃculo nos hablan entre otras cosas sobre los colores y el contraste que deben tener, el formato del texto, la sencillez del diseño y el formato de los enlaces.
Y ya metidos en el tema, cuando hayamos pensado en el diseño y nos pongamos a crear nuestra estructura XHTML y CSS, podemos usar esta herramienta que nos recomienda aNieto2K, para crearlas automáticamente.
Paso a resumir un artÃculo que nos podrá ayudar a la hora de diseñar nuestras CSS, porque como bien dicen, el poner todos los estilos en un solo fichero ya pasó a la historia.
Algo tan importante como la estructura de nuestro sitio es la organización de las CSS en ficheros, claro que no hay una solución perfecta ya que depende de cada situación.
Una posible solución es la que está basada páginas-modelo, es decir, que existe un diseño diferente para distintos modelos de páginas, por ejemplo un diseño para la página principal, otro para las subpáginas, otro para el portfolio, … Este modelo es útil cuando se trata de pocos tipos de diseño, aunque nos podemos encontrar con estilos comunes entre los distintos diseños, lo que complica la solución. Claro, que este problemilla se puede solucionar de distintas formas:
Otra solución es diferenciar los estilos por elementos de la página, con esto se quiere decir que si nuestra página se crea dinámicamente y hay un fichero para la cabecera, otro para el cuerpo, otro para la navegacion, puede haber perfectamente sus correspondientes estilos, por lo que solo se incluyen los estilos para cada parte que se use.
Parecido a lo anterior es clasificarlo por etiquetas, por ejemplo, si se usan tablas o formularios, unos estilos para estos elementos y solo incluirlas en las páginas que los contengan.
Otros consejos útiles es separar los estilos para print, handheld and screen y usar @import para incluir estilos en un fichero CSS principal.
A parte de la organización fÃsica de los ficheros, tampoco hay que olvidar lo que ya hemos comentado en otras ocasiones que las clases e identificaciones deben tener un significado por su funcionalidad y no por lo que muestran (ej: no usar una clase que sea “rojo”, sino una que sea “error”, el que sea rojo o verde no es significaquivo). Agrupa estilos por contexto y usa comentarios para una mejor localización.
VÃa / Digg
