Círculo de Maquetadores

Maquetación Móvil con jQuery Mobile

Álvaro Brito — Sat, 10 Mar 2012 17:16:10 +0000

En la era de los dispositivos móviles, el interés por el desarrollo web móvil cada vez es mayor.

Actualmente lo más utilizado es aplicar el “diseño responsivo (responsive design)” en las web que desarrollemos, para que se visualice o se adapten correctamente en los dispositivos móviles (smartphone, tablet, etc). Esto lo conseguimos haciendo uso de Media Queries CSS3.

Por otro lado tenemos los Frameworks JavaScript orientados exclusivamente para el desarrollo de aplicaciones y sitios web para móvil. Hoy hablaremos de uno de los más útiles, prácticos y que conlleva menor esfuerzo en el desarrollo de aplicaciones web:

jQuery Mobile

¿Qué es jQuery Mobile?

Es un framework de Javascript basado en jQuery y jQuery UI, para el desarrollo de aplicaciones web y de escritorio (nativas) en dispositivos móviles. Soportando una amplia variedad de dispositivos.

¿Por qué nos interesa?

Está basado en jQuery, por lo tanto la curva de aprendizaje será mínima para aquellas personas que hayan utilizado jQuery.
Compatible con las principales plataformas móviles y de escritorio: iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook y todos los navegadores modernos. Ver todas las plataformas soportadas
Su peso de (20kb) y el uso mínimo de imágenes en sus componentes.
Uso de marcado HTML5 en la estructura de las páginas y componentes, utilizando los diferentes atributos para “disparar” automáticamente los Widgets de jQueryMobile. Además podemos aplicar los diferentes comportamientos que trae cada componente sin tener que aplicar ningún script adicional.
Enfocado tanto a aplicaciones web como a aplicaciones nativas. Combinando jQuery Mobile con PhoneGap.
Accesibilidad en sus componentes, basados en la especificación WAI-ARIA y haciendo uso de los ‘roles’. De tal manera que trabaje con los lectores de pantalla. Accesibilidad en jQuery Mobile
Proporciona una potente herramientas para crear diferentes temas (themes): ThemeRoller.

¿Cómo lo utilizamos?

jQuery Mobile proporciona un cojunto de widgets de fácil implementación y un sistema de navegación con AJAX para la transición entre páginas. A continuación veremos como crear fácilmente nuestra primera página:

“EL ESQUELETO”

HEAD

Primero agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. En el siguiente paso agregaremos nuestro propio theme personalizado.

Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile.

Utilizamos el meta viewport, con el que podemos establecer el ancho del dispositivo y definir la escala . Por defecto, lo podemos dejar definido con la constante width=device-width y definir la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0. Podemos añadir más reglas en el meta viewport, por ejemplo si queremos permitir que el usuario pueda escalar la página.

BODY

En el cuerpo del documento HTML, especificamos la Página (data-role=”page”), la Cabecera (data-role=”header”), el Contenido (data-role=”content”) y el Pié (data-role=”footer”) de la misma, añadiendo los atributos data- HTML5, que utiliza jQuery Mobile para transformarlo en Widgets funcionales y con los estilos del theme utilizado.




	Título página
	
	
	
	
	

 




	
		Título
	


	
		Hola Mundo
	


	
		© 2012

Añadiendo tu propio contenido

Puedes añadir contenido HTML dentro del data-role=”content”, de esta manera usará el estilo del theme asignado.

Si queréis añadir contenido HTML propio, sin que contenga funcionalidad de jQuery Mobile, tendréis que omitir el atributo data- y utilizar el role adecuado para cada contenido HTML (si no queréis utilizar roles omitir este paso).


	Hola Mundo

Múltiples páginas

Todas las páginas estarán incrustadas en el mismo documento. Como hemos visto anteriormente, cada página del sitio estará representada con el atributo data-role=”page”, también podemos añadirle un título a cada página con el atributo data-title=”Título página 1″.

Por último debemos añadir el atributo id a cada página, de esta manera podemos interactuar con ella, por ejemplo para poder navegar de una página a otra.




	
		Título
	


	
		Hola Mundo
	


	
		© 2012
	
	






	
		Título
	


	
		Hola Mundo
	


	
		© 2012

Ver Múltiples páginas en jQuery Mobile

Navegación entre páginas

La navegación es muy sencilla, solo tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino. El código HTML quedaría de la siguiente forma:

Ir a la página 2

Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varios tipos de transiciones jQuery Mobile.

Las que podemos usar en la versión actual de jQuery Mobile son las siguientes

slide
slideup
slidedown
pop
fade
flip

También puedes definir la dirección de la transición con el atributo data-direction, por ejemplo: data-direction=”reverse” para invertir la dirección.

Themes jQuery Mobile

Podemos crear nuestros propios themes de forma sencilla y rápida con el ThemeRoller que nos ofrece jQueryMobile. Una de las principales características de esta herramienta, es la multitud de themes que podemos crear y asignar cada componente que usemos en nuestra aplicación.

Cada theme o tema tiene asignado una letra, con la que podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Veamos un sencillo ejemplo:

En la documentación oficial podemos ver más sobre el uso de themes en jQuery Mobile y las opciones posibles para cada uno de los componentes.

Debemos tener en cuenta que jQuery Mobile genera clases para cada uno de sus componentes usando el prefijo ui-.

Formularios

Los componentes de formulario de jQuery Mobile, nos aportan multitud de funciones ya definidas y diferentes tipos de elementos propios. Todos los formularios deben estar dentro de la etiqueta form y con el action y method asignados para procesar la información en servidor:

...

Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos. Con galería de elementos de formularios jQuery Mobile podemos ver de un vistazo todos los elementos y la funcionalidad de cada uno de ellos.

También nos da la opción de crear un formulario con una versión mini de sus controles, útil para formularios extensos o para aprovechar espacio en la pantalla del dispositivo. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup:


	
		
			Opciones:
			
			Opción 1
			
			Opción 2

Accesibilidad en formularios

Si se requiere ocultar la etiqueta label por motivos de accesibilidad y que los lectores de pantalla puedan leerla, podemos ayudarnos de la clase ui-hidden-accessible y añadir el atributo placeholder para usar el elemento de formulario como label:

Usuario:

Si tenemos un contenedor de jQuery Mobile para controles de formularios le asignamos la clase al propio contenedor:


	Usuario:

Ambos ejemplos se verían de la siguiente forma:

Nota: Si necesitamos deshabilitar ciertos elementos del formulario, usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.

Conluyendo

Hemos analizado de forma rápida las nociones básicas que debemos saber de jQuery Mobile y sus principales componentes, podéis ver la información técnica más detallada en la documentación oficial.

Para concluir os dejo una Guía de referencia de jQuery Mobile

Trabajando con Drupal

Eduardo Sainz — Mon, 05 Mar 2012 22:24:17 +0000

Vamos a hablar de Drupal, uno de los gestores de contenido con más éxito actualmente.

Drupal es uno de los CMS más utilizados junto con WordPress y Joomla, según las estadísticas de Google, podríamos situarlo en tercera posición. Al igual que sus competidores, es gratuito y basado en php.

“Druplicon”, una gota con el detalle del símbolo de infinito

De primeras, Drupal es más difícil de manejar que los otros CMS citados, pero también nos ofrece mucha más potencia a la hora de desarrollar una web avanzada. Se puede decir que Drupal es apto para cualquier tipo de web, pero no para cualquier usuario. Así que para manejarnos con este CMS, tendremos que tener unas nociones de administración de usuarios, permisos, roles, nodos, bloques, menús, etc …

Estadísticas Google Trends

Drupal se ha caracterizado por su ligereza y optimización de código, aunque en las últimas versiones, el CMS está “engordando” considerablemente, en la versión 5.x el paquete pesaba unos 750 Kb, mientras que en la versión 7.x ya se superaron los 2mb. Según sus desarrolladores, este aumento de peso es debido a muchas mejoras, sobre todo, en la usabilidad del sistema.

¿Qué webs usan Drupal?

Webs como amnesty.org, whitehouse.gov, java.net o motogp.com utilizan Drupal, esto nos demuestra que las capacidades de este gestor son enormes.

Aquí podemos ver un listado más amplio de sitios hechos con Drupal.

Un poco de historia

Dries Buytaert, el “culpable” de todo esto.

En el año 2000, Dries Buytaert empezó a trabajar en un pequeño sitio de noticias, para permitir a sus compañeros de universidad dejarse notas y compartir archivos.

Dries pensó en añadir un nombre a su script, y en un principio lo llamó “Drop”, adquiriendo el dominio “drop.org”. Dorp es la palabra holandesa para “aldea o pueblo”, la cual fue considerada la palabra que se ajustaba a la pequeña comunidad.

Una vez establecido drop.org en la web, la web comenzó a ganar visitas y actividad, añadiendo características nuevas, como moderación, sindicación y autenticación distribuida, poco a poco los usuarios iban haciendo el script más potente.

Fue ya en enero de 2001, cuando Dries decidió liberar el software drop.org con el nombre de Drupal. El propósito era permitir a otros usar y extender la plataforma de experimentación para que más personas pudieran explorar nuevos caminos para el desarrollo.

El nombre Drupal, pronunciada “droo-puhl”, deriva de la pronunciación en inglés de la palabra holandesa “druppel”, que significa “gota”.

¿Cuáles han sido las claves del éxito?

Código abierto y gratuito.
Alta modularidad y escalabilidad.
Miles de módulos disponibles (más de 15.000)
Bajos requerimientos técnicos.
Apto para cualquier tipo de web (flexibilidad y adaptabilidad)
Amplia y activa comunidad de desarrollo.

Empezando con drupal.

Lo primero de todo, es conocer los requerimientos mínimos para instalar este CMS en su última versión:

PHP Versión: 5.2 o superior
Base de datos: MySQL 5.0.15 o PostgreSQL 8.3, también es compatible con Oracle, SQLite y Microsoft SQL Server
PHP Memoria: 40 MB – 64 MB

Como veis, unos requisitos bastante asumibles en cualquier servidor. Cumplida esta parte, sólo nos queda ir a la página oficial donde podremos encontrar todas las descargas y soporte necesario.

Maquetación de plantillas en Drupal.

Respecto al apartado que interesa a los desarrolladores Frontend, Drupal también es un poco más complejo de personalizar que sus homólogos Joomla y WordPress.

Tenemos multitud de plantillas gratuitas para Drupal en la web oficial http://drupal.org/project/themes

Una vez descargada la plantilla, tendremos que extraerla en sites/all/themes/, después, en el panel de administración, nos dirigimos a administer > site building > themes, y pulsamos en activar la plantilla que hemos subido.

Consejos a la hora de maquetar:

Evitar usar “id” para dar estilo.
Añadir directamente las clases dentro de la etiqueta.
El encabezado principal del sitio, debe llevar la id ”site-name”
El resto de encabezados h1, debe llevar la clase title
Los subencabezados y los títulos de bloque, deberán ser

Plantillas Drupal.

Estructura típica de una theme Drupal

Las plantillas de drupal deben estar formadas por una serie de archivos que aquí detallamos:

. info (requerido)

En este archivo va toda la información de la plantilla. Es requerido desde la versión 6.x, aquí se especifican los meta datos, hojas de estilo, JavaScripts, los regiones del diseño.

Este es el contenido de un archivo .info:

name (obligatorio)
description (recomendado)
screenshot
version (descontinuado)
core (obligatorio)
engine (obligatorio en la mayoría de casos)
base theme
regions
features
stylesheets
scripts
php

.tpl.php

Los archivos con esta extensión, son las plantillas donde podemos escribir nuestro código xhtml y insertar variables php.

template.php

En este archivo, vamos a introducir las funciones, condicionales que necesitaremos en nuestro sitio.

Espero más adelante poder elaborar un pequeño tutorial de maquetación para Drupal y poder entrar más en detalle en el desarrollo de plantillas para este gran CMS.

Enlaces

Web oficial
Drupal Hispano

Como semantizar textos – Parte 2 – (Microformatos)

Jorge López — Thu, 01 Mar 2012 13:42:46 +0000

Hace mucho tiempo explicamos que eran los microformatos e incluso pusimos algunos ejemplos de los más utilizados. En aquella época todavía no estaban muy extendidos y se tomaban como una iniciativa bienintencionada pero sin un claro futuro.

La situación ha cambiado radicalmente desde que los buscadores más importantes presentaron schema.org, para recomendar y alentar el uso de formatos enriquecidos. Incluso su utilización condiciona la visualización de los resultados de búsqueda sobretodo para búsquedas relacionadas con opiniones, eventos, recetas y otros tantos.

Quizá los microformatos sea considerados por muchos como el método más sencillo para semantizar textos, por ello hemos percibido un aumento de su utilización. Esto hace aún más necesario recordar sus ventajas, sus inconvenientes y dar algunos consejos para que tendrémos que tener en cuenta cuando los utilicemos.

Recordamos que los microformatos son trozos de código HTML que utilizan clases, normalmente en etiquetas div y span, para enriquecer y semantizar contenido. De esta manera mediante un marcado estandarizado, lograremos crear contenidos rico semánticamente para que las máquinas puedan entenderlo. La página oficial de los microformatos es: microformats.org

Ventajas

Son fáciles de utilizar y tienen una amplia implementación.
Son una de las mejores soluciones para adoptar de forma completa el desarrollo según estándares y marcado semántico.
Tienen una gran modularidad, además su simplicidad aumenta la probabilidad de que el software aproveche su presencia en las páginas web.
Tienen aplicación inmediata y solucionan problemas concretos.
Permiten la adaptación a XHTML de RDFs existentes.
Cualquiera puede proponer un microformato y someterlo a la revisión de la comunidad de modo que siempre se impondrán los más útiles.
Para adoptarlos no es necesario realizar grandes modificaciones a nuestras páginas, tan solo hay que agregar nuevos atributos a las etiquetas ya existentes.
No es necesario contar con ninguna herramienta especializada para utilizarlos.
Siguiendo la idea ya introducida por Yahoo! Search Monkey, actualmente Google muestra resultados enriquecidos basados en microformatos, mostrando algunos resultados con información ampliada.

Desventajas

Microformas.org es una iniciativa “independiente”, adoptada por muchos desarrolladores, pero no forma parte de la propuesta W3C para Web Semántica.
Tienen un vocabulario reducido.
Existen muchos microformatos “moribundos” que puedes estar utilizando sin saberlo.
Al ser un vocabulario aprobado por la comunidad, no puede ser modificado de manera anónima por desarrolladores independientes.
Su aplicación todavía es muy genérica y acotada a casos muy concretos.
Quizás algunas nomenclaturas no sean lo suficientemente descriptivas, lo que podría provocar confusiones y errores en algunos programadores no familiarizados con su utilización.

Consejos

Es importante utilizar los microformatos con sentido común, tenemos que entender que todavía se ajustan a casos muy concretos. Debemos usarlos cuando sean realmente necesarios.
El contenido oculto mediante hoja de estilo o JavaScript, no será mostrado por el buscador.
Cuando utilices el microformato de críticas (hReview), las puntuaciones que debemos pasar al microformato deben de ir de 1(Mala) a 5 (Muy Buena). El sistema de puntuación de tu página se deberá ajustar a ese criterio.
Estate siempre atento a schema.org, porque cada vez se van adoptando más y más convenciones de marcado semántico.
Google ha puesto a disposición de los desarrolladores la Rich Snippets Testing Tool donde podremos testear nuestros fragmentos enriquecidos y nos mostrarán el aspecto que estos tendrán en los SERPs.
Algunos de los microformatos más utilizados como el hCard o hproduct, todavía no generan una vista especial en los Resultados de Google.

Como semantizar textos – Parte 1 – (Los formatos RDF)

Jorge López — Tue, 03 Jan 2012 12:53:48 +0000

Cada vez se hace más evidente que aportar textos enriquecidos a nuestras web trae muchas ventajas. Actualmente los robots intentar deducir un dato basándose en el contenido que lo rodea, pero con semántica seremos nosotros quien le digamos a los robots que tipo de información es. Obtendremos así búsquedas más precisas y mejoradas aumentando también la experiencia de usuario, porque las búsquedas en Yahoo y Google mejoran su apariencia con contenidos semantizados.

Actualmente la información semántica puede aparecer en la web de las siguientes formas:

Ficheros RDF
Meta etiquetas
Utilizando vínculos relacionales
Etiquetas HTML semánticas
Microformatos
Microdatos

Dejando de lado algunas etiquetas muy concretas HTML4 y el uso de metadatos en la cabecera de los documentos HTML, el primer paso firme para la adopción de textos enriquecidos fueron los eRDF (estándar para XHTML 1.0) y los RDFa (para XHTML1.1). Estas semánticas las explicaremos con más detalle en este artículo.

Texto enriquecido mediante RDF (Resource Description Framework)

Se trata de es un framework para metadatos recomendado por la W3C en 1999. Bajo una sintaxis XML, está pensado para dar semántica a la información y generar metadatos sobre dicha información. Esto permite que los datos puedan ser integrados y reutilizados.

RDF constituye una tecnología fundamental dentro de la Web Semántica, cuyo funcionamiento se resume en una conversión de recursos de la Web en expresiones compuestas que se estructuran en tres partes:

Lo que se describe.
La propiedad del recurso que se desea definir.
El valor de la propiedad con el que se define la relación.

Ejemplo de RDF

La frase: “La semántica y la web 3.0 – Parte 1, está escrito por Jorge López en el blog círculo de maquetadores”, se representa en RDF de esta manera:


  
  Jorge López
   La semántica y la web 3.0 - Parte 1
  Cículo de maquetadores

El resto de información y gramáticas formales sobre RDF la podrás encontrar en la correspondiente especificación de la W3C.

RDFa (Resource Description Framework-in-attributes)

Se trata de extensiones específicas de XHTML 1.1, (a la espera de su implementación en HTML 5) propuestas por W3C. Este método enriquece los textos a través de los atributos y anotaciones de las etiquetas XHTML invisibles para el usuario. Se validan mediante la DTD – Document Type Definition- XHTML1.1+RDFa. Aunque todo esto parezca muy complicado, en realidad de lo que se trata de extender el manejo de los atributos “rel”, “content” y “property“.

Para estandarizar su uso utilizaremos diccionarios predefinidos como Dublin Core. Para indicar en RDFa que estamos utilizando un diccionario, lo haremos de la siguiente manera:


  
     Como semantizar textos - Parte 1 
    Texto del artículo.
    Autor:  Jorge lópez 
    Fecha: 14 de diciembre de 2011

En el diccionario Dublin Core vienen especificados los términos author y date. Para buscar otros términos solo tendremos que buscarlos en el diccionario.

Como vemos la ventaja de RDFa es que sus reglas son genéricas, lo que facilitará la labor de muchos autores. Las páginas que no contienen RDFa se visualizan igual que las que tienen, ya que de lo que se trata es de aportar riqueza semántica a la información, no de cambiar ni el contenido ni de la disposición de los elementos.

Nuevamente, la mejor manera de completar la información sobre RDFa es hacer referencia al borrador de trabajo sobre RDFa de la W3C. El blog para webmasters de google también recomienda utilizar marcado RDFa para mejorar los resultados y además proporciona algunos ejemplos.

eRDF (Embedded RDF)

El formato eRDF fue creado en 2005 por Ian Davis inspirado por los microformatos. Se trata de una sintaxis para extraer la información del documento ya sea por medio de un Parser o una Hoja de estilos XSLT. eRDF solo está parcialmente apoyado por la W3C.

Para que un documento HTML le sea reconocido la existencia de eRDF se debe declarar la adhesión a un perfil especial. Esto se logra sumando el atributo profile en el head del documento:

Toda la información sobre eRDF en el blog de Ian Davis.

La semántica de los enlaces: definiciones de atributo rev y rel

Jorge López — Fri, 09 Dec 2011 13:10:25 +0000

Con la aparición de los microformatos y más recientemente de los microdatos de HTML5, se ha desatado un enorme interés por la semántica. Hay muchas maneras de enriquecer texto para ayudar a los buscadoras a entender e indexar mejor la información que generamos. Un método clásico, pero no muy extendido, para generar metadados es a través de los enlaces.

Repasemos algunos atributos básicos de los enlaces. Como veremos, algunos de ellos ya aportan información extra sobre el contenido enlazado:

Definiciones de atributos

href: Especifica la localización de un recurso de la Web. La ruta generada podrá ser absoluta o relativa respecto a la web.
hreflang: Ester atributo sólo puede utilizarse junto con href, porque especifica el idioma del recurso enlazado.
title: Añade información sobre un vínculo. Esta información puede ser utilizada de manera opcional por los agentes de usuario o dependiendo de la versión de navegador, puede ser representada mediante un tool-tip.
name: Asigna un nombre a un enlace de modo que éste pueda actuar como destino de otro vínculo a modo de ancla.
type: Especifica qué tipo de contenido es el contenido enlazado con href. Por ejemplo, podemos especificar que lo que enlazamos es un documento PDF. Si es un tipo de contenido no soportado por los agentes de usuario, pueden optar por no mostrarlo. En este artículo repasamos algunos de los tipos de contenido registrados.
charset: Este atributo especifica la codificación de caracteres de la página o recurso enlazado con el atributo href.

Para enriquecer semánticamente los enlaces, los atributos más interesantes y puede que más útiles son rev y rel. Ahora veremos su función y sus valores.

Atributos rev y rel

rel: Permite definir la relación entre la página actual y la enlazada.
rev: Define la relación que tendrá la página enlazada con la actual.

Valores de los atributos de rev y rel

alternate: Indica que es una versión alternativa al documento actual. Cuando se utiliza conjuntamente con el atributo “hreflang”, significa que enlaza a una versión traducida del documento. Si es utilizada con el atributo “media”, implica que esa versión está preparada para un medio diferente (como una impresora)
stylesheet: Indica que se ha enlazado una hoja de estilos externa. Se puede utilizar junto con “Alternate” para ofrecer hojas de estilo alternativas seleccionables por el usuario.
start: Indica a los motores de búsqueda que el documento actual es considerado por el autor como el punto de inicio de un conjunto de documentos. Por ejemplo la primera página de una paginación o el primer capítulo de un manual…etc.
next – prev: Indica que es el documento que enlazados es anterior o siguiente al actual dentro de una secuencia lógica de documentos. En una paginación estos valores pueden sernos muy útiles.
index: Es el documento que hace la función de índice en una secuencia de documentos.
copyright: Se refiere al aviso de copyright del documento actual.
help: Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)

La especificación oficial de HTML define la lista completa de tipos de relaciones que se pueden utilizar.

Como microformatos

Se han creado varios microformatos para ser utilizados como valor de estos atributos. Algunos de estos microformatos son tan útiles y se han hecho tan populares que incluso han sido recomendados por google para no ser penalizados, a continuación veremos unos pocas aplicaciones:

nofollow: Sin duda es el más popular de todos. Fue propuesto por algunos buscadores para indicar qué enlace no debe ser considerado por los algoritmos de posicionamiento y de este modo para luchar más eficazmente contra los spammers. Su aplicación más común, es para aplicarlo a respuestas y comentarios en blogs. Enlace a documentación.
license: Indicar el tipo de licencia que tiene el contenido. Lo podemos utilizar para indicar que el destino del enlace es la licencia del contenido de la página actual. Enlace a documentación
tag: sirve para agregar etiquetas en los post de los blogs. Así podrá categorizar nuestras webs mediante la adopción de este tipo de etiquetas. Enlace a documentación

Umbraco

Eduardo Sainz — Tue, 06 Dec 2011 22:56:55 +0000

Es posible que a muchos no os suene de nada Umbraco, pero hoy por hoy, es uno de los CMS muy a tener en cuenta. Está desarrollado con C# y funciona sobre infraestructura Microsoft (.net).

Con Umbraco se pueden construir desde sitios pequeños (páginas personales, blogs) hasta crear sitios avanzados, portales, proyectos para grandes empresas. De hecho, grandes compañías ya han apostado por este gestor, algunas de renombre como Toyota, Sandisk, Microsoft, Peugeot, Vogue …, veamos que nos puede ofrecer este CMS.

Un poco de historia

Aunque muchos lo hayamos conocido hace poco, Umbraco no es nuevo; fue desarrollado por Niels Hartvig en el año 2000 y fue liberado como software open source en 2004, por lo que Umbraco se convierte en un CMS gratuito con un gran potencial. Está construído sobre Microsoft .NET Framework, sí, Microsoft y OpenSource parece que se están haciendo buenos amigos.

De Umbraco se puede destacar la sencillez y fácilidad de manejo, permite usar los controles de usuario .NET que hayas desarrollado con Visual Studio sin necesidad de realizar cambios de código, o bien utilizar controles personalizados comerciales. Soporta la mayoría de los lenguajes de la red y, por supuesto, todo lo referido a Ajax; aunque está escrito en C#, permite utilizar cualquier lenguaje compatible con .NET como VB.NET, IronPython, IronRuby, e incluso lenguajes “funky” como LOLCODE.

Maquetación de plantillas en Umbraco

Los maquetadores estamos de suerte, ya que incluye un compacto motor de plantillas, que permite editar y rediseñar plantillas existentes o bien, crear nuestro propioHTML y CSS sin restricciones, con un código limpio y accesible.

En la web oficial, nos ofrecen un una plantilla base, como punto de partida a nuestro diseño, utilizando el framework css 960 e incluyendo algunos propiedades de css3.

También dispone de una comunidad donde plantear nuestras dudas de maquetación

Después de trabajar con Umbraco, podemos afirmar que es unos de los gestores más flexibles a la hora de maquetar.

Enlaces de interés

Archivos HTC – HTML Components

Jorge López — Thu, 29 Sep 2011 14:52:39 +0000

¿Qué son los componentes HTC?

Los componentes HTC, fueron desarrollados por Microsoft para implementarlos en Internet Explorer 5.5 y posteriores. La idea era proporcionar un mecanismo alternativo para encapsular código y comportamiento DHTML en un componente de script.

En realidad los HTC son archivos XML que contienen secuencias de comandos y elementos específicos, como propiedades, métodos y eventos que definen dicho componente. Luego se guarda con extensión .htc.

¿Cómo se ejecutan?

Los archivos HTC se ejecutan en la hoja de estilo, con la propiedad behavior, de esta manera:

img {
  behavior: url(iepngfix.htc);
}

La propiedad behavior permite utilizar CSS para fijar un script a un elemento específico y aplicar a ese elemento componentes dinámicos, como los mencionados archivos .HTC.

Ten en cuenta que behavior es una propiedad no estándar que solo soporta Internet explorer. Por esta razón y para prevenir errores de validación, es conveniente aplicarla en una hoja de estilo exclusiva para explorer.

¿Para qué se utilizan?

Actualmente su utilización es muy limitada. Lo más normal es utilizarlos como hacks para IE o para replicar características que otros navegadores tienen y Explorer no puede reproducir de forma nativa.

¿Cómo modificarlos?

No hay mucho que decir en cuanto a desarrollo y modificación de archivos de HTC. Son básicamente estándar de Javascript, con un pequeño envoltorio XML. Por lo que si sabes Javascript, no deberías tener demasiados problemas modificar un HTC. De todas formas, Microsoft ha publicado documentación al respecto en HTC Reference

¿Por qué deberías utilizarlos?:

Como he dicho antes, solo tendría sentido utilizarlos si vas a escribir o modificar un hack para IE. Para prácticamente todo lo demás Javascript es la mejor opción.

La tabla periódica del SEO

Jorge López — Sat, 27 Aug 2011 16:48:26 +0000

El portal Search Engine Land, ha creado una imprescindible infografía que organiza como si de una tabla periódica se tratase, algunos factores que impactarán de manera positiva o negativa en el posicionamiento de una web.

Hay disponibles dos versiones de la tabla para descarga: la versión en formato extendido (con las descripciones y leyenda completa) y en formato reducido (solo el esquema).

En este artículo podréis encontrar un breve resumen y sobretodo el significado de las abreviaturas de la tabla para poder decodificarla correctamente.

Factores internos de posicionamiento

Factores On page:
Area	Abreviatura	Significado	Importancia del factor
Contenido	Cq	Calidad de contenido	+3
	Cr	Investigación de las palabras clave	+3
	Cw	Inserción de las palabras clave en el contenido	+3
	Ce	Contenido participativo	+2
	Cf	Contenido fresco y original	+2
Código HTML	Ht	Título de la página	+3
	Hd	Descripción de la página	+2
	Hh	Encabezados de la página	+1
Arquitectura	Ac	Página fácilmente rastreable	+3
	As	Velocidad de carga	+2
	Au	Construcción de la URL	+1

Factores externos de posicionamiento

Factores Off page:
Area	Abreviatura	Significado	Importancia del factor
Enlaces	Lq	Calidad de los enlaces entrantes	+3
	Lt	Texto de los enlaces	+3
	Ln	Número de enlaces que apuntan a tu sitio	+2
Social	Sr	Reputación del sitio	+2
Social	Ss	Con cuántos usuario se comparte el sitio	+1
Confianza	Ta	Reputación del sitio	+3
Confianza	Th	Antigüedad del dominio	+1
Personal	Pc	País de origen de la visitas	+3
	Pl	Ciudad de origen de la visitas	+3
	Ph	Fidelidad de las visitas	+2
	Ps	Opinión de tus amigos sobre el sitio	+1

Factores con posible penalización

Violaciones
Abreviatura	Significado	Importancia del factor
Vt	Contenido superficial y sin sustancia	-2
Vs	Utilización excesiva de palabras clave	-1
Vh	Ocultación de contenido	-1
Vc	Engañar a los robots de búsqueda	-3
Vp	Uso de enlaces de pago	-3
Vi	Creación de spam	-1

Tipos de bloqueos

Bloqueos
Abreviatura	Significado	Importancia del factor
Bp	Bloqueos personalizados	-1
Bt	Bloqueos masivos o totales	-3

Tecnologías propietarias en el desarrollo web

Jorge López — Mon, 22 Aug 2011 15:38:26 +0000

Las Innovaciones patentadas por los fabricantes de software son algo muy común. Algunas se han convertido en tecnologías básicas para el devenir del desarrollo web y han sido ampliamente aceptadas, otras han fracasado miserablemente y han caído en el olvido.

En algunos casos, estas tecnologías solo funcionan en un entorno concreto, en otros solo funcionan mediante un plugin específico que no tiene por qué estar instalado junto al navegador, incluso hay tecnologías que se debe pagar licencia para poder ser utilizadas.

En este artículo repasaremos brevemente algunas de las más importantes.

VML – Vector Markup Language

Desarrolladores: Autodesk, Hewlett- Packard, Macromedia, Microsoft y Visio.
Características: VML es un lenguaje XML para la creación de gráficos vectoriales. Fue presentado para su estandarización al W3C en 1998 compitiendo con PGML. Tras de un largo examen, el W3C decidió combinar esos dos formatos originando el formato SVG.
Inconvenientes: Sólo las aplicaciones de Microsoft soportan este lenguaje.

PGML – Precision Graphics Markup Language

Desarrolladores: Adobe Systems, IBM, Netscape, y Sun Microsystems
Características: Otro lenguaje basado en XML para la representación de gráficos vectoriales. Se presentó a la W3C no siendo aprobado para su recomendación.

Adobe Flash

Desarrollador: Adobe systems
Características: Se trata de la tecnología de creación y edición de animaciones vectoriales más popular. Es actualmente la herramienta más utilizada para la reproducción de video en la red, aunque con la implantación progresiva de HTML5 y CSS3, puede que esta situación cambie en poco tiempo.
Inconvenientes: Es necesario que el navegador tenga instalado el plugin correspondiente para poder visualizar el contenido generado en Flash.

Silverlight

Desarrollador: Microsoft
Características: Silverlight fue lanzado en 2007 para competir con Flash en la creación de contenido multimedia para la web. Por ahora no ha conseguido una implantación muy profunda.
Inconvenientes: Esta tecnología no utiliza el estándar SVG, además el contenido introducido en la red mediante Silverlight, solo podrá ser actualizado y modificado desde la plataforma Windows.

Applets de Java

Desarrollador: Sun Microsystems
Características: Un applet es un programa precompilado que se puede incrustar en un HTML. La idea es que deben ser descargados y ejecutados por el navegador, lo que permite crear programas que se puedan ejecutar solo cargando una web. Se pueden utilizar en cualquier sistema que tenga instalada una Java Virtual Machine.
Inconvenientes: Del mismo modo que Flash, los applets requieren un plugin específico que no está disponible por defecto en los navegadores.

Controles ActiveX

Desarrollador: Microsoft
Características: Fueron la respuesta de Microsoft a los applets de Java. Están construidos sobre el modelo de componentes de Windows.
Inconvenientes: Sólo operan oficialmente en Internet Explorer (aunque existen opciones para ejecutarlos en otros navegadores) y en el sistema operativo Windows.

Fuentes OPEN TYPE

Desarrolladores: Microsoft, Adobe systems
Características: OpenType es un formato de fuente basado en TrueType. La especificación continúa en desarrollo y en la actualidad se encuentra en proceso de convertirse en un estándar abierto. Debido a su su versatilidad es ampliamente utilizado en la mayoría de los navegadores y sistemas operativos.

Fuentes EOT – Embedded OpenType

Desarrollador: Microsoft
Características: Es una variación de los formatos TrueType y OpenType.
Inconvenientes: Es compatible exclusivamente con Internet Explorer.

Formato GIF – Graphics Interchange Format

Desarrollador: CompuServe
Características: Es un formato de imagen sin pérdida que comprime los archivos usando un algoritmo llamado LZW. Fué muy utilizado en los noventa sobre todo para mostrar pequeñas animaciones, al tratarse del único formato soportado por multitud de navegadores que permita dicho efecto.
Inconvenientes: Solo puede contener 256 colores. En la mayoría de los casos tiene un rendimiento de compresión inferior respecto al formato libre PNG

Tecnología ASP – Active Server Pages

Desarrollador: Microsoft
Características: ASP es un lenguaje de servidor que permite el uso de diferentes scripts y componentes ya desarrollados junto con HTML para mostrar páginas dinámicas.
Inconvenientes: Solo funciona con servidores que utilizan el sistema operativo Microsoft.

VBScript – Visual Basic Script

Desarrollador: Microsoft
Características: Fue un lenguaje de programación de scripts basado en Visual Basic desarrollado para competir, con poco éxito, con Javascript en entornos de cliente. Microsoft decidió abandonar esta tecnología en favor de .NET.
Inconvenientes: Era compatible exclusivamente con Internet Explorer.

¿Destacarías alguna tecnología propietaria más?

Una mirada sobre la mejora progresiva y la degradación elegante

Jorge López — Tue, 16 Aug 2011 15:00:35 +0000

Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?

Existen dos estrategias para afrontar este reto: la degradación elegante (graceful degradation) y la mejora progresiva (progressive enhancement).

Estas dos filosofías de desarrollo coinciden en varios puntos:

Un sitio web debe funcionar correctamente ante la multiplicidad de navegadores y dispositivos.
Hay que separar en varias capas el contenido, la presentación y la funcionalidad de los proyectos.
Lo más importante es el marcado semántico y la extensión de los estándares web.

En el fondo tienen un enfoque radicalmente distinto. La clave está en el afecto que tienen estos puntos en el flujo de trabajo.

Degradación elegante

La degradación elegante es un concepto importado de la ingeniería desarrollado por el psicólogo David Courtenay Marr. La traslación al diseño web viene a significar que un sitio debe funcionar y visualizarse de forma básicamente parecida independientemente del navegador o dispositivo utilizado. Paliando en la medida de lo posible el empobrecimiento de un diseño que se producirá por las limitaciones técnicas de los navegadores más anticuados.

En la práctica esta técnica se reduce a utilizar sólo aquellas características que sean soportadas correctamente por navegadores obsoletos o muy limitados técnicamente como Internet Explorer 6 o 7. Esto relega a otras tecnologías más avanzadas, como CSS3 a un indefinido futuro en el que serán ampliamente soportadas por la mayoría de los navegadores y dando lugar a anacronismos como que sigan utilizándose navegadores de más de diez años de antigüedad. Al fin y al cabo ¿para que los usuarios se van a actualizar de navegador, si las páginas no van a ofrecer una mejora visual de un navegador a otro?

Asegurar que nuestras webs se vean igual en navegadores de dos, tres y hasta cuatro generaciones de antigüedad, no resuelve el problema de cómo implementar nuevos estándares y tecnologías sin que la experiencia de usuario se vea mermada.

La técnica de la degradación elegante conlleva un tiempo extra de optimización para cada navegador (Cross-browser). Como es de suponer, es necesario albergar un sólido conocimiento de cada navegador y tener todo un catálogo de soluciones para contrarrestar las posibles limitaciones que nos vallamos encontrando. Las enormes dificultades para poder comprobar nuestras páginas en los cada vez más numerosos y variados dispositivos y navegadores están provocando que algunos maquetadores adopten la solución más radical posible, proponer al usuario que simplemente se descargue la última versión del navegador.

Como desarrolladores web no tenemos derecho a decidir por los usuarios que navegador deben utilizar, sobretodo porque muchos de ellos quizá no tengan ni el control, ni las capacidades, ni el software necesario para soportar estas últimas versiones. Lo que sí que podemos hacer es adoptar otras filosofías de desarrollo.

Mejora progresiva

El concepto de mejora progresiva fue acuñado por Steven Champeon, en su conferencia Inclusive Web Design for the Future en 2003.

Esta filosofía implica que los sitios web dispondrán de las características más avanzadas a medida que el navegador que las ejecuta sea más avanzado. Esto permite aprovechar todas las posibilidades CSS sin perjudicar a los navegadores obsoletos o limitados. De este modo se premia al usuario por la utilización de un navegador más moderno, y los usuarios desactualizados no tendrán quebranto alguno al acceder al contenido de una web.

Si suponemos que los navegadores más anticuados tienden a desaparecer a medida que los usuarios los van actualizando, es lógico ir introduciendo tecnologías más modernas para que nuestros desarrollos estén mejor preparados para soportar los estándares del futuro. ¿Tanto daño hace que unos usuarios vean los bordes redondeados y otros los vean cuadrados?

Para encarar la mejora progresiva de un proyecto propongo que la maquetación web se realice siguiendo los siguientes puntos:

La maquetación debe permitir el correcto acceso a la información de una página, independientemente del tipo de navegador o dispositivo utilizado por el usuario.
Utiliza aquellas características que aunque sólo los navegadores modernos puedan visualizar, los navegadores antiguos puedan ofrecer una alternativa viable (esta es una manera conservadora de afrontar este paradigma).

Algunos ejemplos de mejora progresiva pueden ser:

La utilización de una API de tipografías (como Google) para aquellos navegadores que pueden soportarlas.
Propiedades CSS3 como text-shadow, border-radius o Gradient para los navegadores habilitados.
Animaciones y fotografías en formato SVG.
Fotografías en formato PNG con transparencia.

De este modo, los desarrolladores nos dotaremos de una base para la experimentación y la innovación respetando los estándares y el diseño universal sin excluir a ningún usuario. Eso es lo que a mi modo de ver, hace a la mejora progresiva un paradigma más acertado y ajustado al cambiante mundo del desarrollo web. Es por eso que en Yahoo lo adoptaron rápidamente y lo han utilizado para crear su estrategia de soporte de navegador gradual.

Mas información: