Tema 1

Entorno de programación

Introducción

Un IDE es un entorno de programación que ha sido empaquetado como un programa de aplicación, es decir, consiste en un editor de código, un compilador, un depurador y un constructor de interfaz gráfica (GUI). Los IDEs pueden ser aplicaciones por sí solas o pueden ser parte de aplicaciones existentes. El lenguaje Visual Basic, por ejemplo, puede ser usado dentro de las aplicaciones deMicrosoft Office, lo que hace posible escribir sentencias Visual Basic en forma de macros paraMicrosoft Word.

Los IDE proveen un marco de trabajo amigable para la mayoría de los lenguajes de programación tales como C++, PHP, Python, Java, C#, Delphi, Visual Basic, etc. En algunos lenguajes, un IDE puede funcionar como un sistema en tiempo de ejecución, en donde se permite utilizar el lenguaje de programación en forma interactiva, sin necesidad de trabajo orientado a archivos de texto, como es el caso de Smalltalk u Objective-C.

2.1       Estructura de un programa Web.

A la hora de desarrollar una aplicación, resulta relativamente fácil olvidar algunos de los factores que influyen decisivamente en la percepción que tiene el usuario de nuestra aplicación. Al fin y al cabo, para el usuario, el diseño de la aplicación es el diseño de su interfaz. Y en este caso nos referimos al aspecto visual de la aplicación, no al diseño modular de su capa más externa. De ahí la importancia que tiene conseguir un aspecto visual coherente en nuestras aplicaciones (aparte de un comportamiento homogéneo que facilite su uso por parte del usuario).

Cualquier aplicación web, sea del tipo que sea, suele constar de distintas páginas. Esas páginas, habitualmente, compartirán algunos elementos, como pueden ser cabeceras, pies de página, menús o barras de navegación. Por lo general, en el diseño de la aplicación se creará un boceto de la estructura que ha de tener la interfaz de la aplicación, tal como se muestra en la figura siguiente:

En la creación de sitios web, la distribución del espacio disponible para los distintos componentes de las páginas se puede efectuar, en principio, de dos formas diferentes: utilizando marcos (frames) para cada una de las zonas en las que dividamos el espacio disponible, o empleando tablas con una estructura fija que proporcione coherencia a las distintas páginas de nuestra aplicación. Si utilizamos marcos, cada marco se crea como una página HTML independiente. En cambio, si optamos por usar tablas, cada páginas deberá incluir repetidos los elementos comunes a las distintas páginas. Si nuestro análisis se quedase ahí, obviamente nos decantaríamos siempre por emplear marcos.

Desgraciadamente, el uso de marcos también presenta inconvenientes. En primer lugar, una página creada con marcos no se verá igual siempre: en función del navegador y del tamaño del tipo de letra que haya escogido el usuario, una página con marcos puede resultar completamente inutilizable. En segundo lugar, si los usuarios no siempre acceden a nuestras páginas a través de la página principal, como puede suceder si utilizan los enlaces proporcionados por un buscador, sólo verán en su navegador el contenido de uno de los marcos. En este caso, no podrán navegar por las distintas páginas de nuestro sistema si elementos de la interfaz como la barra de navegación se muestran en marcos independientes.

Las desventajas mencionadas de los marcos han propiciado que, casi siempre, las interfaces web se construyan utilizando tablas. Desde el punto de vista del programador, esto implica que determinados elementos de la interfaz aparecerán duplicados en todas las páginas de una aplicación, por lo que se han ideado distintos mecanismos mediante los cuales se pueden generar dinámicamente las páginas sin necesidad de que físicamente existan elementos duplicados.

Partiendo de todo lo anterior, un programa Web, se entiende como documento Web o HTML, el cual está conformado por las siguientes partes:

1.     Inicio de documento.

2.     Inicio de cabecera.

3.     Inicio del titulo del documento.

4.     Final del titulo del documento.

5.     Final de cabecera de documento.

6.     Inicio del cuerpo del documento.

7.     Final del cuerpo del documento.

8.     Final de documento.

Con lo previamente comentado, un documento escrito en HTML contendría básicamente las siguientes etiquetas:

<HTML> Indica el inicio del documento. <HEAD> Inicio de la cabecera.

<TITLE> Inicio del título del documento. </TITLE> Final del título del documento.

</HEAD> Final de la cabecera del documento. <BODY> Inicio del cuerpo del documento. 

</BODY> Final del cuerpo del documento.

</HTML> Final del documento.

Con el paso del tiempo los documentos de este tipo, han surgido cambios notables que se pueden entender de forma rápida en gráficos de este tipo de aplicaciones. Como por ejemplo en una estructura típica de una página con HTML4, llena de DIVs (se dio lo que se conocía como divitis: abuso de div y span), tal y como lo podemos ver en la figura siguiente:

Actualmente los diversos sitios web se encuenrtran desarrollados en HTML5. HTML5 es la nueva versión de HTML. HTML5 tiene más etiquetas y por lo tanto más opciones de diseño. En junio de 2012, HTML5 todavía era un borrador de trabajo. HTML5 no es un estándar, ningún navegador lo soporta completamente todavía. Según un comunicado del W3C, se esperaba que alcance del nivel de recomendación era el año 2014 (hoy en día aún existen algunos componentes no soportados al 100%). Con el término HTML5 se hace referencia a un ámplio conjunto de tecnologías que se están desarrollando alrededor de la nueva versión del lenguaje HTML5. HTML5 también se relaciona con la computación en la nube (cloud computing).

La estructura típica de una página con HTML5 se ve de la siguiente manera:

Lo siguiente es un ejemplo simple de una página web HTML5 válida:

<!DOCTYPE html> 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Hola HTML</title>

</head>

<body>

<p>Hola Mundo!</p> </body>

</html>

En HTML5 hay algunos nuevos elementos semánticos como lo son:

<header>

<hgroup>

<nav>

<article>

<section>

<aside>

<time>

<mark>

<footer>

También hay cuatro nuevos elementos multimedia:

<audio>

<canvas>

<source>

<video>

Y hay nuevos elementos para estructurar el contenido:

<details>

<summary>