Vamos a hablar sobre Firebug, una extensión de Firefox muy útil para
desarrolladores del web, que permite examinar minuciosamente cada uno de los
elementos de la página, en busca de errores del código o fallos de
presentación. Por medio de Firebug podemos controlar cualquier cosa que ocurre
dentro de Firefox cuando carga cualquier página web. Permite examinar todos los
elementos HTML, y además los estilos CSS y los códigos de scripting en
Javascript que está ejecutando la página.
Antes que nada habría que comentar lo que son las extensiones de
Firefox. Son una especie de plugins o añadidos que se pueden instalar de manera
adicional en Firefox, para proveer al navegador de nuevas funcionalidades.
Tenemos un manual que explica en detalle muchas más cosas acerca de las
extensiones de Firefox.
Pues Firebug es una de esas extensiones imprescindibles para
desarrolladores, que nos puede ahorrar muchos dolores de cabeza, puesto que
ayuda a buscar errores o entender posibles comportamientos anómalos o no esperados
de la página que estamos desarrollando. Con Firebug podemos examinar cada parte
de la página, saber de qué elementos depende dentro de la jerarquía de
etiquetas HTML y todos los estilos CSS que se aplican. Además de permitir
alterar en línea cualquier etiqueta o declaración de estilos, para ver el
resultado sin tener que editar el código y recargar el documento. Además, nos
da informaciones completas de los script Javascript y los errores que se puedan
producir en la ejecución del código.
Como cualquier extensión de Firefox, es gratuita y libre de uso, con lo
que cualquiera se puede aprovechar de esta importante ventaja para desarrollar
webs libres de errores.
• Se puede abrir Firebug en una nueva ventana o bien en la parte de
debajo de la ventana del navegador. Una vez instalada la extensión, en el menú
de herramientas tenemos las opciones de Firebug, para ponerlo en funcionamiento
y definir donde queremos que aparezca la consola.
• Se puede inspeccionar cualquier etiqueta HTML y editarla desde el
propio Firebug, para ver los resultados en la página al instante.
• Lo mismo con los estilos CSS, podemos ver qué estilos
afectan a cada área o elemento de la página y editarlos en el instante por
medio de la consola Firebug, viendo los resultados en la propia página.
•Tiene herramientas para ver cómo se maquetan los elementos de la página
con las propiedades CSS, con reglas de en unidades de píxel, para ver donde se
sitúa cada elemento y por qué, los márgenes, padding, etc.
• Otra cosa interesante que ofrece es una visualización del
tiempo que ocupa al navegador descargar o poner en marcha cada uno de los
elementos que componen la página, lo que nos puede dar una idea de qué consumos
de tiempo tiene cada parte, como imágenes, banners, scripts externos, etc. Muy
útil si tu página se retrasa en cargar y no sabes exactamente por qué.
• Permite debug del código Javascript. Además, cuando algo no
funciona bien, Firebug lo resalta para que lo veas fácilmente y te da
informaciones sobre lo que puede estar ocurriendo.
• Permite explorar la jerarquía Javascript de componentes del
navegador (DOM).
Puedes ejecutar código Javascript en el instante, para ver cómo
reacciona la página.
Miguel es fundador de DesarrolloWeb.com y la plataforma de formación
online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.
En definitiva, merece la pena instalar la extensión para Firefox Firebug
y comprobar por nosotros mismos las toneladas de información que puede extraer
de la página y lo fácil que es explorar todos sus componentes en busca de
errores o fallos.
Bluefish es un potente editor dirigido a programadores y desarrolladores
web, con muchas opciones para escribir páginas web, scripts y código de
programación. Bluefish soporta varios lenguajes de programación y de marcas.
Ver las características de una extensa descripción, eche un vistazo a las
capturas de pantalla , o descargar al instante. Bluefish es un desarrollo de
código abierto del proyecto, liberado bajo la GNU GPL licencia.
Bluefish es una aplicación multiplataforma que funciona en la mayoría de
los sistemas operativos de escritorio incluyendo Linux, FreeBSD, MacOS X,
Windows, Solaris y OpenBSD.
Posteriormente se incorpora al equipo de trabajo Neil Millar quien se
encarga de agregarle el selector de colores y la integración con Weblint. Surge
entonces la necesidad de un logo, mucho más fresco y llamativo, pues iban a aparecer
las primeras versiones públicas y se quería ofrecer un producto con una imagen
y un nombre más atrayente. Es en este momento, cuando Neil plantea como nuevo
nombre: Bluefish y acompaña su propuesta de un hermoso pez azul que sugiere
como logo. Estos continúan siendo los nombre y logo actuales.
Con el paso del tiempo se unieron más desarrolladores y Bluefish comenzó
a acaparar la atención de la comunidad de código abierto.
v Ligero - Bluefish
trata de ser magra y limpia, en la medida de lo posible dado que es un editor
gráfico.
v Fast - Pescado azul
comienza realmente rápido (incluso en un netbook) y carga los cientos de
archivos en cuestión de segundos.
v Interfaz de múltiples
documentos, se abre fácilmente más de 500 documentos (probado> 10000
documentos simultáneamente)
v El apoyo del
proyecto, le permite trabajar de manera eficiente en múltiples proyectos, y
restaura automáticamente los ajustes para cada proyecto.
v El soporte multi-hilo
para archivos remotos usando gvfs, el apoyo de FTP , SFTP , HTTP , HTTPS ,
WebDAV , CIFS y más 1
v Muy potente de
búsqueda y reemplazo, con soporte para Perl expresiones regulares compatibles,
sub-patrón de sustitución, y buscar y reemplazar en archivos en el disco.
v Abrir archivos de
forma recursiva basan en patrones de nombres y / o patrones de contenido
v Fragmentos barra
lateral - especificar los cuadros de diálogo personalizados, buscar y
reemplazar patrones o insertar patrones y asociarlos a una combinación de
teclas Shortkut de su gusto para acelerar su proceso de desarrollo
v Integrar los
programas externos tales como maquillaje, pelusa, weblint, xmllint, ordenado,
javac, o en su propio programa o secuencia de comandos para manejar el procesamiento
de texto avanzado o detección de errores
v Integrar los filtros
externos de su gusto, tubería de su documento (o sólo el texto seleccionado en
ese momento) a través de una especie, sed, awk o cualquier secuencia de
comandos personalizada
v Sin límite de
deshacer la funcionalidad / rehacer
v Dentro de la línea de
revisión de ortografía que es lenguaje de programación conscientes (revisar la
ortografía de comentarios y cadenas, pero no de código), requiere libenchant
durante la compilación 2
v Auto-recuperación de
los cambios en los documentos modificados después de un accidente, matar o
apagado
v Tabla de caracteres
de todos los caracteres Unicode (requiere libgucharmap durante la compilación)
3
v Sitio de carga /
descarga 1
v edición de pantalla
completa
v Muchas herramientas
tales como fichas a los espacios, se unen las líneas, líneas a las columnas,
espacios en blanco tira, etc etc.
v Personalizable apoyo
lenguaje de programación:
Dentro de la línea de
información de referencia (mover el puntero del ratón sobre el nombre de la
función o el nombre de la etiqueta) para varios lenguajes de programación
· Código del bloque de
plegado
· destacando los
marcadores de inicio bloque de adaptación y final (ambos soportes y etiquetas)
· Auto-realización y
auto-etiqueta de cierre para muchos lenguajes de programación, con la
información de referencia, e incluso para los idiomas anidados (por ejemplo,
CSS y JavaScript dentro de código HTML que se encuentra dentro de un documento
php)
v con archivos de
definición de lenguaje incluidos para:
· Ada
· ASP .NET y VBS
· C / C ++
· CSS
· CFML
· clojure
· re
· gettext PO
· Ir google
· HTML , XHTML y HTML 5
· Java y JSP
· JavaScript y jQuery
· Lua
· Octave / Matlab
· MediaWiki
· NSIS
· Pascal
· Perl
· PHP
· Pitón
· R
· Rubí
· HABLAR CON DESCARO A
· Cáscara
· Esquema
· SQL
· SVG
· Vala
· Wordpress
· XML
v Múltiples
codificaciones de apoyo. Bluefish trabaja internamente con UTF8 , pero puede
guardar sus documentos en cualquier codificación deseada.
v marcadores
funcionalidad
v HTML barra de
herramientas y el menú del desgarrable
v Cuadros de diálogo y
asistentes para muchas etiquetas HTML, con todos sus atributos
Bluefish es un proyecto de software libre en el cual las listas de
correo juegan un papel muy importante. A través de ellas, usuarios,
desarrolladores y probadores pueden dar su opinión respecto a nuevas
características, bugs y mejoras respecto a la GUI. Como todo buen proyecto de
software libre sigue las pautas marcadas en el bazar, teniendo como motivación
principal el bien común, del que todos se pueden obtener beneficio.
Esta herramienta para la edición de código HTML, CSS y JavaScript está
también escrito con HTML, CSS y JavaScript por lo que al tratarse de un
próyecto de código abierto aquellos ususarios con mayores conocimientos podrán
crear plugins con los que personalizar el editor a sus necesidades.
Bracket es una utilidad todavía en fase de desarrollo con una interfaz
limpita que facilita el trabajo, permite sincronizar con el navegador para
mostrar los cambios al instante y se integra con otras herramientas para
desarrolladores como JSLint.
Pero mejor que explicarte qué es Bracket y por qué nos ha llamado la
atención, lo mejor es que visualices el vídeo que hemos dejado al final de este
post donde podrás verlo en acción.
Bajo licencia MIT, Bracket está disponible para cualquier desarrollador
web interesado desde
brackets.io.
v Útil sin hacerse
cargo. Con características como la vista previa y edición rápida, los soportes
agilizan el desarrollo sin ponerse en tu camino
v Construido con la web
para la web. Hecho con mucho amor y JavaScript, Brackets es un proyecto de
código abierto, con una activa comunidad de desarrolladores y en crecimiento.
v Un editor de código
para la web. Centrarse en una cosa, y hacerlo muy bien; Brackets está
construido desde cero con un enfoque en el desarrollo web.
v Tienes el poder.
Brackets está construido con HTML, CSS y JavaScript, lo que significa que es
fácil de contribuir el proyecto y extender su funcionalidad.
v Las herramientas no
deben ser obstáculo. En lugar de un espacio de trabajo desordenado con paneles
flotantes, barras de herramientas e íconos, Brackets se centra en la prestación
de “edición rápida“, vistas en línea que proporcionan acceso contextual a su
contenido.
v Funciona con el
navegador. El navegador es su punto de vista del diseño. Brackets conecta
directamente en el navegador, lo que le permite diseñar y desarrollar en el
mismo entorno en el que se implemente.
KompoZer Es un
completo sistema de Web que combina archivos Web manejables y de fácil uso del
editor de páginas WYSIWYG.
Hay binarios
disponibles para GNU/Linux, Windows, MacOSX y OS/2.
En marzo de 2007 fue
comentado en Download.com, que lo consideró una de las mejores alternativas
libres a Adobe CS3, y lo comparó favorablemente con Adobe Dreamweaver.
El próximo
lanzamiento, KompoZer 0.8, ha sido actualizado a Gecko 1.8.1, y el código está
siendo finalizado después de las pruebas. La primera versión pública alfa de
KompoZer 0.81 fue publicada el 11 de febrero de 2009 y ofreció una nueva
interfaz de usuario.
Las capacidades
WYSIWYG de KompoZer son una de las principales atracciones del software.
Adicionalmente, KompoZer permite la edición directa de código así como una
opinión de vista dividida de código gráfico.
KompoZer es un editor
de páginas web WYSIWYG (What you see is what you get - Lo que ves es lo que
recibes). Es un derivado de Nvu, es decir, una versión no oficial de NVU, el
cual ha reparado ciertos errores(bugs) que este presentaba. Komposer está
basado en Mozilla Composer pero con ejecución independiente. Su objetivo es
facilitar el desarrollo de páginas web, gracias a las distintas formas de
visualización disponibles en su interfaz como: código fuente, ventana WYSIWYG,
visión con tags de HTML realzados)
Presenta
características como el soporte integrado de CSS y mejor gestión del soporte
FTP para actualización de los ficheros, soporte de marcos, formularios, tablas,
pantillas de diseño, etc. Cabe destacar que está disponible para diversas
plataformas: Windows, Mac OS, y Linux. La versión sobre la cual se trabajará en
este tutorial, es la 0.7.10, traducida al español por el Proyecto Nave. Se
sentirán cómodos con la interfaz y opciones de KompoZer.
KompoZer cumple con
los estándares web de W3C. Por defecto, las páginas son creadas en acuerdo a
HTML 4.01 Strict, pero el usuario puede cambiar los ajustes y elegir entre:
DTD estricto y
transicional
HTML 4.01 y XHTML 1.0
Editor web WYSYWIG
con la representación del motor Gecko 1.8.1 (en la próxima versión 0.8, ya en
beta avanzada).
Opciones especiales
para la inserción de imágenes, tablas, formularios...
Generador automático
de tablas de contenido basado en los niveles de encabezado.
Editor CSS avanzado,
con capacidad de crear y usar tanto archivos CSS externos como hojas incrustadas
en el archivo HTML mediante etiquetas <style>.
Posibilidad de
definir y usar plantillas.
Admite etiquetas PHP
sin alterar su contenido.
Limpiador de código
HTML.
Enlace directo con el
validador HTML de W3C.
Completa ayuda
incorporada en el programa.
Sublime Text es un editor de código
multiplataforma, ligero y con pocas concesiones a las florituras. Es una
herramienta concebida para programar sin distracciones. Su interfaz de color
oscuro y la riqueza de coloreado de la sintaxis, centra nuestra atención
completamente.
Sublime Text permite tener varios
documentos abiertos mediante pestañas, e incluso emplear varios paneles para
aquellos que utilicen más de un monitor. Dispone de modo de pantalla completa,
para aprovechar al máximo el espacio visual disponible de la pantalla.
El programa cuenta “de serie” con
22 combinaciones de color posibles, aunque se pueden conseguir más. Para
navegar por el código cuenta con Minimap, un panel que permite moverse por el
código de forma rápida.
COMMAND PALETT
Este comando nos ofrece, de un plumazo, el acceso a todas las opciones
de los menús en Sublime y nos puede resultar de gran utilidad cuando estamos
buscando alguna preferencia u opción del menú.
Podemos acceder a ella desde el menú Tools o también mediante la
combinación de teclas Ctrl + Shift + P en Windows y Linux o Cmd + Shift + P en
Mac.
DISTRACTION-FREE
El modo libre de distracciones, o Distraction Free nos permite
pasar a pantalla completa, ocultando las opciones de menú o incluso la barra de
inicio en el caso de Windows, permitiendo que nos centremos en el código que
estamos escribiendo.
Podemos activarlo desde el menú View y también con Shift + F11 en
Windows y Cmd + Ctrl + Shift + F desde Mac
Goto anything
Con este comando es posible navegar por los ficheros abiertos y
por aquellos que se encuentran en nuestra carpeta sin tener que recurrir a la
barra lateral, lo que nos permite mantenerla oculta y ganar esos pocos píxeles
que son vitales si utilizamos un portátil o el modo Distraction Free que hemos
mencionado anteriormente.
Para él podemos recurrir la opción Goto del menú y también a los
atajos de teclado Ctrl + P para Windows y Linux o Cmd + P para Mac.
Goto symbol
Este comando es exclusivo de la versión 3 de Sublime (¡ojo si usas
la 2!).
Para poder navegar por un archivo podemos utilizar el scroll, el
"MiniMap", o el comando Goto Symbol. Este comando lista los
diferentes símbolos de un documento, como pueden ser las funciones en el caso
de un fichero JavaScript, y nos permite buscar entre ellas:http://www.campusmvp.es/recursos/post/5-caracteristicas-de-Sublime-Text-que-deberias-conocer.aspx
Emacs es un editor de texto con una gran cantidad de
funciones, muy popular entre programadores y usuarios técnicos. Gnu Emacs es
obviamente parte del proyecto GNU y la versión más popular de Emacs con una
gran actividad en su desarrollo. El manual de GNU Emacs lo describe como
"un editor extensible, personalizable, auto-documentado y de tiempo real."
El EMACS original significa, Editor MACroS para el TECO. Fue
escrito en 1975 por Richard Stallman junto con Guy Steele. Fue inspirado por
las ideas de TECMAC y TMACS, un par de editores TECO-macro escritos por Guy
Steele, Dave Moon, Richard Greenblatt, Charles Frankston, y otros. Se han
lanzado muchas versiones de EMACS hasta el momento, pero actualmente hay dos
que son usadas comúnmente: GNU Emacs, iniciado por Richard Stallman en 1984, y
XEmacs, una fork de GNU Emacs, que fue iniciado en 1991. Ambos usan una
extensión de lenguaje muy poderosa, Emacs Lisp, que permite manejar tareas
distintas, desde escribir y compilar programas hasta navegar en Internet. GNU
Emacs es mantenido por el Proyecto GNU Emacs, el cual cuenta entre sus miembros
a Richard Stallman.1
Algunas personas hacen distinción entre la palabra en mayúsculas
"Emacs", usada para referirse a versiones derivadas del programa
creado por Richard Stallman (particularmente GNU Emacs y XEmacs), y la palabra
en minúsculas "emacs", que es usada para referirse al gran número de
reimplementaciones de Emacs. La palabra "emacs" es pluralizada
frecuentemente en inglés como emacsen por analogía con "oxen". Por
ejemplo, el paquete compatible de Emacs para Debian se llama emacsen-common. El
único plural proporcionado por el Collins English Dictionary es emacsen.https://es.wikipedia.org/wiki/Emacs
