Manual 📝 Notepad++

Guía completa para programar sin errores con Notepad++

🎯 Introducción y Ventajas de Notepad++ ▼
💡 ¿Qué es Notepad++? Es un editor de código gratuito y ligero para Windows, perfecto para estudiantes que están aprendiendo programación web.

✅ Ventajas de Notepad++

  • 🚀 Muy ligero: Abre instantáneamente incluso en PCs antiguas
  • 💾 No requiere internet: Funciona completamente offline
  • 🎨 Resaltado de sintaxis: Colorea el código automáticamente
  • 📂 Pestañas múltiples: Trabaja con varios archivos a la vez
  • 🔧 Personalizable: Miles de plugins disponibles
  • 🆓 100% Gratuito: Open source, sin límites
  • 💾 Auto-guardado: Recupera archivos tras cierres inesperados

⚠️ Limitaciones a Conocer

  • ❌ Solo Windows: No disponible en Mac/Linux nativamente
  • ❌ Sin vista previa integrada: Necesitas abrir el navegador aparte
  • ❌ No es un IDE completo: Sin depurador integrado
  • ❌ Interfaz menos moderna: Comparado con VS Code

🎓 Ideal Para

👨‍🎓 Principiantes

Simple y sin complicaciones para empezar

🏫 Aulas sin internet

Funciona perfectamente offline

💻 PCs antiguas

Consume muy pocos recursos

🌐 HTML/CSS/JS

Perfecto para desarrollo web básico

⬇️ Descargar Notepad++ Gratis
⚠️ Importante: Descarga SOLO desde notepad-plus-plus.org para evitar versiones con malware.
💾 Instalación y Configuración Inicial ▼

📥 Proceso de Instalación

1Descargar el instalador

Ve a notepad-plus-plus.org y descarga la versión más reciente (64-bit recomendado)

2Ejecutar el instalador

  • Idioma: Selecciona Español
  • Componentes: Deja todo marcado por defecto
  • Crear acceso directo en escritorio: ✓ Sí

3Primera apertura

Al abrir por primera vez, Notepad++ ya está listo para usar

⚙️ Configuración Esencial para Programación Web

Configurar para HTML/CSS/JavaScript:
Configuración → Preferencias
Configuración Dónde encontrarla Valor recomendado
Idioma de interfaz Configuración → Preferencias → General Español
Mostrar números de línea Configuración → Preferencias → Edición ✓ Activado
Auto-completado Configuración → Preferencias → Auto-completado ✓ Activar
Respaldo automático Configuración → Preferencias → Copia de seguridad ✓ Sesión snapshot
Codificación por defecto Configuración → Preferencias → Nuevo documento UTF-8
Tema Configuración → Configurar estilos Default o Obsidian
❌ Error Común #1: Codificación incorrecta

Si ves caracteres raros (ñ, á, etc.), el archivo tiene mala codificación

Solución: Codificación → Codificar en UTF-8

🎨 Configurar Tema Oscuro (Opcional)

Configuración → Configurador de Estilos → Seleccionar tema: Obsidian
✅ Configuración de Auto-guardado:
  1. Configuración → Preferencias → Copia de seguridad
  2. Marcar "Recordar la sesión actual para el próximo lanzamiento"
  3. Marcar "Habilitar sesión snapshot y respaldo periódico"
  4. Establecer cada 5 minutos

📁 Asociar Archivos HTML/CSS/JS

Para que los archivos se abran automáticamente con Notepad++:

  1. Click derecho en un archivo .html
  2. Abrir con → Elegir otra aplicación
  3. Seleccionar Notepad++
  4. Marcar "Usar siempre esta aplicación"
🖥️ Conociendo la Interfaz ▼

📐 Partes de la Interfaz

📑 Barra de Pestañas

Arriba: Muestra todos los archivos abiertos

Click derecho para opciones

✏️ Área de Edición

Centro: Donde escribes el código

Números de línea a la izquierda

📊 Barra de Estado

Abajo: Muestra línea, columna, codificación

🗂️ Panel Lateral

Explorador de archivos (Plugin necesario)

🎯 Navegación Básica

📂 Trabajar con Archivos:

Ctrl+N Nuevo archivo
Ctrl+O Abrir archivo
Ctrl+S Guardar
Ctrl+Shift+S Guardar como
Ctrl+Tab Cambiar entre pestañas
Ctrl+W Cerrar pestaña actual

⚡ Funciones Útiles de la Interfaz

💡 Vista de Documento Dividida:
  • Click derecho en pestaña → Mover a otra vista
  • Permite ver 2 archivos lado a lado
  • Útil para HTML y CSS juntos
💡 Mapa del Documento:
  • Ver → Mapa del documento
  • Vista miniatura del archivo completo
  • Navegación rápida en archivos largos

🔍 Panel de Búsqueda

Buscar → Buscar (Ctrl+F) → Se abre panel inferior
  • Buscar: Encuentra texto
  • Reemplazar: Cambia texto
  • Buscar en archivos: Busca en múltiples archivos
  • Marcar: Resalta todas las coincidencias
⚠️ Error Común #2: Pestañas sin guardar

Las pestañas con un diskette rojo tienen cambios sin guardar

Solución: Archivo → Guardar todo (Ctrl+Shift+S)

🎨 Personalizar la Vista

  • Zoom: Ctrl + Rueda del mouse
  • Word Wrap: Ver → Ajuste de línea
  • Mostrar símbolos: Ver → Mostrar símbolo → Mostrar espacios y tabs
  • Pantalla completa: F11
🚨 Errores Comunes y Soluciones ▼

❌ Top 10 Errores de Estudiantes

Error #3: Guardar sin extensión

🔴 El archivo se guarda como "index" sin ".html"

Solución:
  • Al guardar, escribe el nombre completo: index.html
  • O selecciona "Hyper Text Markup Language" en tipo de archivo
  • Verifica en la pestaña que diga "index.html" no solo "index"
Error #4: Caracteres especiales mal mostrados

🔴 Las ñ, tildes y otros caracteres se ven como � o ñ

Solución:
  1. Codificación → Codificar en UTF-8
  2. En HTML añadir: <meta charset="UTF-8">
  3. Para archivos nuevos: siempre UTF-8 por defecto
🔤 Guía de Codificación:
  • UTF-8: Siempre usar este para web
  • ANSI: Evitar (problemas con acentos)
  • UTF-8 con BOM: Puede causar problemas en PHP
Error #5: No ver los cambios en el navegador

🔴 Modificas el código pero el navegador muestra lo viejo

Solución:
  • 1️⃣ Guardar el archivo (Ctrl+S) - verificar que no hay punto rojo
  • 2️⃣ Ir al navegador y refrescar (F5 o Ctrl+F5)
  • 3️⃣ Verificar que estás editando el archivo correcto
  • 4️⃣ Limpiar caché: Ctrl+Shift+Supr
Error #6: Rutas de archivos incorrectas

🔴 Las imágenes y CSS no cargan

Solución:
❌ Rutas absolutas de Windows (NO funcionan): <link href="C:\Users\Alumno\Desktop\style.css"> <img src="C:\Mis Documentos\imagen.jpg"> ✅ Rutas relativas (CORRECTO): <link href="css/style.css"> <img src="images/imagen.jpg"> 📁 Estructura de carpetas: proyecto/ ├── index.html ├── css/ │ └── style.css └── images/ └── imagen.jpg
Error #7: Mezclar comillas en HTML

🔴 Usar ' y " incorrectamente

Solución:
❌ Incorrecto: <div class='contenedor"> <img src="imagen.jpg' alt="foto"> ✅ Correcto (usa comillas dobles consistentemente): <div class="contenedor"> <img src="imagen.jpg" alt="foto">
Error #8: Espacios en nombres de archivos

🔴 "mi pagina.html" puede causar problemas

Solución - Nombres correctos:
❌ Evitar: mi pagina.html Página Principal.html foto del banner.jpg ✅ Usar: mi-pagina.html pagina-principal.html foto-banner.jpg

🔧 Problemas Técnicos Frecuentes

Problema: Notepad++ se cerró y perdí mi trabajo

Solución:

  1. Notepad++ guarda respaldos automáticos
  2. Al reabrir, los archivos no guardados aparecen
  3. Buscar en: %APPDATA%\Notepad++\backup
Problema: El resaltado de sintaxis no funciona

Solución:

  • Lenguaje → H → HTML (para archivos .html)
  • Lenguaje → C → CSS (para archivos .css)
  • Lenguaje → J → JavaScript (para archivos .js)
✅ Checklist Anti-Errores:
  • ☐ Archivo guardado con extensión correcta (.html, .css, .js)
  • ☐ Codificación en UTF-8
  • ☐ Sin punto rojo en la pestaña (guardado)
  • ☐ Rutas relativas, no absolutas
  • ☐ Sin espacios en nombres de archivos
  • ☐ Navegador actualizado (F5)
⌨️ Atajos de Teclado Esenciales ▼

🚀 Atajos Básicos Imprescindibles

Atajo Función Cuándo usarlo
Ctrl+S Guardar Después de cada cambio importante
Ctrl+Z Deshacer Corregir errores
Ctrl+Y Rehacer Recuperar lo deshecho
Ctrl+C Copiar Duplicar código
Ctrl+V Pegar Insertar lo copiado
Ctrl+X Cortar Mover código
Ctrl+A Seleccionar todo Seleccionar archivo completo
Ctrl+F Buscar Encontrar texto
Ctrl+H Reemplazar Cambiar texto masivamente

📝 Atajos de Edición Avanzada

Líneas y Selección:

Ctrl+D Duplicar línea actual
Ctrl+L Eliminar línea actual
Ctrl+Shift+↑/↓ Mover línea arriba/abajo
Ctrl+J Unir líneas
Alt+Shift+↑/↓ Selección en columna

Comentarios:

Ctrl+Q Comentar/Descomentar línea
Ctrl+Shift+Q Comentar bloque
Ctrl+K Comentar selección

🎯 Atajos de Navegación

Ctrl+G Ir a línea número...
Ctrl+Tab Siguiente pestaña
Ctrl+Shift+Tab Pestaña anterior
Ctrl+PgUp/PgDn Cambiar entre pestañas
F11 Pantalla completa
Alt+0 Colapsar todos los bloques
Alt+Shift+0 Expandir todos los bloques

⚡ Atajos de Formato

Tab Indentar selección
Shift+Tab Desindentar selección
Ctrl+U Convertir a minúsculas
Ctrl+Shift+U Convertir a MAYÚSCULAS
Ctrl+Alt+F Colapsar nivel actual
Ctrl+Alt+Shift+F Expandir nivel actual

🔍 Atajos de Búsqueda Avanzada

Atajo Función
F3 Buscar siguiente
Shift+F3 Buscar anterior
Ctrl+Shift+F Buscar en archivos
Ctrl+F3 Buscar palabra actual
Ctrl+M Marcar todas las ocurrencias

💡 Trucos de Productividad

Multi-edición (Editar en varios lugares a la vez):
  1. Mantén presionado Alt
  2. Haz click o arrastra para seleccionar múltiples puntos
  3. Escribe y aparecerá en todos los puntos
Grabación de Macros:
  1. Ctrl+Shift+R Iniciar grabación
  2. Realiza las acciones a repetir
  3. Ctrl+Shift+R Detener grabación
  4. Ctrl+Shift+P Reproducir macro
🎯 Consejo: Imprime esta tabla de atajos y tenla cerca mientras programas. En 2 semanas los usarás sin pensar.
🌐 Trabajar con HTML, CSS y JavaScript ▼

📄 Crear un Proyecto Web Básico

Paso 1: Crear estructura de carpetas

  1. Crear carpeta del proyecto en el escritorio
  2. Dentro crear carpetas: css, js, images
  3. Abrir Notepad++

Paso 2: Crear archivo HTML

  1. Archivo → Nuevo (Ctrl+N)
  2. Escribir estructura básica HTML
  3. Guardar como → index.html en la carpeta del proyecto
  4. Verificar que la pestaña muestre "index.html"

🚀 Plantilla HTML5 Básica

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Página Web</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>¡Hola Mundo!</h1> <script src="js/script.js"></script> </body> </html>
💡 Tip: Auto-completado HTML

Escribe html:5 y si tienes el plugin Emmet, presiona Tab para generar la estructura completa

🎨 Vincular CSS correctamente

❌ Errores comunes al vincular CSS:
<!-- Ruta incorrecta --> <link rel="stylesheet" href="style.css"> <!-- Si style.css está en carpeta css/ no funcionará --> <!-- Barra invertida de Windows --> <link rel="stylesheet" href="css\style.css"> <!-- Ruta absoluta --> <link rel="stylesheet" href="C:\Users\css\style.css">
✅ Forma correcta:
<!-- Archivo en carpeta css --> <link rel="stylesheet" href="css/style.css"> <!-- Archivo en misma carpeta --> <link rel="stylesheet" href="style.css"> <!-- Subir un nivel --> <link rel="stylesheet" href="../css/style.css">

📜 Vincular JavaScript

Mejores prácticas para JavaScript:
  • Colocar <script> justo antes de </body>
  • Usar defer si va en el <head>
  • Verificar la consola del navegador (F12) para errores
<!-- Opción 1: Al final del body (recomendado) --> <script src="js/script.js"></script> </body> <!-- Opción 2: En el head con defer --> <head> <script src="js/script.js" defer></script> </head>

🔄 Flujo de Trabajo Eficiente

Proceso recomendado:
  1. 📝 Escribir código en Notepad++
  2. 💾 Guardar (Ctrl+S) - verificar que no hay punto rojo
  3. 🌐 Abrir/actualizar en navegador (F5)
  4. 🔍 Inspeccionar elemento si hay problemas (F12)
  5. 🔄 Repetir el ciclo

🐛 Depuración Básica

Para errores de HTML/CSS:

  1. Click derecho en navegador → Inspeccionar
  2. Pestaña "Elements" para ver HTML
  3. Pestaña "Styles" para ver CSS aplicado
  4. Buscar texto tachado = CSS sobrescrito

Para errores de JavaScript:

  1. F12 → Console
  2. Errores aparecen en rojo
  3. Click en el número de línea para ver el código
  4. Usar console.log() para depurar
🔌 Plugins Esenciales ▼

📦 Cómo Instalar Plugins

Plugins → Administrador de Plugins (Plugin Manager)
  1. Ir a la pestaña "Disponibles"
  2. Buscar el plugin deseado
  3. Marcar la casilla
  4. Click en "Instalar"
  5. Reiniciar Notepad++ si lo pide

🌟 Top 10 Plugins para Desarrollo Web

1. Emmet

✨ Escritura ultra-rápida de HTML/CSS

Ejemplo: Escribe ul>li*5 y presiona Tab

2. Explorer

📁 Panel lateral con árbol de archivos

Como el explorador de VS Code

3. Preview HTML

👁️ Vista previa del HTML sin salir del editor

Plugins → Preview HTML → Preview HTML

4. Auto Save

💾 Guarda automáticamente cada X segundos

Evita perder trabajo

5. ColorPicker

🎨 Selector de colores visual

Genera códigos hexadecimales

6. JSLint

🐛 Detecta errores en JavaScript

Validación en tiempo real

7. XML Tools

📐 Formatea y valida HTML/XML

Pretty print para código ordenado

8. Compare

🔍 Compara dos archivos lado a lado

Resalta las diferencias

9. NppFTP

📤 Sube archivos a servidor web

Cliente FTP integrado

10. Snippets

📝 Plantillas de código reutilizables

Crea tus propios snippets

⚡ Usar Emmet para HTML Rápido

Ejemplos de Emmet (escribir y presionar Tab):
! → Estructura HTML5 completa div.container → <div class="container"></div> ul>li*3 → Lista con 3 elementos p{Hola} → <p>Hola</p> .box → <div class="box"></div> #header → <div id="header"></div> nav>ul>li*4>a → Menú de navegación completo div.row>div.col*3 → Grid de 3 columnas
⚠️ Si los plugins no aparecen:
  1. Descargar Plugin Manager manualmente
  2. Ir a: github.com/bruderstein/nppPluginManager
  3. Seguir instrucciones de instalación
  4. Reiniciar Notepad++
✅ Plugins mínimos recomendados para estudiantes:
  • Explorer (navegación de archivos)
  • Emmet (escribir HTML rápido)
  • Auto Save (no perder trabajo)
🌟 Mejores Prácticas y Tips Pro ▼

📚 Organización del Código

1. Indentación Consistente:
  • Configurar Tab a 2 o 4 espacios
  • Configuración → Preferencias → Tamaño de tabulación
  • Usar Tab para indentar, Shift+Tab para desindentar
2. Comentarios Útiles:
<!-- HEADER: Navegación principal --> <header> <!-- Logo de la empresa --> <img src="logo.png" alt="Logo"> <!-- Menú de navegación --> <nav> <!-- TODO: Añadir más enlaces --> </nav> </header> /* ========== ESTILOS GENERALES ========== */ /* ========== HEADER ========== */ /* ========== RESPONSIVE ========== */

💾 Gestión de Archivos

Estructura de proyecto recomendada:
mi-proyecto-web/ │ ├── index.html (página principal) ├── about.html (acerca de) ├── contact.html (contacto) │ ├── css/ │ ├── style.css (estilos principales) │ ├── reset.css (reseteo CSS) │ └── responsive.css (media queries) │ ├── js/ │ ├── main.js (JavaScript principal) │ └── validacion.js (validación formularios) │ ├── images/ │ ├── logo.png │ ├── banner/ (imágenes del banner) │ └── icons/ (iconos) │ ├── fonts/ (fuentes personalizadas) └── README.txt (instrucciones del proyecto)

🚀 Flujo de Trabajo Profesional

Rutina de desarrollo eficiente:
  1. 📋 Planificar: Boceto en papel primero
  2. 📁 Organizar: Crear estructura de carpetas
  3. 🏗️ HTML primero: Estructura sin estilos
  4. 🎨 CSS después: Estilos progresivos
  5. ⚡ JavaScript al final: Interactividad
  6. 📱 Responsive: Adaptar a móviles
  7. 🔍 Validar: W3C Validator
  8. 🚀 Optimizar: Comprimir imágenes

✅ Validación del Código

Herramientas de validación online:
  • 🔍 HTML: validator.w3.org
  • 🎨 CSS: jigsaw.w3.org/css-validator
  • ⚡ JavaScript: jshint.com
  • 🚀 Velocidad: pagespeed.web.dev

🎯 Checklist Final del Proyecto

Antes de entregar un proyecto:
  • ☐ Todos los archivos tienen la extensión correcta
  • ☐ Codificación UTF-8 en todos los archivos
  • ☐ Sin errores en el validador W3C
  • ☐ Imágenes optimizadas (menos de 200KB c/u)
  • ☐ Enlaces funcionando correctamente
  • ☐ Responsive en móvil y desktop
  • ☐ Comentarios en el código
  • ☐ Carpetas organizadas
  • ☐ README con instrucciones
  • ☐ Backup en USB o nube

💡 Tips de Productividad

Trucos para ser más rápido:
  • 📌 Abre Notepad++ con "Ejecutar como administrador" para evitar problemas de permisos
  • 🔖 Usa marcadores (Ctrl+F2) para saltar entre secciones
  • 📋 Mantén un archivo "snippets.txt" con código reutilizable
  • 🎨 Usa un segundo monitor para el navegador
  • ⏰ Programa pausas cada 45 minutos
  • 💾 Configura OneDrive/Google Drive para backup automático

🔒 Seguridad Básica

Nunca incluyas en tu código:
  • ❌ Contraseñas reales
  • ❌ Datos personales sensibles
  • ❌ Claves API privadas
  • ❌ Información de tarjetas de crédito
  • ❌ Rutas absolutas de tu PC
🆘 Recursos y Solución de Problemas ▼

🔧 Solución Rápida de Problemas

El navegador no muestra mis cambios:
  1. Verificar que guardaste el archivo (no hay punto rojo)
  2. Limpiar caché: Ctrl+Shift+Supr
  3. Forzar recarga: Ctrl+F5
  4. Verificar que editas el archivo correcto
  5. Comprobar la ruta del archivo en el navegador
Los acentos se ven mal (ñ, á, etc):
  1. Codificación → Codificar en UTF-8
  2. Añadir en HTML: <meta charset="UTF-8">
  3. Guardar el archivo de nuevo
  4. Si persiste: copiar contenido, crear archivo nuevo en UTF-8
Notepad++ no reconoce el tipo de archivo:
  1. Lenguaje → H → HTML (para .html)
  2. Lenguaje → C → CSS (para .css)
  3. Lenguaje → J → JavaScript (para .js)
  4. Guardar con la extensión correcta

📚 Recursos de Aprendizaje

📖 Documentación

MDN Web Docs: developer.mozilla.org

W3Schools: w3schools.com

🎥 Video Tutoriales

YouTube: "Notepad++ para desarrollo web"

Udemy: Cursos de HTML/CSS

💬 Comunidades

Stack Overflow: Para dudas específicas

Reddit: r/webdev

🛠️ Herramientas

CodePen: Practicar online

Can I Use: Compatibilidad navegadores

🌐 Herramientas Online Complementarias

Para desarrollo web:
  • 🎨 ColorHunt.co: Paletas de colores
  • 🖼️ TinyPNG.com: Comprimir imágenes
  • 📝 Google Fonts: Fuentes gratuitas
  • 🎭 FontAwesome: Iconos
  • 📐 Flexbox Froggy: Aprender Flexbox jugando
  • 🎮 Grid Garden: Aprender CSS Grid jugando
  • ✅ W3C Validator: Validar HTML
  • 🚀 GTmetrix: Analizar velocidad

❓ Preguntas Frecuentes

P: ¿Notepad++ es mejor que VS Code?

R: Notepad++ es más ligero y simple, ideal para principiantes y PCs con pocos recursos. VS Code es más potente pero requiere más recursos.

P: ¿Cómo hago vista previa como en otros editores?

R: Instala el plugin "Preview HTML" o simplemente abre el archivo HTML en el navegador y refresca con F5.

P: ¿Por qué mi código no tiene colores?

R: Ve a Lenguaje y selecciona el tipo correcto (HTML, CSS, JavaScript) o guarda con la extensión correcta.

P: ¿Cómo recupero un archivo que cerré sin guardar?

R: Configuración → Preferencias → Copia de seguridad → Ver carpeta de respaldo

💪 Mensaje Final

¡No te rindas!

Notepad++ puede parecer básico, pero es una excelente herramienta para aprender. Muchos programadores profesionales empezaron con él. Lo importante no es la herramienta, sino entender los conceptos.

Ventajas de empezar con Notepad++:

  • ✅ Aprendes a escribir código limpio (sin ayudas excesivas)
  • ✅ Entiendes mejor los errores
  • ✅ No dependes de internet
  • ✅ Desarrollas buenas prácticas desde el inicio

¡Sigue practicando y creando! 🚀