Blog de Alia » General

Aplicación práctica de RDFa

Ricardo Escudé — Fri, 03 Sep 2010 09:21:27 +0000

En los dos proyectos en los que nos encontramos encauzados actualmente en Alia hemos empezado a utilizar técnicas para agregar riqueza semántica a nuestro HTML. La aparición en www.alistapart.com de un artículo resumiendo RDFa nos ha animado a escribir este artículo.

¿Y qué es RDFa?

RDFa, según wikipedia, son un conjunto de extensiones propuestas por W3C para la introducción de semántica a XHTML, concretamente dentro de la etiqueta (normalmente es en head donde se utilizan la información meta).
La información meta es aquella que completa la información que visualiza el usuario en pantalla; y que aporta riqueza semántica. Esta riqueza mejora el posicionamiento, ya que le estamos dando a las máquinas o search engines más datos para categorizar e indexar la información.

Por poner el mismo ejemplo que en el artículo de alistapart.com sobre RDFa:
“en un portal de noticias, nos encontramos en una página una noticia cuyo título es: ‘El presidente español ha visitado Francia para blablabla…’ .” Un humano es capaz de entender que el presidente actual es Zapatero, pero Google no, a no ser que específicamente se mencione su nombre en la página web.

Para mejorar la semántica de nuestro código xhtml usaremos entonces las propiedades que el W3C ofrece para mejorar la riqueza semántica dentro del body de nuestras páginas.
Por lo tanto, RDFa trata de una serie de extensiones (válidas en xhtml) que tratan sobre las relaciones entre diferentes elementos y documentos. Asimismo, una página sin RDFa se visualiza exactamente igual que una con RDFa, ya que se trata de riqueza semántica, no de contenido ni de la disposición de los elementos.

En alistapart.com proponen 9 directrices, sobre las que nos basamos para la realización de este artículo (hemos simplificado el post a 3 para que luego podáis completar la información en el artículo original):

Partimos de la premisa que ya conocemos la estructura de la información meta dentro del tag :

Alia Multimedia – Diseño web

Con estas etiquetas estamos especificando mediante el autor y la fecha de creación y mediante especificamos que esta web un copyright con creative commons.

Partiendo de esta base, vamos a trasladar las posibilidades de la utilización de información meta a mediante 10 directrices:

1ª directriz – el uso de ‘rel=’

La etiqueta de es igual que la etiqueta dentro de , es decir, establece una relación entre dos documentos web. Por lo tanto, podemos extender las propiedades semánticas de como en este ejemplo:

esta página tiene una licencia creative commons

Un ejemplo de aplicación de esta técnica, podría ser citar un pasaje o un título de un libro en un texto:

los elfos conquistarán Mordor

Como véis, XHTML tiene una serie de valores de rel= predefinidos. Podéis ver la lista completa en:

http://www.w3.org/TR/rdfa-syntax/#relValues

¡Son muy útiles!

Directriz 2 – ampliar el uso de rel a

Si extendemos esta relación de la primera directriz a la etiqueta , podremos por ejemplo indicar la relación entre una imagen y su licencia de la siguiente manera:

Directriz 3 – el uso de content= y property=

Paso a recordaros cómo se escribían las metas dentro de :

Si os dais cuenta, dentro de ; no podríamos utilizar la propiedad ‘name=’ dado que ya tiene una funcionalidad dentro de , que es la de nombrar los campos input para su reconocimiento. Por tanto, en RDFa en body se cambia la propiedad name= por property= como os indico en el ejemplo:

Título de la noticia
Texto de la noticia de Alia Multimedia.
Autor: Alia Multimedia
Fecha: 10 de octubre de 2009

Útil, ¿verdad?, y añade riqueza semántica.
Pero ahora os preguntaréis, ¿cómo saben los buscadores que author es autor y date es fecha? Para estandarizar este tema, utilizaremos diccionarios predefinidos. Por lo que he visto por internet, el más utilizado es el Dublin Core. Para indicar en RDFa que estamos usando un diccionario, lo haremos con la siguiente sintaxis:

Título de la noticia
Texto de la noticia de Alia Multimedia.
Autor: Alia Multimedia
Fecha: 10 de octubre de 2009

En el diccionario Dublin Core vienen especificados los términos author y date. Sólo tenemos que chequear este diccionario para buscar otros términos.
Asímismo, si habéis estado atentos a este tutorial, os preguntaréis por qué rel=”license” no ha necesitado ningún diccionario. Esto se debe a que HTML viene con algunos términos integrados (como license, next, prev, …). Podéis buscar en Google para encontrar más resultados.

Estas son las directrices básicas y esperamos que os sirvan de ayuda para dar riqueza semántica a vuestros proyectos web. ¿Queréis más información? Visitad el artículo de alistapart.com o dejadnos vuestro comentario.

Comprobar la compatibilidad de navegadores con SuperPreview

Ricardo Escudé — Tue, 29 Dec 2009 16:28:55 +0000

Navegando hoy por Internet en nuestro habitual tiempo de reciclaje diario hemos dado con una interesantísima herramienta para comprobar la compatibilidad de páginas web con los navegadores: SuperPreview de Microsoft.

Aviso: es gratuíto para comprobar la compatibilidad en los navegadores Microsoft IE6, IE8 con compatibilidad hacia 7 e IE8.

SuperPreview: Comprueba la compatibilidad de navegadores

Menuda racha lleva Microsoft: está pasando de ser el ‘malo’ de la película (gracias a IE6) a parecer preocuparse cada vez más por los desarrolladores web.

En Alia trabajamos con Windows desde nuestros comienzos y hemos de decir que ha mejorado increíblemente en los últimos años como entorno de desarrollo web.

A lo que íbamos, ha sido una grata sorpresa encontrarnos con el lanzamiento de SuperPreview, herramienta para comprobar la compatibilidad entre navegadores. Incluído por defecto en Microsoft Expression, ofrecen esta herramienta de manera gratuíta para comprobar la compatibilidad de los navegadores de Microsoft: Internet Explorer 6, Internet Explorer 8 tanto en su modo normal como con compatibilidad hacia IE7. Si dispones del paquete Microsoft Expression, dispondrás también de otros navegadores dentro del programa. Ah! requiere IE8 instalado en la máquina, y por supuesto, Windows Vista o Seven.

Lo más interesante es colocar la web que estás desarrollando viéndola al mismo tiempo en varios motores. Aquí podéis ver cómo http://aloasis.com se renderiza correctamente en IE6 e IE8:

Renderizado correcto en IE6 e IE8

Dispone de varios métodos de visualización, pudiendo colocar varios navegadores de izquierda a derecha, arriba o abajo, o mejor aún, ¡colocarlos uno encima del otro!:

La comprobación definitiva: renderizado IE6 e IE8 superpuesto

Como véis, además de añadir URLs, se pueden añadir HTMLs locales:

Se pueden seleccionar tanto URLs como HTMLs guardados en tu disco duro

Por último, destacar algunas funciones (el resto ya os lo dejamos para que lo trasteéis vosotros):

-Motores IE6, IE8 en compatibilidad con IE7 e IE8 gratis. Otros navegadores, tendréis que pagar por Microsoft Expression.
-Visualización simultánea de cuantos motores queráis.
-Visualización superpuesta para detectar errores / diferencias.
-Visualización de los valores DOM del modelo de cajas (valores de los DIVs destacando las diferencias entre navegadores).
-Sistema de guías y reglas para detectar errores / diferencias.
-Y más, descargadlo, ¡es gratis!.

Enlace:
http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Saludos y felices fiestas desde Alia en Granada

La Tipografía se introduce en nuestras páginas web

Ricardo Escudé — Tue, 17 Nov 2009 12:08:35 +0000

Llevábamos tiempo pensando crear un artículo como éste, explicando de manera breve lo que se avecina: la inserción nativa de nuevas tipografías en las páginas de Internet.

Viendo que hay pocos post en castellano sobre el tema, hemos decidido crear una guía (muy muy breve!) sobre los comentarios de la comunidad de diseñadores y desarrolladores web en cuanto a insertar tipografías en la web.

Tipografías no estándares en páginas web

¿Quieres saber cuáles han sido nuestras fuentes? Aquí las tienes:

www.alistapart.com

www.webfontspecimen.com

www.nicewebtype.com

Y para convertir fuentes de manera automatizada, la gran herramienta de Font Squirrel:

http://www.fontsquirrel.com/fontface/generator

Yendo al grano, el código CSS3 final para insertar fuentes personalizadas:
/*Recuerda incluir en los comentarios, si la fuente es de uso libre, el enlace al autor de la fuente*/

@font-face { font-family: "El nombre de tu fuente"; src: url("tipos/archivo_tipo.eot"); src: local("nombre_alternativo"), local("nombre_alternativo"), url("tipos/archivo_tipo.woff") format("woff"), url("type/archivo_tipo.otf") format("opentype"), url("type/archivo_tipo.svg#archivo_tipo") format("svg"); }

Os comentamos a quién va dirigida cada línea de código (como siempre, si queréis investigar más, remitíos a las fuentes del principio del artículo):

Para IE
src: url("tipos/archivo_tipo.eot");
Microsoft está luchando porque su formato Embbeded Open Type se estandarice. Como siempre, las luchas entre navegadores. Desde nuestro punto de vista, el Open type tiene una nitidez que nos gusta; aunque está por ver qué formato ganará la batalla.

Para el resto
IE no lee la propiedad local, por lo que todo a partir de aquí se refiere a otros navegadores. Además estamos indicando que si el usuario dispone de la fuente instalada en su sistema, no la descargue.

Para Firefox 3.5 y Chrome
url("tipos/archivo_tipo.woff") format("woff"), y
url("type/archivo_tipo.svg#archivo_tipo") format("svg");
El formato woff es el que soportará Chrome 4 y Firefox 3.5 ya dispone de compatibilidad con .woff.

¿Y si queremos incluir subtipos?
Como por ejemplo podría ser incluir las itálicas de una tipo:
@font-face { font-family: "Tu itálica"; src: url("tipos/nombre_tipo_italica.eot"); src: local("Nombre alternativo"), local("Nombre_alternativo"), url("tipos/nombre_tipo_italica.woff") format("woff"), url("tipos/nombre_tipo_italica.otf") format("opentype"), url("tipos/nombre_tipo_italica.svg#nombre_tipo_italica") format("svg"); }

Y de cara al servidor, ¿hace falta realizar modificaciones para aceptar la descarga de tipos?
En Apache es útil especificar mediante .htaccess la disponibilidad de las tipos. Existe bastante información en Internet sobre este punto.

¿Y los navegadores antiguos / obsoletos?
Para aquellos navegadores que no soportan estas especificaciones, tendrás que indicarles cuáles son las fuentes de sustitución (font-stacks) para las fuentes importadas.

font-family: "Tu tipo", Georgia, serif;

De esta manera, si el navegador del usuario no puede importar las fuentes, colocará las fuentes estándar que le indiquemos.

En Alia usamos técnicas de sustitución de fuentes no nativas
Efectivamente en Alia seguimos usando Cufon (es fácil y rápido de implementar) para la sustitución de fuentes no estandarizadas, pero es necesario empezar a plantear la posibilidad de fuentes nativas. Se abren muchos caminos gracias a la ilimitada inclusión de fuentes, tanto en diseño, como en frontend, backend, etc…

Esperamos como siempre, que os sirva de ayuda,

Saludos del equipo humano de Alia Multimedia.

30 casos de éxito de diseño y desarrollo web

Ricardo Escudé — Tue, 08 Sep 2009 07:59:02 +0000

Una imagen vale más que mil palabras:

30 proyectos desarrollados por Alia

Desde nuestro comienzo como empresa en 2005 estos son algunos de los proyectos que hemos desarrollado para empresas, asociaciones y todo tipo de grupos humanos.

Queremos agradecer a todos nuestros clientes (actuales y futuros) haber confiado en nuestra profesionalidad.

¡Gracias desde el equipo de Alia!

Intrusismo profesional en diseño y desarrollo web

Ricardo Escudé — Mon, 10 Aug 2009 12:31:19 +0000

Hoy queremos tocar un tema candente para la comunidad de diseñadores y desarrolladores en Internet: el intrusismo profesional en nuestra rama.

¿Dónde está mi dominio?

La idea de este post me vino andando por la calle y encontrándome esto:

¿Seriedad?

Después de hablarlo con algunos colegas del mundillo, hemos visto que este fenómeno se da muy probablemente porque no existe una formación oficial ni titulaciones que certifiquen a un profesional del mundo del diseño y desarrollo en Internet (¿acaso no es nuestra profesión lo suficientemente amplia para justificar una titulación oficial?).

Esta situación no sólo se da en España, sólo hace falta leer los esfuerzos de la comunidad de diseñadores y desarrolladores en EEUU (véase www.alistapart.com) para estandarizar la formación de profesionales web para ver que no sólo aquí ocurre el intrusismo.

Si tuviéramos que mencionar algunos detalles para confirmar la ‘profesionalidad’ de un diseñador/desarrollador web, nosotros recomendaríamos:

Preguntar al supuesto profesional que nos va a dar el servicio, en primer y más importante lugar, si es un autónomo o empresa; y en su caso el contrato que se firmará antes de la prestación del servicio. Revisar bien el contrato, especialmente en puntos como propiedad intelectual, adecuación a la LSSI, cobros por la inserción del contenido, la propiedad del dominio/dominios contratados, la duración del contrato, la existencia de cuotas periódicas, … . Son cientos de puntos en los que nos pueden engañar en un contrato de prestación de servicios web, sólo hay que aplicar un poco de sentido común en muchos casos. ¡Desconfiar de aquellos que no ofrecen contrato!.
Preguntar por las tecnologías que se van a utilizar en la creación de la web. Es habitual diferenciar entre webs en Flash y webs en HTML + otras tecnologías. En líneas generales, los diseñadores en Flash se especializan más en interactividad que en web, esta es la razón por la que muchas veces contratar a un profesional de Flash no es garantía de una web optimizada. En el caso de HTML, preguntar por la compatibilidad con los diferentes navegadores (¡cuántos clientes nos llegan solicitando este servicio!).
Preguntar si el diseño será original o partirá de una base previa (otra queja habitual de nuestros clientes es encontrarse que alguien les ha realizado un trabajo web y han encontrado una página exactamente igual que la suya). Es también conveniente saber si se realizará algún previo de diseño o si se queda en manos del profesional sin posibilidad de participación por parte del cliente.
Preguntar si la base del sitio web será la de un motor predefinido (sistemas de publicación ya creados – como este mismo blog se basa en Wordpress – que se han modificado para adecuarse al proyecto en cuestión). Algunos motores comunes son Wordpress y Joomla. Existen pros y contras en estos sistemas, especialmente el pobre grado de personalización del código por parte de algunos profesionales y por lo tanto, la baja incidencia en el posicionamiento en buscadores.
Preguntar las acciones que se tomarán una vez finalizada la web. Algunos ‘profesionales’ ni envían la información básica del sitio terminado a buscadores, no incluyen metas, etc …
Por regla general, desconfiar de cualquier página web con un precio inferior a 1000 euros. Si tenemos en cuenta que para el desarrollo de una página web básica los profesionales involucrados son un diseñador/maquetador y un programador/desarrollador; cuyos sueldos base suelen rondar los 1500 €, como véis no salen las cuentas. Si nos vamos a un proyecto con mayor complejidad, aparecen otros profesionales: coordinador de proyectos, diseñador de interfaces, experto en usabilidad, desarrollador de interactividades, especialista en backend / frontend, especialista en marketing en Internet, y un larguísimo etcétera.
Por último, en la especialización está la clave: la típica empresa de informática general no va a poder estar al día en lo referente al diseño web y probablemente encargará el trabajo a otro profesional (o al primo del vecino del gerente…).

Son unas directrices muy generales pero esperamos que aquel empresario que busque una web por 300 € se dé cuenta que no sólo obtendrá lo que pague: una web mediocre y un lastre para su imagen.

Oferta especial de página web para Asociaciones y ONGs

Ricardo Escudé — Mon, 28 Apr 2008 18:14:06 +0000

Como hemos descrito en numerosas ocasiones, en Alia Multimedia nuestra especialidad es el desarrollo de software personalizado para Internet. En el momento actual, queremos ofrecer nuestra primera oferta especial dedicada a Asociaciones de cualquier tipo y ONGs.

Para ellos hemos creado un portal base con todas las características y funcionalidades (muy al estilo web 2.0) que podrán necesitar este tipo de organizaciones:

-Portal web 100% validado por el W3C y en cumplimiento con las condiciones de accesibilidad y usabilidad (XHTML, CSS y Smarty) para presentación de subvenciones .
-Compatibilidad con Picassa y YouTube para la intercomunicación entre vuestros miembros mediante vídeos y fotografías.
-Diseño totalmente personalizado con la calidad de nuestro equipo de diseño especializado en comunicación en Internet.
-La mejor compatibilidad con buscadores (Search Engine Friendly).
-Compatibilidad y garantía de visualización en todos los navegadores principales ( Explorer 6, 7 y 8, Firefox, Opera, Safari, navegadores móviles, …)
-Captación de socios automatizada a través de la web, con posibilidad de inclusión de pasarela de pago (con una entidad bancaria de vuestra elección) para el cobro de cuotas.
-Gestión de usuarios y socios muy completa y avanzada para establecer permisos.
-Publicación de eventos y novedades para mantener la página activa y viva.
-Asesoramiento para el cumplimiento de la LSSI.
-Prácticamente el 100% de la información de la web es personalizable.
-Foro PHPBB 3 opcional.
-Instalación opcional de Google Adsense para conseguir ingresos para el desarrollo de la asociación / ONG.

El precio del portal incluyendo su diseño personalizado es de 2990 â‚¬ (IVA no incluído), cantidad fácilmente subvencionable.

Con esta iniciativa queremos destacar nuestro apoyo por las iniciativas sin ánimo de lucro y nuestra intención de colaboración social.

Puedes solicitarnos más información en el tlfno 958 52 3003 y en la dirección de correo electrónico info@aliamultimedia.com

Un saludo del equipo humano de Alia Multimedia.

Mejorar la usabilidad de Windows XP

Ricardo Escudé — Tue, 08 Apr 2008 09:49:43 +0000

Ya sabéis que en contadas ocasiones hacemos mención a aplicaciones de escritorio, y nos centramos en nuestro área principal de trabajo: el diseño web y el desarrollo en Internet.

Pero hace poco dimos con una pequeña aplicación para Windows XP que nos sorprendió muy positivamente: QTAddressBar.

Con este nombre tan singular, esta pequeña aplicación añade una nueva barra de direcciones a nuestro explorador de archivos de Windows XP: esta barra dispone de la misma funcionalidad que la barra de direcciones incluída en Windows Vista: en su momento nos pareció un gran avance por parte de Windows el que empezaran a pensar en cuestiones de usabilidad con más detenimiento.

La dirección para descargar gratuitamente el programa es:

http://qttabbar.wikidot.com/qtaddressbar

Una vez instalado, nos iremos al explorador de Windows (por ejemplo haciendo doble clic en Mi PC, o en Mis Documentos), y haremos clic derecho en cualquier espacio libre del propio interfaz del explorador. Aparecerán las opciones que están habilitadas del mismo, y veremos la opción ‘QT Breadcrums Address Bar’ que habremos de seleccionar.
Aparecerá la nueva barra (podemos deseleccionar la antigua y mantener sólo la nueva) con la misma navegación más intuitiva por carpetas de Windows Vista: podréis volver atrás varios niveles de carpetas con un sólo clic, sin necesidad de hacer numerosos clics para volver atrás.

Esperamos que os sea de utilidad,