aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace 3 años que vimos las primeras noticias sobre el borraror de la W3C sobre los Widgets. Y ya entonces vimos que el tema prometía. QuirksBlog nos muestra una introducción sobre como usar estos Widgets.

¿Que es un widget?

Esencialmente un Widget es un conjunto de HTML/CSS/Javascript locales. Decimos locales, por que una vez que, por ejemplo, un movil descarga un widget debe ser capaz de usarlo localmente, al quedar instalado en él.

Aunque actualmente la utilización de widgets es muy límitada, lectores de RSS, relojes,… no hay razones teóricas de que no puedan ser capaces de crear aplicaciones basadas en Javascript realmente complejas, por ejemplo una Hoja de Cálculo.

La belleza de este modelo, es que aunque una aplicación requisiera 200kb de Javascript, más una serie de librerías, el usuario únicamente tendrá que descargarlo una sola vez. Después de la descarga, la aplicación se instala y las próximas veces se ejecutará en local sin necesidad de descargar nada.

En caso de requerir cualquier dato externo al widget, dispone de una interface que nos permite realizar peticiones Ajax y cargar el contenido en el momento que lo necesitamos.

Los W3C Widgets nacen como estandarización a los ya existentes creados para dispositivos como el iPhone, móviles Android, … que usan sistemas propietarios y únicamente adaptables a sus dispositivos. Con W3C Widgets se intenta crear un sistema que permita la interoperatividad de estos widgets en diferentes dispositivos sin necesidad de tener que modificar una sola línea de código del widget. Y todo ello aprovechando las técnicas HTML/CSS/Javascript que los desarrolladores conocemos.

En fin, los W3C Widgets apuntan como el futuro de la web movil. Son fáciles de crear, usan estándares abiertos y se ajustan al mínimo consumo de la red.

Información técnica

Los Widgets no son más que sitios web comprimidos. Creamos un fichero HTML, le añadimos los estilos necesarios en ficheros CSS y la funcionalidad viene dada en ficheros Javascript. Todo ello comprimir en un fichero zip, al que le cambiaremos la extensión a .wgt y listo. ¿Sencillo verdad?

Actualmente la especificación está continua como Working Draft (Borrador) modificado últimamente el día 5 de Febrero de 2009. Aunque el proceso está siendo tan lento como la W3C ya están las bases muy bien definidas.
Continua —>

JSHTML, es una propuesta de James Padolsey para generar HTML mediante Javascript de una forma dinámica y no obstructiva.

<div id="content">
    <!-- JSHTML {{
        <ul id="controls">
            <li><a href="#add">Add content</a></li>
            <li><a href="#print">Print this</a></li>
        </ul>
    }} -->
    <p>Lorem ipsum dolor...</p>
</div>
// Javascript
JSHTML.parse();

De esta forma conseguimos ocultar el contenido del comentario a los usuarios que no disponen de Javascript. Sin provocar que la aplicación deje de funcionar.

Se trata de un <noscript /> inverso desarrollado en Javascript. Que seguro que alguna utilidad encontraremos para él

Podéis ver un ejemplo aquí y revisar el código que se encarga de convertir el comentario en HTML.

Durante la evolución de un proyecto tendemos, sin darnos cuenta, a ensuciar nuestro código. Ya sea aplicando parches a los fallos encontrados o añadiendo nuevas funcionalidades no pensadas previamente. Por ese motivo conocer algunos principios básicos nos pueden ayudar a crear un código que se mantenga en el tiempo igual que el primer día.

1) Doctype STRICT

Si ya tienes algo de soltura deberías apostar por STRICT para definir en el doctype de tu web. De esta forma estarás asegurándote un poco más de tiempo con un doctype válido.

2) Cuidado con el carácter & (&) y demás carácteres especiales

Los carácteres especiales en el texto deben ir siempre codificados según el estandard, así conseguimos que nuestro código sea limpio y evitamos producir errores innecesarios y fáciles de solventar en el validador de la W3C.

3) Indentación, Indentación … indentación

Por encima de la eficiencia del código, la mayoría de proyectos deben ser claros y fáciles de interpretar por cualquiera. Piensa que no sabes si dentro de 3 meses o 5 años, vas a tener que volver a tocar el código. Así que dedícate un tiempo para indentar el código y dejarlo claro.

4) Separa el contenido de la funcionalidad y el diseño

No me cansaré de decir que la separación de capas es algo primordial, al igual que la identación ayuda a la comprensión del código, la separación de las diferentes capas ayuda a conocer donde está ubicada cada parte de la web. Sin contar que conseguir idependizarlas, lo que nos permite modificar cualquiera de ellas afectando a las demás sin necesidad de modificar las demás.

5) Usa los tags correctamente

Conocer las propiedades de los tags HTML permitirá que hagamos un código más semántico y sobretodo estandar. Es importante usar los tags correctamente ya que aunque el navegador permita mostrar el contenido como nosotros queremos mostrarlo, la estructura correcta nos ayudaría en terminos de SEO…

6) Elimina elementos innecesarios

Por desgracia al pasar del diseño en tablas al diseño con divs, podemos caer en una etapa de “divitis” que nos hace usar div’s para todo. No debemos usar elementos innecesarios para conseguir lo mismo que conseguiríamos con menos elementos. Este punto hace refecia directa al punto 5.

7) Piensa bien los nombres que usas

En muchos casos tendemos a usar nombres poco descriptivos a demasiado descriptivos. Este ejemplo muestra ua muestra clara de lo que quiero decir:

8 ) Deja la tipografía a los CSS

Debemos pensar que el diseño lo controla el CSS, y por ello todo lo relacionado con él debe ir reflejado en los ficheros CSS. Por ejemplo, el texto en mayusculas podemos solventarlo con text-transform: uppercase;

9) Class/ID en el <body />

Una forma de conseguir mayor flexibilidad en nuestros CSS es usar id/class en nuestros elementos <body />. De esta forma podemos variar el diseño de ciertos elementos dependiendo dle tipo de body que especifiquemos.

10) Validación

La validación de nuestro código es más que poner un icono en la parte inferior. La validación nos ayuda a completar unos aspectos básicos que los diseños web deben cumplir. No implica que un desarrollo esté mejor o peor hecho, sinó que nos ayuda a conguir un mínimo imprescindible para diferenciarnos del código generado por un programa (Frontpage,…).

11) Aplícale lógica a la estructura

Hemos de pensar que el código se ha de leer de arriba hacia abajo y que siguiendo esta premisa debemos generar una estructura colocando elementos seguidos unos a otros de una forma lógica. Hemos de pensar 2 veces si colocamos un elemento en esa posición o lo ponemos en otra.

12) Haz lo que puedas

El esfuerzo se nota y aunque no sea a la primera, ni a la segunda, llega un momento en el que ese esfuerzo se acaba recompensando. Simplemente hemos de ser pacientes y esperar a que ese momento llegue.

Drawter es una de esas aplicaciones curiosas que van saliendo cada X tiempo para mostrarnos una forma alternativa y cómoda de crear estructuras HTML para nuestras páginas web. Con Drawter, podemos crear estructuras HTML basadas en recuadros que compondrán la página que al final codificaremos.

Mediante el uso del ratón vamos creando las secciones de la página web y le vamos dando nombre a cada uno de ellos, especificando ciertos parámetros CSS que la aplicación nos deja modificar. Una vez creada la estructura podremos obtener el código CSS y HTML necesario para conseguir esa estructura

Si alguna vez has intentado generar un mail en formato HTML sabrás los problemas con los que nos encontramos al visualizar dicho correo en los diferentes cliente disponibles, ya sean Offline u Online.

Para estos casos, es bueno tener una lista como esta con los estilos disponibles para cada unos de los clientes de correo, que pese a no cubrir todos los disponibles (imagino que debe de haber millones, entre offline y online) nos consigue dar una idea realmente clara de que estilos podemos usar y cuales no.

Si trabajamos con ello a diario, podremos descargarlo en formato PDF o en un formato Excel.

Hace un año y unos meses, Douglas Crockford proponía la creación de un nuevo tag HTML que nos permita facilitar la creación de Mashups. La propuesta sobre el tag <module /> intenta separar los componentes que forman un mashup dentro de nuestra página del resto de elementos.

<module id="NAME" src="URL" style="STYLE" />

El tag estaría compuesto de 3 atributtos que nos permitirán definir nuestro módulo. El atributo id, informaría el nombre del módulo, único en cada página. src la ruta en la que se encuentre el mashup y style haría que nuestro módulo se integre perfectamente en nuestra página.

Al igual en el arbol DOM, tendríamos 2 métodos que nos permitirían trabajar con el módulo, receive() y send(), ambos pasando estructuras json como parámetro al módulo. Estos métodos tendrían sus respectivas funciones desde la parte del módulo que harán posible la interacción con nuestra página.

Como Douglas dice, esta propuesta ofrece un intento de ser el principio de un consenso sobre un nuevo modelo de seguridad para los navegadores. El desarrollo de aplicaciones web han hecho aumentar la demanda de tecnología significativamente y los navegadores, necesitan ponerse al día rápidamente.

Lamentablemente no he encontrado más información al respecto, por lo que metemo que se ha quedado en una simple propuesta al aire, pero la idea es realmente interesante.

Los chicos de Coding Horror, han escrito “Don’t Click Here: The art of Hyperlinkng“, un artículo muy interesante que Hector (Armonth) ha traducido al castellano para que no se nos escape ningún punto y podamos enlazar correctamente, o sin molestar en exceso a nuestro usuarios.

El artículo se compone de una serie de puntos que podemos usar a modo de guia: 

1. Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos.
2. El primer enlace es el más importante.
3. No abuses de los enlaces.
4. No alternes radicalmente el comportamiento de los enlaces.
5. No titules tu enlace como “Click aquí”.
6. No enlaces cosas que el usuario puede querer seleccionar y copiar.
7. No incluyas iconos en cada enlace.
8. No hagas el contenido dependiente de los enlaces para funcionar.
9. No ocultes tus enlaces.
10. No mezcles anuncios y enlaces. 
11. No ofusques tus URLs.

Para los más amantes del código unos consejos más

1. Usa un texto descriptivo para tu enlace.
2. Indica el idioma del destino con hreflang=""
3. Usa rel="" siempre que puedas
4. Informa el atributo type="" para indicar el tipo de documento que vas a visitar.
5. Usa charset="" para que se pueda saber el charset del página destino.

Y recuerda,

NUNCA OLVIDAREMOS LA ACCESIBILIDAD. LOS ENLACES ENLAZAN

CORRECTO

 <script type="text/javascript">
    var el = document.getElementById("t");
    el.addEventListener("click", FUNCIONALIDAD, false);
</script>
 <a href="http:/...." id="t">Enlace correcto</a>

NO CORRECTO

<a href="#">Enlace NO Correct</a>