project UOC

Actions

  • Front-end
  • Back-end
  • HTML
  • CSS
  • jQuery
  • PHP
  • MySQL
  • Wordpress

Mosaic, tecnologías multimedia

image - - leave a reply -
mosaic

mosaic.uoc.edu es una destacada publicación online dedicada a las tecnologías y la comunicación multimedia. Esta revista online surge como una iniciativa de la Universitat Oberta de Catalunya (UOC) para reforzar la relación entre el ámbito universitario y el mundo empresarial multimedia. Por otro lado también se presenta como un escaparate de los trabajos desarrollados por los estudiantes del Grado Multimedia y recoge la experiencia del equipo docente y de profesionales del sector a través de artículos, entrevistas y recursos.

El equipo

  • Dirección: Ferran Giménez Prado
  • Jefe de proyecto: Carlos Casado Martínez
  • Arquitectura de la información: Anna Ripoll
  • Diseño gráfico de interfaz: Tona Monjo y Cristina Fabregas
  • Front-end (XHTML, CSS) y back-end (WordPress, PHP): javiaurea

Maquetación XHTML / CSS

Uno de los mayores problemas ha sido llevar a cabo la maquetación XHTML / CSS de un diseño un poco complejo, debido principalmente a las numerosas formas curvadas, múltiples colores de fondo y otros recursos gráficos empleados. A partir de aquí la dificultad radicaba en encontrar un alto grado de compatibilidad entre navegadores.

Acerca de la escalabilidad del texto

He optado por usar la versión mejorada del conocido “porcentaje mágico” y así establecer el tamaño de fuente en unidades relativas, con ello he buscado que el texto sea relativamente flexible y muy parecido al planteado en el diseño gráfico inicial.

Sobre las imágenes y colores de fondo

Todas las imágenes del interfaz de Mosaic son en formato PNG, aquellas que corresponden con las curvaturas de contenedores llevan transparencia para que se fusionen correctamente con el fondo, el cual puede variar de color en función de la categoría donde nos encontramos.

Los ficheros PNG con factor de transparencia presentan problemas de compatibilidad con algunas versiones de Internet Explorer. Para solucionarlo existen varias técnicas, en este caso me he decantado por el uso del filtro Directx AlphaImageLoader.

Otro problema fue que este filtro presentaba un conflicto con los enlaces que se encontraban en el interior de un contenedor bajo su influencia, para evitarlo he usado un posicionamiento relativo y la propiedad z-index de dichos enlaces.

Desarrollo del theme para WordPress

Respecto a la programación del theme en WordPress (PHP/MySQL), de entre todas las funciones personalizadas hubo alguna que me pareció más compleja, como establecer y gestionar los datos necesarios para un número magazine o recoger los ficheros adjuntos en base a unos criterios y tipos MIME.

Estándares web

El desarrollo lo he afrontado en XHTML (eXtensible Hypertext Markup Language) en su versión estricta, un cambio respecto a la versión transicional anterior. He pretendido que el sitio web se adapte mejor al usuario, que mejore la compatibilidad y que exista una separación más clara entre estructura, estilo y comportamiento.

  • UTF como sistema de codificación de caracteres.
  • Mejora de la abstracción (estilo CSS – estructura XHTML – comportamiento DOM).
  • Semántica del marcado.
  • CSS más optimizado.
  • Existe también una versión CSS destinada a la impresión.

Accesibilidad web

Personalmente interpreto que la accesibilidad no es un valor booleano (accesible o no accesible), sino que me parece un grado (más o menos accesible). En este sentido he intentado mejorar la accesibilidad de Mosaic respecto a su anterior versión.

  • La nueva versión de Mosaic al ser más accesible se aumenta la escalabilidad, puesto que todo deriva en un desarrollo más simple, estándar y flexible.
  • En accesibilidad (creo que al igual que en SEO) me gusta pensar que “el contenido es el rey”, esto conlleva que los buscadores indexan mejor y más rápido los sitios web accesibles.
  • He revisado las directrices WCAG para comprobar la accesibilidad general. También se ha probado el sitio web bajo JAWS.
  • Se han incluido algunos roles (landmarks) de WAI-ARIA.

go to web