Archivo de la etiqueta: xhtml

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.

Esquemas URI no oficiales (callto, msnim, etc.)

Ayer, investigando la forma correcta de enlazar correctamente en mi hCard direcciones de contacto de diferentes sistemas de mensajería, descubrí que existen bastantes esquemas de URI no oficiales para los diferentes protocoles que ofrecen las aplicaciones para internet.

A continuación teneis una lista de los que considero más útiles:

  • VoIP (general): callto:<screenname> o callto:<phonenumber>
  • Windows Live Messenger: msnim:[add|chat|voice|video]?contact=<username>
  • GTalk: gtalk:<username>
  • Yahoo! Messenger: ymsgr:sendIM?<screenname>
  • Jabber: xmpp:<username>
  • AOL Instant Messenger: aim:[goim|addbuddy|buddyicon]?<parameters>
  • Skype: skype:<username|phonenumber>[?[add|call|chat|sendfile|userinfo]]
  • Feeds: feed:<absolute_uri> or feed://<hierarchical part>
  • IRC: irc://<host>[:<port>]/[<channel>[?<password>]]
  • Last.fm: lastfm://<radio_stream> or lastfm://globaltags/<genre> o lastfm://user/<username>/<stuff>
  • eDonkey2000: ed2k://|file|<filename>|<size of file>|<hash of file>|/ o ed2k://|server|<host>|<port>|/
  • iCalendar: webcal://<hierarchical part>

Así, por ejemplo, para crear un enlace en una web que inicie una llamada en nuestro programa de VoIP predeterminado, pondriamos:

<a href="callto:+34912345678">Llamar a José</a>

Lo único que hay que tener en cuenta es que no todos los navegadores soportan las llamadas a estos protocolos, pero cada vez están más extendidos.

Teneis más información en la página de la Wikipedia de URI Scheme.

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.

Mi propio CMS

Hoy, leyendo el post “CMS propios” en Delirios de un Informático, me ha entrado la picá de hacerme yo también el mio. Llevaba un tiempo dandole vueltas pero hasta hoy no me lo había planteado en serio.

Antes que nada, he decidido las caracteristicas internas del mismo, que serán las siguientes:

Como buen informático, lo primero que voy a hacer es el análisis del proyecto, centrandome sobre todo en realizar un buen diagrama ER. Os mantendré informados de los progresos…

Surtido de enlaces (II)

¿Energía natural o explotación animal?: Hamster-Powered Night Light (via PocketPC Addict).

Algo de humor: Canciones en inglés que esconden mensajes en español.

¿Te crees todo lo que te cuentan? Échale un vistazo a: “La moderna imagen de Santa Claus fue creada por Coca-Cola” y otras leyendas urbanas (en inglés).

Algo para leer: Nada mejor que una novela libre (y gratuita) de ciencia ficción, Tiempo que perder (vía Barrapunto).

Por algo existe el dicho de “es una trabajo de chinos“, sino que se lo digan a los que tienen que construir el Centro Nacional de Natación de Beijing 2008 (vía AntiPixel).

Para los que comienzan en el mundillo de la informática:
Curso de Introducción a Windows XP
Manual gráfico eMule… para torpes.

También para los que se incian en Linux y buscan manuales de iniciación, les recomiendo que se pasen por esta discusión en Barrapunto sobre documentación para aprender a usar linux. Aunque si ya tienes algo de experiencia y no tienes miedo a probar cosas nuevas, mira esta Introducción a Gentoo.

¿Estas pensando en montar tu weblog y no te decides entre tantos motores diferentes? Pues seguro que hay más de los que crees, sino observa esta lista de Software para bitacoras (vía Barrapunto).

Para poder introducir codigo en los post sin que sea interpretado, nada mejor que: Encode HTML Entities.

¿Cumple tu web los estandares? Compruebalo en A web standards checklist (vía BlogPocket).

A lo que pueden llegar los Delirios de un informático: Brainfuck.

Para los frikis, una de haikus sobre caidas del PC y WordPress (via Nuclear Moose Candy y Serendipity).

— Actualización —
Tuve un problema con los enlaces de este post. Creo que ya estan todos corregidos.

A vueltas con el CSS

Llevo algún tiempo corrigiendo algunos fallos que aparecen en el diseño de mi weblog.
Uno de ellos es un bug de IE que provoca un desplazamiento progresivo del texto hacia la izquierda. Se produce al definir un estilo que utilize conjuntamente los atributos border-left y margin-bottom (cosa que yo hago en las etiquetas blockquotes). La solución a este fallo es el Holly Hack y lo encontré gracias a esta página donde se explica el problema.
Otro problema lo tenia al utilizar el atributo float en las imágenes de las entradas, ya que si el texto se quedaba corto, la imagen tapaba parte de la siguiente entrada. La solución la podéis ver en Minid.net.
Para terminar, vía html life encuentro 10 trucos CSS que tal vez no conozcáis [en inglés], y buscando en Google doy con CSS Bugs and Workarounds, una web que detalla muchos de los fallos de visualización que se producen en diferentes navegadores, así como sus posibles soluciones.