Crea tu Web: Indice de diseño

Indice Visión general Previos Estructura Diseño Herramientas Recursos


Editores DE PÁGINAS WEB
Aunque un simple editor de textos es suficiente para construir una página web si no quieres memorizar todas las etiquetas usadas por el pseudo lenguaje HTML, utiliza algún programa que te ayude en esta tarea. Existen dos tipode de programs para este trabajo: orientados a código y editores visuales. Y puedes encontrar programas para trabajar en tu propio ordenador y aplicaciones que funcionan online, en la red. Aconsejo editores ejecutables en el ordenador, tener los archivos en tu ordenador te facilita enormemente su gestión.
Editores orientados a código

En estos editores las páginas se crean escribiendo el código HTML como si fuera texto, auqneu estos programas nos ofrecen herramientas, 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. En suma, 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 nuestra página debemos acudir a un explorador, bien sea uno externo, Firefox, Chrome, IExplore, o uno incorporado. 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
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. 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 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 adició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 encontararas 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)
¿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.


Estructura de los sitios web
Las imágenes en tu página

Diseño Web | Plantillas Web | Guia de Estilo | Lenguaje HTML

Comunidad Virtual. Alojamiento web gratis