Trending en Diseño Web

En los últimos dos días me he estado preguntando qué está de moda, qué no y la utilidad de lo mismo, ya que muchas veces hay cosas inútiles de moda, pero la misma inutilidad las hace modas efímeras. Como pasó con la burbuja.com

La realidad es que en México existe un lag tecnológico que influye fuertemente cuando se pretende crear una página de internet. No explicaré las razones de este lag, pero dos factores derivados del mismo son determinantes a considerar en la creación de un sitio web: Velocidad y Ancho de Banda de las conecciones a internet y el dispositivo de acceso.

Estadística de uso de navegadores en México

Estadística de uso de navegadores en México

Estadística de uso de OS en México
Estadística de uso de OS en México

Esto me lleva a pensar sobre las alternativas que existen para un diseño ad hoc al mercado mexicano. (Y latino)

Dados los 2 Mb/s en promedio de las conecciones en el país, que claro, es un decir, ya que generalmente se ve rebasado el ancho de banda del ISP por lo que el usuario final disfruta en promedio de 600Kb/s; entonces es una obligación diseñar páginas «FrontEnd» lo más ligeras posibles.Pero esta situación no es exclusiva en LatinoAmérica, es algo que se replica en todos los paises en vías de desarrollo.

Aunado al bajo rendimiento de las conecciones a internet, se encuentra el cómo el usuario accesa a la web, es decir, una mezcla entre el dispositivo (que va desde una Pentium III hasta las comutadoras de varios nucleos, pasando por Netbooks, Tablets y smartphones) y el navegador o browser, que windows por defecto nos brinda IE, lo que conlleva muchos problemas. (Ya hablaré en otro momento de la guerra de los navegadores). Bueno, pues estas razones han llevado al desarrollo de la versión 5 de HTML y la 3 de CSS. El objetivo de estos estándares y reglas para el código tuvo el objetivo de reducir las líneas de código y con ello el tiempo de apertura de las páginas, al igual que el añadir funciones que se acoplan mejor a la tecnología actual y se reflejan en un mejor desempeño del sitio mismo.

Bueno, pero ahora si, después de tanto preámbulo, cuales son los trends en diseño al 2012?

Responsive design

El diseño responsivo es una de las novedades de finales de 2011, sin embargo aun nadie sabe bien como usarlo y son pocos los geeks que logran sacar códigos html ligeros y que sirven «cross platform» claro, sin incluir IE.

El diseño responsivo básicamente nos evita la necesidad de crear un sitio dedicado que sea mobile.dominio.com y aprovecha todas las características de un touchscreen. Se basa en el ajuste del contenido a la resolución de la pantalla.

Diseño Respinsivo: Ajuste de contenido

HTML 5 y CS3

Llegaron para quedarse y desplazar Flash, ademas de ser más ligeros y contar con la mayoría de habilidades web de Flash, su programación es más sencilla. El contra de esto, es que IE no soporta algunos argumentos y los hace inoperantes, pero ¿Qué cosa no es inoperante en IE?

Metro Style

El anuncio de Windows 8 además de crear espectativas, ha creado una moda con su MetroStyle, que ya no se llama más así, pero así será conocido. El agrupar información y mostrar contenido dinámico en bloques de colores sólidos parece atraer a las masas. Aun así es una limitante a la imaginación del diseñador.

Estilo Metro

Estilo tipo Revista

Pues la digitalización de los medios de comunicación nos han llevado a una transición paulatina de los impresos a los digitales, y gracias a los lectores de feeds rss y a estilos que asemejan el layout de un periódico, se nos permite un acceso a la información de forma más amigalbe, simple y sin tener que picar tantas ligas para lelgar a encontrar la información que queremos.

Revista

Tipografías

Arial, Times y Verdana ya no son una limitante. Con unas cuantas líneas de código y openfont o google fonts podemos usar la tipografía que más nos acomode sin afectar el «Copy&Paste» y las ayudas visuales.

Google Fonts

Google Fonts

Infografías

Pues se explica solo y es la mejor forma de presentar información y datos gruesos.
Claro, el diseño de elementos retro dentro de la misma es el gancho para el hipster que todos tenemos dentro.

Se presentan esquemas y gráficas

Caso de estudio: Mi sitio Web

Ya había hablado mucho antes sobre los sitios de internet, pero ahora va más bien de la presencia de uno en la web. Pues precisamente los blogs son una forma de estar presente, al igual que las redes sociales, pero si queremos englobar  all «The Social Media», no acabaríamos… desde ser un stumbler, hasta ser un Faceaddict…

Cuales son mis razones para tener un sitio web?

Primero era probar Joomla!, ya lo probé y no me gustó, me facilita mucho las cosas a mi que no se PHP, pero eso de sus templetes es como un golpe a la libertad de diseño, con eso de que soy fan de lo que puede hacer Jquery con html5….

Otra, más allá del poder practicar con un servidor, es la de ser una tarjeta de presentación extendida, que generalmente es el objetivo de las páginas personales.

Así que manos a la obra.

Qué información pretende llevar? En realidad solo información personal y profesional, por tanto no requiero de algo interactivo, no creo que alguien se interese en poner comentarios sobre mis títulos nobiliarios, le quiera dar like a algo o quiera enviar información a través de mi sitio.

Por eso el usar joomla! o wordpress lo descarto, sería como matar una hormiga con una escopeta. Aparte de que se podría prestar a interpretar a que solo se usar templates.

Osea que va a ser una web 1.0 donde voy a integrar mi CV y las redes sociales que uso.

Diseño? Bueno, va a ser una apología a mi ego, así que…. jajaja de por sí, el index de la de la soema lo fue, así que debo de superarlo.

Del diseño viene el menú, uff aqui viene la parte dificil… NPI de que hacer, quiero un menú vertical, pero me encontré con esta cosa Kaiten Browser, que se ve muuuy bien… pero no me llena en el diseño. Así que buscaré hacer algo por mi cuenta.

Que después de dos horas de andar en pos de algo, di con un jQuery muy «neat» de Seamus P. H. Leahy, y con ayuda de un poco de las transformaciones de html5 tengo listo el menú. En verdad me da flojera meterme a programar un jQuery, después de tantos formularios que hice con js…

En fin, ya solo me faltan 2 secciones, la de mi cv y la de contacto. Para ellas usaré alguna transición coqueta. Y finalmente algo de magia para traducir a inglés el sitio.

Y así se hace un sitio web 1.0… que sencillo, no?

 

Creación de un sitio Web [pte 2]

Bueno, otra entrega de la serie Haga su propio sitio Web, jaja. En fin, ya les mostré como hacerlo rápido… Ahora les muestro como hacerlo bueno, bonito y barato.

Es como esta imagen que saqué del wall de un amigo, original de @inventive360:

En realidad si quieres algo gratis y de excelente calidad, hazlo tu! Pero para que salga de excelente calidad, debemos de tener los conocimientos necesarios.

Para el caso de una página de internet debemos saber lenguajes de programación y diseño; específicamente saber html, css, javascript, php. Saber usar programas para modificar imagenes y manipular vectores, así como archivos html, css, js, php. Y principalmente, tener buen ojo para el diseño. Si queremos un sitio web, la cosa crece.. ya que debemos conocer sobre protocolos y dominios.

Poco a poco explicaré los detalles de cada uno.

Pero primero lo primero.. Cómo funciona el interneee?

No hay que confundir los conceptos, internet es la infraestructura de computadoras + cables + servidores y la WEB es el conjunto de información alojada en los servidores; se accede a ella a través de un navegador web. El navegador interpreta la información de las páginas web y las muestra en un entorno visual. Las páginas web estan escritas en lenguaje HTML.

Sí, es muy breve, pero vean la nota al pie. *1

Primeros pasos

Iniciaremos con lo básico una simple página de internet, osea un archivo html. *2 La característica principal de un archivo html y del navegador es que funcionan a partir de tags, o etiquetas. Al leer la etiqueta el navegador hace la visualización de las secciones,

Cada tag tiene una función específica y está delimitada por signos menor y mayor que; también se pueden modificar las propiedades específicas de cada tag para modificar su comportamiento. La mayoría de las Tags se tienen que cerrar con una diagonal, es decir lo que queremos con cierta propiedad va entre la tag de apertura y la de cierre.

<tag> lo que queremos dentro de la tag </tag>

Las Tags básicas:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> Indica el tipo de documento *3
<html> Indica que es un documento html
<head> Indica que inicia el encabezado (como en un periódico), esta parte no se muestra en el navegador
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> Indica el contenido
<title>Titulo</title> Este es el titulo
</head>Aquí acaba el encabezado

<body> Aqui inicia el cuerpo, y es lo que se verá en el navegador

Hola Mundo

</body> Cierre del cuerpo
</html> Cierre del documento

Nosotros podemos escribir todo esto en un archivo de block de notas y a la hora de guardarlo, lo guardamos con extensión .html y violá tenemos nuestra primer página de internet.

Reff

Nota: Estoy leyendo otro libro sobre html, para asi poder recomendar otro además del de 250 secretos del diseño web

 

Arquitectura de un sitio Web

Lo que me había faltado la vez pasada es precisamente el porqué muchos sitios de internet no son útiles.

En el post pasado mencionaba el término web 3.0, es lo mismo que la web 2.0, pero lo que la caracteriza es el indexado del contenido de la web. El objetivo: acceder facilmente a la información.

No voy a hablar más de este tema, pero lo que quiero dejar claro es que es responsabilidad de quien crea la página, hacerlo de tal forma que el acceso a la información sea fácil. Y de esto se puede hablar en dos niveles, el de la navegación dentro del sitio y del indexado por los motores de búsqueda.

Navegación del sitio

Bueno, el título del post va escencialmente por esta sección, ya que aquí vamos a definir la estructura y el orden que van a tener nuestras páginas dentro del sitio.

Lo mejor es sacar una hoja de papel y seguir hasta tener definido todo esto, ya que puede llegar a ser muy abstracto.

Primero definiremos qué es lo que queremos comunicar y nos enfocaremos en eso. Por ejemplo, si queremos hacer la página de un restaurante necesitamos comunicar el menu, los precios, ubicación y contacto. Y así con lo que queramos difundir.

En cualquier caso, debemos de tener una página principal, en la cual las personas podrán acceder y encontrar la información vital y muy resumida de lo que se trata el sitio. (Si es el restaurante, debe tener la imagen del menu de promoción, la dirección, horarios y teléfonos).

Una vez que sabemos que va en la página principal, buscaremos qué información adicional y detallada necesitamos dar; la cual agregaremos en páginas secundarias, por ejemplo la página de contacto.

Y así con lo demás, claro, las páginas secundarias deben enlazar a las otras secundarias y a la principal. (Esto se consigue con un menú consistente)

Sugiero en este punto, crear un diagrama de árbol con la estructura del sitio, al que llamaremos Mapa del Sitio o Site Map.

Indexado en motores de búsqueda

Esta parte la explicaré a detalle en la segunda parte, ya que involucra algunas líneas de código, simplemente aquí explicaré su funcionamiento.

En general, un motor de busqueda funciona en tres pasos, el web crawling que «escarba» en toda la red con diferentes parametros, el indexado que relaciona los tags y la búsqueda.

La parte más importante al diseñar esta parte es que nuestro sitio tenga los tags correctos, por ejemplo, si es el mismo restaurante; que los tags sean comida, comida rapida, ocio, negocio, donde comer, comida cerca de tal lugar, etc.

Por ejemplo los tags de los post de este blog… da flojera tantos tags, pero vale la pena por que a alguien tarde que temprano le van a facilitar el acceder a lo que aquí se escribe.

Para más info:

Introducción al diseño web

Pues este post va dedicado a mi tocayo y amigo de Civilizate Ingeniería Civil, y para todos los entusiastas que quieren hacer su sitio web.

Pues todos tenemos alguna razón en particular para tener arriba un sitio web, pero en general es el difundir información y acercarla a las demás personas. Este es el objetivo principal y hay que tenerlo en cuenta en todo momento, en especial al no saturar de cosas inservibles nuestro sitio. (lo que me recuerda al sitio de homero con el Jesús bailarín).

Aqui va algo de lo que hablaré en la parte 1.1 del post (Estructura o arquitectura del sitio)

Ahora aqui hay de dos sopas, si nos urge subir la página a la red hay que buscarnos una plantilla y algún programa WYSIWYG. O si queremos que funcione llueva truene o relampaguee, se caiga el servidor donde la hosteamos y hasta los usuarios de IE la puedan ver bien.

Abro un paréntesis para algunas definiciones, host es quien nos hospedará el sitio, es decir un servidor (computadora grandota) donde vamos a disponer de espacio en disco duro y una carpeta con un dominio asignado (osease la direccion de internet)

Más adelante detallo otras cosas, pero lo básico es eso. Ahora bien, vamos al primer caso.

Diseño desde plantilla(práctico, pero no tanto)

Bajense un editor WYSIWYG. Que es eso? WYSIWYG stands for What You See Is What You Get, osease lo que ves es lo que hay. Hay muchos y cada vez más programas en la red. Conocidos? pues literal WYSIWYG, creo que es de lo mejorcito. iWeb para MAC, me han dado buenos comentarios y hasta hay editores online y otros de las propios hosters que son de dudosa procedencia. Pero para mejores resultados bajense, perdón, adquieran su licencia de WYSIWYG v 8.x.x

Paso siguiente busquen un host, en verdad hay de chile, mole y de manteca. Si usan uno de su escuela (mi caso) o empresa, pues ya tienen la mitad de la tarea hecha, ya que no tienen límites de capacidad, pero si unos muy grandes de seguridad… que bueno, hay que ingeniarnoslas para poder tener un sitio coqueto!.

Luego de mi proyección les doy algunos tips; si no les importa que su dirección de internet sea juanperez.we.bs o juanperez.dominioraro.rarisimo.com van a encontrar muchas opciones buenas y gratuitas. En otro caso, si quieren una direccion del tipo juanperez.com, les va a costar $100mn anuales (claro, si esta disponible) o $250mn si quieren un juanperez.com.mx. Búsquenle, no deben de ser más de 8 dolares un .com disponible, y un .com.mx raya 20 usd. pero no más, no se dejen engañar y claro, les deben asegurar el servidor en linea el 99.8% del año. Lean los TO’s.

Una vez decidido eso, viene otra cuestión va a ser web 1.0 o web 2.0 (o 3.0), es decir, si la gente va a poder interactuar o no con el contenido del sitio. Si estas decidiendote por la opción de plantillas, quiero pensar que es la premura del tiempo, así que será algo no colaborativo.

Haré otro parentesis para sugerirles WIX, trabajas con platillas, pero tienen un muy buen diseño y corren bien, ya nadamas eliges la platilla que mas te guste y la personalizas; y también la hosteas ahi en wix.

Pero bueno, ahora si, una vez que ya encontraron su hoster de confianza, y decidieron usar WYSIWYG, toca bajarnos una plantilla. (Creo que en algunos programas vienen unas de muestra, pero no estoy seguro). Aquí algunos sitios para bajar plantillas o templates gratuitamente.

Ahora ya tenemos todo para trabajar, cuando bajen su plantilla van a bajar una carpeta completa, no importa, así es. Ejecutan el programa y le dan abrir, ahi van a la carpeta que descargaron y abren el archivo que dice index.

Comienzan a editar y guardan, usar este tipo de editores y plantillas es tan sencillo que no voy a explicar nada de ello.

Al terminar suben la carpeta completa al hoster.

Ahora la segunda parte, que lleva un poco más de teoría la dejo para el post 2.x de esta nano-guía.

Carpe Diem

Diseño Web

Bueno, una de las cosas a las que me gusta dedicarle un rato es al diseño web… Mi fuerte, el estructurar el sitio, la parte mala… ser ingeniero. Los ingenieros generalmente no tenemos imaginación en cuanto a hacer las cosas bonitas… podemos imaginar cómo hacerlas funcionar, pero lo demás está relegado para los arquitetos o los diseñadores industriales.

Para esto, está el web designer y el web developer, los últimos son los geeks que terminan como IT guys y se certifican en lo que pueden (java, oracle, etc). Y el diseñador es quien se certifica en todo lo demás. Generalemente entre más certificaciones tiene una persona … más geek se hace.

El punto es que yo me considero amateur en estas cosas, y soy el que se hace cargo de la página de la SOEMA; ya que una página web nueva cuesta de 20 a 40 mil pesos. (Voy a cobrar, jaja).

Mi actual Trauma

Mi trauma es meter un blog al sitio de la SOEMA. Las opciones: vincular el blog de wordpress (haciendo que el layout del blog sea igual al de la pag), instalar wordpress en el servidor de la FI o desarrollar un blog con mysql y joomla, para la FI.

La tercera descartada, todo quedará en si Lalo me da permiso de instalar la segunda opción.