Crea tu web, tutor html, css

Editores para páginas web

Una página web está escrita como un documetno de texto, eso si con algunos elementos especiales (etiqutas) para insertar imágenes, videos, o enlaces. Por lo que un simple editor de textos es suficiente para construir una página web. Pero memorizar todas las etiquetas de HTML o de las propiedades de los estilos CSS es dificil. Por eso es recomendable utilizar algún programa que te ayude en esta tarea.

Podríamos agrupar estos programsa para crear páginas en dos grandes grupos: editores de código y editores visuales. Actualmente existe la opción de usar programas que funcionan en la red, online, sin necesidad de descargarlos e instalarlos en tu ordenador. Yo aconsejo programas que se ejecuten en tu ordenador de trabajo, tener los archivos en tu ordenador te facilita enormemente su gestión.

Los editores web van desde un simple editor de textos hasta un completo IDE: entorno integrado de desarrollo.

Editores de código genéricos

Son editores de texto enfocados a la creación de documentos en diferentes lenguajes, de programación o de marcas. Puedes usarlos para editar programsa en C, Java, Perl, PHP, pero también en HTML, CSS, Javascript. Ofrecen ayudas de contexto, es decir, ayudas sobre el elemento que estes escribiendo, así como texto automático. También pueden ayudarte a formatear el texto con las tabulaciones y con colores para diferenciar palabras clave del lenguaje. En esta categoría se encuentran
  • Notepad++, es muy simple y muy para editar páginas e incluso scripts.
  • Visual Studio Code, con soporte para una gran variedad de lenguajes includídos HTML, PHP, Javascript y CSS. Realmente interesante.
  • Netbeans, otro potente editor genérico de código, gratuito y con gran cantidad de complementos (plugins) para adaptarlo a cualquier objetivo.
  • Sublime Text, un potente editor de código, con versión de prueba ilimitada (compra de licencia voluntaira) muy extendido entre los creadores web.
Los editores de código genéricos incorporan ayudas para facilitar la edición

Editores de código

Son editores de texto con ayudas destinadas a facilitar la escritura de código en diferentes lenguajes de programación. Los hay genéricos para multiples lenguajes y específicos orientados a los lenguajes usados en la web fundamentalmente HTML, CSS y Javasript, aunque pueden ofrecer otros menos usados como Python o Go.

Con estos editores las páginas web se crean escribiendo el contenido HTML en modo texto, como en cualquier editor. Pero estos programas nos ofrecen herramientas auxiliares, como puedan ser botones para insertar código de determinados elementos sin apenas tener que escribir, como tablas, imágenes, formularios, etc. Además suelen incorporar alguna referencia del lenguaje HTML, ayudas en línea para completar las etiquetas o para consultar su uso (ayuda en contexto). Pueden ofrecer formateo automático (tabulaciones), cierre atuomático de etiquetas, paréntesis, comillas. Coloreado del código para diferenciar palabras clave del lenguaje del contenido.

En suma, son utilidades que permiten construir la página trabajando en modo texto pero escribiendo lo mínimo. En este tipo de editores cuando queremos ver como va la página que estamos editando, debemos acudir a un explorador, bien sea uno externo, Firefox, Chrome, IExplore, o uno incorporado si poseen visión previa.

Existen innumerables opciones tanto gratuitos como de pago (estos suelen tener versión de prueba). En estas listas tienes algunos de ellos, pero te aconsejo una búsqueda en Google y que pruebes el que mejor se adapte a tu estilo de trabajo.

Editores de código
Gratuitos De pago
Los editores de código incorporan ayudas para facilitar la edición

Editores mixtos (WYSIWYG)

Son los editores que admiten edición visual y orientada a código. Cuando aparecieron se les llamó editores WYSIWYG, iniciales de las palabras inglesas What You See Is What You Get, o en castellano, lo que ves es lo que obtienes. Fueron las primeras aplicaciones que permitieron crear págnas web sin necesidad de editar código, y por tanto sin necesitar conocimientos de HTML. La edición se realizaba directamente en un documento similar a como se vería en el navegador. Pero desde entonces (años 90) ha pasado mucho tiempo, y hoy en día están siendo sustituidos por los 100% visuales (arrastrar y soltar). Actualmente la edición visual nos suficiente con este tipo de editores y suele ser necesario acudir también a la edición de código. Pero a cambio tienes mucho control sobre la página, sabes como funciona y el mantenimiento y modificaciones son sencillos.

En estos programas puedes trabajar en una ventana muy similar a la que se verá en el navegador. Esta ventana mostrará la página que estas creando. Asi puedes añadirle tablas, imágenes, formularios, capas, escribir texto y demás elementos HTML mediante botones o menus o editando código y ves de inmediato como quedará en la página real. Estas creando la página y vas viendo de inmediato el resultado final, es casi como editar directamente la página en el navegador. Los atributos de los elementos web se ajustan mediante menus contextuales. Pero todo lo que haces con botones o menus puedes hacerlo con la misma facillidad editando directamente el código HTML, puedes modificar cualquier elemento de la página WEB. Y por supuesto también puedes crear tu página editando el código directamente, como en un editor orientado a código, sin ayuda visual. De ahí lo de editores mixtos: son editores optimizados tanto para la edición visual como la la edición de código.

Editores Mixtos
Gratuitos De pago
  • NVU (antiguo, para iniciarse)
 

Editores visuales: drag and drop

Los editores tipo Arrastrar y Soltar (drag and drop) son programas que permiten crear la página de manera totalmente visual. Vas añadiendo a la página web los elmentos disponibles como si fueran piezas de un puzzle, de ahí lo de arrastrar y soltar: se selecciona un elemento (por ejemplo una imagen) se arrastra y suelta en la parte de la página donde quieras que aparezca. Luego con menús contextuales se modifican los atributos del elemento que hayas situado. Son editores totalmente WYSIWYG, es poco probable que se edite el código a mano. Todo el código es escrito directamente por la aplicación. También lo encontraras con la denominación inglesa Website Buiders

Suelen tener opción para editar directamente parte del código HTML o los estilos CSS. Y algunos permiten crear no solo páginas individuales, sino sitios, es decir, páginas interrelacionadas. Habitualmente puedes comenzar con una plantilla e ir modificándola para ajustarla a tus deseos.

Es muy habitual que empresas dedicadas a alojar sitios web ofrezcan este tipo de aplicaciones online para sus alojados, de manera que las páginas que creas quedan almacenadas en ese servidor y quedas ligado a esa empresa. Es una opción adecuada para crear páginas de forma rápida y poco personalizadas.

Editores Visuales
Gratuitos De pago (online)
Los Website Builders ofrecen un resultado rápido, muy estándard y con un código bastante complejo. Dejan poco espacio a la edición manual.

¿Cual elegir?

Prueba ambos estilos y elige aquel en el que trabajes más a gusto, pero no olvides que si quieres una página bien hecha deberás ser capaz de leer, entender y modificar el código HTML de la página. Efectivamente más tarde o más temprano te verás editando directamente HTML, incluso si la tarea principal la haces con un editor visual. El mantenimiento del sitio te va a llevar a corregir o personalizar aspectos de las páginas, por ejemplo.
Elijas el estilo que elijas busca un programa que te permita gestionar todo el sitio, incluyendo detalles como

  • Comprobación y actualización de enlaces
  • Comprobación de ortografía
  • Cambio de texto en múltiples archivos
  • Facilidades para editar Javascript y PHP
  • Editor de hojas de estilo CSS

Entre los editores WYSIWYG el más veterano es Dreamweaver, con facilidades para el diseño responsive (adaptativo). Es comercial y no es barato.

Entre los online, pues Google Web Designer es gratis y realmente fácil de utilizar. El resto te obliga a comprometerte con el sitio y el cambio a otro alojamiento puede ser complejo, te ata un poco.