Mes: marzo 2015

No te quedes atrás, actualiza la imagen de tu web.

Introducción al diseño web 3.0                                                         Por Ernesto Mendoza

El diseño web es una técnica utilizada para estructurar los componentes gráficos de un sitio web, la cual engloba varios elementos tales como: formas, tamaños, colores, tipos de letra, entre otros. Después de la funcionalidad que se le dé a una página o aplicación web esta actividad es sumamente importante ya que hace referencia a la visualización que tendrá el usuario siempre que utilice su interfaz.

Con la evolución de la web 3.0, no sólo es necesario que los nuevos sitios tengan un estilo atractivo, sino que su diseño tenga la calidad suficiente para aumentar la accesibilidad de la web, su promoción en los buscadores, una buena interactividad con el usuario y facilitar su usabilidad hasta lograr que el sitio sea lo más intuitivo posible.

De lo convencional a lo extraordinario

(Las nuevas tendencias del desarrollo web)

3 tendencias

La web sería un desastre sin CSS, de hecho, volviendo a los 90, antes de que los navegadores soportaran este lenguaje, la red era una maraña de etiquetas <font> y <size> y el uso de tablas para organizar un sitio web era realmente descomunal, además de que esto hacia la página menos productiva. Por suerte pasamos esa época y quizá la manera más sencilla de mejorar un sitio, es darle una nueva capa de estilo con un poco de CSS.

En la actualidad hay un sinfín de modelos y diseños para los sitios que podemos encontrar en la web, desde los estilos clásicos que muchos conocemos y que contienen información dentro de un gran div centrado en la página con un borde que actúa como contenedor de otros elementos como menús, bloques de texto, formularios, imágenes y videos, y que están diseñados aun a base de links para enlazar las diferentes páginas que conforman el sitio, hasta las muy estilizadas y novedosas páginas web tipo Landing Page en las que podemos encontrar toda la información necesaria en una sola página bien organizada y que se maneja principalmente a base de scroll.

Con este nuevo enfoque que se le ha dado al diseño de las páginas web, hoy en día es muy común encontrarnos con sitios con grandes imágenes en su presentación contenidas en un slider, el uso considerable del espacio en blanco que hace que los elementos que incorporemos sean más atractivos para el usuario, la utilización de colores contrastantes han sido utilizados en diferentes iconos planos y botones para delimitar eficazmente las distintas secciones de la web y se ha dejado atrás el uso de textos con fuentes pequeñas para integrar bloques de información con grandes tipografías, estas y muchas nuevas tendencias sin duda alguna realzan el diseño de los sitios web modernos.

No obstante, es importante señalar que el diseño que agreguemos a un sitio web debe ser acorde al de la imagen empresarial de la compañía o del usuario que lo solicite. Ya que por ejemplo, no es una buena práctica sobrecargar de colores una página cuando la empresa hace referencia a una organización ejecutiva y viceversa.

La carrocería y pintura dentro del desarrollo web moderno (Tecnologías de diseño que predominan actualmente)

2 html5-css-javascript

Muchos conocen las hojas de estilo en cascada o CSS, pero no todos saben usarlas como corresponde a la web 3.0. Las CSS son un método que surgió para definir el estilo visual de los elementos XML, HTML o derivado.

Es así que desde los comienzos de la web 2.0 se habla del diseño sin tablas, o table-less, una metodología que permite diseñar toda una página web por medio de columnas,  DIV´s y CSS, que indican la disposición de los elementos en la página.

La aplicación de estas hojas de estilo nos permiten sacar provecho a nuestras capacidades como diseñadores web, ya que con ellas tenemos un mayor control sobre la forma en la que los navegadores muestran la información de nuestras páginas, lo que favorece mantener la semántica del HTML, y con la introducción de CSS3 la capacidad de representación de los elementos que conforman los sitios web ha aumentado significativamente para gestionar una gran gama de impresionantes efectos visuales.

Como buenos diseñadores no podemos dejar de lado participación del Frontend haciendo uso de JavaScript, el cual es un lenguaje muy poderoso que nos ayudara a darle vida a todos esos diseños que realicemos, para mostrar al usuario una interactividad de alta calidad y hacer de su experiencia en nuestro sitio algo muy satisfactorio.

No reinventes la rueda (Alternativas para un diseño rápido y elegante)

Word cloud - web design

Podemos darle a nuestros sitios un diseño a medida tal y como deseemos haciendo uso de todas las herramientas que nos proporciona CSS3, para crear degradados, transparencias, sombras, bordes estilizados, mensajes emergentes e incluso transformaciones en 3D.

Sin embargo, hoy en día existen en la web una cantidad considerable de Frameworks que nos harán la vida aún más fácil, ya que estos marcos de trabajo nos proporcionan estilos ya prediseñados y muy atractivos para todos los elementos que deseemos incorporar a nuestros sitios, tales como: formularios (botones, selects, checkbox, radio buttons, etc.),  listas, tablas, paneles para información, controles, calendarios, menús y una organización a base de columnas para estructurar nuestras páginas  de una forma muy estética. A continuación listamos algunos de ellos, sin embargo en la web podemos encontramos muchos más.

  • BOOTSTRAP 3: Es el framework más popular para el desarrollo responsivo, que incorpora HTML, CSS y JS. Podemos encontrarlo en su sitio web: http://getbootstrap.com/
  • MATERIALIZE: Un framework web front-end moderno y responsivo basado en Material Design. Sin lugar a dudas una recomendación que nosotros les hacemos. http://materializecss.com/
  • PURE: Un conjunto de pequeños módulos CSS que se pueden utilizar en cada proyecto web. Este es un framework creado por Yahoo y lo puedes encontrar en su web: http://purecss.io/ ·         FOUNDATION 5: Una de las mejores alternativas a Bootstrap, el cual destaca en esta nueva versión la prioridad que se ha dado al aumento de la velocidad en la carga de sus elementos. http://foundation.zurb.com/ ·         IVORY: Simple, flexible y potente, un framework muy sencillo que te ayudara a realzar diseños convencionales con un toque actualizado. http://weice.in/ivory/index.html La ventaja y punto en común que tienen todas estas herramientas, es que todas son open source, y para agregar el diseño a nuestros sitios solo basta con descargarlos, integrarlos en nuestro proyecto, y lo mejor de todo, es que como ya tienen sus estilos predefinidos, solo es necesario llamar las clases de los diferentes elementos que deseemos agregar para poder visualizar sus diseños en cada componente de nuestro sitio.

¿Y que hay con el diseño para móviles? (Diseño Responsivo)

5 responsive

Debido a la propagación de smartphones y tablets en el mercado actual, existe más diversidad que nunca de formatos de pantalla. Este panorama obliga a adaptar los formatos web a estos nuevos dispositivos y la estructura de cada uno de ellos.

 A partir de todo esto, el término “responsive web design” se escucha frecuentemente, pero ¿qué es exactamente? El responsive design corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta smartphones o tablets. Con este tipo de diseño no necesitas tener una versión para cada dispositivo, una sola web se adapta a todos ellos.

En lugar de construir una sitio web para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3 media queries. De esta forma, el sitio web detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando los elementos de la web.

Con la llegada del diseño responsive, las versiones web para móviles están comenzando a desaparecer. Se espera que para este 2015 este tipo de webs deberían conformar una minoría notable y quien no tenga una web adaptable estará fuera.

Y ahora qué sabes esto, ¿estás listo para evolucionar el diseño tu web?

¿Cuándo se entregó y cuándo se leyó tu mensaje en WhatsApp?

Esta información es para que te andes con cuidado y sepas que ahora tu privacidad a sido reducida.
Así es, hoy en día puedes saber hora y fecha de cuando se entrego y de cuando se leyó el mensaje que envías en WhatsApp. De esta forma no te podrán chorear o podrás chorear con un “No me llego tu mensaje we” , ve pensando mejores pretextos.

 

Aquí las instrucciones:

Manten presionado el mensaje que quieres desmentir o stalkeear:

PicsArt_1426052862254

 

Una vez que se sombrea el mensaje, en la parte de arriba aparece una barra de color azul y verán una “i” en un circulo, ahí estará su objetivo.

PicsArt_1426049367472

 

! Presionala !

IMG-20150310-WA0018

!Ahí lo tienes, no te dejes engañar y cuéntaselo a quien más confianza le tengas!

LrsRys.