La programación de una web abarca diversas áreas, cada una con sus propias necesidades y lenguajes de programación, y por ello es necesario que sean varias las personas inmersas en ellas. Nos encargamos de todo el proceso de programación de una web, desde la maquetación inicial según los estándares (X)HTML y CSS del diseño original de la web, hasta el desarrollo a medida del gestor de contenidos.
Maquetación web: XHTML + CSS
La maquetación de una web consiste en plasmar mediante distintos lenguajes las interfaz gráfica de la web que se ha definido previamente en el diseño. Conseguirá que lo que antes era únicamente un boceto, se convierta en un sitio web que se podría ver correctamente en cualquier navegador, con sus enlaces, rollovers,... Aunque puede parecer una tarea relativamente sencilla, a la hora de maquetar una web hay que tener en cuenta un buen número de factores, que afectarán notablemente a la calidad final del producto.
Mientras que HTML es el lenguaje que se encarga de definir la estructura de cada sección del sitio web, CSS se utiliza para aplicar estilos visuales a ese código HTML. Por ejemplo, si en HTML se ha especificado una porción de código que indica que existe un menú de navegación con diferentes opciones, será desde CSS donde se indique la apariencia que tendrá ese menú (alto, ancho, colores, disposición vertical u horizontal,...).
Aunque ambos lenguajes son estándares web, la forma de implementarlos en los distintos navegadores (Internet Explorer, Firefox, Chrome,...) cambia ligeramente de uno a otro, y se debe prestar especial cuidado, para conseguir que un sitio web se vea correctamente en todos los navegadores.
Con la cercana aparición de HTML5, se añaden al lenguaje HTML nuevas funcionalidades, que iremos aplicando a nuestros proyectos según se vayan expandiendo. Entre ellas, una de las que ya estamos aplicando, es la que permite dotar de mayor semántica al código generado, de forma que lo que antes para los navegadores y buscadores era únicamente sólo era un conjunto de bloques con un orden establecido, ahora se podrá especificar el tipo de contenido de cada bloque, pudiendo indicar qué parte es la cabecera, el pie, el menú de navegación, o el contenido de la sección.
Navegabilidad y Usabilidad
Una correcta maquetación de una web, debe facilitar al trabajo al visitante de una web, permitiéndole localizar todos los elementos de forma sencilla, y simplificándole el proceso de navegación por la web, incorporando elementos que ayuden a esa navegación, como pueden ser localizadores (o migas de pan) que le indiquen en que sección se encuentra, botones para volver a secciones anteriores, o incluso completos mapa web y/o buscadores que le ayudarán a localizar la información que está buscando.
Aunque preparar estos elementos forme parte de la maquetación, su utilización se debe haber tenido en cuenta desde pasos previos del desarrollo del sitio web, estando todo incluido tanto en los análisis previos, como en el boceto de la web.
Accesibilidad
Muy relacionada con la navegabilidad y usabilidad descritas, y con todo el proceso de desarrollo de un sitio web, se encuentra la accesibilidad. Aunque comúnmente se conoce la accesibilidad como un conjunto de tareas a realizar para hacer que la web sea accesible por personas con algún tipo de discapacidad, eso es sólo parte de su objetivo.
La accesibilidad trata de hacer que un sitio web sea accesible no sólo por cualquier persona, sino también desde cualquier navegador, sistema operativo o dispositivo. Esto afecta a la maquetación de un sitio web en gran medida, puesto que añade toda una serie de restricciones, que se deben conocer y solventar, para conseguir que el sitio web sea lo más accesible posible, de forma que su contenido sea visible por el mayor público posible.
Cuando se pretende hacer una web accesible, hay que cambiar el chip, y empezar a pensar en todas las posibles limitaciones que pueden aparecer a la hora de visualizar su contenido: distintos tamaños de pantalla o resoluciones (desde un monitor hasta la pequeña pantalla de un móvil), la posibilidad de que el usuario no pueda ver imágenes o distinguir colores fácilmente, y así una larga lista.
Por suerte, existen mecanismos que posibilitan mantener distintas versiones de un sitio web, adaptadas a las distintas necesidades que requiera cada proyecto (una versión completa, una versión sin flash, una versión sólo texto,...), o que la misma versión se adapte según las carácterísticas impuestas por el visitante (tamaños de pantalla,...). Además, para ciertos elementos que de antemano se sabe que pueden ser poco accesibles, como animaciones flash o imágenes, existen formas de dotarlas de contenidos o textos alternativos, que facilitarán su comprensión a quién no pueda visualizarlas.
Si bien sería ideal hacer siempre webs 100% accesibles, entendemos que no siempre es posible hacerlo por distintos motivos (tiempo, presupuesto, necesidad de incorporar elementos más actuales,...). Aún así, siempre nos esforzamos para conseguir unos mínimos que nos aseguren un desarrollo de calidad, que cumpla los estándares, y que sea visible desde el máximo posible de dispositivos y navegadores.
Tareas para posicionamiento en buscadores
Aplicando correctamente los conceptos anteriores (XHTML, CSS, Navegabilidad, Accesibilidad,...), se dará también un gran paso referente al posicionamiento en buscadores. Los buscadores valoran muy positivamente la forma en la que se ha desarrollado una web, y en concreto su accesibilidad. De echo, no hay que olvidar que por ejemplo Google, sería un gran ejemplo de usuario que entra en nuestra web con “todo desactivado”: no puede ver imágenes, ni videos, ni animaciones,... únicamente puede fijarse en los contenidos textuales, por eso valora muy positivamente que estos estén bien maquetados.
Otro factor que también se tiene en cuenta a estas alturas, sino antes, es la nomenclatura que recibirá cada una de las secciones, y en concreto la URL o dirección desde la que serán accedidas. Este es otro tema que afecta de forma notable al SEO o posicionamineto en buscadores. Se tratará de dotar a cada sección de una URL que a la vez que descriptiva, sea amigable (Friendly URL), de forma que los buscadores le den una mayor relevancia.
Gestor de contenidos
Con lo explicado hasta ahora, sería posible desarrollar una web completa, pero tendría un problema: sería totalmente estática, y para cambiar sus contenidos sería necesario contar con una persona con conocimientos de HTML. Por eso, prácticamente el 100% de los sitios web que desarrollamos, incluyen un gestor de contenidos, que permite al dueño/administrador de la web modificar los contenidos en cualquier momento, y sobretodo, sin necesidad de terceras personas.
Este gestor de contenidos, como explicamos en su correspondiente sección, permitirá editar los contenidos del sitio web fácilmente. Además, al haberlo desarrollado nosotros mismos, podemos adaptarlo a cada web, y dar todo el soporte necesario, manual de usuario incluido.
Lenguajes de servidor y bases de datos
Al permitir editar los contenidos desde una aplicación web como es el gestor de contenidos, esos contenidos se actualizan automáticamente en el sitio web. Para ello, se utiliza otro lenguaje de programación, que en nuestro caso suele ser ASP.NET o PHP.
La utilización de estos lenguajes, que a su vez se conectan a las bases de datos necesarias, generalmente MySQL, nos permite aplicar para cada proyecto la lógica de negocio que se ha definido en los primeros pasos del desarrollo del proyecto, mediante el análisis de los requisitos del sitio web.
Llevamos años utilizando estos lenguajes, e incorporando sus nuevas características, según las van soportando los hostings en los que publicamos nuestras webs, de esta forma nos aseguramos de tener al uso las más recientes tecnologías, que implican además un mejor uso de los recursos del alojamiento en el que se encuentran, incrementando así la velocidad de carga de las distintas páginas, otro de los factores que tanto Google como los usuarios valoran positivamente.
Interfaces Enriquecidas (Flash, Javascript,...)
Aunque ya queda atrás la época en la que se utilizaban animaciones, o incluso sitios web completos en Flash sin necesidad alguna de que así fuera, sí que en muchas ocasiones sigue siendo necesario enriquecer la interfaz de los sitios web, ya sea añadiendo animaciones o menús desarrollados en flash, u otros animaciones o plugins desarrollados usando Javascript.
Aunque se relacione en muchas ocasiones con el diseño de una web, más que con la programación de la misma, Flash es otro elemento que se puede añadir a un sitio web para dotarlo de mayor dinamismo, ya sea a nivel visual, o como en este caso queremos destacar, a nivel funcional. El uso de ActionScript, el lenguage de programación asociado a Flash, permite añadir elementos más complejos a una web de los que proporciona inicialmente HTML. La unión de Flash (o incluso Flex) con los lenguajes de servidor (ASP.NET / PHP), permiten crear potentes aplicaciones, con interfaces gráficas mucho más amigables.
El Javascript, un lenguaje que en este caso se ejecuta directamente en el navegador, también se utiliza para dotar de mayor dinamismo a un sitio web, y en muchas ocasiones, en conjunción con AJAX, para conseguir agilizar la carga de contenidos, sin tener que recargar una sección completa, sino únicamente la porción de contenido deseada.
Aunque hasta este momento se haya hablado de la programación web como algo aplicable sólo a sitios web, eso no tiene porque ser así. Por ejemplo en las secciones de productos, o aplicaciones web, hablamos de otros desarrollos que hemos realizado, y que están totalmente relacionados con el mundo del desarrollo web. Otras usos podrían ser el desarrollo de aplicaciones específicas para facebook usando su API, o incluso oAuth, para acceder a Facebook desde sitios web externos, o incluso desarrollar aplicaciones para móviles como Iphone o Android.