TUTORIAL

INSTALACION DE XAMPP Y VISUAL STUDIO CODE

JONATHAN ARIAS HERNANDEZ

APRENDIZ SENA

DESARROLLO WEB CON PHP

FICHA: 21730185
 INSTALACIÓN XAMPP Y SUBLIME TEXT | 2

INTRODUCCIÓN

uando pensamos en el término “Desarrollo Web”, indiscutiblemente

C debemos pensar en las herramientas que un desarrollador tendrá que utilizar

para realizar la creación de sus proyectos. En nuestro caso, estaremos
desarrollando para la web, es decir que vamos a requerir de un servidor web quien
será el intérprete de nuestro código fuente, y vamos a requerir de un editor de
código.

Cuando usamos el término “Servidor Web”, nos estamos refiriendo a un Hosting, el

cual puede ser online o local, la mayoría de desarrolladores cuando se encuentran
en la segunda fase de la creación de un sitio o aplicación web, “Fase Diseño y
Desarrollo”, suelen utilizar programas que simulan un servidor web, en este caso al
estar instalados en el ordenador del desarrollador, se les denomina servidor web
local, actualmente en la web podemos encontrar varias aplicaciones que nos sirve
como “Local Host” o Servidores web locales, entre las 5 más reconocidas están,
XAMPP y WAMPP Server, BitNami, MAMP, EasyPHP, entre muchas más.

Adicionalmente a un Servidor Web local, como desarrolladores vamos a requerir un

“Editor de Código”, en el cual vamos nosotros a escribir el código fuente de nuestros
proyectos de programación. Si bien es cierto que el código podemos escribirlo
desde el mismo Bloc de notas que trae instalado y configurado el sistema operativo
de nuestra PC, hoy en día existen ya muchos editores de código los cuales nos
facilitan la vida a la hora de escribir código, permitiéndonos identificar fácilmente las
líneas donde quizás tengamos errores de sintaxis, algunos nos ofrecen plugins para
identificar nuestras etiquetas escritas en el código y ofrecernos una mejor
experiencia de usuario durante la escritura de código. Entre los 5 editores de código
más populares podemos encontrar, a Sublime Text, Visual Studio Code, Aptana
Studio, Notepad++, Brackets.

En el desarrollo de éste tutorial, explicaré paso a paso como es la instalación y

configuración de XAMPP como nuestro servidor web local y Sublime Text como
nuestro editor de código por preferencia en un sistema operativo Windows 10
Professional, incluiré algunos Plugins que nos servirán de utilidad en nuestro editor
de código para hacernos más fácil la vida a la hora de escribir código fuente.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 3

DESCARGANDO XAMPP
Para comenzar nuestro proceso de instalación de las herramientas necesarias,
vamos a proceder a descargar los ejecutables desde sus sitios oficiales para ello
vamos a seguir los pasos que describo a continuación.
1. Abrimos el navegador web de nuestra preferencia, en este caso usaré
Google Chrome.

Imagen 1.

2. En la barra de búsqueda de Google, vamos a escribir XAMPP y presionamos

la tecla “Enter” para buscar.

Imagen 2.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 4

En los resultados de búsqueda vamos a elegir de la primera página que

aparece, la opción “Descargar”, para acceder directamente a la página de
descargas del sitio oficial.

Imagen 3.

3. Estando en la página de descarga, es importante conocer la arquitectura en

la que se encuentra instalado nuestro sistema (En nuestro caso Windows
10), recordar que existen instalaciones de sistemas operativos que corren a
x32 Bits (x86), y x64 Bits (x64). Si no tenemos conocimiento, sobre cómo se
encuentra configurado nuestro sistema, podemos, revisarlo de forma muy
sencilla siguiendo estos pasos.

Imagen 4.

a. Abrimos una carpeta cualquiera en nuestro explorador de Windows.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 5

b. Posteriormente debemos ubicar el apartado de “Este Equipo” y hacer clic

derecho o clic secundario sobre el mismo para desplegar el menú
contextual del cual debemos elegir la opción de “Propiedades”. (Ver
Imagen 4).

Imagen 5.

c. En la ventana que nos abre, nos muestra la información de nuestro

sistema operativo y los recursos técnicos en este caso Procesador y
Memoria RAM que tiene instalada nuestro PC. (Ver Imagen 5).

Nosotros nos centraremos en la arquitectura en la que fue instalado

nuestro sistema operativo, para entonces debemos descargar XAMPP
para Windows que corren con arquitectura a x64. (Ver Imagen 6).

Imagen 6.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 6

4. Recordar que siempre debemos descargar la última versión publicada en el

sitio web. Al pulsar el botón de descarga se nos abre una nueva pestaña en
el navegador y adicionalmente, un cuadro de diálogo donde debemos elegir
la ubicación donde descargaremos XAMPP y el nombre del ejecutable.
Realizado esto, presionamos el botón Guardar. (Ver Imagen 7).

Imagen 7.

INSTALACIÓN XAMPP

1. Finalizada la descarga del archivo .EXE del XAMPP, ingresamos a la carpeta

donde lo descargamos, al archivo presionamos Clic derecho o Clic
Secundario para ejecutarlo con privilegios de administrador. (Ver Imagen 8).

Imagen 8.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 7

a. Si tienes un Software antivirus activo, puede que la instalación corra un

poco lenta, XAMPP te pregunta si deseas continuar, a lo que debes dar
en la opción YES.
(Ver Imagen 9).

Imagen 9.

2.Al aparecer la ventana de instalación

de XAMPP, no da la bienvenida y solo
debemos darle clic al botón NEXT
(Siguiente), para continuar con la
instalación. (Ver Imagen 10)

Imagen 10.

3. En el siguiente cuadro de diálogo

de la instalación, debemos elegir
los servicios de XAMPP a instalar,
se recomienda no realizar
modificaciones en esta ventana y
dar clic en NEXT (Siguiente), para
continuar con la instalación. (Ver
Imagen 11)
Imagen 11.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 8

4. A continuación nos muestra la ruta donde será instalado nuestro servidor web
local XAMPP, es recomendable no modificar la ruta de instalación y dar clic
en NEXT (Siguiente), para continuar. (Ver Imagen 12)

Imagen 12.

5. Lo siguiente es elegir el idioma en que será instalado XAMPP Control. El

idioma español no viene como opción así que dejamos tal cual y damos clic
en NEXT (Siguiente), para continuar con la instalación. (Ver Imagen 13).

Imagen 13.

6. En el siguiente cuadro de diálogo, solo debemos presionar en NEXT

(Siguiente), para continuar con la instalación. (Ver Imagen 14).

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 9

Imagen 14.

7. Finalizada la configuración de la instalación, debemos dar clic en NEXT

(Siguiente), para que el software comience a instalarse en nuestro equipo,
realizado esto, solo es esperar a que XAMPP termine la instalación. (Ver
Imagen 15 y 16).

Imagen 16.

Imagen 15.

8. Finalizada la instalación, dejamos marcada la casilla para iniciar de una vez

el Panel de control de XAMPP una vez presionemos el botón de FINISH
(Finalizar). Realizaremos unas configuraciones básicas para dejar
funcionando de manera óptima nuestro XAMPP. (Ver Imagen 17).

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 10

Imagen 17.

CONFIGURACIÓN XAMPP
Una vez hemos realizado la instalación de nuestro servidor web local, lo que nos
falta es realizar una pequeña configuración e identificar la carpeta donde estaremos
guardando nuestros proyectos de desarrollo web para que sean interpretados por
nuestro servidor web local, y de tal forma poder visualizarlos mediante un navegador
web.

Imagen 18.

En nuestro panel de control, podemos observar los diferentes servicios o

aplicaciones que podemos usar con XAMPP, en nuestro caso, y para este curso,
“Desarrollo Web con PHP”, vamos a utilizar los dos primeros servicios, Apache
que interpretará nuestro código PHP y MySQL el cual usaremos para trabajar las
bases de datos a las cuales nos conectaremos mediante el código fuente de PHP.
(Ver Imagen 18)

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 11

Para realizar la configuración del inicio automático de éstas dos aplicaciones, tan
pronto se abra el panel control debemos seguir los siguientes pasos.
1. Realizar clic en el botón CONFIG (Configuraciones), lo cual nos abre un
cuadro de diálogo con las propiedades por defecto de XAMPP.

Imagen 19.

2. Los cambios que realizaremos son: Señalar con un una palomita ✓ los
servicios que queremos se inicien al abrir el panel de control, en nuestro
caso, Apache y MySQL. Adicionalmente, podemos elegir el editor de código
de preferencia que tengamos instalado, así como nuestro navegador favorito
para usar de manera predeterminada con XAMPP, en mi caso seleccionaré
como editor de código a Sublime Text y navegador Google Chrome. Para
seleccionar estos últimos debemos navegar por las carpetas de instalación y
seleccionar los archivos .EXE de cada programa, por lo regular las rutas de
los programas son los siguientes.

Editor Sublime Text:

C:\Program Files\Sublime Text 3\sublime_text.exe

Navegador Google Chrome:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Realizadas las configuraciones, nos debe quedar la ventana de configuración

de XAMPP de la siguiente forma. (Ver Imagen 20).

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 12

Imagen 20.

3. Lo siguiente es guardar la configuración, haciendo clic en SAVE (Guardar).

Cerramos nuestro panel de control y al iniciarlo nuevamente, podemos ver
como los servicios de Apache y MySQL, se inician de manera automática,
quedando listos para ser utilizados. (Ver Imagen 21).

NOTA: Si por alguna razón al cerrar el panel de control, no encuentran el

ícono para ejecutarlo nuevamente, lo puedes encontrar en la siguiente ruta.
C:\xampp\ xampp-control.exe

Imagen 21.

4. Lo siguiente que debemos hacer es comprobar que los servicios se iniciaron

de manera correcta, para ello tenemos dos opciones, (1) es presionando el
botón ADMIN de cada servicio lo cual nos abrirá el navegador web con
página principal de XAMPP o de PHPMYADMIN, donde administraremos

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 13

nuestras bases de datos MYSQL (Ver Imagen 21). (2) La siguiente forma es
abriendo nuestro navegador y en la barra de direcciones poner
http://localhost/ para acceder a la página principal de XAMPP o
http://localhost/phpmyadmin/ para acceder a la administración de las bases
de datos MYSQL. (Ver Imagen 22 y 23).

Imagen 22.

Imagen 23.

Una vez que al abrir nuestro navegador web y nos aparece las paginas tal cual como
las imágenes anteriores, entonces nos encontramos listos para comenzar a poner
proyectos en nuestro servidor web local.
Para alojar nuestros proyectos web y que los mismos se puedan ver mediante el
navegador, debemos poner la carpeta que contiene nuestro proyecto en el siguiente
directorio:
C:\xampp\htdocs
IMPORTANTE: Recordar que el nombre de la carpeta que contiene nuestro
proyecto, no debe llevar símbolos ni espacios, ya que el mismo conforma la ruta o
“URL” mediante el cual accedemos por el navegador web. Si el mismo está
compuesto por dos o más palabras, separar las palabras con “-” Guion y no con
espacio.
Ejemplo: Mi proyecto se llama “aplicativo web”, la forma correcta de llamar mi
carpeta para ponerla en mi servidor local es “aplicativo-web”.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 14

De esta manera logramos que la URL de nuestro sitio sea la siguiente

http://localhost/aplicativo-web/
Caso contrario si ponemos el nombre del proyecto con espacios entre las palabras,
entonces la URL quedaría de la siguiente forma:
http://localhost/aplicativo%20web/ esto, debido a que la traducción del espacio
en una URL es “%20”, imagina si tienes un proyecto que en su nombre tiene 5 o
más espacios entre palabras, será una URL muy difícil de memorizar, por ende no
es recomendable usar espacios en el nombre de nuestro proyecto. (Ver Imagen 24
y 25).

Imagen 24.

Imagen 25.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 15

DESCARGA SUBLIME TEXT

S
ublime Text, es uno de los muchos editores de código que podemos
encontrar en la web, por la experiencia de usuario que ofrece al desarrollador,
en mi caso es uno de mis favoritos, pues en él puedo escribir código para
muchas tecnologías y me ofrece una gran variedad de plugins que me hacen la vida
más fácil a la hora de codificar. A continuación, enseñaré un paso a paso acerca de
cómo descargar e instalar Sublime Text en su última versión.
Cabe aclarar, que éste software, contiene una versión de pago y una gratuita, en
nuestro caso, instalaremos y usaremos aquella versión que es Gratuita ya que de
momento no requerimos la versión de pago.
Para descargar Sublime text en su última versión podemos buscarla por su nombre
“Sublime Text” en un buscador web como Google, o sencillamente acceder de
forma directa con el link que te proporciono a continuación:
https://www.sublimetext.com/ luego de acceder, dar clic en el botón “Download”
(Descargar). (Ver Imagen 1).

Imagen 1.

Al día, de la creación de éste tutorial, nos encontramos en la versión 3 de Sublime

Text, es posible que al pasar el tiempo, ya no encuentres la misma versión 3 sino
una posterior debido a que los programas mantienen un periodo de actualización
para ser competentes en el mundo actual. Quizás la versión cambie, pero es posible
que la forma de instalación se mantenga en el tiempo.
Entrando en la página de descargas de Sublime Text, al igual debemos tener
presente el sistema operativo instalado en nuestro computador y la arquitectura con
la cual está trabajando, recordar que puede ser x64 o x86, si tienes dudas, puedes
seguir los pasos descritos en la página 5 de este tutorial.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 16

Para nuestro caso, descargaremos la versión que viene para Windows a x64 Bit.
(Ver Imagen 2).

Imagen 2.

En el cuadro de diálogo que nos aparece, vamos a seleccionar la carpeta donde

guardaremos el archivo ejecutable, para su posterior instalación, así como
pondremos nombre al archivo que estamos descargando, realizado esto, hacemos
clic en el botón GUARDAR. (Ver Imagen 3).

Imagen 3.

Descargado el archivo, debemos abrir la carpeta donde lo dejamos almacenado en

la descarga, y procedemos a instalar.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 17

INSTALACIÓN SUBLIME TEXT

Siempre que vamos a realizar una instalación de un programa, es recomendable
hacerlo con privilegios de administrador, esto con el fin, en caso que le programa lo
requiera durante la instalación, no perder el avance si quizás lo iniciamos de forma
normal.
Para ejecutar la instalación con privilegios de administrador, se realiza clic derecho
o clic secundario sobre el archivo .EXE, y se elige la opción “Ejecutar del menú
contextual que aparece”. (Ver Imagen 4).

Imagen 4.

En el siguiente cuadro de diálogo,

el programa nos pide seleccionar
la ruta de la carpeta donde
queremos instalar Sublime Text 3,
por defecto esta ruta es
C:\Program Files\Sublime Text 3
es recomendable no modificarla y
dejar la que viene por defecto,
hacemos clic en NEXT (Siguiente),
para continuar con el proceso de
instalación. (Ver Imagen 5)

Imagen 5.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 18

En el siguiente punto, nos pide seleccionar las tareas adicionales que se realizaran
mientras se realiza la instalación de Sublime Text, como por ejemplo añadir Sublime
Text al explorador del menú contextual, es decir que cuando seleccione un archivo
y al darle clic derecho o clic secundario, el menú contextual que aparece nos
muestre la opción de Abrir con Sublime Text, para esto, marcamos la casilla que
tenemos en el cuadro de diálogo en la configuración para la instalación y después
hacemos clic en NEXT (Siguiente) para continuar. (Ver Imagen 6).

Imagen 6.

Realizado el paso anterior, en programa nos muestra ya el resumen de la

configuración que hemos realizado para la instalación, solo debemos dar clic en
INSTALL para comenzar a instalar Sublime Text. (Ver Imagen 7).

Imagen 7.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 19

El proceso de instalación en realidad es muy rápido, esperamos a que finalice la

instalación y para terminar hacemos clic en el botón FINISH (Finalizar). De esta
manera ya tendremos instalado nuestro editor de código Sublime Text, lo siguiente
después de la instalación será realizar algunas configuraciones o quizás
personalización para sentirnos más a gusto editando nuestro código fuente. (Ver
Imagen 8 y 9).

Imagen 8. Imagen 9.

PERSONALIZACIÓN DE SUBLIME TEXT

Tener una buena experiencia de usuario a la hora de utilizar un software, cosa u

objeto es algo que a todos los seres humanos nos encanta y ¿Cómo no hacerlo
cuando somos desarrolladores y la mayor parte del tiempo la pasaremos frente a
nuestro computador o laptop editando código fuente?, pensando en esto, Sublime
Text, nos ofrece una gran variedad de Plugins, que nos hacen la vida más fácil a la
hora de escribir código.
Para no hacer más largo este tutorial, me apoyo y los invito a ver un vídeo del
instructor Juan Fernando Urrego director de “Tutoriales a tu alcance” quien nos
enseñará algunos trucos y plugins que podemos usar para personalizar nuestro
Sublime Text.

Mira el vídeo en este link:

https://youtu.be/F6XadtOjIek

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 20

CONCLUSIÓN

P
ara concluir nuestro tutorial sobre la instalación de estas dos herramientas
que usaremos para el desarrollo web, resta decir que editores de código
podrás usar el que desees, a medida que los vas usando y vas conociendo
sus funcionalidades, vas eligiendo cuál es tu editor de código por preferencia. En mi
caso elijo Sublime Text, entre los muchos editores de código que existen, y como lo
mencionaba en la página 15 de éste tutorial, Sublime Text tiene su versión de Pago
y su versión Gratuita, no existen diferencia entre las funciones, lo que sucede al
usar la versión Gratis, es que mientras escribes código o al abrir el editor de código,
predomina una ventana emergente donde nos invita a adquirir la versión de pago.
Es de tu elección, cual versión utilizar.

JONATHAN ARIAS HERNANDEZ

 INSTALACIÓN XAMPP Y SUBLIME TEXT | 21

Contenido
INTRODUCCIÓN ............................................................................................................................... 2
DESCARGANDO XAMPP................................................................................................................... 3
INSTALACIÓN XAMPP ...................................................................................................................... 6
CONFIGURACIÓN XAMPP .............................................................................................................. 10
DESCARGA SUBLIME TEXT ............................................................................................................. 15
INSTALACIÓN SUBLIME TEXT ........................................................................................................ 17
PERSONALIZACIÓN DE SUBLIME TEXT .......................................................................................... 19
CONCLUSIÓN ................................................................................................................................. 20

JONATHAN ARIAS HERNANDEZ