CONFIGURACIÓN BÁSICA DE NOTEPAD++ PARA CREAR PÁGINAS HTML.

CONFIGURACIÓN BÁSICA DE NOTEPAD++ PARA 

CREAR PÁGINAS HTML.

Antes de poder comenzar a crear páginas HTML, necesitaremos realizar una configuración básica de nuestro entorno de desarrollo. En nuestro caso, la configuración será bastante simple y consistirá en elegir la codificación con la que guardaremos nuestros ficheros HTML y seleccionar el lenguaje con el que vamos a trabajar.

Lo primero que vamos a hacer es abrir el programa Notepad++. Para esto, nos vamos a Inicio --> Programas --> Notepad++ --> Notepad++. Después se abrira el programa, mostrando una pantalla similar a la siguiente.

Para seleccionar la codificación con la que trabajaremos durante todo el curso, en la pestaña Formato, clickamos sobre Codificar en UTF-8 sin BOM, tal y como se indica en la imagen siguiente.

Ahora tendremos que indicar que vamos a utilizar el lenguaje de etiquetas HTML. Para ello, en la pestaña lenguaje abrimos H y seleccionamos HTML de entre todas las opciones posibles. Sería algo similar a lo que se muestra en la imagen siguiente.

Ya tenemos todo listo para poder empezar a crear nuestras páginas HTML.

AUTOCOMPLETAR. UNA VENTAJA DE NOTEPAD++

Para facilitar la escritura de código Notepad++ cuenta con una opción de autocompletar, la cual se activa en la pestaña Configurar --> Preferencias. En la ventana que nos aparecerá, dentro de la pestaña Copia de seguridad/Autocompletar debemos activar la casilla “Habilitar autocompletar en cada entrada” y “Pistas para los parámetros de la función”.

AUTOCERRADO DE ETIQUETAS HTML. OTRA VENTAJA DE NOTEPAD++

Para activar el autocerrado inteligente de etiquetas HTML, en menú superior seleccionamos TextFX --> TextFX Settigns --> Autoclose XHTML/XML tag

OTRAS VENTAJAS DE NOTEPAD++

Quizás te preguntes por qué hemos elegido Notepad++ para este curso. La respuesta es que tiene diversas ventajas, por ejemplo:

- Consume pocos recursos del sistema. No sobrecargarás tu ordenador porque el programa es al mismo tiempo que potente, ligero.

- Dispone de la función autocompletar que ya hemos citado, que nos facilita ayuda mientras estamos escribiendo el código.

- Permite abrir múltiples archivos simultáneamente, y reemplazar un texto en todos los archivos abiertos a la vez si así lo deseamos.

- Permite abrir dos archivos y realizar una comparación línea a línea entre ellos, indicándonos en qué líneas existen diferencias entre un archivo y otro.

- El código se nos muestra con un conjunto de colores que permite ver con claridad las etiquetas de apertura y cierre y otros elementos especiales de la codificación.

- Tiene muchísimas más posibilidades, pero no podemos citarlas todas. En conjunto, es un buen editor útil para programadores a nivel profesional y para principiantes.

- Es software libre que podemos descargar gratuitamente desde internet.

Como verás Notepad++ nos parece un buen editor de textos. Esto no quiere decir que no haya otras editores igual de buenos y potentes. De hecho, si ya eres usuario de algún otro editor puedes seguir usándolo para este curso.

Los mejores plugins para Notepad++

Como he comentado en entradas anteriores, hace un par de meses comencé a trabajar en algunos nuevos proyectos en PHP y me vi en la necesidad de encontrar un buen editor. Mi primera opción fue Notepad++, pero a pesar de ser muy práctico me sentí incompleto. Comencé entonces una aventura por encontrar aquel editor que hiciera la diferencia.

Intenté con un plugin para Visual Studio que te permite crear proyectos PHP, pero eso terminó con un mal sabor de boca. Probé cuanto editor se me puso en frente, salvo Sublime Text. ¿Por qué no quiero utilizar Sublime? Porque está muy caro. Claro, podrías optar por la opción B, pero ¿por qué habría de hacerlo si probablemente haya opciones mejores y/o gratuitas?

Entonces descubrí que lo que me hacía falta eran algunos plugins para Notepad++. A continuación la selección que ha hecho la diferencia, convirtiendo a Notepad++ en mi segundo editor de código favorito.

Notepad#

Una de las cosas que extrañé fue el asistente para escribir código. ¿No les pasa que se cansan de abrir y cerrar llaves? Lo mismo ocurre con la tabulación, paréntesis y esas cosas. No quiero decir con esto que no me gustan, creo que es una buena sintaxis, pero después de escribir miles de líneas de código se torna un poco cansado. Además, soy de aquellos que le gustan los atajos.

Notepad# es un plugin que se encarga del trabajo sucio. He de decirles que es fabuloso, una vez activo no podrán programar sin él. Este plugin solito hace de Notepad++ un buen contendiente.

Para el momento que escribo este artículo, la última versión estable es la 1.5 y cuenta con las siguientes características:

• Facilita la edición de la documentación de funciones para C, C++, Javascript y PHP
• Facilita comentar con # en Ruby
• Tabulación mejorada para lenguajes tipo C y CSS, incluso ayuda con el cierre de llaves
• Utilerías para la eliminación y duplicado de líneas (súper útil)
• Deshacer cerrar la última ficha
• Intercambiar fichas con ALT + IZQ/DER
• Encapsular código con una etiqueta (adiós a copiar + pegar)
• Codificar/decodificar texto tipo URL
• Cerrar la última etiqueta abierta (mi favorito)
• Regla para manejar columnas
• Tabular etiquetas XML, HTML y PHP
• Muestra de color para valores hexadecimales en archivos CSS
• Desplazarse más allá del final del archivo (mi otro favorito)
• Pegar del portapapeles con tabulación
• Editar el inicio y final de una etiqueta XML y HTML (bárbaro)

Zen Coding (ahora Emmet)

Escribir código HTML puede ser doloroso, con todas esas etiquetas de inicio y fin, encapsuladores dentro de encapsuladores, etc. Luego está repetir esto mismo cientos de veces y ya está, te encuentras a un paso de una severa artritis.

Zen Coding es un plugin que hace magia con las etiquetas. Es de esas herramientas que te hacen disfrutar el escribir todo ese código y, más interesante aún, que te aventura a descubrir nuevas formas de utilizarlo. Piensa en ello como un sublenguaje que produce HTML.

La última versión al momento de escribir este artículo es la 0.7 y cuenta con una lista de características enorme, aquí listo las más básicas e interesantes:

• Puedes especificar atributos de ID y CLASS en el pseudocódigo. Por ejemplo, “div#page.section.main” se expanderá a “<div id=”page” class=”section main”></div>”.
• Es posible agregar otros atributos. Por ejemplo, “div[title]” se expandirá a “<div title=”"></div>” y dejará la careta en el atributo para que escribas el título.
• La etiqueta DIV es la predeterminada, por lo tanto “#top” se expanderá a “<div id=”top”></div>”.
• Puedes agregar (multiplicar) elementos. Por ejemplo, “li*5” va a crear cinco etiquetas “li”.
• Cuando multipliques elementos puedes numerarlos utilizando el símbolo “$”. Por ejemplo, “li.item$*3” creará tres elementos “li”, el primero tendrá una clase llamada “item1”, el segundo “item2” y el tercero “item3”.

Explorer

No he encontrado algo que ayude a administrar un proyecto desde Notepad++ a la Visual Studio, afortunadamente este plugin hace un buen trabajo. Explorer es eso, un explorador de archivos dentro del editor.

Con él puedes navegar entre las carpetas de tus discos, abrir los archivos con un doble click, crear nuevos, renombrarlos, moverlos, etc.

 Como instalar un plugin

La instalación es muy sencilla, pues la mayoría de estos están consolidados en Sourceforge y el editor los descarga solito. Para esto tienes que hacer lo siguiente:

1. Abre el menú “Plugins”, opción “Plugin Manager” y da click en “Mostrar/Show Plugin Manager”.
2. Espera a que la lista se actualice, luego en la ficha “Disponibles/Available” marca aquellos que te interesan.
3. Da click en el botón “Instalar/Install”.

Si el plugin que deseas instalar no está en la lista (lo cual es raro que suceda), lo que tienes que hacer es colocar el archivo en la ruta de instalación de la aplicación, pero tomando en cuenta que si estás utilizando Notepad++ en modalidad Unicode (la mejor) solo puedes instalar plugins compatibles. Aunque hoy en día casi todos los plugins lo son.