Archivo de la etiqueta: diseño

Maquetación de una web: II – Material gráfico

Antes de empezar a maquetar, deberíamos contar con todos diseños de la web en formato gráfico. Para mi, el formato ideal es el PSD, estando este bien estructurado y separado por capas, por lo que suelo hablar anteriormente con el diseñador para que me lo prepara de dicha manera.

En otros proyectos en los que he trabajado, para ahorrar costes lo que se hace es diseñar las páginas principales y el resto se estructuran mediante wireframes. Por lo tanto, en estas páginas de las cuales no se tiene el diseño, es el maquetador el encargado de “inventarse” los estilos basandose en las principales. Para mi no es la mejor opción, ya que el maquetador no tendría porque comerse la cabeza pensando en asuntos de diseño, pero a veces no queda más remedio.

Otras veces, por falta de tiempo, no es posible disponer de todas las páginas juntas ya diseñadas, y el trabajo del maquetador se solapa con el diseñador para agilizar el proceso, pero intentaremos evitar esto siempre que sea posible. La razón es que, a la hora de planificar la estructura del código, si se dispone de todas los diseños a maquetar, podemos ahorrar etiquetas HTML y clases CSS innecesarias porque contaremos con una visión más global del proyecto.

En las próximas entradas, utilizaremos como ejemplo un proyecto ideal en el que contaríamos con el diseño de todas las páginas en formato PSD.

Maquetación de una web: I – ¿Qué es y quien debe hacerlo?

En el ámbito del desarrollo web, se utiliza el término maquetación para designar el proceso de conversión del diseño en formato imagen (PSD, JPG, PNG, etc.) a formato HTML (en cualquier de sus variantes). Si bien dicho término no es el más adecuado para referirse a esa labor, es comúnmente aceptado por los profesionales del área. A mi parecer, creo que sería mejor utilizar la palabra “codificación”, aunque el objetivo de esta entrada no es discutir sobre ello.

Generalmente, el proceso de maquetación lo llevan a cabo o el diseñador o el programador, algo que no debería ser así, ya que ninguno de los dos está específicamente preparado para ello. En su lugar, debería existir otro rol dedicado, desempeñado por una persona con conocimientos orientados a dicha labor, como son:

  • Especialista en lenguajes (X)HTML, CSS y JavaScript
  • Amplios conocimientos de accesibilidad y estandares web
  • Nivel medio/avanzado en programas de diseño gráfico (p.ej.: Adobe Photoshop y Fireworks) y codificación (p.ej.: Adobe Dreamweaver)
  • Conocimientos básicos de programación en algún lenguaje web (p.ej.: PHP)

El porque de este rol independiente se explica muy bien en el articulo “El tercer hombre” del blog “Torpe y mal pensado“.

En próximas entradas, expondré todo el proceso que yo sigo para la maquetación de una web, desde la recepción del material gráfico, hasta la entrega de las plantillas finales.

“Zebreado” con CSS

Había visto antes varias soluciones para mostrar código fuente “zebreado” (alternando el color de fondo en cada linea) en las webs, pero ninguna me convencía del todo, más que nada porque se hacía uso de demasiado codigo HTML, usando, por ejemplo, diferentes clases CSS en cada linea de una tabla o en los elementos de una lista.
Así que se me ocurrió intentar conseguir lo mismo utlizando solo CSS, y aquí teneis el resultado.

Para utilizar este método, teneis que seguir los siguientes pasos:

  1. Crear una imagen de 1px de ancho y 32px (el doble de la altura de linea). Los 16px superiores los rellenareis de un color y los 16px inferiores de otro. (La que yo uso es esta: bg-code.png)
  2. (Re)Establecer los atributos CSS de la etiqueta <code> de la siguiente manera:
    code {
      display: block;
      white-space: pre;
      font-family: "Courier New", Courier, mono;
      font-size: 11px;
      line-height: 16px;
      background-image: url(bg-code.png);
      padding-left: 4px;
      overflow: auto;
    }
  3. Cada vez que vayais a poner algún codigo fuente en vuestra web, solo tendreis que englobarlo entre las etiquetas <code> y </code>

Si bien esa es la solución más semánticamente correcta ya que utiliza la etiqueta <code>, en muchos CMS (p.ej. WordPress) tendremos problemas con la misma, debido a que cuando escribimos algo los saltos de linea de texto (n) son automáticamente transformados en saltos de linea HTML (<br />)..
La solución (en WordPress) pasa por utilizar la etiqueta <pre> en vez de <code>, y crear una clase CSS asociada, que usaremos para presentar código fuente por pantalla, de forma que quedaría así:

pre.code {
  display: block;
  white-space: pre;
  font-family: "Courier New", Courier, mono;
  font-size: 11px;
  line-height: 16px;
  background-image: url(bg-code.png);
  padding-left: 4px;
  overflow: auto;
}

Comentar aparte, que si quereis cambiar la altura de linea (line-height), lógicamente tendreis que modificar también la imagen de fondo estableciendo el alto al doble del la altura de linea. Por ejemplo, para un line-height: 14px;, creareis una imagen de 28px de alto.

Generador de botones 80×15

Para todos los aficionados a esos botones que aparecen normalmente en la sección “Meta” de los weblogs, existe una generador web que te ahorrara el tener que ponerte con un programa de diseño: 80×15 Brilliant Button Maker.

Como muestra, haciendo pruebas he creado uno para añadirlo a los todos los weblogs que se alojan bajo el dominio ionosfera.com:

Hosted at ionosfera.com