Archivo de la etiqueta: internet

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.

1er Encuentro Latinoamericano de la Web 2.0

Este jueves 17 de abril se celebra en Bogotá el Primer Encuentro Latinoamericano de la Web 2.0.

Logo Encuentros Web 2.0

En este encuentro se impartirán un serie de conferencias sobre la Web 2.0, que es, el futuro de la web y el estado actual de la misma en Colombia y Latinoamérica.

Tienen toda la información sobre el mismo en la web oficial del evento: encuentrosweb2.com

Yo por mi parte allí estaré, escuchando atentamente a los ponentes e intentando establecer nuevos contacto profesionales.

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.

“Tempus Fugit” al desnudo

Hoy “Tempus Fugit” se queda sin diseño, debido a que este 9 de abril de 2008 muchos blogs se desnudarán. Y lo harán en honor del Día Sin CSS (CSS Naked Day), una idea que persigue hacer notar la importancia de los estándares web.

Si deseas unirte a esta iniciativa, puedes usar el plugin de WordPress Naked Day que automáticamente calcula si es 9 de abril de 2008 para eliminar todas las hojas de estilo.