|

Microsoft Expression Web: al menos lo intenté

msexpressionweb.pngMe entero por Error500 que Microsoft ha sacado nuevos productos y entre ellos el sustituto del FrontPage, programa del cual cualquiera que sepa algo de desarrollo web suelta pestes. Intrigado por esta nueva aplicación, por las posibilidades que pueda ofrecer, porque en la página web de MS habla de la “pasión por los estándares” (¡increible!) y porque el ordenador no es mío, decido instalarlo, aun cuando yo uso el PSPad Editor y tan contento.
Aquí llegan los primeros problemas, ocupa poco más de 200 megas (demasiado, ¿no?) y necesita el XP SP2 mínimo (demasiado, ¿no?). Por lo que debido a ello me tengo que bajar unos 500 megas entre el SP2 y el Expression, 200 de cada y afortunadamente los 25 megas del .NET ya me los bajé en otra ocasión. Después de bajarme la versión en español, francés e inglés del SP2 (826.074.296 bytes), tres versiones distintas ya que cada vez que me bajaba una me decía que no podía porque el idioma es distinto al que tengo instalado (y no me funciona el Windows Update por política de redes), el español es el idioma en el que me aparece el XP, el francés el del cliente, por lo que era de suponer que sería la opción más lógica, y el inglés que ha sido la que me ha funcionado.
Para bajarme la versión trial del Expression Web me registro en Microsoft, prometiendo que solo lo usaré 30 días de prueba y que durante ese periodo me mandarán 3 emails para preguntarme que tal va la cosa.
Una vez ya tengo instalado el SP2, me pongo a instalar los 200 megas del programa en cuestión. Después de un buen rato descomprimiendo y comprobando cosas, me pregunta que si quiero instalación estándar o personalizada. Como “experto” que me considero en instalaciones, selecciono la personalizada, en la cual me ofrece instalar el Expression Web, herramientas para Office y herramientas compartidas con Office y algo para Access. Decido no meter mucha cosa, porque aunque el ordenador no es mío, trabajo con él, por lo que elijo solo el Expression Web.
Se está instalando y cuando acaba y lo ejecuto me muestra un mensaje de Opciones de Privacidad que me pregunta que si quiero actualizar periódicamente un fichero que me ayudará a determinar problemas del sistema. Algo muy confuso y que da cierto miedo, por lo que como iba a desinstalar el programa nada más probarlo, no acepto la opción que me muestran. De todas formas, no entiendo que problemas del sistema me podría encontrar, ya me veía yo el olvidado pantallazo azul apareciendo cada 15 días.
Arranco el programa y … ¡no me deja hacer nada!, es imposible crear un nuevo documento, todas las opciones del menú están desactivadas. Bueno, todas no, la de abrir archivo si está disponible, por lo que abro un html que tenía por un directorio y nada, no aparece nada de nada.
Pienso que quizás es mi culpa y que debía haber instalado las opciones de Office que no instalé (la verdad es que no las leí todas) y que son necesarias para que funcione la aplicación. Curioso, ¿no?, si selecciono instalar el programa me debería decir: “mira, debes instalar tal o cual porque si no lo haces no vas a poder hacer nada de nada con los 200 megas de aplicación”. Pero bueno, da igual, yo sigo ilusionado con probar la aplicación para poder escribir algo en Sentido Web, así que vuelvo a ejecutar el programa de instalación, indico que quiero añadir más opciones a la instalación actual y selecciono todo lo seleccionable.
Acaba la re-instalación, ejecuto el programa, las opciones del menú aparecen activadas, me emociono, sigue con la carga del programa, está a punto de acabar, ya está, voy a poder usarlo… pero no, imposible, me aparece un precioso mensaje:
msexpressionweb2.png
“La versión beta del software ha caducado.
Utilice Agregar o quitar programas en el Panel de control para quitar la versión beta del software del equipo.”

Al menos te indican cómo desinstalarlo, por si un casual se te había olvidado.
Siento este post fuera de lo normal de Sentido Web, pero es que no podía callarme.

Design By Grid: recursos de diseño con grid

griddesign1.pngDesign By Grid es un recurso para promocionar diseños realizados con grids (rejillas).
El diseño mediante grid, es algo muy utilizado en los medios tradicionales, que poco a poco se va haciendo más popular entre los diseñadores web. Consiste en dividir la pantalla en una rejilla y usarla para situar los contenidos en ella (bueno, esto sería una forma resumida de explicarlo).
griddesign.png
Los recursos que nos ofrece esta web van desde un showcase al estilo CSS Mania con diseños web basados en grid, artículos, tutoriales, herramientas y recursos.
Design By Grid
Vía / dzone

|

9 fallos que hacen que Google no te indexe

Muchas veces el intentar desarrollar aplicaciones demasiado diferentes o mal implementadas, hace que las páginas que la página web de nuestro cliente no sea indexada por Google:

  • Menús Javascript: los buscadores no siguen los enlaces javascript.
  • Mapa de imagen: al igual que los javascripts, no pueden seguir las imágenes.
  • Enlaces con imágenes o rollover: cuando contienen javascript y no están desarrollados por CSS.
  • Pop-ups: desarrollados mediante Javascript.
  • Menús por combos: cuando los menús se crean mediante SELECT, normalmente se accede por un formulario.
  • Enlaces en etiquetas NOSCRIPT: debido al abuso de esta etiqueta por parte de spammers, los buscadores no le hacen caso.
  • Frames: debido a su mal uso, Google ha penalizado su uso.
  • Java: no puede acceder a su contenido ni ejecutarlos.
  • Flash: ya tratado con anterioridad el uso del Flash o no, los motores de búsqueda no los tratan. De todas formas, siempre es recomendable presentar una alternativa al Flash.

Resumen: cuidado con el Javascript.

9 Common Web Design Mistakes Prevent Google From Indexing Your Site

Vía / dzone

XSS mediante HTML no estándar

Cuando se quieren evitar ataques XSS, normalmente en PHP se usan las funciones htmlspecialchars o htmlentities.

Ahora veo un ejemplo en el que un ataque puede evitar estas funciones cuando se crea la página con HTML no estándar. Tenemos el típico ejemplo de un texto que se introduce por un formulario y se presenta como un enlace.

$dato = htmlentities($_GET['dato'], ENT_QUOTES);
echo "<a href=pagina.php?dato=$dato>Enlace</a>";

Si os fijáis bien veréis que el enlace está mal formado y no tiene las comillas en el href. Si metieramos como dato de entrada lo siguiente: ” onclick=alert(null)” (sin las comillas), nuestra página sufriría un ataque XSS y mostraría un mensaje alert.

Non-Standard HTML Fuels XSS Attacks

|

10 razones por las que usar Silverlight

silverlight.pngEl título original dice ’10 razones por las que Silverlight cambiará la web’, y en mi opinión es pasarse un poco, entre otras cosas porque tampoco veo nada nuevo. Eso sí, también hay que reconocer que Silverlight parece una buena alternativa a Flash, sobre todo para los que desarrollen aplicaciones en .NET con Visual Studio. Microsoft sabe hacer las cosas y algo que gusta mucho a los jefes de proyectos es que todo esté conectado entre sí de forma fácil y rápida.

Las 10 características son las siguientes:

  • Vídeos de alta calidad: la misma tecnología que se usa para VC-1, el codec de los BluRay y HD DVD, es la que se usa para el streaming de los vídeos.
  • Multiplataforma y multinavegador: funcionará para cada plataforma y cada navegador, incluso gracias al proyecto Mono funcionará para Linux.
  • Unión de diseño gráfico y desarrollo: los desarrolladores de Visual Studio podrán crear aplicaciones para Silverlight de forma rápida, pudiendo separar el core de la aplicación de la parte gráfica.
  • Barato: tan solo es necesario disponer de IIS en nuestro servidor Windows, aunque debería funcionar en todos los servidores web. Este punto es un tanto confuso, el autor dice que es barato, pero por lo poco que he entendido, Silverlight es un plugin, como lo es el Flash Player, y su precio es gratuito. IIS no lo necesitas para nada, porque es como almacenar un archivo .swf o .png (si mal no creo). Ahora bien, ¿el precio de Visual Studio para desarrollar las aplicaciones o animaciones que funcionen en Silverlight?, mirando el precio de Flex (810€ la versión con Charting, 520€ la versión normal) y el precio de Visual Studio (1.284€ para Visual Studio 2005 Professional Edition con Suscripción MSDN Premium, aunque hay otro producto que se llama igual pero que cuesta 2.675€), no sé que pensar sobre lo barato que es.
  • Soporte a lenguajes de terceros: gracias a la nueva Dynamic Language Runtime es posible usar Ruby, Python y EcmaScript para desarrollar aplicaciones Silverlight y dejar a un lado .NET. ¿Pero esto es como cuando te dicen que puedes crear ficheros Excel, pero que tienes que tener instalado el Excel?, ¿puedes pasar de .NET y también de Visual Studio o solo de .NET?.
  • Depuración multiplataforma y multinavegador: gracias a las características que ofrece Visual Studio.
  • Mejor entorno de desarrollo del planeta: bueno, esto va en gustos, y al autor le debe gustar mucho Visual Studio.
  • Soporte a mashups: muy buena utilidad, obtenida gracias al soporte a LINQ y LINQ-to-XML por parte de Silverlight y a que los datos son accesibles mediante RSS, POX, REST y JSON.
  • Protección anticopia: evitando así que los contenidos como vídeos se puedan copiar como ocurre en los vídeos Flash como los que ofrece Youtube. Hasta que venga uno y consiga copiarlos…
  • Rapidez: habrá un gran incremento en la rapidez en las aplicaciones basadas en Ajax que usen Silverlight.

Otro punto que cuestiono es el alarde que hace el autor de que solo ocupa 2Mb., pero eso es solo el Silverlight, y según he entendido es necesario .NET, por lo que a esos 2Mb hay que añadirle los 22Mb. del framework de .NET. Demasiado si lo comparamos con el tamaño del Flash Player que es el que ejecuta las aplicaciones Flex.

Lo siento, me ha sido incapaz no dar mi opinión, que quizás parezca anti-microsoft, pero he leído en varios sitios cosas parecidas al siguiente artículo, y aunque seguro que Silverlight aporta buenas cosas a la web, tampoco hay que pasarse.

Top 10 Reasons Silverlight Will Change the Web

Vía / dzone

| |

Laboratorio: área clientes mediante Apache y PHP

Viendo diferentes empresas con página corporativa, he visto que suele ser común el área para los clientes. En este mundo es normal que el tema de los pagos suela dar complicaciones, por eso yo creo que es preferible subir lo que se va desarrollando para el cliente en un servidor propio que en el servidor del cliente, ya que hasta que no pague en su totalidad, no dispone de ello.

Si te encuentras en esta situación, quizás te sea útil este truco para habilitar una área privada protegida para los clientes, la cual redireccionará al contenido del cliente, ya sea el propio trabajo en sí o una aplicación en particular.

Para el caso del ejemplo, yo lo he hecho para unas páginas web estáticas, y luego que cada cual, si le interesa, que lo adapte a su gusto.

El funcionamiento es el siguiente: el usuario accede a una ruta con acceso restringido a usuarios válidos mediante Apache. También mediante Apache se le redirigirá a una página propia, en este caso las páginas HTML que están guardadas en un directorio específico para clientes (fuera del webroot) y en un directorio específico para ese cliente en concreto.

Supongamos que tenemos el directorio webroot siguiente home/www y el área web de clientes está en el directorio home/www/clientes y el espacio físico específico de clientes está en home/www/_clientes. Lo primero que debemos hacer es añadir el siguiente .htaccess en el directorio clientes.

AuthType Basic
AuthName "Acceso a clientes"
AuthUserFile [path]\passwords.conf
Require valid-user
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/clientes(.*)$
RewriteRule ^(.*)$ /_clientes/index.php?url=$1  [L,QSA]

Lo que hace esta configuración es añadir autenticación al directorio clientes y redireccionar al script index.php del directorio _clientes, pasándole como parámetro la url a la que se accede.

El script index.php para este ejemplo, lo que he hecho ha sido incrustar el fichero que se quiere directamente, teniendo en cuenta el Content-Type y que si no se añade ninguna url después de clientes se tome por defecto el fichero index.html.

<?php
// Devuelve el content-type
function content_type($url) {
$ext = substr($url, strrpos($url, '.')+1);
if ($ext == 'swf') {
header("Content-type: application/octet-stream");
} else if ($ext == 'png') {
header("Content-type: image/png");
} else if ($ext == 'jpg') {
header("Content-type: image/jpeg");
} else if ($ext == 'gif') {
header("Content-type: image/gif");
} else if ($ext == 'js') {
header("Content-type: text/javascript");
} else if ($ext == 'css') {
header("Content-type: text/css");
} else if ($ext == 'html') {
header("Content-type: text/html");
} else {
header("Content-type: text/plain");
}
}
// Obtengo el usuario y la ruta a la que quiere acceder
$user = $_SERVER['REMOTE_USER'];
$url = substr($_SERVER['REQUEST_URI'], strlen("/clientes"));
$url = $url == '/'? '/index.html' : $url;
// Añado el content-type
content_type($url);
// Inserto el fichero
if (file_exists('./'.$user.$url)) {
include './'.$user.$url;
}
?>

Por supuesto a este truco le faltan cosas, como seguridad en el directorio _clientes, a parte de que hay que tener cuidado con los paths relativos o absolutos, y alguna cosilla más, pero creo que como idea desde la que partir no está mal.

Consejos para evitar crear malas aplicaciones web

Una lista con consejos para evitar realizar aplicaciones web que no tengan una buena calidad. Lo malo de las listas es que normalmente se basan en la experiencia del autor, por lo que a veces no se está de acuerdo totalmente con ellas. En este caso yo estoy bastante de acuerdo con la mayoría.

  • Pon los estilos y los javascript en ficheros independientes: complica la lectura, el debug y dificulta que varios desarrolladores modifiquen el mismo archivo.
  • Comprime: comprime la salida para ahorrar ancho de banda. Con esto no estoy del todo de acuerdo, ya lo hemos comentado antes en Sentido Web, hay que pensar que el comprimir la salida en el servidor requiere tiempo de ejecución en la máquina, no me imagino a Technorati, que a veces tarda un poco en darte la respuesta, despilfarrando tiempo de ejecución.
  • Valida: valida según el DOCTYPE que hayas especificado.
  • Cuidado con los mensajes de error: los mensajes de error deben estar enfocados en el usuario, no en el desarrollador para luego saber qué ha fallado. Además, mostrar mensajes de error de la aplicación específicos para los desarrolladores puede proporcionar información sensible a terceras personas.
  • No uses tablas: a parte de ser más fácil de mantener, y más claro de leer, ahorras ancho de banda al escribir menos código debido a la ausencia de TDs y TRs. Luego está, lógicamente, todas las otras razones que todos conocemos para no usar tablas.
  • Desarrolla para todos los navegadores modernos: no te centres solo en IE, existen otros, y aunque se usen menos, cada vez se usan más. Imagínate que una tienda por internet solo funciona para IE, ya que solo el 15% de los usuarios usa Firefox (por ejemplo), es bastante posible que la mayoría de ese 15% no entre en esa tienda online y busque una alternativa. Ese 15% de usuarios de Firefox quizás pueda representar un 15% de ventas.
  • Comprueba los requerimientos: si tu página necesita Javascript, cookies, flash o un plugin, comprueba que el navegador del usuario lo admite, si no es así hazlo saber.
  • Prueba la usabilidad con usuarios reales: a veces algunos sitios son difíciles de usar debido a que quienes lo usan no son quienes lo diseñan.
  • Usa una base de datos real: no uses Access u otro tipo de base de datos de ese estilo, si no puedes pagar Oracle usa MySQL.
  • Que sea multiplataforma: no uses ActiveX o cosas que sean específicas de una plataforma.
  • Piensa en el ancho de banda: no todo el mundo debe tener una línea con un ancho de banda grande, si la página tarda en cargarse es posible que el usuario huya de ella.
  • Ten en cuenta la internacionalización: si desarrollas algo para todo el mundo y solo lo realizas en inglés, es posible que no logres lo que buscas.
  • Testea: esto es lo de siempre, los test es lo más aburrido pero lo más necesario. Que los desarrolladores hagan sus pruebas primarias, pero que los verdaderos tests los hagan personas ajenas al desarrollo.

Ways to Avoid Building Web Applications That Suck

Vía / dzone

Agiliza Google Analytics en tu página

Es cierto que a veces la carga del script de Google Analytics retrasa el carga completa de la página. La gente de AskApache, que suelen sorprenderme con sus entradas, nos ofrecen un truco para mejorar la velocidad de carga del script urchin.js.

Este script, que se carga del sitio de Google Analytics, a veces tarda en cargarse, por lo que una solución para agilizar esta carga es ponerlo en nuestro servidor y acceder en local.

Claro, que el problema es que este script se suele modificar con cierta frecuencia, por lo que deberíamos tener la última versión en cada momento.

Crearemos una shell que borre el script de local, obtenga de nuevo el script alojado en Google Analytics y lo guarde en la ruta de local. A parte crearemos un job para el cron que ejecute este script cada 12 horas.

#!/bin/sh
rm /home/user/websites/askapache.com/z/j/urchin.js
cd /home/user/websites/askapache.com/z/j/
wget http://www.google-analytics.com/urchin.js
chmod 644 /home/user/websites/askapache.com/z/j/urchin.js
cd ${OLDPWD}
exit 0;

La línea para el cron:

11 12 * * * /home/user/websites/1day.sh >/dev/null 2>&1

Faster Google Analytics with a local urchin.js

CodeCodex: reutilizar código

codecodex.pngCodeCodex es una wiki que guarda distintos trozos de código en varios lenguajes de programación para que podamos acceder a ellos y reutilizarlos.

La filosofía es no reinventar la rueda y reutilizar código ya creado. Con CodeCodex podremos buscar y usar código ya creado, aprender nuevos algoritmos y ayudar a la comunidad de desarrolladores con tu propio código.

Es curioso ver el Hola Mundo en los diferentes tipos de programación, por ejemplo ensamblador.

    .model tiny
.data
message    db    'Hello, World!'
.code
org 100h
start:
mov ah,9
mov dx,offset message
int 21h
ret
end start

CodeCodex

Vía / Dzone

Consejos para desarrollar Rich Internet Applications

Buenos consejos a tener en cuenta cuando quieras desarrollar un aplicación de internet (Rich Internet Applications):

  • Hazlo interactivo: en vez de ir página a página, hazlo que sea interactivo, edita contenidos, usa drag & drop.
  • Invita a usarlo: pequeños efectos con hover puede conseguir que el usuario se atreva a interactuar.
  • Usa popups ligeros: no se trata de ventanas popups, sino capas que de despliegan. Intenta usarlos cuando puedas para no tener que ir de página en página.
  • Piensa en la interacción como si fuera un storyboard: situa los frames como un storyboard para hacerte una mejor idea de cómo se deben producir las acciones.
  • Indica que acciones se realizan: avisa cuando se haya producido una acción, sin necesidad de dejar la página.
  • Piensa en objetos: en vez de pensar en contenidos y páginas.

Puedes leer más en:

Nine Tips for Designing Rich Internet Applications

Vía / backdraft