lunes, 14 de diciembre de 2015

Proceso de ejecución y carga de una página web

Cuando empiezas en el mundo de la programación web, te das cuenta de que muchas veces las páginas son construidas con una mezcla de varios lenguajes. Si vienes del mundo de la programación estructurada o programación de aplicaciones de escritorio, suele ser confuso pues por lo general usas un solo lenguaje en todo tu proyecto.

Por lo general estos lenguajes suelen ser PHP, Javascript y HTML. Es cierto que existen otros, pero estos 3 son los de uso más común. Generalmente los otros lenguajes que se usan en el desarrollo de páginas web cubren un nicho de uno de estos 3 lenguajes.

¿Por que es necesario usar tantos lenguajes? Bueno básicamente, por la arquitectura de desarrollo web, y por que cada lenguaje cumple una función diferente muy específica. Además recuerda que la programación web es una disciplina que se ha ido desarrollando poco a poco. Las páginas que tenemos hoy en día, son totalmente diferentes de las que se tenían en el inicio del Internet, allá por inicios de los 90. Al principio todo era HTML, pero con el desarrollo de nuevas tecnologías y la aparición de nuevos estándares, se fueron agregando lenguajes. Como un castillo que se va construyendo una pieza a la vez. Todo esto con el fin de hacer las páginas más potentes y dinámicas, con nuevas funcionalidades. Sin embargo, no es tan complicado como se oye.

Al verlos todos estos lenguajes juntos nos viene a la mente una pregunta ¿en qué orden se ejecutan?
Si llevas algo de tiempo en la programación web, de seguro te has dado cuenta que la ejecución no es lineal, no se ejecutará el código en el orden en que fue escrito.

La secuencia de ejecución de estos lenguajes, está íntimamente ligada al concepto de carga y ejecución de una página Web.
Por ello en base a estos 3, explicaré como funcionan y logran que funcione una página web.

1.-Lenguaje del lado del Servidor. PHP

PHP es un lenguaje que se ejecuta en el servidor (la máquina que genera la página web). Alternativas a él son ASP o JSP. PHP es un lenguaje de propósito general, muy enfocado al desarrollo web. El servidor que genera la página, debe ser capaz de entender el lenguaje PHP.

PHP es especialmente útil para comunicarse con la base de datos del servidor, la cual suele ser mySQL. PHP es usado para crear páginas con contenido enriquecido, como por ejemplo el extraído de una base de datos.

Recuerda que cuando cargas una página web, todo comienza en el servidor que contiene dicha página. Esta máquina es la que se encarga de crear y proporcionarle a tu máquina la página web. Aquí es donde entra PHP.

Se puede decir que todo el proceso comienza con PHP. PHP toma la información que deseamos de una base de datos, o simplemente construye una página de acuerdo a ciertos parámetros y variables. Es decir, PHP genera código HTML y Javascript. Generalmente PHP es usado como un generador de código. Una vez que ha creado la página , PHP envía el resultado al navegador y su trabajo termina.

Nuestros navegadores no entienden el código PHP, este es ejecutado en el servidor. Lo que nuestros navegadores entienden son HTML y Javascript, que pueden haber sido generados con PHP.  Por eso no se entrega código PHP a tu navegador, si fuera así todo el código PHP  sería ignorado. Aparecería como código fuente. Por eso PHP debe haber producido un resultado legible para el navegador.

Para mas información léase el siguiente enlace:

http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=607:generar-html-usando-lenguaje-php-ejemplos-sencillos-que-estudiar-para-ser-programador-web-cu00733b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192


2.- Lenguaje HTML

HTML es la base de la web. Es un lenguaje de marcado. Indica como está construida una página web, que elementos contiene, cuales son hipervínculos, imágenes, objetos, etc; y como están organizados. Si quieres construir una página web sencilla, estática, solamente necesitarás HTML.

Una página web estática es aquella que nunca cambia, no responde a las acciones que hacemos, ni su contenido es actualizado dinámicamente. Será el mismo contenido siempre. Por el contrario una página web dinámica, es aquella que cambia. No siempre se presenta la misma versión de la página al usuario. Puede cambiar de acuerdo a parámetros de entrada, o diferentes variables. Incluso puede interactuar con el usuario.

Todos los navegadores entienden HTML, aunque cada uno da soporte diferente a los estándares y características de las diversas versiones de HTML.

Aún si procesaste antes tu página con PHP, al final lo que verás siempre en el navegador es producto de HTML. El código HTML  puedes escribirlo directamente, mezclado con código PHP o generarlo con PHP. Al cargar el código HTML en tu navegador se crea la página en tu pantalla.

3.- Lenguaje de Script del Navegador. JavaScript.

Supongamos que quieres crear una web dinámica. Un primer paso es usar PHP. Cada vez que saltes entre páginas, dependiendo a parámetros que hayas dado, o información contenida en la base de datos, PHP podrá construir una versión diferente de la misma página. 

Pero supongamos que quieres algo más. Quieres que la misma página responda a eventos que tu realizas mientras estás en ella, que se comporte como un programa de propósito general. Un evento es una acción que el usuario realiza en la interfaz, puede ser la pulsación de una tecla, el oprimir un botón, el click secundario del ratón, etc. También lo son  las acciones de los objetos de la interfaz gráfica (load, close), como lo son las ventanas, Si has programado en Visual Basic, estarás muy familiarizado con el manejo de eventos

Existe un lenguaje estándar para crear páginas web dinámicas, que respondan a eventos. Es JavaScript, todo los navegadores lo entienden. Existen alternativas como Dart y TypeScript.

Con Javascript puedes manejar todos los eventos y hacer que tu página web actúe de una forma dinámica. Puedes esperar a que el usuario pulse una tecla, apriete un botón, arrastre el mouse; y actuar en consecuencia. Te permite manipular directamente los elementos HTML y modificar su estado, forma, color, posición y diversas propiedades.

El código Javascript, va embebido dentro de HTML. Actúa por lo general cuando se ejecuta cierto evento.

Por supuesto, si generaste tu página con PHP, este te permite a su vez generar código JavaScript, que es algo que el navegador entiende junto con HTML. Al final, en tiempo de ejecución, el usuario interactúa directamente solo con el código escrito en JavaScript. Digamos que una vez que HTML terminó de crear la página, le cede a JavaScript el mando; y Javascript interactuara con el usuario hasta que este cierre la página. 

Una página web puede estar escrita solo en HMTL; usando PHP y HTML; usando HTML y JavaScript, o combinando los 3.

Con estas 3 herramientas, podemos lograr crear una página web realmente poderosa. Sin embargo, hasta aquí hay un pequeño inconveniente. ¿No lo ves?

Bueno digamos que toma un tiempo entender el "orden de ejecución" de una página web. Mas por que las en webs modernas se suelen mezclar los 3 lenguajes a diestra y siniestra. Y lo primero que nunca debes olvidar, es que el código no se ejecutará en el orden en que está escrito, como si fuera programación estructurada, más bien sigue el curso descrito arriba.

Tomando en cuenta este orden de ejecución, surge un pequeño inconveniente. Si notas, la comunicación con la base de datos del servidor...esta en PHP. Se ejecuta en el servidor que contiene la BD y solo mediante código PHP, y todo eso se hace antes de cargar la página en tu navegador. Es decir JavaScript es todo lo bonito y dinámico que quieras, pero no puede comunicarse con la base de datos. Nuestra web ya no es tan dinámica ¿no es cierto?

Si yo le pido a mi web ciertos datos de mi base de datos, usando JavaScript, este no puede dármelos. De esa manera, no puedo actualizar dinámicamente los elementos de mi web, al menos mediante la Base de Datos.Una opción, sería que llamara una nueva página, de acuerdo a esos parámetros, y se haría todo el proceso de nuevo, empezando por crear la nueva página con PHP en base a la consulta. Es  un resultado que funciona, pero ya no parecería un programa de escritorio de propósito general. Fácilmente podría implementarlo con una serie de páginas. Cada que yo solicite algo a la base de datos, Javascript mandaría llamar una nueva página que mediante PHP hace el trabajo. Esto implicaría estar cargando nuevas páginas constantemente.

Pero ¿y si yo quisiera que todo el trabajo se hiciera en una sola página? Que fuera una página dinámica que me trajera resultados de la base de datos y se refrescara en consecuencia, sin necesidad de cargar una nueva página. Bueno, no puedo alterar el proceso de carga antes descrito. Pero si existe una poderosa herramienta para comunicar JavaScript y PHP, que permite realizar este truco. Se llama AJAX.

4.- AJAX

AJAX significa Asynchronus JavaScript And XML. No es un lenguaje de programación sino una herramienta para comunicar JavaScript y PHP, es decir realizar peticiones a tu servidor, sin necesidad de recargar la página. Digamos que permite a JavaScript enviar un mensaje a un script de PHP, el cual se ejecutará en el servidor, sin interferir con la ejecución de la página, y al final enviará una respuesta.

Ya sabemos que por lo general, JavaScript y PHP no viven juntos. Uno se ejecuta antes del otro, y uno vive en el servidor web, y el otro en tu navegador.

Pero usando AJAX, pueden comunicarse y convivir. Imaginemos que pides información de tu base de datos. JavaScript, mediante AJAX, invoca un script de PHP hecho para realizar dicha consulta. Mientras la página sigue con su ejecución normal, JavaScript sigue respondiendo a los eventos y te permite seguir interactuando. Digamos que el script de PHP termina, entonces te envía una bonita respuesta, en forma de string. Cuando recibes esta respuesta, el script de PHP ya ha terminado su ejecución. JavaScript, mientras seguía en ejecución, permaneció escuchando la petición AJAX, hasta que ahora recibe su respuesta.

La respuesta que recibes vía AJAX de PHP es siempre un string, pero este puede ir formateado como archivo JSON o XML, o ser un simple "hola".

JavaScript debe saber interpretar  esa respuesta, y en base a ella, presentartela en el navegador. Por ejemplo puede presentarte una bonita tabla, con el contenido de tu base de datos.
Y así ¡vuala! Una página web completamente dinámica, gracias a AJAX.
Para mas información, lee este enlace.



Finalmente te dejo un enlace que resume un poco que son páginas estáticas y dinámicas y ue lenguajes se utilizan en el desarrollo web:

https://gmake.wordpress.com/2011/12/10/que-debo-saber-para-ser-disenadorprogramador-web/


Resumiendo un poco, el proceso de carga y ejecución sería así:

1.-  Se envía la solicictud al servidor. Este la recibe y comienza el proceso de construir la página web. Si existe código PHP, se ejecuta en este momento, se hacen todas las consultas a la Base de Datos. El resultado es una página con HTML y tal vez JavaScript.

2.- Tu navegador recibe la página, interpreta y usa el HTML para construirla. La tienes en pantalla.

3.- Mientras interactúas con la página, todo es procesado por Javascript. Interactúara contigo respondiendo a tus eventos, hasta que cierres la página.

4.- Si necesitas una consulta a la BD, para no cargar otra página, se puede utilizar la tecnología AJAX que permite a JavaScript mandar peticiones a scripts de PHP. Javascript recibe como respuesta cadenas de texto, y en base a la respuesta puede dibujar nuevos elementos de la interfaz gráfica o cambiarlos. Tienes una página interactiva.






No hay comentarios.:

Publicar un comentario