html

10 errores comunes de programadores web novatos

Hace poco comentaba que en SitePoint habían publicado una lista de los 10 errores comunes de diseñadores web novatos. Pues recientemente publicaron un nuevo artículo, pero esta vez sobre los programadores web. Aquí el resumen:

  1. Ignorar los estándares web. Destacan el uso incorrecto del DOCTYPE, uso de etiquetas antiguas de HTML, o no validar el código.
  2. Delegar en software WYSIWYG. Muy acertadamente indican que, con este tipo de software uno se centra en la visualización, y no en la estructura.
  3. Descuidar aspectos semánticos. El ejemplo que ponen es impagable: El programador novato, si quiere escribir un titular, lo pondrá encerrado en la etiqueta <h1>. Pero posteriormente es posible que “involucione”, y lo diseñe con divs anidados y estilos CSS.
  4. Nombres de clases de estilos. ¿Qué tal una clase como “columna-izquierda-50px”? ¿Y si en un futuro el ancho cambia?
  5. Prueba de navegadores tardía. Invitan al programador novato a revisar su página en varios navegadores desde el primer momento, y no dejarlo para el final. Personalmente, en este punto no estoy de acuerdo; Siempre he preferido desarrollar para una plataforma, y al final, corregir errores de las demás.
  6. Ignorar la portabilidad. Destacan enlaces a rutas absolutas, conexiones a bases de datos sin centralizar, o realizar suposiciones sobre el entorno de ejecución.
  7. Descuidar el ancho de banda. Poco más que añadir… En local un fichero de unos megas es irrelevante, no así en Internet.
  8. Pésima accesibilidad. No consiste sólo en seguir unas reglas mecánicas de código, sino en tener en cuenta aspectos funcionales como poder consultar la web sin javascript, sin flash, en un móvil, o sin ratón.
  9. Despreciar al SEO. Me encanta la definición que hacen del SEO: Es una mezcla de psicoanálisis, complejidad técnica, y misteriosas artes oscuras. En cualquier caso, indican que el desarrollador novato, dejará el SEO para el departamento de marketing una vez lanzada la página. Para entonces, ya será demasiado tarde.
  10. Actualizaciones erróneas. Destacan la práctica de muchos programadores web de tener durante horas una página web en mantenimiento, cuando suele ser una tarea que no debería llevar más de unos minutos. En este punto tampoco estoy de acuerdo. Muchas actualizaciones tan sólo consisten en añadir documentos html, imágenes, y actualizar hojas de estilo y javascript. Sin embargo, hay aplicaciones web que requieren mucho más que eso a la hora de actualizar, por ejemplo cuando cambiamos la estructura de una base de datos, y se deben reestablecer todos los índices.
  11. Como bonus, dejan una lista de otros 20 errores.

En general, este artículo me ha parecido bastante más pobre que el anterior. Sobre todo, por lo mucho que se centra en la capa de presentación HTML, que dista mucho de ser coto exclusivo de los programadores web. En ningún punto se ha mencionado ni una sola práctica o error relacionada con la programación (Salvo el punto 6, donde sugieren no incluir hard coded la conexión a base de datos).

10 errores comunes de diseñadores web novatos

Hoy me he encontrado en SitePoint un curioso artículo titulado “10 Common Mistakes Made by Novice Web Designers“. Me ha parecido muy interesante, pues aunque no soy diseñador propiamente dicho, pero sí he cometido muchos de esos errores.

Y esta es la lista:

  1. No tener en cuenta la forma de visualizar del navegador. Cada navegador funciona a una resolución, y ésta normalmente no es la misma que los bocetos hechos en Photoshop. ¿Cómo se comporta la página al cambiar de tamaño?
  2. Forzar a altos y anchos fijos. ¿Qué ocurre si el texto que hay dentro es anormalmente extenso o anormalmente corto?
  3. Presuponer sobre la experiencia del usuario. Hay muchas resoluciones y muchos dispositivos a tener en cuenta.
  4. Sub-pixels en bocetos. Un boceto a 300 ppp no se verá igual en un monitor a 72 ppp.
  5. Desconocimiento de las pilas de fuentes. No todas las fuentes funcionan en todos los sistemas, ni siempre se ven igual.
  6. No tener en cuenta el desarrollo. Nos ponen el ejemplo de títulos ricos en diseño que sólo se pueden conseguir con imágenes. Es algo asumible cuando hay 5 o 50 páginas, ¿pero y si hay 500? ¿O 5000?
  7. Olvidar en los enlaces. Los links son el hilo conductor de la web, y hay que diferenciarlos bien del resto del contenido.
  8. No tener en cuenta animaciones o efectos. Esto no se puede reflejar en un diseño en photoshop.
  9. Controles de formularios extraños o inaccesibles. Nos explican que los formularios son sosos, pero que sin embargo los navegadores saben renderizarlos y los usuarios los entienden.
  10. Poca apreciación por las tecnologías. HTML y Flash no son lo mismo :)

En mi opinión, las más importantes a tener en cuenta (O al menos las que más problemas me han dado) son la 2, 4, 6, 8 y 10 (Curioso, justo los pares).

Vídeo, audio e imágenes de entrada al navegador

Hace poco se ha publicado un nuevo borrador del w3c (The Capture API) que permitirá conectar dispositivos de entrada al navegador, permitiendo por ejemplo capturar una fotografía, mensaje de audio por el micrófono, o un vídeo.

Aun se encuentra en un estado muy prematuro, pero nos enumeran una serie de posibles casos de uso:

  • Captura y envío de imágenes. Permitiendo el envío por XHR de varias imágenes.
  • Captura de imagen panorámica. Por ejemplo, con 3 tomas que posteriormente se “concatenan” automáticamente para mostrar la panorámica.
  • Video Chat. Aun está sin definir el método para realizar streaming, sin embargo todas las soluciones propuestas pasan por websockets.
  • Cámara web. Permitirá realizar una aplicacion de vigilancia para controlar la cámara, incluyendo movimientos como arriba, abajo, izquierda o derecha, o hasta aplicaciones de detección de movimiento.
  • Búsqueda por voz. Introduciendo por el micrófono la cadena de búsqueda.
  • Recordatorio de voz. De nuevo, desde el micrófono.

Por supuesto, para proteger la privacidad de los usuarios, el navegador tendrá que pedir explícitamente confirmación del usuario para permitir que se acceda a estos dispositivos.

Ejemplo de uso:

// Create a container div element and append it to the document body.
var container = document.createElement("div");
document.body.appendChild(container);

// The browser viewport width in pixels.
var screenWidth = window.innerWidth;

function successCallback(data) {
for (var i in data) {
var img = document.createElement("img");
img.src = data[i].uri;
// If the image width exceeds that of the browser viewport, the image
// is scaled to fit the screen keeping the aspect ratio intact.
if (data[i].format.width > screenWidth) {
img.style.width = screenWidth + "px";
img.style.height = (data[i].format.height/data[i].format.width)*screenWidth + "px";
}
container.appendChild(img);
}
}

function errorCallback(err) {
alert(err.message + " (" + err.code + ")");
}

// Launch the device camera application and invoke the callback once 
// the user exits the camera application.
transactionId = navigator.device.captureImage(successCallback, 1, errorCallback);

Mientras tanto, y hasta que esto sea una realidad, se puede utilizar el paquete flash.media de ActionScript3, en concreto las clases Camera y Micrphone. Pero claro, no es lo mismo. Una verdadera lástima tener que esperar tanto tiempo. Veremos cuándo tiene el navegador más utilizado estas funcionalidades.

Facturas en CSS

Vía css-tricks veo un sencillo método para crear facturas sólo con CSS. ¿Y por qué usar este método en lugar de un software específico? Bueno, gracias a esto sólo necesitas el navegador para poder crear tus facturas. Y qué demonios, es muy ilustrativo el ejemplo. ¡Qué de cosas se pueden hacer con textarea! Además, es fácil de imprimir, y pasarlo a PDF es algo trivial.

Ver demo

Consejos SEO de Bing

Vía Bing Community os traigo esta serie de consejos SEO que nos proponen. La mayoría me han resultado viejos conocidos, pero otros… Son sobre los enlaces, y el artículo se titula “making links work for you“. Aquí los tenéis:

  1. Canonizar la URL de inicio. ¿Con o sin www? ¿Con barra final o sin ella? Sólo puede quedar una ;)
  2. Escoger entre enlaces relativos y absolutos. Nos aconsejan usar siempre enlaces absolutos, sobre todo porque refuerzan nuestra URL.
  3. Utiliza una buena sintaxis en las URLs de los enlaces. Por ejemplo, debemos omitir el fichero por defecto de una carpeta (Típicamente index).
  4. Utiliza el atributo title en enlaces internos. En los enlaces que apuntan a tu propia página completa el atributo title con una descripción de la página de destino.
  5. Identifica la URL canónica de cada página. Ya sabéis, como en el punto 1, pero para todas las páginas.
  6. Minimiza el número de parámetros de URLs dinámicas. Suelen ser problemáticas para los bots que rastrean la página.
  7. Evita usar IDs de sesiones o cookies. Dificultarás el rastreo a los bots.
  8. Ten al menos un enlace interno a cada página. Lógico. Todos los documentos deben ser accesibles.
  9. Limita el número de enlaces de una página. Nos aconsejan que un documento no contenga más de 100 (Salvo que sea necesario).
  10. Evitar que el rastreador siga un enlace. Mediante rel=”nofollow”. Cuanto más tiempo dedique a las páginas no interesantes, menos dedicará a las que de verdad nos interesan.

Sobre los links, también hicieron unos artículos muy interesantes titulados “El bueno, el feo y el malo” (Parte 1 y Parte 2).

http://www.bing.com/community/blogs/webmaster/