Nivel de dificultad: 0 a 1

Introducción

Este artículo debería ser un poco más fácil de escribir, porque en el tema de diseño de páginas web somos principiantes. Eso debe recorta la distancia entre los “dummies” y nosotros (creemos, vamos a ver si es cierto).

Estamos todavía aprendiendo, y este aprendizaje debería tomarnos… mucho tiempo (se trata de aprender de ustedes).

En un artículo anterior, les describimos cuales herramientas hemos usadas para crear la página web. Hablaremos, en el presente, de elementos más personales.

El presente artículo parece largo, sin embargo, esperamos que los temas sean sencillos de entender (toman su tiempo).

El estilo visual

Antes siquiera de saber cómo íbamos a concretar nuestro proyecto, teníamos claro varias cosas:

Las fotos

Las fotos estarían generalmente tomadas por nosotros, cada vez que se puede . No es únicamente por los riesgos de “derechos de autores”, también porque no nos gustan las fotos estándares.

Nuestra cámara - Colección TMN

Les presentamos nuestra “miss fotografía”, una cámara Pentax K500  (¡trompetas!).

Esta preciosura no es la más gloriosa del mercado, pero es bien nacida, y su definición de imagen de 16 megapíxeles (tampoco la más espectacular) es monstruosamente excesiva por lo que se puede montar en una página.

Para fotos más ocasionales, tenemos acceso a varios Smartphones.

En cuanto a las demás fotos, procuramos usar los recursos de las entidades de las cuales hablamos (en bien), lo cual, esperamos, nos evita enfrentar quejas y demandas (sí, la Web se volvió un mundo un poco celoso).

Las letras

Nuestra cultura es también literaria. El uso de “Arial”, “Times New Roman”, “Calibri”, “Cambria” y otras fuentes convencionales era proscrito de entrada, no por ser letras feas, sino que nos parece que merecen que les presentemos algo más personal.

Las que usamos actualmente, las elegimos en Google Fonts:

  • “Caveat” para el título principal (AKA “Tecnología, Media y Nerdos”). Nota: si nuestro sitio prospera, podríamos cambiar esta letra por “Bradley Hand Bold” (puede demorarse, es un lujo).
  • “Kalam” para los títulos de capítulos y subcapítulos.
  • “Raleway” para los textos. Nota: esta también podría evolucionar, en conjunto con “Caveat”.

Hay todavía detalles de letras en el modelo que usamos que modificaremos a medida que nos volvemos más “expertos” en diseño (suponiendo que existe tal cosa como “expertos”).

Los colores

Logo TMN

La elección del morado como color de encabezado de nuestras páginas y posts, es una razón filosófica.

Salimos de un mundo azul frío, deseando más calor”, como aparece en la parte inferior izquierda de cada página, es tal como percibimos el universo del cual venimos: Azul es el color convencional casi siempre asociado con la tecnología. Si vamos hacia algo más caliente (rojo), el resultado será una especie de morado.

Para los títulos de capítulos, no nos gustan tampoco los títulos en negro (y letras convencionales), así que “les pusimos colores”.

“Tecnología, Media y Nerdos”

El nombre del sitio

Para crear un sitio web, hay que registrar un nombre de dominio, que definiría su identidad en todos sentidos.

Spoiler Alert: Nuestro nombre no era previsto así al inicio. Pensábamos en algo “diferente” … Pero tampoco haremos publicidad gratuita a un sitio que desde este tiempo todavía está en construcción (dominio registrado justo antes de que lo pidamos).

Pero no hay problema, somos creativos. El nombre “Tecnología, Media y Nerdos” surgió rápidamente. Por su excesiva complejidad (describía bien cómo veíamos su contenido), sabíamos que muy probablemente estaría disponible.

El consenso general sobre la posibilidad de reducir este nombre a sus iniciales “TMN” sello definitivamente la aceptación de este nombre.

Logo y símbolo

Las cosas se pusieron mejor aun cuando de manera separada y no concertada, llegaron las dos ideas de la imagen simbólica y del logo.

La imagen simbólica es la siguiente:

Este objeto extraño, lo hemos llamado “Babel Tower”. Full disclosure: es un kit de destornilladores universal… Pero eso no le quita su dimensión simbólica. Además, “Babel Tower” nos recuerda que la tecnología empezó mucho más temprano en la historia de la humanidad.

Casi al mismo tiempo, llego una maqueta del sitio con la siguiente propuesta de logo:

Logo simple TMN

La analogía con “Babel Tower” nos impactó inmediatamente, por eso se volvió nuestro logo oficial antes siquiera de enfrentar la angustia de pelearnos por la elección de uno.

Las páginas

El menú y los temas

Menu TMN

La estructura del menú fue también clara desde el inicio en cuanto a su variedad, el orden también… “Casi”, porque la categoría “Dummies” es un aporte de Ustedes lectores y por cierto el presente artículo pertenece a esta categoría.

Cada categoría del menú está asociada a una página temática:

  • Home es la página principal que acepta todos los temas.
  • Las demás páginas son: Dummies, News, Media, Hardware, Gamers, Profesionales e International

Les dejamos descubrir como los hemos venido poblando.

Organización de las páginas

Todas las páginas tienen la misma organización: nuestro logo asociado con nuestro nombre abreviado, el menú, un “slider” (un diaporama con fotos que nos evocan el tema de la página), y una presentación preliminar de los 6 posts los más recientes de esta categoría.

Un poco de ergonomía: Un triángulo debajo de un ítem del menú indica que página es activa

haciendo clic con botón izquierdo del mouse sobre un elemento del menú, se transfiere a la página del tema. Hay dos casos particulares:

A la página “Home” (la página principal), se puede llegar de dos maneras

  • Clic sobre el menú “Home”, como las demás categorías
  • Logo TMNClic sobre el nombre “TMN” del logo de nuestro sitio, que aparece en cada página y cada post.
Every Post - Menú TMN

La página “Every Post” es un “subcapítulo” de “Home”. La hemos creado porque se volvió rápidamente evidente que la cantidad de posts iba a crecer rápidamente. Por eso hemos pensado en este listado completo de los posts, menos estético pero más efectivo para encontrar un post en particular, sobre todo si es más antiguo.

Los “posts / artículos”

Algunos ya deben preguntarse porque a veces dijimos “post” y otras veces “artículos”. Ahora pueden por fin tranquilizarse: es la misma cosa, solo que “post” es una denominación más Internet, y “artículo” más periodística.

Los “post” están siempre precedidos de una imagen o foto, que evoca el tema. Es la razón de ser de nuestra cámara: ¡nada de fotos genéricas!

Procuremos además insertar ilustraciones que les ayuden a visualizar de que estamos hablando.

Hay que sabe una cosa importante a propósito de todas estas ilustraciones: son las que ocupan el volumen de datos el más importante en los posts, así que es una elección difícil.

Nuestro sitio es todavía un bebé (o más exactamente nosotros somos los bebés diseñadores). Ya estamos capaces de insertar videos YouTube en varios posts, sobre todo de la categoría Media, pero no hemos “creado” de estos vídeos (lo haremos).

Tampoco hemos realizado “podcasts”. Parte de la explicación está en el siguiente artículo:

http://tecnologiamediaynerdos.com/hardware/kit-de-supervivencia-n-1-el-smarphone-4-3/

y parte porque los varios que queremos entrevistar no estaban disponibles (lo haremos).

Los hipervínculos

En los artículos (o los posts), los hipervínculos aparecen en letras gordas que cambian de color (de negro a morado) cuando uno pasa el cursor del mouse sobre ellos.

Hacer clic sobre ellos abra una nueva pestaña, es decir que, al contrario de muchos sitios, usted no abandona la página inicial, que queda abierta.

Es más práctico para ustedes que hacer un “clic derecho” sobre el vínculo y elegir “abrir el vínculo en una nueva pestaña”, que con regularidad se olvida y uno maldice el pobre navegador que no tiene la culpa.

Sin embargo, hay un lado negativo a eso: si no tienen la disciplina de cerrar las pestañas que dejan de usar, su navegación se volverá más lenta…

La publicidad

Hemos hablado del tema en el Editorial 4. Es la forma de publicidad la menos invasivo que hemos encontrado, y hemos notado que es muy neutral (poco agresiva). Pero no dudan en expresarse con nosotros o directamente rechazando las que les molestan (Adsense lo tiene previsto).

Hemos descubierto que hay una manera de convivir con estas publicidades. Eso sí, estamos asombrados por la precisión de la información que tienen sobre nosotros.

¿Mejoras?

Somos principiantes; seguramente no hemos sacado provecho de todas las herramientas que tenemos, y es posible que necesitemos “plugins” adicionales para mejorar nuestra ergonomía.

Esta ergonomía, la hemos querido la más sencilla e intuitiva posible. Preferimos ser minuciosos y cuidadosos que demostrativos en despliegue de funcionalidades.

La mejora la más interesante será la aparición de nuevas fuentes de contenidos.