Mostrando las entradas con la etiqueta web. Mostrar todas las entradas
Mostrando las entradas con la etiqueta web. Mostrar todas las entradas

2017/08/28

El problema de la sobrecarga innecesaria

Problemas reales

Pienso que resolver problemas es una cuestión de prueba y error.

Que no es como te lo enseñan en la escuela, donde aprendes a copiar soluciones de los libros de texto.

Resolver un problema es como andar a tientas por una habitación a oscuras, tratando de llegar a la puerta.

Lo que te dan los libros de texto son como escenarios prefabricados de juegos con finales conocidos. Llenos de cosas que los maestros han puesto y con rutas de solución que ellos ya conocen.

En los problemas reales, puede haber más de una ruta de solución. O ninguna.

También encontraras montones de cosas que te sirven mezcladas con cosas innecesarias. Y necesitarás aprender a notar cuál es cuál.

Enfrentarte a problemas reales despierta cierto sentido. Aprendes a escuchar al problema. Aprendes a buscar dentro de ti. Aprendes a construir caminos.

Patrones

Conforme vas resolviendo problemas, te das cuenta que se repiten ciertos patrones para solucionarlos.

Identificar estos patrones ayuda a catalogar las soluciones y facilitar su reutilización.

Por ejemplo:
  • Qué tal si divido el problema en partes. Si varias de esas partes me son familiares, podría avanzar por allí.
  • Qué tal si solo considero algunos detalles (eso se llama abstracción). A lo mejor veo más claro en esa versión simplicada.
Ayuda dividir el trabajo web en partes separadas.

También ayuda quitar de en medio una problemática innecesaria.

MVC

Modelo-Vista-Controlador es un patrón de desarrollo web que divide el trabajo en tres areas:
  • Vista: la interfaz de usuario, HTML, CSS, Javascript
  • Modelo: los datos que la Vista mostrará
  • Controlador: el que orquesta las actuaciones de la Vista y el Modelo
Se trata del patrón Qué tal si divido el problema en partes. La idea es concentrarse en cierto aspecto del desarrollo para simplificar el trabajo.

Componentes

El desarrollo de un site o una aplicación web, no es una tarea definida. Es un problema cuyas tareas hay que ir descubriendo en el camino, durante sucesivas iteraciones. No es ir de la A a la Z y ya. Es ir por las letras de un mensaje desconocido, fallando y acertando mientras se va haciendo más claro.

Para iterar con agilidad, necesitamos poder hacer cambios con facilidad.

¿Ayuda MVC en esto?

MVC ayuda a enfocarse en cierto aspecto del problema y a organizar todas las cosas en esas tres grandes areas. Pero esa virtud también tiene su inconveniente. La navegación por el mar de las posibilidades se vuelve muy, muy pesada. Cierto que sabemos donde queda cada cosa y eso es muy bueno. Pero, por otro lado, la implementación de cada idea se vuelve engorrosa.

Imaginamos las cosas naturalmente como componentes, pero en MVC cada solución o variante que imaginemos tiene que ser dividida en tres partes antes de poder implementarlas. Es un ejercicio constante de traducción entre lo que imaginas y lo que haces para producirlo.

Está bien, pero quizás podría ser mejor.

Entran los componentes.

¿Qué tal si dividimos las cosas no por areas M, V, C, sino por funcionalidades, por componentes?

Es parecido a decir, que tal si en lugar de tener carpetas css, js, images, tenemos varias carpetas home, contact, menu, header, product, etc, cada una representando una funcionalidad o conteniendo otras carpetas de funcionalidades.

Confusiones papistas

Más papista que el Papa, dice un refrán. En algunos proyectos hay personas que adoptan esta actitud de defender algo como cierto porque sí, porque así es.

Gente que toma MVC como una biblia o estresa al equipo que obvia una ceremonia del scrum.

Lo importante es honrar el por qué de las cosas. MVC busca claridad. Scrum busca bienestar del equipo.

¿Los componenentes podrían hacerlo mejor? ¿Podríamos sentirnos menos estresados? Probemos.

El problema en el Frontend

Este es más o menos el flujo de trabajo que se sigue al desarrollar web:
  1. Se propone un diseño gráfico base
    Algunos insisten en querer tener todo resuelto en este punto, pero es crear falsas expectativas y sufrimiento innecesario.
    Es importante que el cliente entienda que el desarrollo es iterativo (hablando de eso, también es importante que el equipo de desarrollo lo entienda ^^).
  2. El diseño gráfico se maqueta con HTML, CSS y Javascript
    Los datos son hardcodeados.
    Algunos insisten en querer maquetar directamente sobre un framework, pero es crear lastre mental innecesario, además de amarrar la maqueta a ese ambiente.
  3. La maqueta es vuelta template, según el framework que se va a usar
    Los datos son mockupeados. Es decir provisto por endpoints que devuelven data hardcodeada.
    Algunos insisten en hacer endpoints reales de una vez, pero también es crear lastre mental innecesario tratar de enfrentar más de un problema a la vez.
  4. La aplicación es provista de datos reales
    Ya que las anteriores etapas han resuelto una cosa a la vez, se reduce bastante el número de posibilidades de error en este punto.
  5. El cliente quiere un cambio
    Procedemos a iterar.
Aquí es donde se presenta el problema. En la atención de los cambios.

Como las revisiones ya se están haciendo con datos reales, las circunstancias presionan para no ir al paso 1, sino iterar sobre el paso 4.

No se actualiza la propuesta gráfica, ni la maqueta en puro HTML. Se percibe como demasiado engorroso. Se hacen los cambios directamente sobre el template con toda la infraestructura corriendo.

Paradójicamente, eso no es más rápido, ni más seguro.

Para hacer cualquier cambio en el template, con la infraestructura corriendo, tienes todo un ecosistema de base de datos, modelos y controladores funcionando... innecesariamente.

Resolver un cambio en un template es un problema más complicado porque tienes que cargarte mentalmente de todas las convenciones y protocolos del framework, y de todas las circunstancias y problemas que otras areas estén atravesando (que la configuración del entorno ha variado, que por ahora no uses este endpoint sino este otro, que hay un servicio que se ha caído y debemos esperar, etc, etc).

En cambio, hacer los cambios sobre la maqueta es un problema aislado, más sencillo y rápido de resolver.

Creo que es mejor resolver los problemas en la maqueta y luego recién llevar esa solución al template.

Si el paso de convertir una maqueta a template no fuera manual sino automático (o si no existiera), creo que sería más sencillo y rápido hacer cambios de UI.

juno-cheerio y unophp han sido algunas iniciativas personales para automatizar el paso 3. La idea de unophp se puede adaptar incluso para WordPress.

Pero por ahora, tenemos este problema en Frontend: cómo atender con más facilidad los cambios que se requieren durante las iteraciones del proyecto.

Antipatrón

Yo diría que es un antipatrón que el frontend requiera que todo el motor del proyecto, con su base de datos, endpoints, etc, deba estar corriendo para hacer sus cambios.

Es complejidad innecesaria para esa tarea.

Entiendo que en Integración Contínua se prueban las cosas sobre infraestructuras reales corriendo. Es porque necesitan hacer pruebas en ese nivel. Pero hacer el desarrollo en ese mismo nivel no me parece lo más optimo.

Sería mejor poder aislar esa parte a voluntad, poder crear un entorno donde no exista otra complejidad más allá de lo que quieres resolver, hacer el cambio, y luego, mágicamente, incorporarlo al proyecto completo.

2017/08/09

UX para todo(s)


Nota: Por favor, lee esto con la mente abierta. Si eres frontend, creo lo entenderás. Si eres backend, por favor, no me malinterpretes; también he hecho algo de backend y muchos de mis amigos son backend. No tengo nada en contra de los backend. Excepto quizás la optimización prematura, el overkill (pero eso es algo que se ve en todas partes), y esto.

Encuentro que hay una discusión entre frontend y backend. Entre los chicos que hacen las interfaces para el usuario y los que preparan la data que se mostrará.

Es más o menos así: los backend pretenden que los frontend tienen que usar sus apis cómo a ellos les de la gana de hacerlas.

Por supuesto pueden esgrimir un montón de argumentos; que el mejor modelamiento de las tablas, que la auto documentación, que la optimización, etc.

Lo que yo digo es solamente esto: imagínate que los frontend pretendiéramos que los usuarios tienen que arreglárselas para usar las interfaces que nos diera la gana de hacer.

¿Que así es como haces tus interfaces de usuario? Detente, stop, para un momento.

Por supuesto que durante muchos años se ha hecho así; con la dictadura de los diseñadores sometiendo al usuario y obligándoles a aprender que la opción que buscaban estaba nada más a cuatro clicks de distancia, debajo de un menú desplegable que actuaba cuanto pulsabas la tecla alt después de escape (bueno quizás no tanto, pero seguramente captas la idea).

Pero la abundante oferta de aplicaciones y la despiadada elección de los consumidores ha hecho que recapacitemos y escuchemos al usuario y qué tipo de experiencia realmente le ayuda a conseguir lo que necesita. Porque lo que la UX busca no es que las interfaces sean más bonitas (es un malentendido de marketing); lo que busca es que las interfaces puedan dar lo que se necesita sin obligar a hacer un esfuerzo innecesario.

Además, mira el nombre, "interfaz de usuario", no dice "interfaz del programador frontend". No se supone que debas sentirte cómodo programándola; quizás tengas suerte y sea entretenido, estimulante, o quizás no y sea un dolor de cabeza y un verdadero desafío cómo resolver una interacción; lo importante es que el usuario pueda sentirse cómodo usándola, sin esfuerzos innecesarios.

Pues bien, del mismo modo, la API que se entrega a los frontend es la interfaz con la que nos comunicamos con la fuente de datos. Una buena API no es aquella que sea cómoda o fácil de programar para los backend; puede que lo sea, si se organizan bien, pero es un rollo interno, que no debe atravesar la interfaz. Porque recordemos que se trata de una interfaz: la comodidad y facilidad deben estar del lado de quién la va a usar.

Un backend debería hacer con el frontend el mismo ejercicio que el frontend hace con el usuario. Observarlo, ver cómo va a usar la API, conversar con él acerca de sus necesidades reales, empatizar.

No creo que necesitemos una especie de Frontend eXperience (no más siglas, por favor), sino que comprendamos que los mismos principios que venimos a reconocer como válidos al aplicar UX son aplicables también a la hora de desarrollar interfaces para otros desarrolladores. Puede ser un API REST, o puede ser una librería, o un framework, o cualquier herramienta en general.

En una interfaz, la comodidad y facilidad deben estar del lado de quién la va a usar. Creo que es el principio que guia a la UX y está ayudando a crear más software realmente valioso para los usuarios. Y creo que es hora que apliquemos lo mismo a la relación frontend-backend (y en todas aquellas donde veamos una interfaz), y ayude a crear herramientas realmente valiosas para desarrollar mejor mejores aplicaciones.

2014/08/15

Google Web Starter Kit

Comparto este enlace donde he anotado algunas cosas.

Google Doc: Aprendiendo Google Web Starter Kit

2012/09/24

Resolviendo Soporte Drag para Flexslider

Es posible usar el plugin jquery.event.drag para proveer soporte para drag a Flexslider (es decir que permita arrastrar los sliders con el ratón en el desktop, de modo similar a como permite hacerlo en un dispositivo tipo touch):

- Usando el plugin jquery.event.drag (http://threedubmedia.com/code/event/drag/)
- En jquery.flexslider.js, copio el bloque que da soporte a mousewheel y lo uso como base para el soporte para drag:
...
// MOUSEWHEEL:
if (vars.mousewheel) {
  slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
    event.preventDefault();
    var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
    slider.flexAnimate(target, vars.pauseOnAction);
  });
}
// DRAG:
if (vars.drag) {
  slider.bind('drag', function(event, delta) {
    event.preventDefault();
    var target = (delta.deltaX < 0) ? slider.getTarget('next') : slider.getTarget('prev');
    slider.flexAnimate(target, vars.pauseOnAction);
  });
}
...

- También agrego 'drag' en los defaults de flexslider:
...
$.flexslider.defaults = {
  ...
  mousewheel: false,
  drag: false,
...

- Entonces, en el script, se puede usar 'drag: true' cuando se requiera:

$('.flexslider').flexslider({
  animation: 'slide',
  slideshow: false,
  drag: true
});

Referencia:  Request: add mouse dragging for desktop users

2012/07/05

L Button

¿Es posible hacer hover de un botón con forma que no sea rectangular (por ejemplo, con forma de L)?

Aquí un ensayo de la idea: http://jsfiddle.net/rulokc/evbhg/

2012/05/28

Publicar página web en GitHub

Es posible usar GitHub para publicar una página web estática.

Por ejemplo, para un portafolio. A continuación, como empezar con el index.html.

  • Siendo usuario de GitHub, crear el repositorio portafolio. Elegir que cree el README.
  • Clonar el repositorio: git clone git@github.com:myusername/portafolio.git
  • Crear el branch gh-pages: git checkout -b gh-pages
  • Crear index.html y agregarlo: git add .
  • Commit: git commit -am "created index.html"
  • Push: git push origin gh-pages
  • Revisar http://myusername.github.com/portafolio/

2012/05/25

Vertical Site

Introducción
La motivación fue hacer un site similar a:
Revisando believein (pude bajar el site usando wget, Firebug y un poco de paciencia), me resultaba un poco difícil encontrar la clave del comportamiento que veía.

Encontré una aproximación en Curtain.js. Sin embargo, cuando requería modificar la presentación, también me resultaba un poco difícil encontrar dónde hacerla.

Decidí reinventar la rueda de este caso, para tratar de comprender las ideas del proceso de solución.

Los sites que revisé me dieron pistas.

En este tutorial trato de resumir el proceso.

vertical-site@github

Simple HTML
  • Todo el contenido está presente en el mismo documento.
  • El contenido se divide en secciones a las que denomino pages.
  • Cada page es el destino de un link del menú. Esto permite una navegación simple a enlaces internos.
Aplicando estilos básicos:

index.html
style.css

Nav fixed
  • Se fijan los elementos de navegación: cabecera y menú.
    En simple_html, estaban dentro de page-0 (para permitir ver el menú cuando se fuera a HOME). Como ahora serán siempre visibles, eso no es necesario.
  • Se implementa un indicador de posición, que señale en el menú la página activa.
    • En el menú, aparece resaltado el link a.active
    • El link se activa si el url cambia
    • El url cambia
      • cuando se ingresa a mano
      • cuando se hace click en un enlace del menú
      • cuando se hace scroll
    • El plugin address permite responder ante un cambio del url.
index.html
style.css
script.js

Scrollto
  • Scroll animado suave.

index.html
style.css
script.js

(continuará...)

2012/05/15

El poder de la gente


Hay una idea en Internet que me parece notable. Lograr que la gente lo pueda hacer por nosotros, voluntariamente. Una red social seria sostenible si logra que sus usuarios la construyan. Y seria un negocio para el intermediario que facilitara el proceso.

En Facebook, la gente sube la información que aumenta el valor de esa red social. Facebook permite a la gente a compartir su información y, al hacerlo, la gente potencia a Facebook.

En el juego Draw Something, de OMGP, es la gente la que provee a sus amigos el acertijo -en forma de dibujo-, que deben adivinar. Draw Something permite crear los acertijos y, al hacerlo, la gente hace funcionar Draw Something.

La gente puede subir a la red videos, fotografías, opiniones sobre cosas que les parecen interesantes, que le asombran, que le indignan, por las que piensan se puede hacer algo, para compartirlo. Y, al hacerlo, ¿qué estamos haciendo funcionar?

Un amigo me comenta de un video donde aparece un tipo que no quiso ceder el asiento preferencial en el bus. Puesto en la red, ha recibido condena casi unánime. Incluso aparece en el sitio web de un diario local. No es necesario un controlador si nosotros mismos podemos proveer ese servicio.

En "1984", la obra de Orwell, el Gran Hermano requería de grandes recursos y todo un sistema policial para lograr que las cosas funcionaran como quería. Pero no es necesario. Hoy, la gente puede hacer funcionar al Gran Hermano, casi sin darse cuenta.

2012/03/14

Escribiendo aplicaciones para Facebook


Escribiendo aplicaciones para Facebook
A pesar de la documentación que hay en https://developers.facebook.com/docs/, necesitaba algo que me diera una perspectiva en el tema. Leyendo un poco en otras fuentes, fui entendiendo la idea.

La idea
¿Qué es una aplicación para Facebook? Imaginaba que sería algo como un programa, construido con un framework, en un cierto lenguaje y con cierto esquema, que Facebook ejecutaba para los usuarios que lo hubieran jalado de la galería de aplicaciones.

Pero no es así. Se trata de aplicaciones web escritas en el lenguaje y esquema que uno prefiera, corriendo en el hosting que uno prefiera y que uno puede asociar con Facebook siguiendo ciertos esquemas.

En el esquema Website, la aplicación tiene su propio url, como de costumbre. El usuario accede y la aplicación puede hacer internamente invocaciones a los servicios de Facebook antes de mostrar un resultado al usuario.

En el esquema Application, la aplicación tiene su propio url, como de costumbre, pero Facebook actúa como proxy, asignándole a la aplicación un url bajo su dominio. El usuario accede al url dentro de Facebook, Facebook pasa los requerimientos al url externo de la aplicación, la aplicación puede hacer internamente invocaciones a los servicios de Facebook antes de devolver un resultado, Facebook recibe ese resultado y lo publica en un iframe.

Referencias
  • "Facebook Application Development, For Dummies"
    Jesse Stay, 2011
    ISBN: 978-0-470-76873-0

2011/10/28

Construyendo un Wysiwyg Editor con jQuery

En HTML, normalmente un textarea no es wysiwyg, pero existen plugins javascript, como CKEditor, NicEdit, entre otros, que ayudan a que lo sea. Se instala el plugin, se configura y listo. ¿Te animarías a hacerlo tú mismo?


WYSIWYG
Whay You See Is What You Get: lo que ves es lo que obtienes
Así es como se denomina a los editores que muestran la apariencia final del documento mientras es editado.

Buscando hacerme una herramienta para tomar notas con más facilidad, entré a explorar en este tema.

Antes, estaba envuelto por un halo misterioso. Suponía que sería una cuestión demasiado complicada. Descubrí que es más fácil de lo que parece.

Antes, para hacer editable un div, lo que se me ocurría era montar encima un elemento editable, como un input text, que se muestre cuando se necesite la edición. Pero, limitándome a eso, no veía cómo era posible mostrar en negrita o cursiva algo dentro de un elemento editable. Imaginaba que tendría que ver con algún tipo de magia desconocida que involucraría código muy complejo y sofisticado.

Resulta que es posible hacer que un div sea editable (¿por qué no difunden más esas cosas?).

Cuando un div es editable, está disponible un API que permite ejecutar comandos sobre su contenido (!).

De ese modo, hacer un editor wysiwyg se convierte en una cuestión muy, muy accesible, incluso para un programador como yo :-)

designMode
Al parecer, IE fue el que primero implementó la idea de que un elemento fuera editable, luego los otros navegadores acogieron la idea y ahora ya es algo estándar.

Esto se consigue haciendo que designMode="On" para el objeto que se desea editar.

Cuando se está en designMode="On", se pueden enviar comandos de formato usando la función execCommand. Estos permanecen activos hasta que se vuelven a enviar otra vez. O se aplican sobre el texto que estuviera seleccionado. Sí, como en Word. Hasta funciona deshacer con CTRL+Z

La idea básica
Una de las primeras guías que encontré usa un iframe y botones.

Pone el iframe en designMode="On". Hecho esto, se puede editar el contenido del iframe como si se estuviera en un textarea.

Los botones permiten invocar los comandos de formato.

Este es un ejemplo basado en: http://jsfiddle.net/Kxmaf/6/ :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WYSIWYG Demo</title>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<style type="text/css">
input[type=button] {
  border: 1px solid #ccc;
}
#editor {
  width: 500px;
  height: 170px;
}
#bold {
  font-weight: bold;
}
#italic {
  font-style: italic;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
  var cw = document.getElementById('editor').contentWindow;
  var doc = cw.document;
  doc.designMode = "on";
  doc.write('');
  doc.close();
  
  $('#bold').click(function() {
    cw.focus();// IE
    doc.execCommand('bold', false, false);
    cw.focus();
  });
  $('#italic').click(function() {
    cw.focus();// IE
    doc.execCommand('italic', false, false);
    cw.focus();
  });
  $('#fontname').change(function() {
    cw.focus();// IE
    doc.execCommand('fontname', false, $(this).val());
    cw.focus();
  });
});
</script>

</head>
<body>
  <h1>WYSIWYG Demo</h1>
  
  <div id="buttons">
    <input type="button" id="bold" value="B" />
    <input type="button" id="italic" value="I" />
    <select id="fontname">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Courier New">Courier New</option>
      <option value="Monotype Corsiva">Monotype</option>
      <option value="Tahoma">Tahoma</option>
      <option value="Times">Times</option>
    </select>
  </div>
  <iframe id="editor"></iframe>
  
</body>
</html>

Mejorando
Es posible usar un div en lugar de un iframe. También se puede aprovechar más cosas de jQuery.

Este es un ejemplo basado en de77: jQuery Simple WYSIWYG Editor :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WYSIWYG Demo</title>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<style type="text/css">
input[type=button] {
  border: 1px solid #ccc;
}
#editor {
  width: 500px;
  height: 170px;
  border: 1px solid #ccc;
}
#bold {
  font-weight: bold;
}
#italic {
  font-style: italic;
}
</style>

<script type="text/javascript">

$(document).ready(function() {
  function action(a,p) {
    $('#editor').focus();
    if (p == null) p = false;
    document.execCommand(a, null, p);
  }

  $('#editor').get(0).contentEditable = "true";
  
  $('#bold').click(function() {
    action('bold');
  });
  $('#italic').click(function() {
    action('italic');
  });
  $('#fontname').change(function() {
    action('fontname', $(this).val());
  });
  $('#html').click(function() {
    alert($('#editor').html());
  });
});
</script>

</head>
<body>
  <h1>WYSIWYG Demo</h1>
  
  <div id="buttons">
    <input type="button" id="bold" value="B" />
    <input type="button" id="italic" value="I" />
    <select id="fontname">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Courier New">Courier New</option>
      <option value="Monotype Corsiva">Monotype</option>
      <option value="Tahoma">Tahoma</option>
      <option value="Times">Times</option>
    </select>
    <input type="button" id="html" value="HTML" />
  </div>
  <div id="editor"></div>
  
</body>
</html>

Me parece que esto puede ayudar a aclarar el tema para empezar. Ojalá le sirva de ayuda.

Referencias

2011/10/05

HTML + Javascript para usar cualquier framework

Todo o nada
Para hacer una aplicación web, se suele optar por alguna de las siguientes alternativas:

a) Usar completamente un framework propio.
b) Usar completamente un framework estándar.

La alternativa a) significa volver a implementar muchas de las cosas que ya se han resuelto en otros frameworks.

La alternativa b) significa depender completamente de lo que esté implementado en el framework elegido.

Pero pienso que hay otra alternativa. Una que no use la palabra completamente.

Imagine all the people
Imagine que no tiene que volver a escribir su aplicación web en otro lenguaje simplemente para usar algunas de las cosas que ofrece cierto framework escrito en ese lenguaje.

Imagine que no tiene que volver a escribir su aplicación web simplemente para usar algunas de las cosas que ofrece la siguiente versión del framework.

Imagine un framework en el que pudiera usar cualquier cosa que ya se hubiera implementado en otro framework, sin necesidad de volver a escribirlo.

Imagine que todos los frameworks pudieran trabajar juntos y usted pudiera escoger de esa feria de componentes los que mejor se adaptaran para cada cosa que necesitara. Todas las versiones y todos los lenguajes.

Cómo hacerlo
Se me ocurre al menos una manera.

Que el contenido dinámico se construya usando Javascript. Usando técnicas AJAX, se puede hacer una solicitud a cierto URL, con los parámetros que se requieran. En ese URL, un servidor procesa la solicitud, usando el framework y lenguaje de programación que sea, y devuelve una respuesta JSON. Con la respuesta, se construye la vista de la respuesta.

Pensando sobre eso, noto que en el modelo cliente-servidor del HTML, se obliga a que el navegador reemplace completamente el contenido de la página con la respuesta. Otra vez esa palabrita.

Quizás sería interesante extender la especificación HTML para admitir reemplazos parciales. AJAX es el testimonio de que eso se necesita. Flash también lo implementa (llamándolo carga dinámica).

Por el momento, la manera de hacer eso es con ayuda de Javascript (y alguna biblioteca como jQuery).

MVC
Un patrón de muy difundido en los frameworks actuales es MVC (modelo-vista-controlador).

Básicamente, se piensan las soluciones en términos de tres tipos de componentes: controladores, modelos y vistas.

Un controlador recibe la solicitud, determina qué hacer, utilizando los modelos necesarios y pasa los resultados a una vista.

Algunos dicen que la idea principal es que los diseñadores no se vean obligados a programar ni los programadores a diseñar. Pero, como nadie lo ha logrado (para hacer cualquier template se combina diseño con programación), pienso que se trata más de una cuestión de orden.

Si se usa Javascript para carga dinámica, lo que ocurre es que lo que devuelven las vistas puede ser usado no sólo para reemplazos totales, sino también para reemplazos parciales.

¿Por qué no se hace?
Eso mismo me pregunto.

He ido desarrollando estas ideas luego de observar como la comunidad Drupal está rehaciendo los módulos que funcionaban bien en Drupal 6 para que funcionen en Drupal 7. Es un riesgo. Se habla que algunos proyectos, como Perl, han perdido comunidad por hacer maniobras como esa.

Ya se ha iniciado la carrera hacia Drupal 8... llegado el momento, ¿volverán a reescribir los módulos?... ¿y así, sucesivamente?

Me parece que debe haber un camino mejor.

¿Qué le parece?

2011/10/04

Solucionar puerto 80 ocupado luego de Webmatrix

Resolver esto me ha tomado un tiempo. Espero le resulte de ayuda a alguien.

Luego lo desinstalar Webmatrix (La versión 1.0 me parece, en Windows 7), encontré que XAMPP no podía usar el puerto 80 como antes.

Con la idea de averiguar qué proceso lo ocupa, ejecuto en la consola de comandos, como administrador:

netstat -anb

pero aparece que no hay información disponible sobre el proceso que ocupa el puerto 80.

Usando la utilidad tcpview (de Sysinternals), veo que el proceso es el mismo System, con PID 4.

Hago telnet localhost 80 y veo que quién está atendiendo es Microsoft-HTTPAPI/2.0

Reviso en el Panel de Control, Herramientas Administrativas, Servicios, y desactivo "Servicio Agente remoto para Microsoft Web Deploy 2.0."

Eso era. Al parecer un issue de Webmatrix. Ahora XAMPP ya puede iniciar en el puerto 80.

Referencias

2011/09/19

SEO

SEO es como se denomina al trabajo de optimizar páginas web para facilitar su procesamiento por los buscadores (el término proviene de las siglas de Search Engine Optimization: Optimización para Máquinas de Búsqueda).

He estado leyendo sobre SEO durante 3 días, así que ya soy un experto.

;-) Claro que es una broma. Así conociera toda la teoría, un experto, prácticamente por definición, es aquel que ha experimentado durante algún tiempo, y ha obtenido ese conocimiento que da la práctica (y que suele corregir a la teoría).
En el caso particular de SEO, el tiempo parece ser un factor casi inevitable. Un cambio SEO podría tardar al menos dos semanas en verse reflejado. Y una campaña SEO al menos 3 meses.
No, no soy un experto en SEO, pero me gustaría compartir algunas de las cosas que he encontrado, y también algunas reflexiones. Espero sea indulgente con algún error que llegara a notar, y agradezco de antemano los comentarios en buena onda.
Me parece que Optimización para Motores de Búsqueda no deja muy claro qué es lo que optimiza. ¿La página o su posicionamiento? Aquí manejo la definición de SEO como veo que lo hace Google. Como la optimización de la página para mejorar su visibilidad para los motores de búsqueda.
Sin embargo, también es frecuente encontrar que se piense en SEO como la mejora de la posición de un sitio web en los resultados de búsqueda. Es decir, mejorar su visibilidad  en la lista de resultados de los motores de búsqueda.
Como la posición de una página web suele estar determinada por el número y la calidad de los enlaces que le apuntan desde otras páginas, mejorar eso es toda una campaña. Involucra inscribirse en directorios, ser recomendado por páginas afines, aparecer en blogs, participar en foros, redes sociales, quizás algo de publicidad en otros medios, el boca a boca, etc.
Que la página pueda ser eficientemente indexada por un robot también ayuda, y es en ese sentido que uso el término SEO. 

SEO es una de las muchas herramientas que se usan en la campaña para mejorar la posición. Me parece que es más claro así, que llamar SEO a las dos cosas y dar pie a confusiones.
El problema y las soluciones
Me parece que para entender lo que se hace en SEO hay que considerar cómo encontramos una página web.

En el principio, como ahora, fueron las páginas, y la necesidad de encontrar las páginas que contuvieran la información que queríamos. Para ayudar en eso, aparecieron directorios, como Yahoo, con enlaces que eran mantenidos manualmente. Quienes publicaban algo en la web, se inscribían al directorio y su página era enlazada bajo cierta categoría. Un buscador de texto ayudaba a localizar algún enlace en particular.

Luego, se automatizó el proceso, como lo hace Google, usando programas robots (llamados spiders) que navegan por la red, siguiendo enlaces y recomendaciones. De esa navegación de robots, se extrae información que permite construir listas de enlaces según las palabras clave que proporcionemos para la búsqueda.

La solución y el problema
Estos robots tienen capacidades limitadas de exploración, en comparación con los humanos. Pueden leer el texto simple contenido en los archivos HTML, pero no el que estuviera contenido en una imagen o fotografía. No pueden reconocer el significado de una forma. Aunque pueden reconocer las palabras no pueden reconocer lo que significan. Ni el mensaje contenido en un texto, o una foto, o un video. Aún no tienen esa capacidad.

A pesar de eso, son muy útiles para buscar entre las páginas de la red. Es más, tener un puesto relevante en el índice de los buscadores se ha vuelto tan importante como para que la gente se vea obligada a modificar la forma en que hace las páginas web, de modo que los robot no encuentren demasiados obstáculos al navegar por ellas.

Como los robots no pueden entrar a cierto tipo de medios, los humanos crean contenido textual alterno que los robots puedan ver e indexar. La labor del SEO es entender cómo hacerlo.

Ojalá quede un poco más claro que el SEO existe debido a las limitaciones de los robots para entender el contenido. La optimización de la que se habla es para ellos, no para los humanos.

Me parece que es importante tener presente esta situación para ver con más claridad las opciones disponibles.

El texto alterno
Quizás lo ideal sería que los robots de los motores de búsqueda pudieran entender el contenido del mismo modo que los humanos. Pero por el momento, sólo pueden reconocer texto simple así que, si tenemos contenido que no sea texto simple, hay que hacerles una versión textual para ellos.

Pero la capacidad de Internet para mostrar contenido multimedia ha ido aumentando, y probablemente continuará haciéndolo. Así que hay una porción cada vez mayor de la web a la que los robots no pueden acceder y que sería completamente invisible para los buscadores si no fuera porque introducimos manualmente contenido textual alterno.

Por otro lado, el tener contenido textual alterno puede ser útil no solo para los robots con capacidades limitadas, sino para los humanos con capacidades limitadas que accedan a las páginas.

Sin embargo, el tener contenido duplicado en diferentes versiones no parece muy eficiente. Sería mejor encontrar algún modo de presentar convenientemente las páginas según quién lo solicite. Multimedia para quién lo pueda apreciar, texto para quién solo pueda o quiera texto, etc. Pero todo a partir de la misma fuente.

El factor humano
Parece que, al menos por el momento, es un problema muy difícil aumentar las capacidades de los robots, porque se ha optado por la alternativa de usar a los humanos para eso. Por ejemplo, cuando un humano califica positivamente cierta información (haciendo click en "Me gusta" o "+1"), contribuye a hacerla más relevante para los buscadores.

Un solo individuo podría equivocarse, o manipular su voto, pero el conjunto de individuos muestra un comportamiento colectivo relevante que puede resultar de ayuda a la hora de buscamos algo.

Sin embargo, quizás nuestra inteligencia colectiva tenga ciertas preferencias y hayan espacios en la red que no se cataloguen tan bien como nuestras búsquedas quisiera.

Tal vez cuando haya robots que puedan entender más, se encarguen ellos de hacer las calificaciones positivas.

Mientras tanto, hacemos SEO.

Herramientas
Referencias

2011/07/08

Generación modular de HTML

Actualmente, cuando desarrolla un sitio usando cierto framework, no lo puede modificar con otro. Si está metido en esto, puede parecer obvio y hasta natural. Pero, si lo vemos en perspectiva, es algo así como una limitación por diseño. Algo que se podría mejorar.

Sites estáticos y dinámicos
Aunque el objetivo final es enviar html al navegador, en el desarrollo de sites dinamicos el paso intermedio es crear un conjunto de archivos que generen el html que se desea.

Cuando se trata de sites estáticos es más simple. Uno coloca los archivos en el directorio web y el servidor web los envía al navegador tal cual. Esos archivos son html, css, javascript, o imágenes que el desarrollador puede modificar con la libertad de elegir entre muchas herramientas para eso.

Cuando se trata de sites dinámicos las cosas se suelen complicar. En general, primero se plasma el diseño en un site estático, que luego es desmantelado para ver el modo de generarlo. Finalmente, se obtiene el site dinámico, que actúa como un generador total del html que se desea.

Ese suele se el enfoque más usado. Practicamente siempre que use C, Java, PHP, Ruby, Python, o lo que sea, lo que construye es siempre un generador total de html.

Frameworks exclusivos
El enfoque de la generación total tiene el problema de tender a soluciones monolíticas, con sus vicios asociados.

Si quiere modificar el site, tiene que modificar el generador, y tiene que entender el framework-que-todo-lo-hace.

Cuando un framework mejora, esa nueva versión no le sirve para el site que hizo con la versión antigua y tendría que reescribir el site bajo los nuevos términos.

Si otro framework implementa una característica que le gustaría, tendrá que esperar hasta que sea implementada, otra vez, en los términos del framework que usted usa.

Un montón de trabajo repetido.

Frameworks inclusivos
Una alternativa podría ser hacer generadores modulares. En lugar de generar el html de toda la página, un generador modular sólo produce el html de cierta región específica.

Para indicar dónde colocar el html dinámico, habrían algunas alternativas:

  • Que la página use javascript, obtenga el resultado y lo coloque.
  • Que la página use un tag especial que se reemplace por el contenido dinámico.
  • Que el servidor ubique los lugares dónde hacer el reemplazo y los haga.

La primera alternativa es relativamente asequible con lo que ya tenemos. Para las otras, habría que hacer un framework que se encargue de hacer los reemplazos adecuados (por ejemplo uphp).

Ya mismo podríamos empezar a desarrollar sites de ese modo. Una ventaja grande de usar generadores modulares, es que no importa en que lenguaje de programación se hacen, ni que framework usan, ni que versión del framework. Simplemente se usan. Podría usar generadores modulares escritos en C, Java, PHP, Python y Ruby... todos juntos!

2011/06/28

Liberando los sitios dinámicos

Imagine que le hicieran una página web y, un tiempo después, usted quiere modificar el documento HTML.

Imagine que puede abrirla en cualquier editor de texto, modificarla y volverla a grabar. Sin importar si se hizo en Dreamweaver, Geany, Notepad, o cualquier otro. Qué libertad.

Claro que no sólo lo podemos imaginar, de hecho podemos hacerlo.

Entonces, ¿por qué hemos permitido que esta libertad y conveniencia sea recortada por los frameworks? Porque eso es lo que ocurre.

Cuando hacemos un sitio dinámico, digamos en CakePHP, y, un tiempo después, usted quiere modificarlo, tiene que usar no sólo CakePHP, sino la misma versión de CakePHP. Del mismo modo si hubiera usado Zend, CodeIgniter o Drupal.

Es como si le dijeran que para abrir un HTML tiene que usar Notepad 4 y no otro, porque no es compatible. Que si quiere el mismo site para Notepad 5 hay que volverlo a hacer.

Sí, un site dinámico es más complejo que un documento HTML, pero la razón es similar. Es importante que el producto sea independiente de la herramienta usada para fabricarla. No sólo porque es un gran ahorro de esfuerzo y duplicidad. Sino también para que tengamos la libertad de elegir cualquier herramienta que queramos.

En el desarrollo web han aparecido islas, o silos. Al comienzo fue entre lenguajes, como ASP, JSP, PHP, Python, Ruby. Luego entre frameworks dentro de esos lenguajes. Y entre versiones de un mismo framework.

Muchos desarrolladores se amarran a cierta plataforma porque sus productos no pueden ser modificados con otra. Expresar un sitio dinámico en otro framework (o versión de framework) puede ser tanto trabajo como hacerlo de nuevo.

Después de todos los discursos que nos dan sobre la reinvención de la rueda, KISS (Keep It Simple, Stupid: Mantenlo Simple, Estúpido), DRY (Don't Repeat Yourself: No te Repitas), etc ¿no le parece poco razonable?

Hay razones por las que se prefirió que los protocolos web usaran texto simple. Para que cualquiera pudiera entrar a manejarlos. Quizás debemos recordarlo más seguido.


Imagine que le hicieran un sitio dinámico y, un tiempo después, usted quiere modificar el site.

Imagine que puede usar cualquier framework, modificarlo y guardarlo. Sin importar si se hizo en Drupal 6 o Drupal 7. O si se hizo en Zend o CodeIgniter. Incluso sin importar si se hizo en PHP, Ruby, Python o ASP. Qué libertad.

Claro que sólo lo podemos imaginar, pero podemos hacerlo.

2011/05/20

Unobstrusive wev dev

Lea el artículo original en Unobstrusive web dev.

2011/05/16

Programando Web

Lea el artículo original en Programando Web.

2010/08/13

Personalizando la pantalla 404 en Apache

Cuando se intenta acceder a una dirección que no se reconoce en el site, el webserver responde con una página de Error 404: Document Not Found.

Es posible personalizar esta página para que sea más informativa o, al menos, más agradable de ver que el mensaje en blanco y negro que viene por default.

En un servidor web Apache , es posible hacerlo modificando la página de error 404 del sistema, o indicando en su archivo de configuración el nombre de otra que preparemos para usar en su lugar.

Sin embargo, hay una opción que me parece mas flexible. Es usar un archivo .htaccess en el directorio, indicando cuál será el archivo que se presentara para el error 404.

Esto requiere que Apache tenga activado el módulo mod_rewrite y permita el rewrite en ese directorio. Me parece que suele estar configurado de ese modo en la mayoría de hostings.

Si se tiene acceso a la configuración de Apache (/etc/httpd/conf/httpd.conf en Linux CentOS), debe haber un bloque similar a:


<Directory "/var/www/html/mydir">
    Options Includes Indexes FollowSymLinks MultiViews
    AllowOverride FileInfo
    Order allow,deny
    Allow from all
</Directory&gt


Donde mydir es el directorio donde queremos colocar el .htaccess. También puede ser AllowOverride All, que incluye la opción FileInfo.

La configuración afecta al directorio y todos sus subdirectorios, a menos que para ellos se indique otra cosa.

.htaccess
ErrorDocument 404 /error-docs/HTTP_NOT_FOUND.html

Esto indica la página que se presentará cuando ocurra el error 404. La ruta es relativa a la raíz del servidor web, como en un URL. Por ejemplo, la ruta /error-docs/HTTP_NOT_FOUND.html, puede corresponder al archivo /var/www/html/error-docs/HTTP_NOT_FOUND.html.

En la página 404.html, ya que puede ser llamada desde cualquier ubicación, los url que se usen deben ser absolutos.

Páginas de error

Las principales son:
400: Bad request
Cuando el servidor no entiende la solicitud por un error de sintaxis.
401: Unauthorized
Cuando el usuario no ha sido autenticado para acceder.
403: Forbidden
El servidor no puede ejecutar la solicitud.
404: Not Found
El servidor no puede encontrar la direccion solicitada.
500: Internal Server Error
El servidor ha encontrado una situacion inesperada que no le concretar la respuesta.
Esta es una lista más completa que se podría incluir en el .htaccess:

ErrorDocument 400 /error-docs/HTTP_BAD_REQUEST.html
ErrorDocument 401 /error-docs/HTTP_UNAUTHORIZED.html
ErrorDocument 403 /error-docs/HTTP_FORBIDDEN.html
ErrorDocument 404 /error-docs/HTTP_NOT_FOUND.html
ErrorDocument 405 /error-docs/HTTP_METHOD_NOT_ALLOWED.html
ErrorDocument 408 /error-docs/HTTP_REQUEST_TIME_OUT.html
ErrorDocument 410 /error-docs/HTTP_GONE.html
ErrorDocument 411 /error-docs/HTTP_LENGTH_REQUIRED.html
ErrorDocument 412 /error-docs/HTTP_PRECONDITION_FAILED.html
ErrorDocument 413 /error-docs/HTTP_REQUEST_ENTITY_TOO_LARGE.html
ErrorDocument 414 /error-docs/HTTP_REQUEST_URI_TOO_LARGE.html
ErrorDocument 415 /error-docs/HTTP_UNSUPPORTED_MEDIA_TYPE.html
ErrorDocument 500 /error-docs/HTTP_INTERNAL_SERVER_ERROR.html
ErrorDocument 501 /error-docs/HTTP_NOT_IMPLEMENTED.html
ErrorDocument 502 /error-docs/HTTP_BAD_GATEWAY.html
ErrorDocument 503 /error-docs/HTTP_SERVICE_UNAVAILABLE.html
ErrorDocument 506 /error-docs/HTTP_VARIANT_ALSO_VARIES.html

Notas de compatibilidad

Cuando no se define una página de error, el navegador puede presentar su propia versión personalida. Seguramente lo habra notado. Los mensajes de "Página no existe" son diferentes en IE, Firefox, Chrome, etc.

Algo curioso es que Chrome insistira en presentar su propia versión, a menos que la nuestra tenga al menos 512 bytes de tamaño.
IE7, Firefox 3.6.8 y Safari 5 sí muestran nuestra versión si estuviera disponible.

Referencias

Una forma de maquetear

El patrón base de la técnica que describo es usar un elemento posicionado absolutamente dentro de otro posicionado relativamente o absolutamente.

El uso de una imagen guía de fondo y la aplicación de transparencia a los elementos que queremos calzar es de mucha ayuda para posicionarlos con precisión.

Ojalá le sirva de ayuda en este tipo de tareas. Se agradecen comentarios y sugerencias.

Lea más aquí: http://www.scribd.com/doc/35824410/Una-forma-de-maquetear