Editores

para sitios web

 Editores para sitios web

Contenidos Pág.
INTRODUCCION 2

MAPA CONCEPTUAL 3

1. EDITORES DE PÁGINAS WEB 4

1.1 Editores de código abierto, sistemas CMS (Open Source) 4
1.2 Editores HTML 4
1.3 Editores online 5

2. ANÁLISIS DE LOS TRES EDITORES ONLINE MÁS IMPORTANTES DEL MERCADO 6

2.1 Weebly 6
2.2 Yola 6
2.3 Wix 6

3. CREAR UNA PÁGINA WEB DESDE CERO EN ONCE PASOS 9

GLOSARIO 13
BIBLIOGRAFÍA 14
CREATIVE COMMONS 15
CRÉDITOS 16

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 1

Introducción
El diseño efectivo y eficiente de sitios web puede ser una tarea compleja, difícil
y larga. De ahí que las herramientas se conviertan en un elemento clave a la
hora de maximizar los recursos.

Hoy en día, el mercado de las herramientas es muy amplio y cubre todo tipo
de necesidades, por eso resulta difícil escoger la adecuada para cada proyecto.

Afortunadamente, las herramientas de software de diseño de sitios web

pueden hacer el proceso mucho más fácil. Cuando se trata de diseño de sitios
web, incluso los expertos utilizan software de diseño web, en lugar de hacer
diseños desde cero.

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 2

 Mapa
Conceptual
Editores para
sitios web
Mapa
Conceptual Se clasifica

Editor Editores Editores

código abierto online HTML

Tipos

Weebly WIX Yola

Pasos

Página web en
11 pasos con WIX
1. Editores de páginas web
Un editor web es el programa o aplicación que se utiliza para
construir o crear una página web; es un editor de texto especializado
para crear sitios web.
Crear una página web nunca ha sido tan fácil, en los últimos años, han
surgido un montón de herramientas diversas que facilitan el proceso
de creación de un sitio web y ayudan a hacer cosas que difícilmente
se podrían hacer tan rápido si se tuviera que aprender HTML5, CSS3,
PHP o Javascript.
En esta entrada se repasarán algunas de las herramientas más
populares y se aprenderá a distinguir entre los tres tipos o grupos
de herramientas más comunes: editores online, editores de HTML y
sistemas CMS Open Source.
Figura 1. Editores web
Fuente: SenaBlackboard (2017)
FAVA - Formación en Ambientes Virtuales de Aprendizaje
1.1 Editores de código abierto, sistema CMS
(Open Source)
En general, el código abierto se refiere a cualquier programa cuyo
código fuente se pone a disposición para su uso o modificación,
conforme los usuarios u otros desarrolladores lo consideren
conveniente. El software de código abierto por lo general se
desarrolla como una colaboración pública y se hace disponible
de manera gratuita.
Existen muchas herramientas Open Source.
Figura 2. Open Source
Fuente: SENA (2017)
1.2 Editores HTML
Los editores de HTML pueden ser de dos tipos, unos permiten
codificar las páginas utilizando el propio lenguaje HTML a base
de etiquetas; otros permiten diseñar una página web, como si se
SENA - Servicio Nacional de Aprendizaje 4
estuviese escribiendo con un editor de texto avanzado como Word, 1.3 Editores online
sin tener que escribir el código con las etiquetas.
Son una versión simplificada de los llamados sistemas de gestión
Esta última vertiente, se conoce con el nombre de editores en modo de contenido CMS.
de diseño, presenta una facilidad adicional para las personas que no
deseen complicarse la vida con el lenguaje HTML, porque no tienen Los editores de páginas web online están pensados para proyectos
el tiempo de aprenderlo o porque se sienten incapaces de hacerlo. web, en los cuales el diseñador no necesita tener conocimientos
de programación.
Entre los editores HTML más utilizados, se encuentran Adobe
Dreamweaver y Kompozer. 1.3.1. Ventajas de editores online.

• No hay necesidad de instalar nada en su ordenador.

• Puede trabajar en su página web desde donde sea (fantástico
para trabajos en equipo).
• No requiere adquisición ni actualización de software o uso de
servidores FTP.
• Los creadores de sitios web y el hosting son ofrecidos por la
misma empresa.
• Muchos proveedores ofrecen paquetes que son completamente
gratuitos.

Existen diversos editores Online, los más usados:

Figura 3. Editores online

Fuente: SENA (2017)

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 5

2. Análisis de los tres editores
online más importantes del
mercado
A continuación se referencian las tres herramientas online más
populares para la creación de sitios web:
2.1 Weebly
Es una plataforma online similar a Wix dedicada a la creación de
sitios gratuitos y de pago, cuyos orígenes se remontan a 2006; esta
aplicación le permitirá conseguir resultados más que dignos, su
interfaz se parece más a un editor clásico de páginas web, aunque
también permite modificar los elementos de una forma sencilla,
pinchando y arrastrando o modificando directamente los contenidos
dentro del editor visual.
Weebly ofrece un poderoso sistema de «drag and drop» en el editor
y cien plantillas profesionales para crear una página web. Más de 12
millones de personas usan actualmente Weebly.
Figura 4.
Fuente: cadsuite.weebly.com/blogs (2017)
FAVA - Formación en Ambientes Virtuales de Aprendizaje
2.2 Yola
Es un constructor de sitios web y alojamiento gratuito, permite
crear páginas con aspecto profesional en cuestión de minutos sin
ningún tipo de experiencia técnica. Yola permite añadir íconos
enlazados a las más importantes redes sociales, la opción de
compartir publicaciones de Twitter, de seguir perfiles en Facebook
y muchas más alternativas para mejorar el tráfico de la web. Tiene
10 millones de clientes.
Figura 5. Yola
Fuente: cualsitioweb (2017)
2.3 Wix
La herramienta Wix funciona con drag&drop, lo que quiere decir
que en poco tiempo, con tan sólo arrastrar, cortar y pegar, se
puede armar un sitio web, de igual forma, permite incorporar el
formato HTML por si se requiere agregar algún elemento externo.
El registro es sumamente sencillo al igual que el uso de la
herramienta, aunque sus comandos están en inglés, son muy
intuitivos para utilizar, además permite que los diseños se puedan
basar en alguna plantilla de las que ofrece la aplicación o en su
efecto, borrarla y comenzar el diseño del sitio desde cero.
SENA - Servicio Nacional de Aprendizaje 6
 Figura 6. Wix Recientemente Wix se ha actualizado, abriendo un nuevo mundo
de posibilidades educativas debido a los grandes cambios que
tiene. Por ejemplo, se puede seleccionar crear ya no sólo una
página web, sino también un blog o una web para formato móvil,
cada una con sus respectivas características.

Se destaca sobre todo el servicio de blog que ofrece Wix el cual

se equipara actualmente al servicio de Blogger y WordPress en su
versión en línea, lo que aumenta el número de acciones educativas
que se pueden trabajar. Al respecto y dentro de las mejoras de
Fuente: e-historia.cl (2017) Wix, cabe destacar las siguientes características:

Figura 7. Nuevas aplicaciones

Fuente: Wix Blog (2017)

a. Aumento del número de plantillas disponibles para trabajar,

así como libertar total para editarlas, mejorarlas o iniciar con ellas
una web desde cero de manera fácil y en español.

b. Trabajo en páginas web, blogs o sitios para smartphones.

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 7

c. Cambio de la tecnología HTML y flash a HTML5, lo que permite una 1. Cualquier tipo de recurso digital que precise de páginas para
óptima visualización en todos los navegadores y dispositivos en los navegar dentro de su estructura como un objeto digital de
que se visualice la página. aprendizaje o webquest.

Este es un gran avance por la compatibilidad que pueden tener
ahora los sitios y si bien, hoy en día está en desuso la tecnología
flash, algunos de sus elementos principales sirven para mantener las
animaciones, aunque esto puede ocasionar que el sitio no sea tan
compatible a la hora de visualizarlo.
2. Cualquier tipo de portal o página web para compartir recursos,
una página educativa, una página para un curso, incluso con
las opciones adecuadas e integrando herramientas evaluativas
en línea, es posible crear un entorno personal de aprendizaje e
incluso un aula virtual.

d. Mejora de la interfaz de creación y automatización de ciertas 3. Cualquier tipo de sitio web destinado exclusivamente para
tareas como la creación de listas, galerías y otros elementos como dispositivos móviles.
una tienda interna de apps para potenciar el sitio que funciona como
un repositorio de plugins y widgets en la lógica de los blogs. 4. Un blog que puede servir de portafolio, diario pedagógico,
portal de noticias etc.
e. Disposición de una galería de imágenes, incluso de un editor de
las mismas, además de efectos de texto, animación y transición que Figura 8. Actualizaciones de WIX
pueden hacer más vistosa la creación.

f. Mejora en un elemento clave: la inserción de código HTML, este es

de vital importancia en el trabajo pedagógico en el que se requiera
añadir elementos, recursos o actividades realizadas desde otro sitio.

g. Facilidad en la integración con redes sociales, posibilidad de crear

formularios de contacto, chat y otra amplia gama de variedades para
fomentar la comunicación con él y a través del sitio.

h. Posibilidad de subir cualquier tipo de archivo ya sea PDF, imagen,

video, audio, etc. y de reproducirlo dentro de la misma herramienta.

i. Posibilidad de crear parte de un sitio con acceso restringido, ideal

para un sitio institucional con secciones reservadas. Fuente: Wix.com (2017)

De esta forma y considerando las nuevas ventajas a nivel pedagógico

es posible crear:

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 8

3. Crear una página web desde
cero en once pasos
La ventaja de Wix es que permite elegir el esfuerzo que el diseñador
quiere dedicarle a la elaboración de una página web. Los usuarios
que no tienen experiencia en diseño web, por lo general prefieren
utilizar una de las plantillas y personalizarla a su gusto.
Sin embargo, hay otra manera: una que será de interés para los
usuarios con algo de experiencia en diseño; los usuarios profesionales
de Wix pueden diseñar un sitio partiendo desde cero, utilizando una
plantilla en blanco, así obtienen máxima libertad, combinada con la
facilidad de uso de la plataforma.
Figura 9. Página web
Fuente: Gianoliveira.com (2017)
Paso uno: Comprenda los objetivos de la página
web
Antes de comenzar a pensar en el diseño, es necesario definir las
metas que se establecerán para la creación del sitio, estas le ayudarán
a entender los requisitos técnicos y el mensaje general que se quiere
transmitir en la página web.
FAVA - Formación en Ambientes Virtuales de Aprendizaje
Por ejemplo, si el objetivo principal es la venta de diseños de
moda, se necesitará incluir en el esquema de diseño, una galería
de productos, un carrito de compras y opciones de pago.
Si el foco central de su sitio es promover un show musical, se
deberán incluir reproductores de audio, posiblemente también
reproductores de video y un listado actualizado de los lugares y
fechas de las presentaciones.
Figura 10. Objetivos
Fuente: Wix.com (2017)
Paso dos: Inspírese
Un consejo importante en esta etapa es la dedicación de una
buena cantidad de tiempo para investigar. A medida que se
comience a imaginar cómo se quiere que funcione la página
web, se recomienda hacer un tour por la web para visitar otros
sitios relacionados y no relacionados con la industria. Tome nota
de lo que le resulte impresionante en términos de diseño y de
rendimiento, y piense en cómo se pueden adaptar estas opciones
para su propia página web.
SENA - Servicio Nacional de Aprendizaje 9
Un gran lugar para comenzar la revisión es la galería de plantillas web
de Wix, allí encontrará un buen número de plantillas personalizables
en una gran variedad de categorías.
Estas plantillas son creadas por un talentoso grupo de diseñadores,
para adaptarse a los estándares profesionales más altos.
Figura 11. Inspírese
Fuente: Wix (2017)
Paso tres: Cree un mapa detallado del Sitio.
Este es un paso muy importante en el proceso. Se debe disponer del
tiempo necesario para diseñar el mapa del sitio, ya que este será el
encargado de desglosar la arquitectura de la página web y guiarle a
través del diseño.
El mapa del sitio debe incluir una lista de todas las páginas planificadas
e indicar claramente cuáles de ellas enlazan a dónde y qué anclas o
subpáginas se incluyen en cada sección. Hay que dibujar un borrador
de cada página que incluya todo el contenido esta debe mostrar –
imágenes, textos, videos, botones, etc
FAVA - Formación en Ambientes Virtuales de Aprendizaje
Figura 12. Defina su estilo
Fuente: Wix (2017)
Paso cuatro: Defina su estilo
Ahora que los objetivos y la estructura están definidos (y después
de que la investigación a fondo ha permitido descubrir las últimas
tendencias en diseño), es hora de pensar en el diseño detallado de
la página web; esto incluye la combinación de colores, la elección
de la tipografía, el diseño de la cabecera, el uso de elementos
como las formas, vectores, ejemplos, etc.
En el editor Wix, en la categoría de “Diseño”, se puede ver una
amplia selección de colores y fuentes predeterminadas. Como
punto de partida, se pueden tener en cuenta estos elementos
predeterminados y ver cuál de ellos se ajusta mejor al lenguaje de
diseño que se desea para el sitio.
Paso cinco: Planee el uso de imágenes
Las imágenes son críticas para la mayoría de las páginas web, así
que es mejor planificar por adelantado cómo se desean utilizar
en el diseño. ¿Dependerá el sitio en gran medida del contenido
SENA - Servicio Nacional de Aprendizaje 10
visual? ¿Se subirán imágenes con frecuencia? ¿Se tienen fotos de alta
resolución? Estas preguntas determinarán qué tipo de visualización
de imagen es la más adecuada para el sitio y le ayudarán a elegir y
diseñar estilos de galerías.
Figura 13. Planee sus imágenes
Fuente: Wix (2017)
Paso seis: Elabore los textos anticipadamente
lo mejor es preparar los textos que se piensan utilizar antes de que
realmente se comience la construcción del sitio.
Se deben incluir los mensajes generales en textos cortos, también
el lema de la cabecera, los textos que serán “Llamadas a la Acción”
(CTA), el texto de los botones, etc., esos se podrán cambiar y editar
medida que se avance en la construcción, pero será muy útil tenerlos
listos de antemano para poder diseñar teniendo una idea clara de la
información que debe ir en cada página y cada sección del sitio.
FAVA - Formación en Ambientes Virtuales de Aprendizaje
Paso siete: Finalice el Layout (Esqueleto de la
página)
Finalmente el editor Wix comienza a formar parte de la acción; se
debe pensar en el layout del sitio como el esqueleto de la página
web antes de añadirle el resto de los elementos.
Es posible que se necesiten distintos diseños para diferentes
páginas como tiendas online, páginas de contacto, páginas de
reserva de citas, biografías entre otros, ya que todas tienen un
carácter diferente.
Figura 14. Finalice el Layout
Fuente: Wix (2017)
Paso ocho: Añada los elementos de diseño
Con el layout se establecen los cimientos de la página web, ahora,
es el momento de añadir el toque decorativo que se le dará al
sitio determinando un aspecto único.
Es preferible comenzar con aquellos elementos de diseño
que aparecerán en todas las páginas (Por ejemplo: el logo y la
SENA - Servicio Nacional de Aprendizaje 11
navegación, etc.), luego se continúa por agregar aquellos elementos
que sean singulares a cada página (cuadros de texto, galerías de
imágenes, enlaces a redes sociales, etc.).

Paso nueve: Suba todo el contenido

Es el momento de incluir todas esas imágenes, textos, videos
y sonidos que se habían preparado con antelación; todo eso irá
al editor. Después de completar este paso, se debe evaluar si el
contenido funciona bien con el esquema de diseño que se ha creado
y hacer los ajustes que se requieran.

Paso diez: Dele un buen impulso

Puede mejorar el aspecto y el rendimiento de la página con
aplicaciones y funciones que harán que el sitio se vea más atractivo
para el público objetivo.

Por ejemplo, si se acaba de crear una página web para un restaurante,

se puede considerar el uso de la aplicación “OpenTable”; si el sitio es
sobre enseñanza, se puedes utilizar la aplicación Online “Courses”;
con la que se pueden vender y reproducir videos instructivos.

Paso once: Realice control de calidad

Después de completar las 10 etapas anteriores, es tiempo de probar
el sitio y prepararse para el lanzamiento.

Es extremadamente importante que se repasen los textos en

imágenes estén recortadas correctamente, que los enlaces abran

debería.

FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 12

 Glosario
CMS: Content Management System, Sistema que permite
crear y administrar contenidos en sitios web y servicios
similares.
Blogger: Servicio online de administración de Weblogs,
que permite crear y publicar una bitácora en línea. Fue
creado por Pyra Labs, luego comprado por Google en el
2003.
Drag and Drop: Desplazar un elemento de un lugar a otro
arrastrándolo con el ratón.
Gadget:
a, genéricamente, un dispositivo que tiene un propósito
Son comúnmente llamados gadgets a los dispositivos
electrónicos portátiles como PDAs, móviles, smartphones,
reproductores mp3, entre otros. En otras palabras, es una
jerga electrónica.
Hosting: También llamado Web Hosting o alojamiento
web, es un servicio ofrecido por muchas compañías
mediante las cuáles se pueden incluir páginas web o un
conjunto de datos en un servidor remoto para ser usadas
y/o consultadas por usuarios en internet.
HTML: Es un lenguaje de marcado que se utiliza para
el desarrollo de páginas de Internet. Se trata de la sigla
que corresponde a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto, que podría ser
traducido como Lenguaje de Formato de Documentos
para Hipertexto.
FAVA - Formación en Ambientes Virtuales de Aprendizaje
Layout: Es como un croquis de donde debe de ir cada
elemento informativo de una página web.
Plugins: Es aquella aplicación que en un programa
informático, añade una funcionalidad adicional o una
nueva característica al software. En nuestro idioma,
por lo tanto, puede nombrarse el plugin como un
complemento
Smartphone: Teléfono celular con pantalla táctil,
que permite al usuario conectarse a internet,
gestionar cuentas de correo electrónico e instalar
otras aplicaciones y recursos a modo de pequeño
computador.
Software: Conjunto de programas y rutinas que
permiten a la computadora realizar determinadas
tareas.
Webquest: es un modelo didáctico que consiste
en una investigación guiada donde la mayor parte
de la información procede de Internet. El concepto
fue propuesto por Bernie Dodge (investigador de la
Universidad Estatal de San Diego) en 1995.
SENA - Servicio Nacional de Aprendizaje 13
 Bibliografía
Bibliografía
Bibliografía
Adrián Villegas Dianta. (2015). Potencialidades de Wix. Recuperado de: http://www.e-historia.cl/e-historia/potencialidades-de-wix-para-el-uso-educativa/
ÁGUEDA A.LLORCA, (2016), Otra herramienta para crear Web. Recuperado de:
https://www.genbeta.com/a-fondo/asi-es-weebly-otra-herramienta-para-crear-tu-web-sin-conocimientos-de-diseno
Anyelguti. (2014). Programas. Recuperado de: http://aprende-web.net/comple/programas/programas3.php
Diseño Web (2015). Pasos para crear una página web. Recuperado de: https://es.wix.com/blog/2015/02/11-pasos-para-crear-una-pagina-web/

JON OLEAGA. (2013) Tenología de redes. Recuperado de: http://www.abc.es/tecnologia/redes/20130219/abci-alojamiento-gratis-201302181850.html

KASIA MIKOLUK. (2013) Las cinco mejores herramientas de diseño. Recuperado de: https://blog.udemy.com/las-5-mejores-herramientas-de-diseno-de-sitios-web/
Margaret Rouse. (2016). Fuente abierta o código abierto. Recuperado de:
http://searchdatacenter.techtarget.com/es/definicion/Fuente-abierta-o-codigo-abierto-open-source
Miguel Angel Alvarez. (2014) Desarrollo web. Recuperado de: https://desarrolloweb.com/articulos/editores-de-html.html

Websitetooltester. (2017). Qué es un creador de páginas web. Recuperado de: https://www.websitetooltester.com/es/que-es-un-creador-de-paginas-web/

Figuras:
Cadsuite.weebly. (2017). Figura 4: Weebly. Recuperado de: cadsuite.weebly.com/blogs Wix. (2017). Objetivos. Recuperado de: Wix.com
Cualsitioweb. (2017). Figura 5: Qué es Yola. Recuperado de: cualsitioweb.
Wix. (2017). Inspírese. Recuperado de: Wix.com
E-historia. (2017). Figura 6: Wix. Recuperado de: e-historia.cl
Wix Blog. (2017). Figura 7: Nuevas aplicaciones. Recuperado de: Wix Blog. Wix. (2017). Figura 12: Defina su estilo. Recuperado de: Wix.com

Wix. (2017). Figura 8: Actualizaciones de WIX. Recuperado de: Wix.com Wix. (2017). Figura 13: Planee sus imágenes. Wix.com

Gianoliveira. (2017). Figura 9: Página web. Recuperado de: Gianoliveira.com Wix. (2017). Figura 14: Finalice el Layout. Recuperado de: Wix.com
 Creative
Commons
Creative
Commons
 LÍNEA DE PRODUCCIÓN
Créditos
PROGRAMA Producción de Multimedia
NOMBRE DEL OBJETO Editores para sitios web

Créditos
DISEÑADORES GRÁFICOS
PROGRAMADORES
GUIONISTAS-PRODUCTOR DE MEDIOS AUDIOVISUALES
ASESORAS PEDAGÓGICAS
LÍDER DE L A LÍNEA DE PRODUCCIÓN
Caren Xiomara Carvajal Pérez
Julián Alberto Camargo Fonseca
Luis Carlos Reyes Parada
Nilda Inés Camargo Suescún
Nancy Astrid Barón López
Milady Tatiana Villamil Castellanos
John Freddy Vargas Barrera
Dolly Esperanza Parra Lozano
Jheison Edimer Muñoz Ramírez
Janet Lucía Villalba Triana
Shirley Andrea Ovalle Barreto
Zulma Yurany Vianchá Rodríguez

EXPERTOS TEMÁTICOS
EXPERTOS TEMÁTICOS Versión 1 (2017): Diana Paola Zapata Barrero