Blogs

servidor

  Te explico Internet y cómo se hacen las paginas Web

Publicidad Google

¿Qué es Internet, la tecnología cliente/servidor, qué diferencia a una pagina web estática de una dinámica? Aquí los fundamentos básicos explicados en forma sencilla para iniciarte en la programación sistema.

INTERNET

Internet es un conjunto descentralizado de redes de computadoras interconectadas. Las computadoras comunican entre sí enviando y recibiendo información digital. Se transmiten bloques de datos binarios que son decodificados en base a protocolos informáticos. El Internet esta basado en los protocolos TCP/IP, uniendo redes físicas heterogéneas en una red lógica de alcance mundial.

TCP/IP incluye varios protocolos que brindan diversos servicios, ARP para la resolución de direcciones, FTP para transferencia de archivos, HTTP para acceder a las paginas webs, POP y SMTP para correo electrónico y Telnet para acceder a equipos remotos.

HOSTING

Un hosting es un alojamiento web, es una computadora llamada servidor que corre un programa informático para establecer conexiones bidireccionales con otras computadoras clientes para transmitir las paginas webs que tiene almacenadas y correos electrónicos. Cuando lees paginas webs, tu computadora es el cliente, la computadora que difunde la web es el servidor.

Para desplegar tu web, lo primero que necesitas es un hosting en un servidor, usualmente es compartido, una misma computadora aloja los códigos fuentes de muchas webs, es la opción mas económica. Aunque puede ser de uso exclusivo, la computadora solo para ti, en cual caso hablamos de un servidor dedicado.

Un website son programas informáticos en HTML, CSS y Javascript que podrán ser visualizados en tu navegador Firefox, Chrome y otros. El código fuente de cualquier web puede ser visualizado en la mayoría de navegadores presionando las teclas Ctrl+U, abrirá otra ventana con las fuentes.

PAGINA WEB ESTÁTICA

Si tu pagina web es estática, es decir siempre se verá igual como por ejemplo una pagina que solo muestra un logo y una dirección de contacto, los archivos fuentes HTML guardados en el servidor se corresponden al código fuente que muestra tu navegador presionando Ctrl+U.

A continuación te describo conceptos básicos de programación en HTML, CSS y JavaScript. No es un curso exhaustivo, solo te presentamos la lógica sistemática para iniciarse en estos lenguajes, si ya estas familiarizado con la programación web o deseas pasar directamente a las explicaciones de la tecnología cliente/servidor en Internet puedes saltarte los ejemplos básicos de programación web.

HTML

El HTML es un lenguaje de programación para la elaboración de páginas web. Consiste en un conjunto de etiquetas que serán interpretadas por tu navegador. Es un lenguaje sencillo de aprender, las etiquetas o tags son normas de codificación. Te doy un ejemplo, el código fuente HTML de una web muy sencilla que muestra el texto “¡Hola Mundo!”:

<!-- Declaración de tipo de documento -->
<!DOCTYPE html>

<!-- Inicio del HTML -->
<html>

    <!-- Cabezera de la web -->
    <head>
        <meta charset="UTF-8">
        <title>Web Hola Mundo!</title>
    </head>

    <!-- Cuerpo de la web -->
    <body>
        ¡Hola Mundo!
    </body>

<!-- Fin del HTML -->
</html>

Ver pagina web resultante: http://www.algoritmo.fr/files/ejemplos/hola_mundo.html

Puedes añadir comentarios a tu código fuente HTML con la etiqueta <!-- Comentario -->, no será interpretado por el navegador.

Las mayoría de etiquetas HTML se abren y se cierran, para destacar un texto en negrita se usa la etiqueta:
<strong>Texto en negrita dentro de la etiqueta</strong> Texto normal fuera de la etiqueta

La sintaxis es la siguiente: <etiqueta> abre la etiqueta, y </etiqueta> lo cierra. La función de la etiqueta se aplica a lo que se encuentra en el interior. También hay etiquetas que no se cierran, para incluir una imagen por ejemplo <img src="url_de_la_imagen" />.

Las etiquetas HTML se imbrican en forma jerárquica, por ejemplo:

<div> <-- abre una section -->

    <p> <-- abre un párrafo -->

        <strong> <-- abre destacado en negrita -->
            Párrafo con texto destacado en negrita
        </strong> <-- cierra destacado en negrita -->

    </p> <-- cierra el párrafo -->

    <p> <-- abre otro párrafo -->

        <em> <-- abre texto enfatizado -->
            Párrafo con texto texto enfatizado generalmente en itálica
        </em> <-- cierra texto enfatizado -->

    </p> <-- cierra el párrafo -->

</div> <-- cierra la section -->

Es una buena costumbre indentar el código fuente, usar espacios, margenes en blanco jerárquicos que representan el nivel de imbricación de las etiquetas HTML, tal como esta en el ejemplo arriba.

CSS

El CSS llamado también Hoja de estilo, es un lenguaje para definir la presentación de un documento escrito en HTML. Permite separar la estructura de un documento HTML de su presentación definida en otro archivo CSS, de tal forma que cambiar la presentación de la web no requiere modificar el código HTML, sino en el archivo CSS.

En el documento HTML podemos añadir el atributo class y id a las etiquetas, definiendo una o varias clases a la etiqueta, o su nombre unico ID dentro del documento.

<!--Documento HTML: html_con_css1.html -->

<!DOCTYPE html>

<!-- Inicio del HTML -->
<html>

    <!-- Cabezera de la web -->
    <head>
        <meta charset="UTF-8">
        <title>Documento HTML: html_con_css1.html</title>
        
        <!-- Se incluye el archivo CSS css_1.css -->
        <link rel="stylesheet" type="text/css" href="/files/ejemplos/css_1.css" media="screen" /> 
    </head>

    <!-- Cuerpo de la web -->
    <body>
        
        <p class="texto_rojo">
            Parráfo de textos en rojo
        </p>


        <p class="texto_rojo texto_grande">
            Parráfo de textos en rojo y fuente grande
        </p>


        <div id="parrafo_marco_1">
            Sección con identificador unico "parrafo_marco_1"
        </div>


    </body>

<!-- Fin del HTML -->
</html>
/* Hoja de estilos CSS: css_1.css */

/* Comentarios en CSS */

/* El punto . indica que los estilos definidos aplican a la clase */
/* La almoadilla # indica que los estilos definidos aplican a la etiqueta unicada identificada por su ID */

/* Se aplica a las etiquetas con el atributo class = "texto_rojo" */
.texto_rojo {
    color: red; /* define el color */
}

/* Se aplica a las etiquetas con el atributo class = "texto_grande" */
.texto_grande {
    font-size: larger; /* aumenta el tamaño de la fuente */
}

/* Se aplica unicamente a la etiqueta con el atributo id = "parrafo_marco_1" */
#parrafo_marco_1 {
    padding: 10px;          /* establece un espacio de relleno por todos los lados del elemento */
    border-width: 2px;      /* Tamaño del borde */
    border-color: blue;     /* Color del borde */ 
    border-style: solid;    /* Tipo de borde */
}


Ver pagina web resultante: http://www.algoritmo.fr/files/ejemplos/html_con_css1.html

JAVASCRIPT

El JAVASCRIPT es un lenguaje que se ejecuta en el navegador del cliente por lo que debe tener JavaScript activado en el navegador, los navegadores modernos lo traen integrado por defecto. También existen técnologías como Node.js que corren JavaScript del lado del servidor. JavaScript permite crear efectos atractivos y dinámicos en las páginas web.

En la actualidad es común usar tecnologías basadas en JavaScript como jQuery que es una biblioteca de JavaScript que simplifica la manera de interactuar con los documentos HTML, es la biblioteca de JavaScript más utilizada. AJAX es una técnica de desarrollo web que se ejecuta en el cliente, es decir en el navegador, pero manteniendo la comunicación con el servidor en segundo plano. De esta forma es posible realizar cambios en la web sin necesidad de recargarla.

HTML y CSS son lenguajes de programación sencillos de aprender, básicamente un conjunto de convenciones, el JavaScript es de nivel medio y avanzado, requiere del aprendizaje de la elaboración de algoritmos (programas) con el conjunto de las reglas y símbolos de programación que controlen el comportamiento de una computadora. Los conceptos básicos de programación procedural y objeto serán tratados en otra publicación. A continuación un ejemplo de programa en JavaScript que cambia en bucle el color de fondo de una pagina web.

<!--Documento HTML: html_con_javascript1.html -->

<!DOCTYPE html>

<!-- Inicio del HTML -->
<html>

    <!-- Cabezera de la web -->
    <head>
        <meta charset="UTF-8">
        <title>Documento HTML: html_con_javascript1.html</title>

        <!-- Se incluye la librería jQuery  -->
        <script src="/files/ejemplos/lib/jquery-3.1.1.min.js"></script>
        
        <!-- Se incluye el archivo JavaScript script_1.js -->
        <script src="/files/ejemplos/script_1.js"></script>
    </head>

    <!-- Cuerpo de la web -->
    <body>
        
        
    </body>

<!-- Fin del HTML -->
</html>
/* Script JavaScript: script_1.js */

/* Cambia el color de fondo de la web en bucle */

/* Establece una matriz de colores */
var colors = ["red", "green", "blue", "purple", "yellow", "orange"];

/* Variable para iterar el indice de la matriz de los colores*/
/* colors[0] => "red" 
   colors[1] => "green"
   etc. */
var currentColor = 0;

/* function para rotar el color en bucle entre los valores de la matriz de colores */
function switchColor() { 

    /* Comprueba el indice dentro de la matriz, vuelve al inicio si ya no hay mas colores */   
    if (currentColor >= colors.length){
        currentColor = 0;
    }

    /* Afecta el color de fondo de la web mediante su propiedad CSS background-color, y el indice del color en la matriz */
    jQuery('body').css('background-color', colors[currentColor]);
    
    /* Incrementa el indice del color de la matriz de colores (+1) */
    currentColor++;

    /* Establece un tiempo de espera de 500 milisegundos antes de llamar nuevamente la function que cambia el color de fondo */
    setTimeout(switchColor, 500);
}

/* Ejecuta la primera vez la function para cambiar el color de fondo */
switchColor();

Ver pagina web resultante: http://www.algoritmo.fr/files/ejemplos/html_con_javascript1.html

PAGINA WEB DINÁMICA

Los navegadores web, Firefox, Chrome y los demás reciben del servidor los códigos fuentes HTML, CSS y Javascript el cual le da el contenido, formato, diseño y animaciones a las paginas web que consultas. Sin embargo por ejemplo en la pagina para consultar el saldo de tu cuenta bancaria, es distinto para cada cliente, los códigos fuentes recibidos por tu navegador son generados al vuelo, en forma dinámica.

Al entregar una pagina dinámica, el servidor no dispone de los documentos tal cual los recibes, son generados para cada consulta, como por ejemplo para consultar tu saldo. Lenguajes de programación para la capa del servidor como PHP, siendo el mas popular se encargan de fabricar y entregar al vuelo los códigos HTML, CSS y JavaScript que recibes en tu navegador, y usualmente conectando a una base de datos. Así pues, el código fuente de la pagina web que estas visualizando mostrado al presionar Ctrl+U es el código generado para ti, no tienes acceso al código del programa por ejemplo en PHP que lo generó.

La presentación del PHP y otros lenguajes del lado servidor serán publicados en otra oportunidad. Gracias por pasar, esta es una publicación original de www.algoritmo.fr.