Qué es un editor visual para crear páginas web

diseño web

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

diseño web

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:

diseño web

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:

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.

diseño web

#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:

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.

El Museo del Diseño Web te muestra cómo eran los sitios más conocidos hace unos años

El diseño web ha ido mutando con el paso de los años. Lo que hoy parece última moda y tendencia, en unos años será obsoleto. ¿Se acuerdan de la web 2.0? Ese es un claro ejemplo.
Estaría buenísimo que haya un lugar donde recopilen los cambios de estas webs, y de eso se trata lo que les quiero contar hoy.

El Museo del Diseño Web

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.

Nuevo curso para aprender HTML5 y CSS desde cero

Curso de HTML y CSS

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.

Paleta de colores de sitios web con estilo flat

Screenshot_108Screenshot_107

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

Esto es una página web: Reflexión sobre el diseño web actual

La Web ha evolucionado a límites que alguna vez no creímos posibles, estamos viviendo una era espectacular, sitios web que funcionan en cualquier dispositivo, aplicaciones web completamente interactivas que corren perfectamente en tu smartphone, diseños increíbles que te maravillan los ojos, interfaces acabadas que cuidan todos los detalles para la usabilidad, todas estás son características y funcionalidades que solo han sido posible gracias al estado del arte del diseño y desarrollo web.

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.

Diseño Web: Consejos para diseñar una página web above the fold [Infografía]

Desde BaseKit crearon una excelente infografía con consejos para diseñar sitios web above the fold (encima del pliegue), algo que hoy en día ya no es tan dramático como años atrás, sin embargo es muy importante tener en cuenta estos datos estadísticos y consejos para no meter la pata y crear algo bueno.

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

Infografía creada por BaseKit

La anatomía de un sitio web perfecto [Infografía]

Navegando por la web me encontré con una infografía que muestra la anatomía o estructura de un sitio web perfecto, esta infografía fue creada basándose en la perfección de PuntoGeek.com teniendo en cuenta los aspectos de: diseño web, navegación adecuada dentro del sitio, usabilidad, contenido, SEO (optimización en motores de búsqueda), Social Media (la parte de las redes sociales) y otras dos que considero relleno.

82 recursos para empezar a diseñar

Para aquellos que ven como una utopía el llegar a ser diseñadores y hasta poder vivir de esto o solo eres diseñador en busca de nuevos recursos o tutoriales para renovar esa inspiración y practica que alguna vez creíste perdida , pues el día de hoy y por cortesía de TheNextWeb te traemos una recopilacion de un total de 82 recursos para ya sea empezar o simplemente afianzar tus conocimientos previos.

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.

Usa cualquier fuente o tipografía en tu blog

fontburner1

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]