Instituto Tecnológico Superior
"Central Técnico"
Tema: Editor WebAlúmno: Richard Enriquez
Curso: 1D1
Docente: Ing. Julio Calvopiña H., MSc.
Año lectivo: 2014-2015
Que es un Editor Web
Si bien una páginas web (que es escritas en lenguaje HTML) puede ser creada a partir de un simple procesador de texto, existen programas especializados que facilitan la tarea de los desarrolladores web (webmasters).
En general, existen tres tipos de editores web:
* Editores web de texto: estos ayudan al desarrollador en la escritura del código HTML (y otros códigos de lenguajes web), proveyendo distintos colores al texto de forma automática, acceso a códigos ya definidos, ayuda de asistentes, etc.
* Editores web de objetos: estos alternan entre la edición de texto y el uso de objetos para el desarrollo de una página web.
* Editores web gráficos o WYSIWYG: estos proveen una interfaz gráfica, donde es posible modificar y ver la página web tal cual se verá en un navegador. Son los editores más fáciles de utilizar.
Ventajas de utilizar un editor web gráfico o WYSIWYG
* WYSIWYG.
* Menos probabilidades de errores en el código HTML.
* Facilidad en el diseño y modificación de las páginas web.
* Ahorro de tiempo de desarrollo.
* Facilidad para trabajar con CSS, XML, JavaScript, ECMAScript o similares.
Desventajas de utilizar un editor web gráfico o WYSIWYG
* Muchas veces no desarrollan el código HTML y CSS más eficiente posible.
* A veces las páginas web que desarrollan se ven distintas en diferentes navegadores.
Editores web más populares pagos
* Dreamweaver
* FrontPage, discontinuado y reemplazado por Expression Web y SharePoint Designer.
* CoffeeCup HTML Editor
* HomeSite
Editores web más populares gratuitos
* Amaya
* Aptana
* Mozilla Composer
* Nvu
* SeaMonkey Composer
-
Editor de texto sin formato
Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana. el paqueteTambién llamado editor de texto plano. Este tipo de editor suele ser muy sencillo. Dos ejemplos son Notepad o Bloc de Notas (incluido enWindows) y Kate (GNU/Linux). Con cualquiera de los dos bastaría para escribir las líneas de código necesarias para diseñar una página Web.
Editor de texto con ventanas
Es una versión ligeramente más sofisticada que la anterior. Suelen constar de un par de ventanas. Una area de trabajo, donde se teclea el código HTML y el texto que se quiere incluir en la página, y en la otra se visualiza el resultado en tiempo real. En otras palabras se obtiene una previsualización del documento generado. Lo que significa que no se tiene que guardar el documento, previamente, antes de volver a abrirlo con el navegador para comprobar el resultado.
Editores WYSIWYG
El término WYSIWYG es el acrónimo de What You See Is What You Get, que traducido al castellano quiere decir: "lo que tú ves es lo que obtienes", en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML. La manera de trabajar en este tipo de editores, es muy similar a la que se usa cuando se trabaja con un procesador de texto. Esto quiere decir que un usuario no tiene por qué teclear las etiquetas del lenguaje de marcado. En lugar de eso, el usuario escribe el texto, lo formatea, e inserta las imágenes en los lugares deseados, trabajando igual a como lo haría con Writer, (el procesador incluido en la suite ofimática OpenOffice.org),oWord. Posteriormente el editor transforma la vista por pantalla en código HTML perfectamente configurado.
Ejemplo de editores WYSIWYM son WYMean Editor o WebCS Editor
Cualquiera de estos editores son una buena alternativa a los editores de texto simple. Los mejores editores HTML señalan las líneas de código mediante distintos tipos de fuente a las usadas en el texto introducido directamente por teclado. Además, proporcionan la posibilidad de volver hacia atrás entre los distintos tipos de vista.
Ejemplos claros de editores de páginas web son KompoZer (antes llamado NVU), Mozilla Composer, Amaya, Dreamweaver o Microsoft Frontpage, entre otros.
http://es.wikipedia.org/wiki/Editor_de_p%C3%A1ginas_web
Son muchos los editores web existentes en el mercado (Dreamweaver, Front Page, CoffeCup HTML Editor, Homesite) cada uno con sus propias peculiaridades, aunque en realidad no son muy distintos unos de otros.
Las características principales que observamos en todos ellos son edición WYSIWYG, cliente FTP, control de versiones, autocompletado de código, resaltado de sintaxis, soporte de lenguajes de servidor, depuración, documentación en línea.
Y cada uno de nosotros le dará más valor a unas u otras dependiendo del entorno en el que trabaje y el trabajo específico que realice. Por ejemplo, un desarrollador novel encontrará muy útil la edición WYSIWYG, pero no así un desarrollador más experimentado, que rara vez lo utilizará.
Primeros editores
Desde CoffeeCup HTML Editor, el primer editor HTML del mercado allá por 1994, mucho ha crecido la web, y con ella los editores web.
En aquella época las webs eran muy sencillas, construidas básicamente con HTML, y se podían crear usando cualquier editor de texto, como el Bloc de Notas, o el Vi. Eran tiempos de frames, imágenes animadas horribles, y sin ningún tipo de diseño.
Hoy día no sólo se usa HTML para crear una web, que incluso se usa una variante de éste,XHTML . Ahora tienen la misma importancia (X)HTML, CSS, Javascript/ECMAScript, o lenguajes de servidor como PHP, Java o .NET/ASP. Aún es posible crear una web con Bloc de Notas o vi, pero, a riesgo de ser un poco menos geek, los principales editores web del mercado nos harán la vida mucho más fácil.
Como en cualquier aspecto de la informática, no existe una única aplicación que sirva para todo, y el amplio mundo del desarrollo web no es una excepción. Cada cual utilizará la aplicación que mejor se adapte a sus necesidades. Hay que tener en cuenta si se necesita control de versiones (CVS, Subversion), cliente FTP o WebDAV, documentación en línea, lenguajes soportados, autocompletado de código, WYSIWYG (What You See Is What You Get), depuración de código, etc.
Pero una herramienta común para todos los desarrolladores web, es sin duda algunaFirefox. Depurar una página web nunca fue tan fácil y rápido, gracias a las extensiones de las que disponemos, como Web Developer o Firebug.
Con ésta última podremos modificar por completo una página web, conviertiéndose así en un WYSIWYG imprescindible, además de un inmejorable inspector del DOM, y un maravilloso depurador Javascript. Pero desgraciadamente no debemos olvidar que nuestra web también debe visualizarse correctamente en Internet Explorer, donde la depuración de nuestras webs es mucho más tediosa.
Editores Windows
CoffeeCup HTML Editor:
Las principales características del CoffeeCup HTML Editor son sus asistentes (inserción de imágenes, enlaces, menús DHTML, etc.) tratando a los elementos HTML como objetos con sus propiedades, resaltado de sintaxis (HTML, CSS, PHP, ASP…), editor de múltiples ficheros, cliente FTP, editor visual drag&drop (WYSIWYG), y poco más. Ha quedado un tanto desfasado, aunque sigue siendo muy válido como editor HTML.
Adobe Dreamweaver:
Muchos hemos aprendido HTML y CSS gracias al producto de Macromedia Dreamweaver (ahora propiedad de Adobe). Es muy similar a CoffeeCup aunque con mayores prestaciones, aunque también es mucho más caro.
En la última versión (CS3) dispone de un muy mejorado soporte de CSS, que junto a su funcionalidad de autocompletado de atributos CSS (ideal para los que empiezan) lo convierte quizás en uno de los editores más cómodos para trabajar con CSS, y por ello quizás también sea el más usado por los diseñadores web.
Al igual que CoffeeCup, sus asistentes harán las delicias de los más novatos, aunque de poca utilidad para los más avanzados. Incluye lo que han llamado Spry, una librería de widgets y efectos mediante Javascript, que en mi opinión ha llegado demasiado tarde y mal, puesto que existen fabulosas librerías de widgets/efectos, como Dojo Toolkit, jQuery,script.aculo.us, etc. Podrían haber creado asistentes para usar dichas librerías, pero han preferido usar las suyas propias.
Linux / Multiplataforma
Amaya:
Amaya es más una curiosidad que una herramienta popular. Está desarrollado por la W3C (World Wide Web Consortium), la asociación que se encarga de construir los estándares web.
Es un navegador y un editor web, cuya peculiaridad es que permite editar directamente cualquier página web que se visualice, y que permite editar SVG y MathML, para codificar e integrar junto con HTML. Es bastante espartano y carece de asistentes, pero sus modos de vistas pueden resultar muy interesantes.
Aptana:
Este editor está basado en Eclipse, e incluso puede usarse como plugin en éste. Su asistente de código (HTML, CSS y Javascript) es único, mostrando documentación en línea de todos y cada uno de los elementos, como en qué navegadores está soportada una función de Javascript o un atributo CSS.
Además muestra información en línea sobre las funciones Javascript propias. Viene con cliente FTP y depurador de Javascript. Pero lo mejor es verlo en funcionamiento .Es el editor web más completo del mercado y además es libre (gratuito y con código fuente abierto).
Zend Studio:
Más que un editor web, Zen Studio es todo un entorno de desarrollo para PHP. Tiene autocompletado de código HTML (no para Javascript y CSS) además de para PHP, y no es posible editar en modo WYSIWYG, aunque el resaltado de sintaxis les podría valer a los desarrolladores más expertos.
Su punto fuerte está en su editor y depurador PHP, que a día de hoy no existe nada mejor. Su soporte para gestionar bases de datos (MySQL, MS SQL Server, Oracle, PostgreSQL, …), cliente FTP, y soporte de control de versiones integrado (CVS y Subversion), lo convierte en el mejor entorno de desarrollo web para PHP existente.
En conclusión
A pesar de la extensa variedad de productos que existen, sólo unos pocos son los más usados, y a pesar de ello aún queda mucho por hacer, y no existe el editor perfecto. WYSIWYG está bien para hacer una maqueta inicial, para aprender HTML y CSS, y poco más. Y es que nada se ha avanzado con este sistema de edición en toda una década, y los profesionales experimentados ni siquiera lo usan.
Aptana es por contra el editor más innovador, y aún le queda mucho por decir en ese sentido. Quizás el próximo paso sea el soporte para arquitectura MVC con lenguajes de servidor (edición de vistas, RAD , etc.), arquitectura que es casi un estándar en desarrollo web, y que sin embargo no disponemos de un editor que lo soporte.
http://www.maestrosdelweb.com/conociendo-los-principales-editores-de-paginas-web-del-mercado/
Texto (fuente) editores diseñados para su uso con HTML suele proporcionar resaltado de sintaxis. Plantillas, barras de herramientas y atajos de teclado pueden insertar rápidamente elementos y estructuras comunes de HTML. Wizards, mensajes de información sobre herramientas y autocompletar puede ayudar con las tareas comunes.
Editores de HTML texto comúnmente incluyen ni las funciones o la integración con herramientas externas para tareas como control de código fuente y la versión, enlace de verificación de datos, comprobación y validación de código, código de limpieza y formato incorporadas, corrección ortográfica, subir por FTP o WebDAV, y estructuración como un proyecto.
Editores de texto requieren la comprensión del usuario de HTML y cualesquiera otras tecnologías web el diseñador desea usar como CSS, JavaScript y lenguajes de script del lado del servidor. Ellos también fueron referidos Un Simple HTML Editor (ASHE). [1]
Algunos editores de texto normales, como el Notepad de Windows pueden guardar como archivos HTML, simplemente usando extensiones como .htm .html .css etc.
Editores de objetos
Algunos editores permiten la edición alternativa del texto de origen de los objetos en los modos organizados visualmente más que simples resaltado de color, pero en modos que no se consideran WYSIWYG. Algunos editores WYSIWYG incluyen la opción de utilizar las ventanas de paletas que permiten la edición de los parámetros basados en texto de los objetos seleccionados. Estas paletas permiten tanto los parámetros de edición en campos para cada parámetro individual, o ventanas de texto para editar el grupo completo de texto de origen para el objeto seleccionado. Pueden incluir widgets para presentar y seleccionar opciones al editar parámetros. Adobe GoLive ofrece un editor de esquema para expandir y contraer los objetos HTML y propiedades, parámetros de editar y ver gráficos adjuntos a los objetos ampliados.
Editores WYSIWYG HTML
Editor Amaya 10 HTML
Editores WYSIWYG HTML proporcionan una interfaz de edición que se asemeja a cómo se mostrará la página en un navegador web. Estos editores pueden ser programas independientes, como Adobe Dreamweaver o Microsoft Frontpage (ahora suspendido), o venir en forma de extensiones del navegador y permitir la edición directamente en el navegador web. Debido a que el uso de un editor WYSIWYG no podrá exigir ningún conocimiento de HTML, que son a menudo más fácil para un usuario de la computadora sin experiencia para empezar a utilizar.
La vista WYSIWYG se logra mediante la incorporación de un motor de diseño basado en que se usa en un navegador web. El motor de diseño se habrá mejorado considerablemente por los desarrolladores del editor para permitir escribir, pegar, borrar y manipular el contenido. El objetivo es que, en todo momento durante la edición, el resultado renderizado debe representar lo que se verá más adelante en un navegador web típico.
Editores WYSIWYM
WYSIWYM (lo que ves es lo que quieres decir) es un paradigma alternativo a los editores WYSIWYG anteriores. En lugar de centrarse en el formato o presentación del documento, conserva el significado pretendido de cada elemento. Por ejemplo, los encabezados de página, secciones, párrafos, etc. están etiquetados como tales en el programa de edición, y se muestran correctamente en el navegador
Un espacio web en One.com da acceso gratuito al uso del Web Editor. Web Editor ofrece, por ejemplo, una colección de plantillas de diseño y excelentes oportunidades para la creación de un sitio web de fácil uso y apariencia profesional.
Web Editor, el editor web de One.com incluye, por ejemplo, las siguientes características:
- Editor de fácil utilización WYSIWYG
- Plantillas de página de inicio
Editor web con interfaz gráfica de usuario
El surgimiento de los editores web llamados WYSIWYG (What You See Is What You Get - lo que Ud. ve es lo que Ud. obtiene) hizo que realizar el sueño de tener su propia página web se haya vuelto mucho más fácil.
Una gran cantidad de estos editores web y muchos más existen en versiones actualizadas hoy en día. En términos generales, todos los softwares de edición web del mercado pueden ser utilizados en un espacio web con One.com.
Web Editor - un editor web en línea
Un editor web no es necesariamente un paquete de software que Ud. compra en una tienda para llevarse a casa e instalar en su ordenador personal.
Como es el caso para otros tipos de software, editores web se han puesto en línea de manera que no hace falta instalarlos, ya que prácticamente están basados en la web. Estos se encuentran en línea y pueden ser utilizados desde cualquier ordenador con acceso a Internet. Ésto también significa que el usuario individual no tiene que preocuparse acerca de las actualizaciones del editor web, ya que son automáticas y se llevan a cabo en el servidor.
Web Editor de One.com es un programa basado en web para la edición de un sitio web, el cual realmente tiene muchas ventajas. Con su espacio web en One.com Ud. obtiene acceso gratuito a una amplia gama de plantillas de sitio web que se pueden utilizar como base para un sitio web único, con menús y muchas subpáginas de su propia elección.
Con Web Editor como su editor web, Ud. puede por ejemplo insertar imágenes, muestras de diapositivas y películas, por ejemplo, de YouTube o de la Galería de One.com en su propio dominio. Web Editor le da libre control para crear exactamente lo que desea. Nuestra asistencia está lista para ayudarle si Ud. tiene alguna pregunta relacionada al editor web.
HTML, XHTML y CSS
A pesar de que los editores web han hecho posible la creación de páginas web sin conocimientos de HTML, algunos conceptos básicos siguen siendo útiles para saber un poco. Un sitio web todavía consiste básicamente de un archivo de texto con el código HTML. Un navegador (por ejemplo Internet Explorer o Mozilla Firefox) lee e interpreta para el usuario que visita el sitio web el código que aparece entonces como texto, imágenes, etc.
HTML y XHTML (HTML Extensible) son dos estándares web para la estructuración de la información en un sitio web. CSS es una abreviatura de "Cascading Style Sheets" (Hojas de Estilo en Cascada) y es un método ampliamente difundido para gestionar la disposición y el diseño de la página web.
http://www.one.com/es/producto/editor-web
