TechnOtaku – Nuevo Diseño

Después de tanto tiempo con el mismo diseño TechnOtaku por fin tendrá un cambio visual real. Muchas de las cosas que tiene este nuevo diseño ya se lo había estado agregando al anterior poco a poco, como las redes sociales en la barra lateral, también tiene algunas cosas nuevas como los artículos destacados en la parte de arriba. Aquí haré una corta (eso espero) descripción del nuevo diseño.

Primero que nada debo aclarar que no está completamente terminado, muchas cosas no las podía probar offline así que puse usé el tema en el calabozo del androide, pero aun hay algunas cosas que no podía cambiar si no estaba en este sitio y las iré agregando en estos días. También iré probando cosas nuevas que no sé como vayan a funcionar y removeré lo que vea que no funciona.

Otra cosa, si ven raro el diseño, primero que nada borren el caché de su navegador que tengan de esta página (no borren todo su caché, es una molestia) y den refresh. Pueden hacer eso en Firefox oprimiento control+F5, o en Chrome Control+F5 o Alt+F5 dependiendo de su versión, intenten con ambos.

Colores y fuentes de texto

Cambié por primera vez el color del sitio, ya habíamos tenido unos 4 o 5 diseños anteriores y casi todos habían sido texto negro sobre fondo blanco muy regular, diseño en azul y blanco. Cambié el diseño a algo más gris con naranja y negro y estoy usando fuentes especiales. El título de la página está escrito con "Permanent Marker", alojada por google, los títulos de las entradas y subtítulos dentro de las entradas están escritos con "Architects Daughter" también alojada por google, así que estas dos fonts se deben ver casi iguales en todas las PC's.

Según he estado investigando los últimos meses, la mejor manera de leer es en líneas no muy largas, con texto en tamaño de 16px y en una fuente serif con mucho espacio. Por lo que estoy usando para los artículos Georgia a 16px en las máquinas que tengan esa font, que deben ser la gran mayoría, incluso linux, y para los que no la tengan verán la fuente serif que tengan por defecto. El tamaño de las líneas es de 18px por lo que es fácil distinguir una línea de la siguiente o la anterior y cada párrafo tiene 15px de margen arriba y abajo, eso hace 30px entre cada párrafo, que al principio me pareció exagerado pero al verlo me pareció muy bien, se ve agradable. La desventaja es que el texto parece mucho más largo que antes, y este post se va a ver larguísimo, no sé si sea realmente malo, pero creo que sí intimida a simple vista. Se aceptan sugerencias.

Los links son muy parecidos a los que teníamos ya antes. Son azul básico, el básico de su navegador, que es el color que ya todos reconocemos como links, y están subrayados. Los links que den a una página fuera del sitio tendrán un ícono de una flecha.

Página inicial

Lo primero, y yo creo que más importante es el menú de arriba, desde ahí se puede navegar fácilmente por los diferentes sitios, ya sea la galería de imágenes, el Calabozo del Androide o este blog TechnOtaku. Agregué un link a la categoría de Hello! Project para aquellos que nos visitan solo por noticias de nuestras Idols favoritas. Ese menú tal vez cambie en un futuro cercano por algunas ideas que pienso implementar.

[dndth]otaku/23212_screenshot.jpg,otaku/23206_screenshot.jpg,otaku/23205_screenshot.jpg[/dndth]

En estas tres imágenes se ve la página principal de cada sitio, el diseño tal vez varíe dependiendo del navegador que usen, espero que se vea lo suficientemente bien en todos los navegadores, de lo que estoy seguro es que no se ve igual, por ejemplo en Firefox los links del menú principal tienen una ligera inclinación que es parte del diseño, en Chrome por algún motivo no funcionó. En Chrome los títulos de los posts destacados aparecen con una animación de arriba hacia abajo, en Firefox esa animación se ve muy lenta así que se la quité y solo se ve en Chrome, y así más cosas.

En la parte de en medio del blog tenemos las entradas más recientes, ahí pueden o no estar los posts destacados, ya que está en orden cronológico, sin distinción de importancia. Tenemos también las redes sociales, desde ahí pueden darle like a la página en facebook, o seguir el twitter de @technotaku.

[dnd]otaku/23208_screenshot.jpg[/dnd]

El botón de +1 de Google es un nuevo servicio con el que pueden recomendar sitios fácilmente, lo único que tienen que hacer es dar click en el botón que tiene el +1, la primera vez que lo hagan les pedirá que acepten los términos y condiciones del servicio, claro necesitarán una cuenta de google, es decir, gmail, youtube, cualquiera. Después de eso solo necesitarán dar click una vez y nada más.

El resultado es que a las personas que tienen dentro de sus amigos o conocidos en google les aparecerán sugerencias cuando hagan búsquedas relacionadas con un tema específico. Es decir, que si un amigo de ustedes hace un búsqueda sobre "Saint Seiya" y ustedes le dieron +1 a un post sobre Saint Seiya en una página (por ejemplo ésta =D), google les dirá que esa página fue sugerida por ustedes. La parte buena que yo le veo a eso es que de esta manera las sugerencias no les llegarán a gente que no le interesa, si un amigo de ustedes nunca hace una búsqueda de "Saint Seiya" pues nunca les va a recomendar lo que ustedes pusieron.

Artículos individuales

[dnd]otaku/23210_screenshot.jpg[/dnd]

Cada post individual tiene una imagen principal, como ya estábamos acostumbrados, debajo de ésta está la información del post (que debo aumenta aun, no está completa). A lado de la información verán tres botones sociales, con ellos pueden darle like en facebook, pueden darle +1 al artículo y si usan twitter pueden compartirlo con un tweet también.

Dentro de los artículos, las imágenes y videos tienen un marco al que llamo crystal, porque se supone que parece cristal pero creo que no se nota mucho, de todos modos creo que se ve bien.

Comentarios

En los comentarios no hice nada, todo se maneja por Disqus porque es más fácil, práctico, seguro y lo principal es así se usan menos recursos de sistema. El tema de los comentarios se acomoda bien a cualquier diseño de la página así que imagino que todo está bien ahí.

Pie de página

En el pie de página debe haber información sobre ésta, pero au nno he puesto los links que deben ir, sobre cosas legales de uso de media y esas cosas necesarias, ya saben. Además debe tener los links a los afiliados, formas de contacto, etc.

[dnd]otaku/23211_screenshot.jpg[/dnd]

Los widgets de del pie de página son 4, de izquierda a derecha: Lo Destacado que es una lista de posts en los que la gente está comentando últimamente. Calabozo del Androide es una lista de los últimos artículos de ese blog, en el que sinceramente casi no escribo pero seguro escribiré más ahora. Comentarios: es una lista de los últimos comentarios que se han hecho en el blog. Galería de Imágenes: Son los thumbnails de las últimas imágenes que se han subido al blog, pueden usar el scroll de su mouse para ver más imágenes, aparecen las últimas 56 imágenes.

Galería de Imágenes

[dnd]otaku/23212_screenshot.jpg[/dnd]

La galería de imágenes es donde ponemos todas las imágenes que hay en los posts, pueden visitar la página inicial de ésta en img.technotaku.com. Hay dos links arriba de los thumbnails uno para ver las imágenes anteriores y para regresar, también hay un menú desplegable que dice "Choose a tag" ahí eligen una etiqueta para filtrar las imágenes, por serie de anime, por grupo de H!P o por artista. La mayor parte de las imágenes que subo son de Hello! Project, incluso aunque no escriba un post de eso siempre estoy subiendo muchas imágenes así que revísenla seguido.

[dnd]otaku/23202_screenshot.jpg[/dnd]

En las páginas de imágenes individuales se puede navegar también pero por thumbnails, aparecen una lista de thumbnails arriba de la imagen, la más grande que está en medio es la que están viendo y pueden ver las cinco anteriores y las cinco siguientes. Ahí también pueden compartir cada imagen en Facebook y twitter, además cada imagen tiene comentarios de facebook. Para comentar solo tienen que estar logueados en su cuenta de facebook y dar click en el link que dice "Add coment" o "añadir comentario".

Y en general eso es todo, hago este post para tenerlo registrado, porque luego pasa mucho tiempo y no tengo ninguna imagen de como era antes el blog. El 17 del próximo mes TechnOtaku cumple 4 años y jamás pensé que llegarían a pasar 4 años y aun se actualizara el blog y debo decir que tanto como siempre o más que nunca.

Espero que les haya gustado la página, comenten pro favor qué les pareció, si hay algo que se necesitaría cambiar, si tienen algún problema con el sitio, con el diseño, etc.

Si tienen algún problema con los comentarios y no pueden escribir pueden mandarme un correo a xacur@technotaku.com.