Cómo realizar un diseño web 2.0

ByLuis

Un buen artículo en el que nos explican cómo pasar nuestro diseño a diseño web 2.0. Claro, cada cual tiene sus gustos y sus conceptos de diseño y puede que no esté de acuerdo con todo lo que se dice, pero aún así es un artículo a tener en cuenta.

Resumiendo un poco el post, nos encontramos con los siguientes consejos:

  • Simplicidad: cuanto más sencillo mejor, es necesario tener en cuenta que todos los sitios webs tienen sus metas y que cada página tiene su propósito. Es necesario obtener la atención del usuario, pero cuidado que su atención es algo que se acaba. La simplicidad es algo que siempre deberíamos tener en cuenta, elimininando contenido innecesario pero sin quitar funcionalidad.
  • Layout centrado: muy característico de la web 2.0 es tener en contenido centrado en la página.
  • Menos columnas: mientras que antes lo normal era un diseño en 4 columnas, ahora lo más utilizado son las dos columnas, evitando así llenar completamente la pantalla y reforzando el primer punto, la simplicidad.
  • Navegación arriba: separar la navegación del contenido principal no es nada nuevo, pero en este caso se resalta que se situe arriba.
  • Diferenciar distintas áreas: que a simple vista, cada área con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
  • Navegación sencilla: debemos conseguir que el usuario sepa dónde está y a qué contenidos puede acceder desde donde está.
  • Logos en negrita: limpios, en negrita y fuertemente marcados.
  • Tamaño de texto grande: haciendo el texto grande se consigue mayor atención que con el texto pequeño.
  • Introducciones en negrita: consiguiendo así mayor impacto visual sobre las cosas más importantes.
  • Colores fuertes: usando colores brillantes y fuertes se consigue una separación de contenidos más sencilla.
  • Superficies con detalle: ya sea mediante sombras, resaltados, difuminados, que las superficies no sean simples, sino más realistas.
  • Gradientes
  • Reflejos
  • Iconos atractivos: es necesario que sean fácilmente reconocibles, que no provoquen confusión.
  • Contornos estrellados: sobre todo con el beta dentro.

Web 2.0 how-to design style guide

Vía / dzone

Similar Posts

| |

Laboratorio: área clientes mediante Apache y PHP

ByLuis

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.

Native Client: tecnología de Google para ejecutar código nativo en tu navegador

ByLuis

Google está trabajando en una tecnología que permitirá a los desarrolladores web ejecutar código nativo en el propio ordenador del cliente, pudiendo así aprovechar toda la capacidad de la cpu del cliente, la cual está ahora limitada por el navegador. Lógicamente no se trataría de algo permisivo, sino que tendría limitaciones para evitar ejecutar código maligno.
Es necesario instalar un plugin para que funcione el cliente en nuestro navegador (yo lo he hecho para Firefox, ni idea de si funciona para otro navegador). Si tenéis instalado Firefox en otro directorio distinto al “por defecto”, deberéis modificar el archivo firefoxinstall.py e indicar la ruta correcta en la variable PLUGINDIR (línea 203 para Windows).
Los ejemplos que se ven son bastante atractivos: quake, mandelbrot, … Veremos a ver qué éxito tiene esta tecnología, aunque sinceramente, a veces se pretenden hacer muchas cosas vía web. Además, Java ya permite más o menos lo que pretenden, ¿no?, ¿es esto su propia versión de los Java applets y de Adobe Air?
Native Client

|

Microsoft Expression Web: al menos lo intenté

ByLuis

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.

|

170 cheat sheets para desarrolladores web

ByLuis

Ya hace tiempo hablamos de un directorio donde podíamos encontrar 30 cheat sheets, en este caso se trata de 170, que nos ayudarán en nuestro desarrollo web.
Aunque no todas son de desarrollo web, si la mayoría. Organizada por categorías, podemos encontrar ‘chuletas’ sobre: ActionScript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, Firefox, Google, HTML, Java, Javascript, LaTeX, microformatos, MySQL, Oracle, Perl, Photoshop/Gimp, PHP, Python, expresiones regulares, Ruby, Linux, blogs, Windows y XMLs.
Yo ya le he dado a imprimir unas cuantas que me van a venir muy bien.
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby
Vía / Digg

|

How Well Does Your Browser Support HTML5?

ByLuis

The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Despite these shortcomings they hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development …

Post original