Anteriormente se requería conocimientos sobre maquetado web como HTML para poder crear una página web. Hoy las posibilidades están más extendidas para todo tipo de usuarios y con especial enfoque en los diseñadores, con una correspondencia más directa con lo visual.

En este sentido, un editor visual es una herramienta informática que nos brinda una serie de elementos para incorporar a nuestro diseño, para así personalizarlo con las propiedades visuales deseadas como pueden ser:

• Ubicación
• Color de fondo
• Color de texto
• Márgenes

También hará de intermediario o traductor entre la representación de estos elementos y el código de maquetado subyacente, el cual es producto final de cualquiera software de este tipo. Hay que tener en cuenta que existen varios tipos de códigos que pueden usarse en simultáneo para el funcionamiento de un sitio web, como pueden ser:

• HTML: Lenguaje de marcado de hipertexto. Sirve para la estructura o esqueleto básico. Define la posición de los elementos relativa entre ellos. Párrafos, divisiones, tablas (filas y columnas), vínculos, etc.
• CSS: Hoja de estilos en cascada. Su utilidad se da como complemento del HTML asignando propiedades visuales a los elementos definidos en la estructura. De esta forma, permite cambiar de más eficientemente propiedades como: color, fuente, tamaño, etc.
• JavaScript: Un lenguaje para añadir funcionalidad algorítmica. Es en sí un lenguaje de programación, mientras que los anteriores son de marcado o maquetado. Permite una interacción personalizable con el usuario.

Entonces el editor visual convertirá nuestras instrucciones de tipo visuales, en código e instrucciones legibles para el navegador, las cuales procederá a renderizar para su visualización. De esta manera podemos inferir que un editor visual es el inverso de un navegador web.

Diferentes categorías de editores visuales:

Como se dijo anteriormente, un editor visual es un software, pero como tal puede aparecer en diferentes plataformas y tecnologías.

#1: Editores online integrados:

Algunos proveedores de alojamiento web o hosting, permiten acceder a este tipo de herramienta incluida en el plan, de forma que, apenas contratado el servicio, seas capaz de empezar a diseñar tu sitio web sin más demora.

De esta forma, se puede obtener una manera muy eficiente, liviana y rápida de crear un sitio web simplemente arrastrando y soltando bloques en una plantilla a elección del usuario. Otras soluciones similares pueden ser provistas por sitios dedicados al diseño web, aunque todos con un funcionamiento similar.

La desventaja que pueden presentar es la limitada capacidad de funcionalidad agregada, es decir que estos editores visuales están diseñados para una serie muy específica de interacciones con el usuario, como pueden ser: un formulario de contacto, un cuadro de mensaje o algo afín, pero sin poder extenderse más allá de eso.

#2: Editores de escritorio:

Son programas que trabajan completamente offline, es decir que e permiten desarrollar un proyecto web desde el principio y con la posibilidad de publicarlo una vez finalizado. Estos programas suelen ser bastante pesados en recursos computacionales y se quedan obsoletos rápidamente, puesto que el mundo web es altamente dinámico.

Ejemplos de este tipo son:

• Adobe Muse
• Google Web Designer

Como ejemplo clave de esto, Adobe anunció el fin del soporte para Muse, y el lanzamiento de su última actualización en marzo del 2018.

#3: Sistemas de gestión de contenidos:

También conocidos como CMS por sus siglas en inglés (Content Management System) Se trata de un software que corre sobre un servidor web, el cual se encarga de gestionar de forma integral todos los aspectos de un sitio web como: navegación de páginas, estructura de página, entradas del sitio o de blog, archivos multimedia, temas visuales, complementos y funcionalidades adicionales, gestión de acceso, usuarios o comunidad y mucho más.

Existe una infinidad de estos sistemas con múltiples propósitos y orientados para un montón de mercados y soluciones, por lo que están en un gran auge. La única desventaja es que representan una gran carga para el servidor al crear un sitio dinámico, es decir que se debe generar permanentemente el contenido para que funcione en tiempo real.

En este caso, el código que se utiliza es un tanto diferente ya que debe estar preparado para ser dinámico y crear el código de marcado web en tiempo real, lenguajes de programación como estos son: PHP, ASP.NET, etc.

El software editor visual es propio para cada sistema que lo trae incorporado para editar páginas en tiempo real y de publicación casi instantánea. Algunos ejemplos de sistemas CMS populares son:

• WordPress
• Joomla
• Drupal

Las formas numeradas en este artículo representan un mero resumen genérico de las posibilidades a encontrar y de los ejemplos más populares de cada categoría, pero en el mundo web, donde la dinámica, las tendencias y los patrones de diseño cambian constantemente, se debe estar al día para brindar soluciones que destaquen y satisfagan a nuestros clientes o usuarios.

La entrada Qué es un editor visual para crear páginas web se publicó primero en Punto Geek.

Si bien ya existe archive.org, también está El Museo del Diseño Web, un sitio donde podemos ver los diseños de las webs más conocidas de internet, hace unos años atrás.

Este museo recopila los diseños de más de 800 webs desde el año 1996 hasta el 2005.

Navegar por los diseños es simple gracias a las opciones que tienen: podemos buscar por año, por categoría de la web, o por estilo del diseño.

Es increíble ver cómo han ido evolucionando los diseños de los sitios que usamos todos los días. Por ejemplo, Google y Facebook; su diseño era muy pobre, pero para ésa época alcanzaba.

Hoy en día se requieren otro tipo de diseños ya que la gente consume otro tipo de contenidos, tenemos dispositivos que soportan mejores lenguajes de programación, etc.

Como yapa, les recomiendo que visiten la sección Timeline, donde podrán ver una línea de tiempo de cada sitio web con du diseño.

La entrada El Museo del Diseño Web te muestra cómo eran los sitios más conocidos hace unos años se publicó primero en Punto Geek.

Bueno, después de unos meses sabáticos (?) me voy a dignar a actualizar el blog, y lo vengo a hacer con este genial curso de HTML y CSS que encontré dando vueltas por ahí.

Lo bueno de este curso es que es completamente gratuito y está orientado a personas que no tengan ningún tipo de conocimientos del tema, especial para novatos que se quieran adentrar en el diseño web.

Es muy simple y didáctico ya que tiene ejemplos prácticos y al término del curso se desarrolla un proyecto real en el cual hay que aplicar todo lo que se ha aprendido a lo largo del curso.

Principales temas a tratar:

• Introducción a HTML y CSS.
• Sintaxis de HTML5
• Sintaxis de CSS.
• Posicionamiento.
• Tipografía.
• Formularios.
• Tablas.

Para hacer este curso solo tienen que entrar aquí y registrarse con una cuenta gratuita.

La entrada Nuevo curso para aprender HTML5 y CSS desde cero se publicó primero en Punto Geek.

Como bien ya sabemos el estilo flat o minimalista llegó para quedarse, en la actualidad los nuevos diseños de casi todos los sitios web presentan este estilo combinado con otras tendencias del momento, como es el diseño de una página con efectos Parallax.

Todos creen que crear diseños flat es muy fácil, debido a que aparecen que tan solo con varios  colores planos y algunas figuras ya todo es flat, pero no es así, al igual que el resto de los estilos de diseño web el estilo flat presenta una dificultad desafiante para lograrlo, se debe saber combinar los colores, entendiéndose que conoces de antemano la teoría del color, además combinarlo con unas buenas fuentes y por supuesto una creatividad desafiante.

Para facilitar un poco el proceso siempre es bueno tener a mano un compilado de paletas de colores de sitios web que poseen el estilo flat, de esta manera es más identificar las familias de colores que son más utilizado en este estilo de diseño, por ello en Betterment recopilaron 24 paletas de colores de sitios web con estilo flat o minimalista.

24 Flat Designs with Compelling Color Palettes

La entrada Paleta de colores de sitios web con estilo flat se publicó primero en Punto Geek.

Pero aún hay un tipo de contenido que prevalece y que siempre prevalecerá en cualquier sitio, aplicación o página web, ¿Sabes de qué hablo? Si pensaste en palabras, pensaste correctamente, las palabras siempre serán la parte esencial de un sitio web, a través de las palabras transmites tu conocimiento, convences al visitante de comprar tu producto y al usuario de que se registre en tu aplicación.

Es a través de las palabras que atraes y retienes, si son lo suficientemente buenas, a las personas, con esta reflexión Justin Jackson ha creado Words, una página web muy sencilla donde expresa sus ideas acerca de lo importante que son las palabras en el diseño web en la actualidad.

En ella resalta algo que todos deberíamos preguntarnos cuando empezamos un nuevo proyecto web, ¿Qué escribiremos en la página principal? ¿Qué palabras utilizaremos para comunicarnos con el usuario? Preguntas que deberías empezar a preguntarte cuando inicies un nuevo proyecto.

La entrada Esto es una página web: Reflexión sobre el diseño web actual se publicó primero en Punto Geek.

La infografía está en español, así que no pueden desaprovechar estos consejos.

Infografía creada por BaseKit

La entrada Diseño Web: Consejos para diseñar una página web above the fold [Infografía] se publicó primero en Punto Geek.

Ultimate HTML5 Cheatsheat by Tech King

Visto en GeeksRoom

La entrada Completa guía de referencia de HTML5 [Infografía] se publicó primero en Punto Geek.

La entrada La anatomía de un sitio web perfecto [Infografía] se publicó primero en Punto Geek.

En este enlace encontraras una masiva recopilación de recursos que va desde la teoría del diseño hasta las mas conocidas herramientas para tu diseño web.

Por cortesía de: TheNextWeb.

La entrada 82 recursos para empezar a diseñar se publicó primero en Punto Geek.

A la hora de diseñar nuestros sitios web, nos solemos encontrar con la limitación de usar solo las fuentes o tipografías más conocidas, para maximizar la compatibilidad con la mayor cantidad de usuarios. Esto se debe a que cada página “llama” a las fuentes de la computadora, y mientras que la aburrida Arial la tenemos todos, la divertida Curlz solo unos pocos, y si ponemos esa, muchos no van a poder verla.

Para poder incrustar cualquier tipografía en nuestro sitio web y que todos la puedan apreciar, existe FontBurner, un servicio que nos provee de unas pocas líneas de código para agregar, y que nos permitirán usar tranquilamente cualquiera de más de 1000 fuentes. Lo único que hay que hacer es elegir la fuente navegando por la web de FontBurner, clickearla, y luego copiar el código que se nos brinda. El mismo debe ser pegado justo antes de la etiqueta <body> de nuestra página.

Tan sencillo como eso, ahora podemos personalizar aún más nuestros blogs, y que todos puedan disfrutarlo.

[Vía Make Use Of]

La entrada Usa cualquier fuente o tipografía en tu blog se publicó primero en Punto Geek.