SUBLIME TEXT

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.

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.

El sistema de resaltado de sintaxis de Sublime Text soporta un gran número de lenguajes (C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML).

El programa dispone de auto-guardado, muchas opciones de personalización, cuenta con un buen número de herramientas para la edición del código y automatización de tareas. Soporta macros, Snippets y auto completar, entre otras funcionalidades. Algunas de sus características son ampliables mediante plugins.http://www.genbeta.com/herramientas/sublime-text-un-sofisticado-editor-de-codigo-multiplataforma

Sublime Text es un programa de pago, aunque se puede descargar una versión de prueba, plenamente funcional y sin limitación de tiempo. La licencia individual cuesta 59 dólares. Cada programador es un pequeño maniático con sus credos y sus fobias respecto de las herramientas que emplea, pero si lo que quieres es centrarte únicamente en el código, tal vez deberías probar Sublime Text. La aplicación está disponible para OS X, Linux y Windows.

COMMAND PALETTE

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
http://hipertextual.com/archivo/2013/10/mejores-editores-de-texto-para-desarrolladores/

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

Emacs contiene un gran número de bibliotecas escritas en Emacs Lisp, y en Internet se pueden encontrar más bibliotecas de terceras partes. Muchas bibliotecas implementan ayudas para la programación de ordenadores, lo que es un reflejo de la popularidad de Emacs entre los programadores. Emacs se puede usar como un entorno de desarrollo integrado (IDE), que permite a los programadores editar, compilar y depurar su código con una única interfaz. Otras bibliotecas realizan funciones menos habituales. A continuación se enumeran varios ejemplos:

Calc, una potente calculadora numérica.

Calendar-mode, para guardar calendarios y diarios de citas.

Doctor, una implementación de ELIZA que realiza psicoterapia rogeriana.

Dunnet, una aventura conversacional.

Ediff, para trabajar con ficheros diff de forma interactiva.

Emerge, para comparar ficheros y combinarlos.

Emacs/W3, un navegador web.

Dired, potente y extensible administrador de archivos, de interfaz parecida a Midnight Commander.

ERC, un cliente IRC.

Gnus, un completo lector de grupos de noticias y de correo electrónico.

MULE, MultiLingual extensions to Emacs, extensiones multilingües para Emacs. Permite la edición de texto escrito en múltiples lenguajes, más o menos análogo a Unicode.

Info, un navegador de ayuda en línea.

Emacs-wiki, software de wiki para Emacs basado en Lisp.

Planner, un gestor de información personal para Emacs.

Tetris
https://es.wikipedia.org/wiki/Emacs

Notepad++ es un programa para editar código fuente de cualquier lenguaje de programación. Como tiene soporte para una gran cantidad de lenguajes, interesará no sólo a los desarrolladores de webs, sino en general a toda la comunidad de programadores.

Es de estos editores que ofrecen ayudas muy útiles para "tirar líneas de código", como resaltado de colores, posibilidad de editar varios documentos a la vez, menús contextuales, auto-completar código, etc. Todo un regalo para los programadores, ya que además es gratuito.

Es un proyecto creado a partir de otro editor para programadores llamado Scintilla, que ya comentamos en un artículo con anterioridad: Scite by Scintilla. Por decirlo de alguna manera, Notepad++ es una distribución de Scintilla, pero con algunas contribuciones adicionales.
 http://www.desarrolloweb.com/articulos/notepad.html

Se distribuye sólo para sistemas Windows y está programado en C++, utilizando directamente el API de win32, lo que hace que sea rápido y con un archivo de descarga pequeño. Se puede descargar y conocer más sobre el programa en: http://notepad-plus.sourceforge.net/es/site.htm

•  Coloreado de código para más de 40 lenguajes de programación diferentes, entre los que se incluyen todos los que un desarrollador del web podría tocar, como HTML, Javascript, ASP, SQL, PHP, CSS, Pitón, Ruby, etc.

• Impresión a color de los códigos

• Permite definir el resaltado de sintaxis para nuevos lenguajes de programación que necesite el usuario.

• Autocompletado de código, también configurable por el usuario o extensible por medio de descargas bajo demanda del programador.

•  Multi-Documento

•  Multi-Vista, lo que significa que puedes tener más de una vista de un mismo código, con por ejemplo dos versiones del mismo documento.

• Permite realizar acciones de Buscar / Reemplazar utilizando incluso expresiones regulares para definir los patrones a reemplazar.

•  Deteción automática del estado del documento, que puede ayudarnos en caso que queramos guardar un archivo que había sido modificado por otro usuario o programa.

•  Otras utilidades como Zoom, soporte para varios idiomas, puntos de marca, resaltado de paréntesis u sangría, creación de macros, etc.  http://www.desarrolloweb.com/articulos/notepad.html

VIM es un editor de texto avanzado, y altamente configurable. Es una versión mejorada de Vi, el editor distribuido con la mayoría de los sistemas UNIX. Vim es a veces llamado “editor para programadores”. Aunque algunos lo consideran un IDE completo, Vim no es solo para programadores, también es perfecto para todo tipo de edición de texto, desde escribir un email, hasta editar archivos de configuración.

Aunque es un editor avanzado y su uso como herramienta de programación tiene una curva de aprendizaje un tanto elevada, Vim puede ser configurado para funcionar un una manera muy simple, al estilo de Notepad. El llamado evim o Easy Vim.

Vim es charityware, es decir, su licencia es compatible con GPL y se distribuye de manera libre y gratuita, pero los desarrolladores solicitan una donación para los niños de Uganda a través de la ICCF, para quien desee colaborar.

Vim funciona en múltiples sistemas operativos, y está disponible en diferentes versiones.

Su autor, Bram Moolenaar, presentó la primera versión en 1991, fecha desde la que ha experimentado muchas mejoras. La principal característica tanto de Vim como de Vi consiste en que disponen de diferentes modos entre los que se alterna para realizar ciertas operaciones, lo que los diferencia de la mayoría de editores comunes, que tienen un solo modo en el que se introducen las órdenes mediante combinaciones de teclas o interfaces gráficas.

Vim dispone de una excelente documentación, que se rige por la máxima Una característica no documentada es una característica inútil. La documentación, en formato texto, es muy amplia y fácil de entender. El usuario accede mediante una búsqueda a la descripción de varias funcionalidades que pueden solucionar su problema. A través del resaltado de la sintaxis propia de la ayuda de Vim se resaltan las palabras clave. (Figura 3) Mediante combinaciones de teclas ejecutadas cuando el cursor está sobre una palabra clave se puede navegar por la ayuda, volviendo atrás en caso necesario. En la versión gráfica también se puede utilizar el ratón para este propósito. https://es.wikipedia.org/wiki/Vim

Resaltar línea actual. Con la instrucción “:set cursorline” se subraya la linea actual.

Resaltar columna actual. Con la instrucción “:set cursorcolumn” se resalta la columna actual.

Numerar lineas. La instrucción “:set number” numera las lineas. La instrucción “:set nonumber” elimina la numeración.

Cambiar el color de la columna de números. El color de los números en la columna de numeración no cambia con el colorscheme. Para cambiarla basta con escribir “:hi LineNr ctermfg=red” y el color de los números será rojo. red se puede cambiar por cualquier color: yellow, blue, cyan, brown, black, grey. green. También se pueden matizar con darkred, o lightred. Desde luego hay que sustituir red por el color de nuestra preferencia, aunque algunos no aceptan la opción.

Cambiar el fondo de la columna de números. Muy relacionado con la anterior, esta opción permite cambiar el color de fondo de la columna de numeración, que por defecto toma el de la consola. Hay que usar el comando “:hi LineNr ctermbg=red” y se establecerá en rojo. Claro que, como en el anterior, se puede cambiar red por el color que más nos guste.

Cambiar el ancho de la columna de números: Con “:set nuw=5” se establece el ancho de la columna de numeración en 5 espacios. Se puede sustituir 5 por el número deseado.

Abreviaturas. Con “:ab mn Mi Nombre”, cada vez que se teclee en el editor mn se desplegará la cadena Mi Nombre. Con “:ab m” se despliegan todas la abreviaturas que empiezan con m. Para ver todas la abreviaturas use “:ab”  https://aprendiendoausarlinux.wordpress.com/2012/01/14/algunas-caracteristicas-del-editor-vim/

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.http://www.webtaller.com/maletin/articulos/firebug-extension-desarrolladores-web.php

 

• 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.

http://www.webtaller.com/maletin/articulos/firebug-extension-desarrolladores-web.php

https://es.wikipedia.org/wiki/Firebug

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.

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.

 

Ú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

  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.

  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.

  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.

  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.

  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.

                                                                       un editor de texto (sublime text 3)                                                                      un navegador

Un include es un elemento del lenguaje PHP que nos permite incluir una página entera dentro de otra.

¿Por qué usar los includes?

El uso de includes es excepcionalmente bueno para ahorrarte trabajo. Puedes hacer un header o un menú generico y cargarlo con el include.

Uso:

La utilización del include es muy simple: 

<?php include("tuarchivo.htm"); ?> 

Ejemplo: Vamos a usar tres archivos, que fusionaremos. Luego observaremos el codigo de salida.

Archivo 1 : header.php :

<html>
<head>
<title> Muestra de includes </title>

</head>
<body>

Archivo 2: footer.php :

</body>
</html>

Archivo 3: union.php :

<?php include("header.php"); ?>

<p>
Hola, este es el contenido.
</p>
<?php include("footer.php"); ?>

y el resultado:

<html>
<head>
<title> Muestra de includes </title>
</head>
<body>

<p>
Hola, este es el contenido.
</p>
</body>
</html

Nota: Los archivos a incluír no tienen que ser obligatoriamente archivos PHP. Pueden ser de cualquier tipo

Diferenciación:PHP contiene otra funcion con caracteristicas muy similares, que es la funcion require(). Las caracteristicas y el modo de uso de include y de require son identicas, salvo por una cosa: El mensaje de error generado si falta un documento:

Con include, si el nombre de archivo no existe, recibiras una advertencia (warning) y el script seguirá. Con require en cambio el script se detendrá, pues se marcará un error fatal.
Ejemplo:

Include:

<?php
include("noexiste.php");
echo ("Hola. El script siguió!");
?>

y lo que obtendremos es:

Warning: include(noexiste.php) [function.include]:
failed to open stream:
No such file or directory in C:\tutorial\probando.php on line 2

Warning: include() [function.include]:
Failed opening 'noexiste.php' for inclusion
(include_path='.;C:\php5\pear')
in C:\tutorial\probando.php on line 2

Hola. El script siguió!  

Warning: include ( noexiste.php ) [ function.include ] :
fallo al abrir Stream:
No existe el fichero o directorio en C : \ tutorial \ probando.php en la línea 2

Warning: include ( ) [ function.include ] :
Fallo al abrir ' noexiste.php ' para su inclusión
( Include_path = ' .; C : \ php5 \ pera ' )
en C : \ tutorial \ probando.php en la línea 2

Hola. El guión siguio !