Herramientas de diseño web

Estas son las mejores programas para crear paginas web, hace algunos años la creación de páginas web era exclusivamente mercado de los programadores, pero ese ya no es el caso dado que existen numerosas herramientas para diseñar paginas web bajo una interfaz visual, que le permite arrastrar y soltar enlaces, texto e imágenes como si estuviera diseñando un póster o una presentación.

Otras herramientas de diseño web están dirigidas a los programadores, actuando como editores de texto avanzados, y permitiendo la construcción de un sitio web línea por línea. Sin embargo, este tipo de herramienta están destinados a desarrolladores web para generar sitios web profesionales.

En esta guía nos hemos centrado en cinco de las mejores herramientas disponibles actualmente. A la hora de seleccionar cuál incluir, nos hemos centrado en la facilidad de uso, los lenguajes web soportados, el coste y la facilidad con la que las herramientas permiten subir el proyecto una vez terminado.

Todas las herramientas premium cubiertas en esta guía ofrecen una versión de prueba, en cualquier caso, para que pueda hacerse una idea de lo que significan antes de comprometerse.

1. Adobe Dreamweaver CC

Un gigante del diseño web pero posiblemente exagerado para algunos.

Dreamweaver es una de las herramientas de diseño web más conocidas en el mercado y ha existido en varias formas desde hace muchos años. La última iteración de Dreamweaver está disponible como parte de la suite Creative Cloud de Adobe por una cuota mensual fija de 28 USD.

La herramienta tiene un amplio atractivo tanto para usuarios principiantes como avanzados. Cuando inicie Dreamweaver por primera vez, se le pedirá que elija entre los niveles de habilidad “principiante”, “intermedio” y “avanzado”. Esto ayuda a determinar el número de características que se le muestran, y si se le darán opciones para realizar tareas más complejas como construir un sitio a partir de código.

Aparte de una interfaz refrescantemente diseñada y potente, Dreamweaver es compatible con prácticamente cualquier tipo de código web, desde HTML básico a CSS, PHP y JavaScript, por nombrar sólo algunos. Si no está preparado para editar código sin procesar, Dreamweaver admite plantillas de WordPress y Drupal.

Otras características avanzadas incluyen una “vista en vivo” para previsualizar sitios web, así como soporte para certificados y un espacio de trabajo dedicado para desarrolladores. Si está haciendo su primera aventura en sitios de programación, Dreamweaver también ofrece consejos para mejorar su código.

El consenso general de los comentarios de los usuarios es que, si bien esta herramienta de diseño web es increíblemente flexible, el arsenal de características puede ser realmente abrumador. Afortunadamente Dreamweaver ofrece una versión de prueba gratuita, así que tómese su tiempo para experimentar y ver si es adecuado para usted.

2. Bluefish

Ligero y fácil de usar.

Bluefish es una de las herramientas de diseño web más pequeñas disponibles hoy en día. El diminuto instalador pesa algo menos de 53MB y la instalación sólo tarda unos instantes. Aunque la interfaz es sólo texto, está claramente diseñada pensando en los principiantes, ya que emplea barras de herramientas claras, menús personalizables por el usuario y resaltado de sintaxis.

Mientras que el enfoque principal es en HTML, Bluefish soporta una amplia gama de otros lenguajes incluyendo PHP, Java, JavaScript, SQL, XML y CSS. A diferencia de las herramientas visuales de diseño web WYSIWYG, la interfaz de texto hace que el código sea mucho más limpio.

Bluefish tiene una excelente función de búsqueda, que le permite encontrar texto en múltiples proyectos. La herramienta tampoco tiene problemas para hacer malabares con cientos de documentos al mismo tiempo. Aunque Bluefish soporta el trabajo con archivos remotos, los variados y útiles diálogos y asistentes no soportan actualmente la carga directa de páginas web vía FTP.

Sin embargo, la herramienta está disponible de forma gratuita, por lo que no tiene nada que perder si la prueba. Durante nuestra prueba en un PC con Windows 10 tuvimos que instalar GTK+ 2.24.8 para poder ejecutar Bluefish. Un enlace de descarga de GTK está disponible en el sitio web de Bluefish.

3. Editor de texto Atom

Un editor de texto extremadamente avanzado para desarrolladores.

Descrito por su desarrollador como un “editor de texto hackeable para el siglo XXI”, el Atom libre y de código abierto viene a nosotros desde el equipo de GitHub.

Atom es una aplicación de escritorio dedicada y soporta una variedad de lenguajes de programación como HTML, JavaScript, Java, PHP, CSS y XML. El editor de texto reconoce automáticamente el idioma que está utilizando y lo codifica por colores y lo ordena en consecuencia. Atom también tiene una útil función de autocompletar para escribir código. Puede gestionar varios archivos a la vez a través del excelente ‘minimap’ en el panel izquierdo.

Como la interfaz es de sólo texto, Atom está orientada a usuarios más avanzados. Sin embargo, hay una serie de extensiones que se pueden descargar gratuitamente, como’paquetes’, que pueden hacer que este editor de texto sea un placer de usar. Los paquetes disponibles incluyen Emmet, que le permite escribir HTML y CSS usando código abreviado. Otro es Pigment que escanea su script en busca de códigos de color y los muestra automáticamente en el color de fondo.

Atom es verdaderamente multiplataforma, ya que está disponible para Windows, Linux y macOS. Esto lo hace ideal para trabajar con material protegido por derechos de autor. Y debido a que es de código abierto, la comunidad de desarrollo puede responder rápidamente a cualquier error o falla de seguridad que se descubra.

4. Google Web Designer

Una excelente herramienta para crear contenido interactivo

Google Web Designer sirve principalmente para crear contenido interactivo en HTML5, JavaScript y CSS. En términos sencillos, esto significa que su función principal es crear anuncios.

La buena noticia es que esto se hace a través de una interfaz gráfica de usuario extremadamente simple de usar que incorpora herramientas de diseño de apuntar y hacer clic que cubren texto, formas básicas, animaciones 3D y mucho más. Cualquier característica 3D se muestra en una línea de tiempo en la parte inferior de la ventana. Los paneles en el lado derecho de la interfaz le permiten afinar otras opciones como los colores.

Google Web Designer también incorpora una práctica biblioteca de componentes adicionales como imágenes, vídeos y otras herramientas publicitarias.

Los usuarios avanzados pueden alternar entre la vista predeterminada de “diseño” y la vista de “código”, por lo que la herramienta es compatible con la creación de funciones más avanzadas además de los anuncios, siempre y cuando tenga los conocimientos y la paciencia necesarios para programarlas usted mismo.

Google Web Designer aún se encuentra en fase de pruebas beta, por lo que carece de ciertas funciones como la de poder abrir archivos HTML creados fuera de la herramienta. Sin embargo, incluye una práctica opción de vista previa de la web que abrirá su proyecto actual en su navegador predeterminado. También puede publicar contenido automáticamente. Esta oferta de Google está disponible de forma gratuita para Windows, macOS y Linux.

5. Webflow

Oferta basada en la nube que no necesita conocimientos de codificación.

Webflow es un servicio basado en la nube que ha sido creado específicamente para permitir a las personas sin conocimientos de codificación comenzar con el diseño web.

Además de ser verdaderamente multiplataforma, ya que está basada en la web, Webflow enfatiza el concepto de’smart codelessness’. En el primer caso, esto significa una interfaz de arrastrar y soltar nítida que le permite soltar elementos como texto e imágenes a la perfección en una página utilizando una de las plantillas disponibles gratuitamente.

A diferencia de muchos editores WYSIWYG, el código producido es muy limpio y bien escrito incluso si eliges la opción `No tengo experiencia en codificación’ durante la instalación. La herramienta de automatización de Webflow creará el código HTML/CSS necesario para usted. Puede realizar cambios granulares en elementos individuales utilizando los paneles de la derecha.

Webflow ofrece una demostración gratuita de sus características a través del sitio web, y también puede suscribirse a un paquete de inicio gratuito que le permite crear hasta dos proyectos. Si usted requiere más que esto y / o necesita servicios de alojamiento web también, los precios comienzan a partir de $ 24 ($ 32) mensuales. Esto es un poco caro comparado con herramientas equivalentes.

Webflow también tiene poco soporte para plugins de comercio electrónico o herramientas de marketing. Si lo desea, puede utilizar otra herramienta, como el mencionado Google Web Designer, para crear contenido publicitario interactivo

LogosNicas.com: Logos y marcas de Nicaragua

LogosNicas.com es un repositorio en línea dónde puede encontrar cientos de logos y marcas nicaragüenses en formato SVG editable, disponibles para descargar gratuitamente. Se actualiza constantemente, cada semana se van agregando nuevas marcas a las más de 600 que están publicadas a la fecha.

Este nuevo portal pretende convertirse en una herramienta útil para diseñadores, brindando un acceso rápido y fácil a marcas y logotipos de calidad en formato editable, para ser utilizados en sus trabajos y proyectos.

El sitio web puede ser utilizado también por los estudiantes de diseño como fuente de consulta. La marca más antigua del repositorio en línea es de finales de los años veinte. Hay una buena cantidad de logotipos y marcas de empresas, instituciones y negocios nicaragüenses de los años 70 y 80, cómo La Inmobiliaria, Tina Lugo, Restaurante Lacmiel, el Instituto Nicaragüense de Reforma Agraria, entre otros y algunas marcas de cervezas de los años 50

7 tips de redacción para la web

La forma de redacción para la web no es la misma que la de los medios tradicionales ya que las personas no leen de la misma manera. Las siguientes son sencillas recomendaciones para redactar artículos en la web, ya sea para un blog, noticias o las páginas de una gran empresa

Las personas no leen en Internet, sino que escanean

Esta es la principal diferencia con los medios tradicionales y que siempre debe tomarse en cuenta: las personas en internet andan de prisa y lo que hacen es escanear toda la página hasta encontrar algo que les llama la atención para detenerse a leer los detalles.

Debido a esta forma de lectura, las siguientes recomendaciones de redacción para la web facilitan a las personas digerir y leer la información completamente.

Recomendaciones de una efectiva redacción para la web:

1) Escribir de manera concisa

Se debe ir directo al grano y redactar sin oraciones que les den vueltas al asunto. Entre más rápido y claro se plasme la idea, el lector mantendrá su interés por el resto del artículo.

2) Iniciar con la conclusión y luego desarrollar el argumento

Para crear el interés del lector, inmediatamente se debe plasmar primero la idea y luego se debe desarrollar. Esta forma de redacción se le conoce como pirámide invertida. Básicamente lo que promueve es presentar la idea principal inmediatamente, luego las ideas secundarias y al final los detalles.

Técnica de redacción para la web, Pirámide Invertida
3) Reducir la longitud del texto

Grandes áreas de texto intimidan al lector en internet, por lo tanto se debe eliminar toda información que cause ruido en la lectura. Debe preguntarse:

  • ¿En realidad necesito esto?
  • ¿Exite alguna forma de recortarlo?
  • ¿Existe una palabra más sencilla?

Si el texto no aporta nada significativo al artículo, entonces elimínelo. Yo sé, el ego nos dice de que todo lo que escribimos es importante, pero hay que reducir el texto.

Un arma de doble filo

Sin embargo, esta recomendación es un arma de doble filo. Por lo general, se recomienda que un artículo contenga al menos 300 palabras para que los buscadores lo tomen como importante y le asignen un mejor ranking…entre otra gran cantidad de cosas, claro está.

4) Utilizar encabezados explicativos

Los encabezados deben dar una pauta clara al lector de lo que se desarollará a continuación y con esto se logrará que el lector encuentre fácilmente lo que busca o “engancharlo” a que lea el texto que explicará la idea.

5) Dividir claramente el texto en bloques

Se deben utilizar las herramientas de todo editor de texto para ordenar y dividir la información en bloques y así facilitar la lectura. Por ejemplo:

  • Utilizar párrafos, de preferencia cortos.
  • Dividir las ideas del artículo con encabezados
  • Utilizar listas cuando se deba enumerar o presentar una colección de ideas. Esto además ayuda a retener la información.

6) Alinear el texto a la izquierda

La alineación a la izquierda mantiene constante los bloques de palabras y esto facilita la lectura, especialmente en pantallas grandes de altas resoluciones, ya que evita que las palabras se dispersen sin control.

7) Revisar el texto, releerlo, releerlo y releerlo

Una vez terminada la redacción, se debe releer el texto una y otra vez para encontrar nuevas formas de facilitar la lectura en la web, ya sea reduciendo el ruido, cambiando palabras, reorganizando ideas, etcétera. Si es posible que alguien más revise el artículo y haga sugerencias.

Excepciones

Obviamente existirán siempre excepciones a la regla, como textos científicos, experimentales o poesía que deben mantener cierta estructura particular y que al redactarlos para la web con las recomendaciones anteriores perderán su valor.

Espero que estas recomendaciones de redacción para la web le sean de utilidad, ya que ayudan a que sus visitantes se interesen en leer sus artículos y vuelvan por más. Sino ¿de qué sirve crear contenido para la web si nadie lo quiere leer?

¿Alguna recomendación se me escapa? ¡Hágamelo saber con sus comentarios!