Informática
Diseño de páginas web dinámicas

Tu Instituto Online
   


 
Nivel Básico Lenguajes para el diseño web
Duración aproximada: 2 sesiones
   
Objetivos Objetivos
  • Familiarizarnos con los lenguajes de programación web
  • Conocer los diferentes tipos de lenguajes web
  • Conocer los principales lenguajes web
   
Fuentes de información Fuentes de información
   
Contenidos
Contenidos
   
 

1.- Introducción

Los lenguajes de programación son elementos ampliamente necesitados en el mundo de la informática y que han permitido diseñar aplicaciones para sacar partido a los ordenadores. Éstos comenzaron con el lenguaje ensamblador (lenguaje de bajo nivel) y han ido evolucionando hacia los lenguajes de alto nivel, los cuales permiten una programación mucho más sencilla y con código más comprensible.

Con la creación de Internet se comenzó a pensar en aplicar estos lenguajes para la creación de elementos web y fruto de ello surgieron los primeros lenguajes de programación web. En esta unidad explicaremos qué son los lenguajes de programación web y qué tipologías existen.

2.- Lenguajes de programación web

Este tipo de lenguajes tiene sus antecedentes en diferentes elementos como:

  • Las aplicaciones cliente-servidor, las cuales tenían los componentes instalados de manera separada
  • La dependencia de las aplicaciones anteriores de los diferentes sistemas operativos
  • La multiplicidad de interfaces, ya que cada diseñador creaba la suya propia
  • La aparición de la World Wide Web, la cual revolucionó la forma de comunicarse en la red
  • La necesidad de dinamismo en las páginas web

Debido a los cambios en las necesidades de los usuarios y en las nuevas tecnologías que fueron surgiendo, los lenguajes de programación web siguieron dos vertientes:

  • Estáticos: aquellos que se crearon para dar una primera solución a la demanda de los usuarios y que están enfocados a mostrar información de carácter permanente. Además no ofrecen posibilidades para crear efectos o funcionalidades más allá de los enlaces, aunque es suficiente para aquellos que quieran ofrecer información sin posibilidad de interactuar con ella.
  • Dinámicos: se crearon después de los estáticos para dar solución a los problemas y limitaciones surgidas con los anteriores. Con este tipo de lenguajes se permite la interacción del sistema con el usuario además de permitir la interacción del usuario con los datos a través del sistema, todo ello gracias a la creación de aplicaciones dentro de la propia página web. Este tipo de lenguajes es el más utilizado hoy en día ya que sus posibilidades son infinitas.

  
Ejercicios
Ejercicio
   
 

Hemos visto que existen dos tipos de lenguajes web: los estáticos y los dinámicos. Utilizando la imagen superior y buscando en Internet los logos que se muestran, averigua el nombre de cada uno de los lenguajes y enmárcalos en cada uno de los dos grupos que hemos explicado. Una vez hecho busca 3 lenguajes web dinámicos y añádelos a la lista, explicando sus orígenes y su versión actual.

Guárdalo todo en un documento llamado lenguajes_web.odt.

   
Contenidos
Contenidos
   
 

2.1- Lenguajes de programación web estáticos

Tal y como hemos explicado, los lenguajes de programación estáticos están muy limitados ya que permiten construir páginas sin movimiento ni funcionalidades más allá de los enlaces. Tampoco permite la inserción de efectos especiales ni la interacción con ésta, por lo que simplemente podremos visualizarla. Entre los lenguajes estáticos encontramos el HTML.

Las siglas HTML se refieren a Hypertext Markup Language (Lenguaje de marcas de hipertexto), es decir, es un lenguaje de marcado basado en etiquetas desarrollado por el W3C (World Wide Web Consortium). Se utiliza para describir y traducir la estructura e información en forma de texto, así como para complementar el texto con los objetos tales como imágenes, para lo que se utilizan etiquetas rodeadas por corchetes (<>). Además los ficheros generados con este tipo de lenguaje tienen extensión .htm o .html.

En la siguiente imagen mostramos un fragmento de código:

En el código se puede observar la apertura de varias etiquetas entre las que se encuentran html, head, body y title. También podemos observar el cierre de algunas de ellas como title, head, a, h1 o li. La principal diferencia entre las aperturas y los cierres es que en estos últimos, antes de la etiqueta se inserta una barra (/).

Entre las ventajas de su utilización encontramos:

  • Sencillez de escritura
  • Texto estructurado y fácilmente legible
  • No se necesitan grandes conocimientos para su escritura
  • Son archivos pequeños
  • Es admitido por todos los navegadores

También tenemos desventajas:

  • Imposibilidad de dinamismo
  • La interpretación de cada navegador puede ser diferente
  • Guarda muchas etiquetas
  • El diseño es lento
  • Las etiquetas son muy limitadas

2.2- Lenguajes de programación web dinámicos

Posteriormente a los lenguajes web estáticos surgieron los dinámicos con el fin de solucionar algunas de las limitaciones de los anteriores, entre ellos las limitaciones con los accesos a información (bases de datos). Fruto de la evolución y al contrario que los anteriores, fueron unos cuantos lenguajes los que salieron a la luz: Javascript, PHP, ASP, ASP .NET o JSP son sólo algunos ejemplos.

2.2.1.- Javascript

El primero de ellos, Javascript, fue desarrollado por Brendan Eich, trabajador de Netscape Communications, en 1995 aunque su nombre original fue Mocha. Éste es un lenguaje interpretado, es decir, que no requiere compilación y es similar a Java, así como a C. La principal ventaja de éste es que la mayoría de los navegadores lo interpretan por defecto y ello hace que podamos insertarlo en nuestras páginas web, aunque para ello tengamos que seguir el estándar de diseño DOM (Modelo de Objetos del Documento).

Javascript se suele utilizar para crear aplicaciones incrustadas en documentos HTML que permiten manejar los eventos del usuario. Entre sus ventajas encontramos su seguridad y fiabilidad, la limitación de capacidades (por el tema de seguridad) y que el código se ejecuta en el cliente (libera al servidor de trabajo). Por contra, el código es visible a cualquier usuario y debe ser descargado completamente.

A continuación mostramos un código en el que se concatenan dos cadenas de caracteres:

2.2.2.- PHP

El segundo, PHP, es un lenguaje que se creó en 1995 por Rasmus Lerdorf y cuyas siglas, inicialmente significaban "Personal Home Page", aunque actualmente significan "PHP Hypertext Pre-processor". Éste es un lenguaje de script de la parte del servidor (al contrario que Javascript) utilizado para la creación de páginas web dinámicas incrustadas en HTML sin necesidad de compilación.

Para su funcionamiento se requiere la instalación de un servidor Apache o IIS (Internet Information Server) con las librerías de PHP y sus ficheros cuentan con la extensión .php.

Entre las ventajas encontramos:

  • Fácil de aprender
  • Es muy rápido
  • Soporta la orientación a objetos
  • Es multiplataforma
  • Permite la conexión con la mayoría de bases de datos
  • Permite la utilización de módulos
  • Posee mucha documentación y tutoriales en su página web oficial
  • Es libre
  • Incluye cantidad de funciones
  • No requiere definición de tipos de variables

También tenemos desventajas:

  • Se necesita instalar un servidor web
  • Todo el trabajo lo realiza el servidor (carga de trabajo)
  • La legibilidad puede verse afectada por el código HTML

Una de las grandes ventajas que tiene este lenguaje, el cual explicaremos en posteriores unidades, es el de la seguridad. PHP está diseñado específicamente para ser un lenguaje muy seguro si se configuran correctamente las opciones de configuración en tiempos de compilación y ejecución.

En la imagen se muestra un fragmento de código que mostraría el mensaje "Hola mundo":

 

Ejercicios
Ejercicio
   
 

Abre el documento creado en el ejercicio anterior. Una vez hecho realiza los siguientes pasos:

  • Accede a la página web http://htmledit.squarefree.com/, la cual es un editor de HTML online
  • Vamos a realizar algunos ejemplos de programación en HTML básica (copia el resultado de la parte inferior de la página web en el documento):
    • Escribe <b>Hola a todos, esto es negrita<b> en una línea
    • Escribe <h1>Texto muy grande</h1> en otra línea
    • Escribe <center>Texto centrado</center> en otra línea
    • Escribe <font color="red">Hola</font> en otra línea
    • Escribe <ul><li>Primero</li><li>Segundo</li><li>Tercero</li></ul> en otra línea
    • Ahora indica para qué sirven cada una de las etiquetas vistas (b, h1, center, font color, ul, li)
  • Accede a la página web http://jseditor.proyectosbds.com/, la cual es un editor de Javascript online
  • Pulsa el botón Javascript y pulsa el botón HTML (para que desaparezca la ventana de éste)
  • Vamos a realizar algunos ejemplos de programación en JavaScript básica. Responde a las preguntas en el documento:
    • Escribe alert("Bienvenido a mi página web") y pulsa el botón Ejecutar Javascript ¿qué ocurre?
    • Borra lo anterior y escribe lo siguiente, indicando qué es lo que ocurre cuando se pulsa el botón Ejecutar Javascript:
  • var nom;
    nom = prompt("Escribe tu nombre","NOMBRE");
    alert ("Mucho gusto "+nom);

    • Borra lo anterior y escribe lo siguiente, indicando qué es lo que ocurre cuando se pulsa el botón Ejecutar Javascript:

    var hoy = new Date();
    dia = hoy.getDate();
    mes = hoy.getMonth();
    ano = hoy.getYear() + 1900;

    document.write (dia);
    document.write ("/");
    document.write (mes);
    document.write ("/");
    document.write (ano);

  • Cuando hemos explicado PHP hemos comentado que se necesita un servidor Apache o IIS. Búscalos en Internet y explica qué són cada uno de ellos. Busca también la última versión que haya disponible de este lenguaje y su fecha de lanzamiento.
  • Guarda el documento
Contenidos
Contenidos
   
 

2.2.3.- ASP

ASP son las siglas de Active Server Pages, una tecnología desarrollada por Microsoft del lado del servidor para páginas web generadas dinámicamente que fue liberada en 1996. Al igual que PHP requería la instalación de un servidor, ASP necesita tener instalado IIS y tampoco requiere compilación.

Para la creación de páginas web se pueden utilizar diferentes lenguajes entre los que se encuentran: VBScript (nativo de Microsoft), Perl y JScript, y su código es insertado junto al código HTML, resultado ficheros con extensión .asp.

Entre sus ventajas encontramos: su sencillez, ya que usa Visual Basic Script y la óptima comunicación con bases de datos de tipo SQLServer. Por contra el código es desorganizado y se necesita escribir mucho código para realizar funciones sencillas.

Mostramos en la imagen un código que mostraría el mensaje "Hola mundo":

2.2.4.- ASP.NET

ASP.NET apareción en 2002 de la mano de Microsoft con el fin de resolver las limitaciones que tenía su antecesor: ASP. Esta tecnología permite construir sitios web dinámicos, aplicaciones web y servicios XML, es decir, se pueden hacer desde simples páginas web hasta grandes aplicaciones complejas. Además, como se basa en el .NET Framework (desarrollado por Microsoft para hacer la competencia a la plataforma Java) admite la programación en diferentes lenguajes como Visual Basic .NET, C# o J#.

Sus ficheros tienen la extensión aspx (similar a la de ASP) y se necesita tener instalado el IIS junto con el .NET Framework. Además entre sus ventajas podemos observar: su seguridad, su velocidad y la facilidad de mantenimiento de grandes aplicaciones. Como contras tenemos un consumo de recursos importante.

En la imagen se puede observar un fragmento de codigo que mostraría la fecha y la hora:

2.2.5.- JSP

JSP son las siglas de Java Server Pages, lenguaje web orientado al desarrollo en Java para sitios web dinámicos del lado del servidor. Fue desarrollado por Sun Microsystems y es similar tanto a PHP como ASP aunque utiliza el lenguaje de programación Java. También, al igual que éstos, necesita tener instalado un servidor para que funcione, un servidor como el Apache Tomcat.

Sus ficheros tienen extensión .jsp y como ventajas encontramos: es mutiplataforma, el código está bien estructurado y la ejecución es rápida. Por contra el lenguaje es complejo de aprender.

En la imagen mostramos un ejemplo que mostraría el mensaje "Hola mundo":

Ejercicios
Ejercicio
 

Abre el documento creado en el ejercicio anterior. Una vez hecho realiza los siguientes pasos:

  • Busca las versiones de ASP y asócialas a las versiones de IIS existentes
  • ¿Qué es VBScript y para qué sirve?
  • ¿Qué gran problema tenían los ficheros de ASP que provocó la creación de la versión .NET?
  • JSP está asociado a unos elementos llamados servlets ¿qué son?
  • ¿Qué gran limitación a nivel de servidor tienen las tecnologías basadas en ASP/ASP.NET con respecto a las JSP?
  • Guarda el documento y súbelo a la plataforma
   
Creditos Créditos
Licencia de Creative Commons

Este documento es de dominio público bajo licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 España.
TuInstitutoOnline.com M.Donoso, G.García, P.Gargallo, A.Martínez. v. 2.0.2.1.0

No se permite un uso comercial de la obra original ni de las posibles obras derivadas, la distribución de las cuales se debe hacer con una licencia igual a la que regula la obra original.

Los reconocimientos se realizan en el apartado Fuentes de información.

Los iconos empleados están protegidos por la licencia LGPL y se han obtenido de:
https://commons.wikimedia.org/wiki/Crystal_Clear
https://www.openclipart.org


Licencia de Creative Commons

Todas las capturas de pantalla tienen copyright y pertenecen a TuInsitutoOnline.com.

TuInstitutoOnline.com permite su uso siempre y cuando se muestren desde el dominio www.tuinstituoonline.com y NO PERMITE enlazar a ellas desde otros lugares.

Además, la estructura diseñada para mostrar el contenido de las unidades es propiedad de TuInstitutoOnline.com.

TuInstitutoOnline.com M.Donoso, G.García, P.Gargallo, A.Martínez. Versión 2021.