XAMPP: Primeros pasos

Bueno, como les mencione hace poco, en esta ocasión vamos a aplicar los conocimientos que adquirieron en el anterior tutorial (HTML) para familiarizarnos con el entorno de un servidor Web Simulado; existen muchas herramientas separadas que cumplen con las funciones necesarias... pero como apenas algunos estamos aprendiendo, en Internet se encuentran algunos "Paquetes" para principiantes, los cuales contienen las aplicaciones mas utilizadas y se instalan-configuran de manera automática.  El dia de hoy vamos a trabajar con XAMPP y otra herramientas.

¿Que vamos a necesitar?

*  Un PC (¬.¬)U

*  Tener un sentido de organización racionalmente aceptable (es necesario o vamos a terminar con muchas copias de lo mismo)

*  Windows XP de Preferencia (Vista da algunos problemas y Win7 pues... lo dejo a su criterio, es solo para evitar posibles errores de los cuales yo no pueda darles soporte)

*  Tener conocimientos básicos de HTML (AQUI) y si desean algo de comodidad, conocer el entorno de Macromedia Dreamweaver (Version 8 o MX recomendado, las nuevas de Adobe, son muy cargadas para principiantes) y Photoshop
*  Aunque suene tonto, es necesario decirlo:  Deben estar familiarizados con el entorno Windows, saber en donde están ubicados los archivos que trabajaremos y aquellos que se instalaron; para asi llegar rápidamente a carpetas, descomprimir archivos en formato WinRAR y también un poco de conocimiento en ingles no hace daño.
* Jdownloader nos va a ayudar en las descargas

¿Que necesitamos descargar? (Nota: Las descargas opcionales no afectan el desempeño del aprendizaje, pero permiten un control mayor en nuestro trabajo; como son opcionales, no voy a profundizar en su manejo mas que lo necesario en Dreamweaver para enlazarlo con Apache)

* XAMPP 1.7.3 Español

* Bloc de notas o cualquier editor de texto, entre mas sencillo mejor
* OPCIONAL: Suite Macromedia 8 (Contiene Dreamweaver, Flash, Fireworks y su respectiva 'Licencia')
* OPCIONAL: Dreamweaver 8 Por si no tienen una conexión rápida y solo desean trabajar esta aplicación
* OPCIONAL: Adobe Photoshop CS2, Traduccion a Español y 'Licencia' Con este programa podrán divertirse editando sus imágenes al gusto

Antes de iniciar, un poco de referencia:

¿Que es xampp?  XAMPP es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor Web Apache y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia GNU y actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows, GNU/Linux, Solaris, y MacOS X..

En pocas palabras:

* XAMPP: Contiene las tres aplicaciones que mas se usan en las practicas

* Apache: Emula un directorio de nuestro equipo como si fuera una dirección web, llamada 'localhost' (discutiremos eso mas adelante)

*  PhP:  Interprete de lenguaje para pagina web, de momento no es necesario ya que vamos a trabajar con HTML sencillo, pero mas adelante vamos a sacarle provecho

*  MySQL:  Sera el administrador de bases de datos (algunos en la universidad ya lo habrán conocido,  -Oracle- ó su hermano de microsoft -SQL Server-) De momento tampoco lo usaremos pero ya mejor dejarlo disponible para mas adelante

NOTA: Si alguno ya esta trabajando con Visual Studio, sea 6.0, 2005 o 2008-2010, no hay problemas de conflictos, a menos que tengan Vista o Win7, en cuyo caso de momento no conozco soluciones, algún inconveniente sírvanse de colocar aquí sus comentarios o de revisar ESTE enlace

Ahora a lo que venimos:

INSTALACION XAMPP:

*  Primero que todo, ya descargaron XAMPP? vale
*  Ejecutemos la aplicación.
*  Primera ventana: Clic en Install (Mas adelante se vera todo en español, tranquilos)
*  Tardara un poco... paciencia; mientras es un buen momento para ir preparándonos; abramos una ventana de navegador (IE, Firefox) y otra de explorador de archivos, veremos que se creo una carpeta en la ruta 'C:\xampp\'

*  Ya que termino de extraer, se abrira una ventana de comandos (D.O.S), responderemos las preguntas:
    1. Should I add shortcuts to the startmenu/desktop? (y/n): y
    2. Should i locate the patch correctly? (y/n): y
    3. Should i make a portable XAMPP? (y/n): n
    4. XAMPP Installed correctly, pres return (damos enter)
    5. I have set the timezone in 'php.ini' and 'my.ini' to "America/New_York" (Esta es automatica, reconoce la zona horaria del equipo, damos enter)
    6. Ahora saldrá una lista de opciones, en la cual escribiremos 'x' y luego enter

Felicidades!!! si todo marcho bien, tenemos instalado XAMPP, un acceso directo en escritorio y la carpeta en C.\xampp\

Ejecutemos el acceso directo, el del icono Naranja 'XAMPP Control panel' se debe ver asi:

A veces puede variar dependiendo del equipo... de ser así, lo primero que debemos hacer es detener los que estén activos (damos clic en todos los que digan 'Stop') y luego seleccionamos el Svc de los tres primeros, nos saldrá una confirmación, la cual aceptamos... entonces si procedemos a Iniciar ('Start') en orden: Apache, MySQL y Filezilla.

Bien, ahora tenemos instalados los tres servicios y están en ejecución, vamos a probar que apache este funcionando; en la ventana de explorador internet (IE, Firefox) escribimos simplemente 'localhost' (sin www, sin comillas), si todo marcha bien, saldrá una sencilla pagina con el logo de XAMPP y la selección de idioma; le ponemos español y luego saldra esto:

Apache funciona!!! entonces les voy a explicar la estructura que maneja:

La ruta 'c:\xampp\htdocs\' es la ruta que emula un servidor web, es la que llamamos en el navegador como 'localhost' y por defecto carga la pagina inicial del panel XAMPP.

Es en esta carpeta 'htdocs' donde vamos a colocar nuestros proyectos, de preferencia en una carpeta dentro de 'htdocs' para mantener el orden; en esta primera prueba, creamos una carpeta llamada 'hola', la cual quedara ubicada en 'c:\xampp\htdocs\hola'

Si ya tienen conocimientos en HTML, pueden colocar alguno de sus archivos en esta carpeta

Vamos a ejecutar el bloc de notas (o el editor de texto de su gusto, mas adelante colocare otro tutorial para dreamweaver) y dentro de el escribiremos este código:

<HTML>

  <HEAD>
    <TITLE>ejemplo hola mundo</TITLE>
  </HEAD>
  <BODY>
    <P>Hola Mundo</P>
  </BODY>
</HTML>

Ahora guardamos el documento como 'index.html' en la ruta 'c:\xampp\htdocs\hola'

Regresamos a nuestro navegador, en la barra de direcciones escribimos 'localhost/hola/index.html' O arrastramos el archivo al navegador, veremos el resultado de la prueba como una sencilla pagina web, con titulo y contenido.

Algunos dirán: 'Para que tanto enredo si antes de instalar XAMPP yo podia ver mis trabajos de la misma manera? pues haciendo esto, se conoce el funcionamiento de un servidor web, ya que cuando vayamos a subir paginas a un host real, se deben llevar a cabo ciertos procedimientos y dependiendo del servicio contratado, puede que incluso vuelvan a ver esta carpeta 'htdocs'

Bueno, con esto termino los pasos para instalar y probar XAMPP, espero les fuese de ayuda y recuerden que en proximas entregas dare informacion para conectar dreamweaver con apache y otras cosas mas

Alguna duda, pueden comentar