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 (etiquetas o marcas) para indicar donde insertar imágenes, videos o enlaces o elementos de maquetación y formato. Por lo tanto 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 programs editores para crear las páginas en tres grandes grupos: editores de código, editores visuales y editores mixtos. Esots se diferencian en la manera en la que escribimos el código y el soporte de lenguajes que ofrece.

Esos programas pueden funcionar a la manera más tradicional: instalados en el ordenador y ejecutándose en local, programas desktop. Pero también podemos encontrar otros que 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.

Editores de páginas web

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

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 del documento en el lenguaje de que se trate, como en cualquier editor de textos. Pero cuando lo uses verás que este tipo de editores 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, ayudas en línea para completar las etiquetas o para consultar su uso (ayuda contextual). 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. Y algunos incluyen depuradores para localizar errores en programas.

En suma, son utilidades que permiten editar un programa o una página web trabajando en modo texto, pero escribiendo lo mínimo y sin tener que memorizar todas las reglas del lenguaje que estes utilizando.

En el caso de editores específícos para web, 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.

Los editores de código incorporan ayudas para facilitar la edición

Editores de código genéricos

Estos editores están orientados a varios lenguajes, tanto de programación como descriptivos o de marcas. El uso de estos editores es recomendable si además de desarrollar páginas web creas o editas programas en otros lenguajes de propósito general como Java o C.

Notepad++
Es un editor de texto y editor de código fuente para usar bajo Windows. Admite alrededor de 80 lenguajes de programación con resaltado de sintaxis y plegado de código. Permite trabajar con múltiples archivos abiertos en una sola ventana, gracias a su interfaz de edición con pestañas. Notepad ++ se distribuye como softaware gratuito y puedes descargarlo en la web de Notepad ++
Visual Studio Code
Un editor de código fuente ligero pero potente disponible para Windows, macOS y Linux. Viene con soporte incorporado para JavaScript, TypeScript y Node.js y tiene un rico ecosistema de extensiones para diferentes lenguajes de programación como C ++, C #, Java, Python, PHP, Go y descriptivos como HTML o CSS. Puedes ver más y descargarlo en su web 
Netbeans
NetBeans es un Entorno de Desarrollo Integrado (IDE) de código abierto y gratuito para desarrollar aplicaciones en Java, PHP, C ++ y otros lenguajes de programación, asi como lenguajes de la webn como HTML5 o CSS. Es una plataforma extensible mediante plugins para aumentar los lenguajes sooprtados. Se trata de un producto multiplataforma que puede usarse tanto en Windows como Mac o Linux.
Komodo IDE
Existen dos ramas de este producto, Komodo Edit y Komodo IDE. El primero es un editor de código simple con ayudas, mientras que el IDE es un completo entorno de desarrollo con multiples utilidades incorporadas como debug, control de versiones y otras. Es una paltaforma extensible con soporte pra una gran cantidad de lenguajes. Es gratuita pero para descargarla debes registrarte en la web de ActiveState. Es grautito pero ofrece opciones de valor añadido que son de pago.
 
Los editores genéricos pueden ser utles si además programas en lenguajes de propósitco general. No ofrecen ayudas específicas para aplicaicones web.

Editores específicos para web

Se trata de editores de texto como los genéricos pero enfocados a los lenguajes más propios de la web como HTML, CSS, Javascirpt y PHP como mínimo. Aparte de las ayudas para código, suelen incluir un cliente FTP, sistemas de sincronización del entorno local con la versión en el servidor remoto, vista previa de páginas entre otras utilidades.

Brackets
Se trata de un moderno editor de texto bastante ligero, pero potente. Cuenta con suficientes ayudas visuales durante la edición para facilitar la creación del código. Provee visión previa en tiempo real mientras edita el código CSS o HTML Se pueden ampliar sus utilidades mediante el uso de extensiones. Es gratuito.
Aptana
Un entorno de desarrollo integrado de software libre basado en Eclipse que puede funcionar bajo Windows, Mac y Linux. Está enfocado a la web y por tanto soporta lenguajes como: PHP, Python, Ruby, CSS, Ajax, HTML, Javascript además de su propio cliente FTP. Tiene la posibilidad de incluir complementos para nuevos lenguajes y funcionalidades. Es un softeware de código abierto gratis.
WebStorm
Otro entorno de desarrollo en ete caso está muy enfocado a Javascript y su entorno (node, react y otros). Por supeusto también soporta HTML y CSS. Tiene seguimiento de versiones, util para trabajo colaborativo y ampliable mediante plugins o módulos. Ojo: se trata de un producto de pago.
Los editores específicos ofrecen ayudas y utilidades específicas para el entornod e trabajo destinado a la web

Editores mixtos: visual + código

Son los editores en los que puedes trabajar tanto en modo código como en modo visual . 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áginas web sin necesidad de editar código, o casi, y por tanto posían usarse con un mínimo conocimiento de HTML. La edición se realizaba directamente en un documento similar al que 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), aunque sin perder la opción de editar código.

Para utilizar los diseños responsive (auto adaptables a cualquier pantalla) hoy día la edición visual no es suficiente 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 sin escribir código. Ves de inmediato como quedará en la página real y las propiedades de los elementos (colores, formatos, tipografía) se ajustan mediante menus contextuales.

Además ofrecen un completo editor de código con ayudas y facilidades de manera que puedes trabajar en 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. La mayoría de estos editores son de pago, aunque pueden ofrecer precios especiales para estudiantes.

NVU
Es un editor ya anticuado, que fue sustituido por Kompozer (no hay difrencias entre ellos), pero que puede ser útil para iniciarse en la edición de páginas web. Es cómodo y muy sencillo de utilizar. En esta web tienes un tutorial y puedes descargarlo.
Dreamweaver
Este es un producto de pago. Fue uno de los primeros editores WYSIWYG. Actualmente mantiene esa vertiente pero se utliza más su faceta de editor de código, de manera que puedes editar las páginas web en modo texto, pero también en modo visual. Es un entorno integrado con soporte para FTP, sincronización del sitio, uso de plantillas y edición responsive (usa la plataforma Bootstrap). Fue y sigue siendo el mejor editor web disponible, insisto, como producto de pago.
PineGrow
Tambien es de pago. Es otro editor web con un gran soporte para la edición d e páginas en vivo (drag and drop). Posee facilidades para la creación de codigo y temas destinado a páginas de Wordpress. Es una herramienta que se autodifene como enfocada a creadores de pa´gians web profesionales. Está enfocada la edición de código pero con un fuerte soporte para la edición visual. Es un producto comprable a Dreamweaver.
Pingendo
Otro editor fundamentalmente visual con soporte estilo arrastrar y soltar, lo que permite crea una página web a partir de elementos visuales. No obstante ofrece un potente editor de código que permite personalizar, modificar y afinar el diseño de cualquier sitio web. Se pueden crear pa´gians desde cero o usar plantillas prediseñadas. Para la publicación de las páginas utiliza la plataforma NetliFy. Realmente es un híbrido entre un editorweb local y un editor online. Es un producto de pago
BlueGriffon
BlueGriffon es un editor de páginas web WYSIWYG. Está basado en Gecko, el motor que bajo el que corre Firefox, y utioiza XULRunner, el entorno de tiempo de ejecución para Gecko. Aunque mayormente libre y de código abierto, para poder usarlo de manera práctica es indispensable comprar algunas extensiones como el editor CSS o la que permite la visión previa en pantalla completa, incluso el manual se debe comprar. O sea, queda clasificado como de pago.
Los editores mixtos admiten edición visual y de codigo. Te dan el máximo control sobre la pa´gina web y la ma´xima comodidad para su edición.

Editores visuales: drag and drop

Los editores tipo Arrastrar y Soltar (drag and drop) son editores en los que trabajas de manera totalmente visual. Son la evolución de los llamados editores WYSIWYG, iniciales de las palabras inglesas What You See Is What You Get, o en castellano, lo que ves es lo que obtienes, un sistema que permite crear páginas web sin necesidad de editar código, y por tanto se pueden usar con un mínimo conocimiento de HTML

En este tipo de aplicaciones se edita directametne sobre la página tal como se verá en el navegador. Vas añadiendo al documento web los elementos disponibles como si fueran piezas de un puzzle, de ahí lo de arrastrar y soltar: se selecciona un elemento (por ejemplo una imagen o un bloque) se arrastra con el ratón y se suelta en la parte de la página donde quieras que aparezca. Luego con menús contextuales o ventanas adicionales se modifican los atributos del elemento que hayas situado o tengas seleccionado.

Con estos editores 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.

Aunque están orientados a la edición visual, pueden 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 completos, es decir, páginas interrelacionadas. Habitualmente se  comienza con una plantilla que se va modificándo para ajustarla a tus deseos.

Lo más habitual es que estas apllicaciones sean ofertadas por empresas dedicadas a alojar sitios web, de manera que las páginas creadas 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.

Bootstrap Studio (desktop)
Es una aplicación de escritorio con licencia comercial. Está totalmetne enfocada al diseño visual y permite poca edición de código. Se basa en el framework Bootstrap: una plataforma que contiene estilos y elementos web prediseñandos para la construcción rápida de páginas web adaptativas (responsive), es decir, adaptados a la pantalla con la que se vean. Ofrece plantillas para iniciar el diseño y permite algo de edición en cuanto a CSS. De este tipo de aplicaciones es quizás la única que merece la pena.
Wix (online)
Apliación online. Como en la mayoría de apps de este tipo el diseño que realices queda en los servidores de Wix, donde debes alojar tu sitio. No es posible exportar a otro servidor. Pero el editro al menos es fácil de manejar.
 
Webnode (online)
Más de lo mismo, aplicación para crear una web con un editor drag-and-drop partiendo de una plantilla a elegir de su enrome oferta. Con el uso de la app tienes un alojamiento e incluso puedes registar con ellos el dominio. Tampoco es posible exportar tu sitio web.
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 estilos (visual y código) 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 su código HTML. Efectivamente más tarde o más temprano te verás editando directamente HTML, CSS o incluso Javascript, 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.
  • Comprobación de sintaxis.
  • 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.

Trabajar en modo local, con aplicaciones desktop es más rápido, seguro y eficaz que el trabajo con editores online