{"id":1259,"date":"2015-04-02T11:42:52","date_gmt":"2015-04-02T11:42:52","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/?p=1259"},"modified":"2018-02-19T10:24:27","modified_gmt":"2018-02-19T10:24:27","slug":"editors-web-lliures-o-de-codi-obert","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/responsive-web\/editors-web-lliures-o-de-codi-obert\/","title":{"rendered":"Editores web libres o de c\u00f3digo abierto"},"content":{"rendered":"<p>A la hora de crear p\u00e1ginas web, la referencia m\u00e1s conocida es Adobe Dreamweaver. Es un editor muy extendido desde su aparici\u00f3n en 1998, y fue desarrollado por la compa\u00f1\u00eda Macromedia, la misma que\u00a0 desarroll\u00f3 Flash y que luego fue absorbida por Adobe.<\/p>\n<p>Actualmente mantiene el 90% del mercado de editores HTML pero bastantes \u00a0desarrolladores web lo critican ya que puede incluir mucho c\u00f3digo in\u00fatil lo cual puede ir en contra de la velocidad de carga o ejecuci\u00f3n de las p\u00e1ginas web\u00a0 en el navegador. Esto es especialmente significativo si usamos el soporte que permite, por ejemplo, conexiones de bases\u00a0 de datos y\/o opciones para programar sin necesidad de tener conocimiento de programar en algunos lenguajes como asp, jsp o php.<\/p>\n<p>Frente a este editor de pago, tenemos muchos otros editores de c\u00f3digo abierto. En este caso tenemos que distinguir principalmente dos tipos, los que est\u00e1n m\u00e1s orientados a dise\u00f1adores que son editores WYSIWYG\u00a0 (acr\u00f3nimo en ingles de \u00ablo que ves es lo que obtienes\u00bb)\u00a0 y los que est\u00e1n m\u00e1s orientados a programadores.<\/p>\n<p>Una caracter\u00edstica interesante de estos editores de c\u00f3digo abierto es que muchos de ellos tienen versiones \u00abportables\u00bb, esto es, los puedes llevar en una memoria USB y ejecutarlos desde ella en cualquier ordenador sin necesidad de instalarlo en ese equipo. Esta caracter\u00edstica puede ser muy interesante, por ejemplo, si vais a visitar a un cliente y os surge alguna cosa que no ten\u00edais prevista, sac\u00e1is vuestra memoria USB y a trabajar en cualquier ordenador.<\/p>\n<p>Los principales editores\u00a0 libres que podemos encontrar son:<\/p>\n<h3><strong>Editores WYSIWYG<\/strong><\/h3>\n<ul>\n<li><strong><span style=\"text-decoration: underline\">KompoZer<\/span><\/strong> Es un editor de p\u00e1ginas WYSIWYG que permite tambi\u00e9n ver el c\u00f3digo fuente as\u00ed como una opci\u00f3n de vista dividida de c\u00f3digo gr\u00e1fico .Adem\u00e1s tiene un peque\u00f1o soporte para PHP.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">Tiene versiones para\u00a0 Linux, Windows, MacOSX y est\u00e1 disponible en castellano.<\/p>\n<p style=\"padding-left: 30px\">KompoZer cumple con los est\u00e1ndares web de W3C. Por defecto, las p\u00e1ginas son creadas en acuerdo a HTML 4.01 Strict aunque se puede modificar en las opciones avanzadas y permite el uso de hojas de estilos CSS. Adem\u00e1s incluye un validador HTML\u00a0 que sube las p\u00e1ginas al W3C para su validaci\u00f3n.<\/p>\n<p style=\"padding-left: 60px\"><a href=\"http:\/\/www.kompozer.net\/\" target=\"_blank\" rel=\"noopener\">Web oficial de Kompozer<\/a><\/p>\n<ul>\n<li><strong>Amaya <\/strong>es un editor web creado por el W3C compuesta por un navegador web y una herramienta de creaci\u00f3n con el cual se puede trabajar en l\u00ednea y fuera de l\u00ednea. Se pueden ver y generar p\u00e1ginas HTML y XHTML con hojas de estilo CSS, o dibujos SVG. Ademas renderiza im\u00e1genes, por ejemplo en PNG y un subconjunto del formato de Gr\u00e1ficos Vectoriales Escalables (SVG), como figuras b\u00e1sicas, texto, im\u00e1genes o puede incluir fragmentos HTML o expresiones MathML en los dibujos. Est\u00e1 disponible para\u00a0 Windows, Mac y Linux.\u00a0\u00a0 Soporta HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, muchas caracter\u00edsticas CSS 2, e incluye soporte para gr\u00e1ficos SVG (transformaci\u00f3n, transparencia y animaci\u00f3n SMIL), adem\u00e1s se puede, no s\u00f3lo visualizar sino adem\u00e1s editar, de manera parcial, documentos XML.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">Algunas de las caracter\u00edsticas principales de Amaya son; editor grafico HTML, tablas para abrir documentos en lote, amplia selecci\u00f3n de etiquetas HTML con inserci\u00f3n autom\u00e1tica, correcci\u00f3n ortogr\u00e1fica y c\u00f3digo de limpieza, vista previa en tiempo real de la p\u00e1gina web, comparaci\u00f3n de c\u00f3digo fuente.<\/p>\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"http:\/\/www.w3.org\/Amaya\" target=\"_blank\" rel=\"noopener\">Sitio web oficial de Amaya<\/a><\/p>\n<ul>\n<li><strong>BlueGriffon<\/strong> se trata tambi\u00e9n de un editor WYSIWYG creado por Mozilla y como todo producto de Mozilla, presenta la posibilidad de usar plugins o complementos para ampliar sus funcionalidades. Est\u00e1 basado en Gecko, el motor de renderizado dentro de Firefox, y usa XULRunner. Se puede bajar gratuitamente y est\u00e1 disponible para Mac OS X, Windows y Linux y est\u00e1 traducido al castellano.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">BlueGriffon cumple con los est\u00e1ndares web W3C. Puede crear y editar p\u00e1ginas conforme a HTML 4, XHTML 1.0, HTML 5 y XHTML 5. Es compatible con CSS 2.1 y todas las partes de CSS 3 ya aplicadas por Gecko. BlueGriffon tambi\u00e9n incluye SVG-edit, un\u00a0\u00a0 editor basado en SVG que se distribuy\u00f3 originalmente como una extensi\u00f3n para Firefox y se adapt\u00f3 a BlueGriffon.<\/p>\n<p style=\"padding-left: 30px\"><a href=\"http:\/\/bluegriffon.org\" target=\"_blank\" rel=\"noopener\">P\u00e1gina oficial de Bluegriffon<\/a><\/p>\n<h3><strong>Editores orientados a programadores. <\/strong><\/h3>\n<p>Lo primero que hay que destacar es\u00a0 que estos editores no est\u00e1n solo orientados\u00a0 a la creaci\u00f3n de p\u00e1ginas web, quiz\u00e1s una excepci\u00f3n seria Bluefish, son editores que se pueden usar normalmente con multitud de lenguajes, desde C++ hasta lenguajes que normalmente solo se suelen usar\u00a0en p\u00e1ginas web din\u00e1micas como son asp o PHP. La principal caracter\u00edstica es el coloreado del c\u00f3digo para hacer m\u00e1s f\u00e1cil su lectura.<\/p>\n<p>Alguno de los principales serian:<\/p>\n<ul>\n<li><strong><span style=\"text-decoration: underline\">Bluefish <\/span><\/strong>es un editor de p\u00e1ginas web muy completo, dirigido a dise\u00f1adores web experimentados y programadores y se enfoca en la edici\u00f3n de p\u00e1ginas din\u00e1micas e interactivas. Tiene un potente soporte para HTML, PHP, Javascript, JSP, SQL, XML, Python, Perl, CSS, ColdFusion, Pascal, R, Octave\/Matlab\u00a0 y resaltado de sintaxis.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">Seguramente uno de los editores m\u00e1s completos que\u00a0 puede usarse tambi\u00e9n en diversos sistemas operativos, l\u00e1stima que no tenga soporte WYSIWYG , quiz\u00e1s lo \u00fanico que se pueda echar en falta.<\/p>\n<p style=\"padding-left: 60px\"><a href=\"https:\/\/bfwiki.tellefsen.net\/index.php\/Main_Page\" target=\"_blank\" rel=\"noopener\">Wiki de Bluefish<\/a><\/p>\n<p style=\"padding-left: 60px\"><a href=\"http:\/\/bluefish.openoffice.nl\/download.html\" target=\"_blank\" rel=\"noopener\">P\u00e1gina oficial de Bluefish<\/a><\/p>\n<ul>\n<li><strong><span style=\"text-decoration: underline\">Notepad2<\/span><\/strong> es un editor de texto de c\u00f3digo abierto para\u00a0 Windows.\u00a0Ofrece resaltado de sintaxis para los lenguajes de programaci\u00f3n : ASP, PHP, JavaScript, CSS, HTML, , XHTML y XML y otros no orientados a la web como lenguaje ensamblador, C, C++, C#, CGI,\u00a0 Java,\u00a0 NSIS,Pascal, Perl, , Python, SQL, VB, VBScript. Tiene alguna caracter\u00edstica mas como el emparejamiento de par\u00e9ntesis o la auto indentaci\u00f3n<\/li>\n<\/ul>\n<p style=\"padding-left: 60px\"><a href=\"http:\/\/www.flos-freeware.ch\/notepad2.html\" target=\"_blank\" rel=\"noopener\">P\u00e1gina oficial de Notepad2<\/a><\/p>\n<ul>\n<li><strong><span style=\"text-decoration: underline\">Notepad++ <\/span><\/strong>es un editor de texto y de c\u00f3digo fuente libre para Windows con soporte para la mayor parte de los lenguajes de programaci\u00f3n. como C++, CSS, Flash ActionScript, HTML, Java, JavaScript, JSP, Perl, PHP, Python, Ruby, SQL, XML y muchos m\u00e1s. Adem\u00e1s, permite al usuario definir su propio lenguaje.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">Incluye opciones que pueden ser \u00fatiles para usuarios avanzados como desarrolladores y programadores como el\u00a0 coloreado y envoltura de sintaxis: es capaz de resaltar las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura. Resaltado de par\u00e9ntesis, corchetes y llaves e indentaci\u00f3n. Tambi\u00e9n permite la grabaci\u00f3n y reproducci\u00f3n de macros. y se le pueden a\u00f1adir extensiones<\/p>\n<p style=\"padding-left: 60px\"><a href=\"http:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener\">P\u00e1gina oficial de Notepad++<\/a><\/p>\n<ul>\n<li><strong>NetBeans\u00a0IDE. \u00a0<\/strong>Por \u00faltimo vamos a ver sin duda <span style=\"text-decoration: underline\">uno de los mas importantes editores<\/span>, se trata de NetBeans\u00a0IDE, un entorno absolutamente libre para el desarrollo de software con c\u00f3digo abierto.\u00a0 Est\u00e1 enfocado al lenguaje de Programaci\u00f3n Java, pero actualmente soporta PHP, C\/C, Groovy, \u00a0, JavaScript, HTML entre otros.<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">Viene integrado con servidores de aplicaciones GlassFish v3, Apache Tomcat y maneja Bases de Datos MySQL, PostgreSQL y cualquiera que se conecte con JDBC como Oracle, SQL Server, y otros m\u00e1s. Es una herramienta de programaci\u00f3n integrada<\/p>\n<p style=\"padding-left: 30px\">Su aprendizaje se ha convertido en fundamental para quienes est\u00e1n interesados en el desarrollo de aplicaciones multiplataforma.<\/p>\n<p style=\"padding-left: 30px\"><strong>Caracter\u00edsticas principales:<\/strong><\/p>\n<ul>\n<li>El c\u00f3digo abierto<\/li>\n<li>Compatibilidad con los siguientes lenguajes de programaci\u00f3n: C, C , Java, PHP, Groovy, JavaScript, etc<\/li>\n<li>La capacidad para crear diversos tipos de aplicaciones<\/li>\n<li>Soporta: refactorizaci\u00f3n, perfilado, color de resaltado de sintaxis, auto-completado, plantillas de c\u00f3digo definidos etc<\/li>\n<li>Es posible dise\u00f1ar aplicaciones con solo arrastrar y soltar objetos sobre la interfaz de un formulario.<\/li>\n<li>No solo es posible elaborar potentes aplicaciones para de escritorio, tambi\u00e9n para la Web y para dispositivos port\u00e1tiles, como m\u00f3viles o Pocket PC, sin que cambie la forma de programar.<\/li>\n<li>La programaci\u00f3n mediante\u00a0NetBeans\u00a0se realiza a trav\u00e9s de componentes de software modulares, tambi\u00e9n llamados m\u00f3dulos.<\/li>\n<li>NetBeans\u00a0pone a disposici\u00f3n de los usuarios decenas de m\u00f3dulos a trav\u00e9s de su p\u00e1gina web, que podr\u00e1s integrar en \u00e9l para conseguir mejores aplicaciones.<\/li>\n<li>Nos\u00a0 ayuda en la navegaci\u00f3n de las clases\u00a0 predefinidas en la plataforma (miles)<\/li>\n<li>Netbeans no trabaja a nivel de archivo sino a nivel de proyecto<\/li>\n<li>Un proyecto incluye todos los recursos necesarios para construir un programa:\u00a0 \u2013 Archivos con el c\u00f3digo\u00a0 \u2013 Bibliotecas externas (p.e. ACM Task Force)\u00a0 \u2013 Im\u00e1genes, sonidos, etc.<\/li>\n<li>Posibilidad de conectar con repositorios de\u00a0control de versiones tipo git, subversi\u00f3n&#8230;<\/li>\n<li>etc<\/li>\n<\/ul>\n<p style=\"padding-left: 30px\">Es un programa muy completo y solo se han incluido en la lista algunas de las caracter\u00edsticas que tiene, pero sin duda hay algunas que lo hacen diferente a otros programas, la principal es que trabaja a nivel de todo el proyecto y no de archivo. Adem\u00e1s tiene un sistema de identado del c\u00f3digo que facilita mucho su lectura, o un sistema de marcas que permite ver f\u00e1cilmente donde cierra un c\u00f3digo (por ejemplo una llave que cierra una sentencia if). Adem\u00e1s la posibilidad de conectarlo a un repositorio de control de versiones nos permite ver directamente que archivos necesitan ser actualizados, con cuales estamos trabajando, ver que cambios estamos haciendo en un archivo, o hacer un puch con su commit directamente desde esta herramienta.<\/p>\n<p style=\"padding-left: 30px\">Tiene\u00a0 un peque\u00f1o\u00a0 handicap, y es que\u00a0 puede ser costoso su aprendizaje, es un programa muy completo pero\u00a0 los\u00a0 beneficios\u00a0 que nos aportara superan las dificultades que pueda suponer esto.<\/p>\n<p style=\"padding-left: 30px\">Algo a tener en cuenta es que para poder instalar el NetBeans primero debes de estar instalado en tu equipo la plataforma de desarrollo Java Development Kit (JDK) que tambien puedes descargar de forma gratuita.<\/p>\n<p style=\"padding-left: 30px\">Enlaces<\/p>\n<ul>\n<li><a href=\"https:\/\/netbeans.org\" target=\"_blank\" rel=\"noopener\">https:\/\/netbeans.org<\/a>\u00a0\u00a0 p\u00e1gina oficial<\/li>\n<li><a href=\"http:\/\/wiki.netbeans.org\/Avbravo_TutorialesEspanol\" target=\"_blank\" rel=\"noopener\">http:\/\/wiki.netbeans.org\/Avbravo_TutorialesEspanol<\/a> wiki tutorial oficial en castellano<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>A la hora de crear p\u00e1ginas web, la referencia m\u00e1s conocida es Adobe Dreamweaver. Es un editor muy extendido desde su aparici\u00f3n en 1998, y fue desarrollado por la compa\u00f1\u00eda Macromedia, la misma que\u00a0 desarroll\u00f3 Flash y que luego fue absorbida por Adobe. Actualmente mantiene el 90% del mercado de editores HTML pero bastantes \u00a0desarrolladores &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/responsive-web\/editors-web-lliures-o-de-codi-obert\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abEditores web libres o de c\u00f3digo abierto\u00bb<\/span><\/a><\/p>\n","protected":false},"author":58,"featured_media":0,"parent":1165,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-1259","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/comments?post=1259"}],"version-history":[{"count":15,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1259\/revisions"}],"predecessor-version":[{"id":1659,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1259\/revisions\/1659"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/pages\/1165"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/labeines\/es\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}