Archivo de la etiqueta: web

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.

Anuncios

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.

Accesos directos a aplicaciones web

Últimamente, mi navegador Firefox iba demasiado lento debido a los plugins/addons que tengo instalados en el mismo. Me son necesarios para mi trabajo, así que no puedo eliminarlos para agilizar el rendimiento. Debido a ello, me plantee seriamente utilizar un navegador alternativo para la navegación habitual, y dejar Firefox siempre que sea posible solo para fines laborales. Como consecuencia de ello, descubrí las bondades de Google Chrome y su función para crear accesos direcctos de aplicaciones/páginas web.

Os explico el proceso que he seguido, el cual ha repercutido en un aumento de mi productividad y aprovechamiento de tiempo:

  1. Instalé Google Chrome y lo actualizé a la versión de desarrollo.
  2. A continuación creé la carpeta “Scripts” de greasemonkey, la cual hay que ubicarla dentro de la carpeta de perfil de Google Chrome (que se encuentra en diferente lugar dependiendo del sistema operativo), e instalé algunos scripts para Gmail y otras webs.
  3. Despues, utilizando la opción “Create application shortcuts…” del navegador, creé accesos directos en el inicio rápido de Windows a los servicios web que utilizo más a menudo.
  4. Por último, y como extra, gracias a la aplicación Tray It!, mantengo algunas de las aplicaciones web siempre abiertas en la bandeja del sistema (al lado del reloj).

Realmente,  para el usuario medio, no es necesaria la instalación de la versión de desarrollo ni de los scripts, pero las características adicionales que aportan ayudan bastante en el quehacer diario.

Propósitos 2009

Siguiendo el ejemplo de muchos bloguers, pero motivado sobre todos por las entradas de mis ex-compañeros Twentydur y Pura, me he animado a escribir mis propósitos para este año 2009 que comenzó hace ya tres semanas.

Sin más dilación, aquí los teneis:

  1. Abrir la oficina de Dualab Colombia.- Espero que en poco más de un mes esté andando y con una o dos personas a mi cargo.
  2. Permanecer en Colombia.- Y es que hasta que no tenga creada la sociedad, no puedo pedir el visado de trabajo.
  3. Conseguir un apartamento a mi gusto.- Un dormitorio, estudio, gran salón, cocina amplia, suelo en madera, nuevo, y que no sea excesivamente caro… tampoco pido tanto 😛
  4. Hacer más ejercicio.- He empezado mal, por culpa sobre todo de la acumulación de trabajo, pero a partir de febrero, toca apuntarse al gym.
  5. Viajar y vivir la vida.- Nada de quedarse apalancado, hay que disfrutar cada momento de este 2009.
  6. Crear una “web 2.0” exitosa.- Será una de mis tareas en la empresa, conseguir crear un proyecto de la nada y hacer que triunfe. Ideas hay, ahora solo falta tener el equipo humano necesario para desarrollarla.
  7. Escribir más en el blog.- Creo que esto ya es pedir demasiado 😛

El próximo año los repasaré para ver si lo consigo todo, jejeje.

Flexible Box

A veces al maquetar, necesito hacer cajas que sean flexibles tanto en alto como en ancho, y que tengan bordes redondeados y/o sombreados.

Flexible Box

Lo interesante es conseguirlo utilizando el menor número de etiquetas XHTML posible, un poquito de codigo CSS y solo una imagen para el fondo/bordes, así que hace unos días me preparé un “code snippet” para reutilizar en mis proyectos.

Existen un par de trucos para conseguir lo que quiero:

  1. Una imagen de lo que sería una caja, a un tamaño lo suficientemente grande como para que nunca se quede pequeña en ancho y alto. Recomiendo que sea un PNG, porque por muy grandes que sean sus dimensiones, el tamaño del archivo apenas aumenta.
  2. Utilizar semanticamente las etiquetas XHTML, para no tener DIVs vacios y cosas así.

Aquí teneis el código para su descarga: flexible-box.zip

Solo lo he testeado en Internet Explorer 6 y en Firefox 2.x, así que no puedo asegurar que se vea del todo bien en otros navegadores. Pero en todo caso, para lograrlo sería cuestión de añadirle algunos “hacks”. Cuando tenga un rato lo comprobaré para darle mayor compatibilidad.

“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.

Acerca de los nombres de la imágenes en la web

A raiz de una entrada en Algo que hacer acerca de los guiones altos y los bajos en las URLs y como son tratados de forma diferente por los motores de busqueda, se me ocurrió que probablemente esto también se trendría en cuenta a la hora de clasificar las imagenes que se encuentran el las webs.
Para comprobarlo he realizado unas pruebas de búsqueda en Google Images utilizando como ejemplo el logotipo de WordPress. Estos son los resultados:

  • wordpress logo: 257 resultados / Primera imagen concordante en la posición 37 (página 2) / Devuelve imágenes que contienen en su nombre los términos de busqueda separados por guión bajo, guión alto o punto
  • wordpress-logo: 21 resultados / Primera imagen concordante en la posición 1 / Devuelve imágenes que contienen en su nombre los términos de busqueda juntos o separados por guión bajo, guión alto o punto
  • wordpress_logo: 4 resultados / Primera imagen concordante en la posición 1 / Devuelve solo las imágenes que coinciden exactamente con el término de busqueda (no interpreta el guón bajo como separador)
  • “wordpress logo”: 19 resultados / Primera imagen concordante en la posición 1 / Devuelve imágenes que contienen en su nombre los términos de busqueda separados por guión bajo, guión alto o punto
  • wordpresslogo: 3 resultados / Primera imagen concordante en la posición 1 / Devuelve solo las imágenes que coinciden exactamente con el término de busqueda

Visto los resultados podemos sacar un par de conclusiones:

  1. A la hora de nombrar las imagenes que se van a utilizar en una web, sería recomendable separar los terminos mediante un separador, ya sea un guión alto o bajo. Siguiendo con el ejemplo anterior, nombres apropiados para la imagen serían wordpress-logo.gif o wordpress_logo.gif.
  2. Al realizar en Google una búsqueda de imagenes de varios términos, la forma de introducirlos para que devuelva los mejores resultados sería separando los mismos mediante guión alto o, como segunda opción, englobándolos entre comillas dobles. En nuestro ejemplo: wordpress-logo o “wordpress logo”.