Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Aceptar Más información
Blog

Blog en el que hablamos acerca de diseño gráfico, diseño y programación de páginas webs y publicidad.

Programación web: ¿Cómo la enfocamos?

23/01/2014 a las 14:00h

La programación de una web abarca diversas áreas, cada una con sus propias necesidades y lenguajes de programación. Desde la maquetación inicial según los estándares HTML5 y CSS3, hasta el desarrollo a medida de su gestor de contenidos.

A continuación numeramos las partes en las que dividimos el desarrollo web:

numeroMaquetación web: HTML + CSS

La maquetación de una web consiste en plasmar mediante distintos lenguajes de programación la 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.

La aparición de HTML5, está permitiendo añadir al lenguaje HTML nuevas funcionalidades, como la reproducción de audio/video, que hasta ahora requerían usar plugins o aplicaciones de terceros, y cuya compatibilidad entre navegadores en muchos casos no era la deseada. Otra de esas funcionalidades, que ya llevamos varios años aplicando a nuestros proyectos web, 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 un conjunto de bloques con un orden establecido, ahora se puede definir, de forma que se asigna a cada uno de esos bloques el tipo de información que contiene, pudiendo indicar qué bloque es la cabecera, el pie, el menú de navegación, o el contenido de la sección. Esto permite jerarquizar mejor la estrucutra de una web, lo que también facilita que los buscadores como Google, puedan indexar mejor las webs que utilizan esta tecnología.

Así mismo, CSS3, y sobretodo, su progresiva incorporación a las últimas verisones de los navegadores más conocidos, está permitiendo que la apariencia de las webs mejore notablemente, al permitir a los diseñadores utilizar recursos como sombras, transparencias, redondeos,... que hasta hace pocos años eran mucho más difíciles de lograr.

numeroNavegabilidad y Usabilidad

Una correcta maquetación de una web, debe facilitar el 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.

numeroAccesibilidad

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 animaciones, 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.

numeroTareas para posicionamiento en buscadores

Aplicando correctamente los conceptos anteriores (HTML, 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 formados.

Otro factor que también se tiene en cuenta a estas alturas, o incluso 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. Por poner un ejemplo con nuestra web: sería mucho mejor acceder a una sección si su URL es "http://www.creados.com/servicios/desarrollo_web", que si la URL es "http://www.creados.com/servicios.php?servicio=5".

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

En Creados utilizamos nuestro propio CMS (sistema de gestión de contenidos), en el que llevamos trabajando varios años. Al haberlo desarrollado nosotros mismos, podemos adaptarlo a cada web, realizando un desarrollo a medida de ese proyecto, dar todo el soporte necesario, inclyendo también un manual de usuario, e irlo actualizando según las necesidades futuras del cliente.

numeroLenguajes 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 (servidores 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.

numeroInterfaces Enriquecidas (Flash, jQuery,...)

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, "slideshows" o otros elementos interactivos.

Hasta hace pocos años, el uso de Flash para conseguir esas animaciones era prácticamente imprescindible, sin embargo, sus inconvenientes (requerir instalación, y no ayudar al posicionamiento en buscadores), y el asentamiento de otras alternativas, han relegado Flash a un segundo nivel, y su uso actualmente queda limitado a banners animados y poco más.

Entre esas alternativas, las que se han hecho con el control, son las librerías Javascript, como pueden ser jQuery, Prototype o Mootools. 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.

Categorías: Desarrollo Web

COMENTARIOS

Aún no se han dejado comentarios sobre esta entrada. Puedes ser el primero en dejar un comentario utilizando el apartado situado bajo estas líneas.

Publicar un comentario

(Tu e-mail no será visible por el resto de visitantes.)

Volver arriba