UNIDAD 5 Programación del lado del servidor

5.1 introducción al Lenguaje

La Programación del lado del servidor es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Todo lo que suceda dentro del servidor es llamado procesamiento del lado del servidor, o server-side processing. Cuando tu aplicación necesita interactuar con el servidor (por ejemplo, para cargar o guardar datos), ésta realiza una petición del lado del cliente (client-side request) desde el navegador, a través de la red usando invocaciones remotas a métodos (remote procedure call, RPC). Mientras se está procesando una llamada RPC, tu servidor está ejecutando código del lado del servidor.

La utilización de las diferentes aplicaciones o servicios de Internet se lleva a cabo respondiendo al llamado modelo cliente-servidor.

Cuando se utiliza un servicio en Internet, como consultar una base de datos, transferir un archivo o participar en un foro de discusión, se establece un proceso en el que entran en juego dos partes. Por un lado, el usuario, quien ejecuta una aplicación en procesador local: el denominado programa cliente. Este programa cliente se encarga de ponerse en contacto con el procesador remoto para solicitar el servicio deseado. El procesador remoto por su parte responderá a lo solicitado mediante un programa que esta ejecutando. Este último se denomina programa servidor. Los términos cliente y servidor se utilizan tanto para referirse a los programas que cumplen estas funciones, como a las computadoras donde son ejecutados esos programas.

El programa o los programas cliente que el usuario utiliza para acceder a los servicios de Internet realizan dos funciones distintas. Por una parte, se encargan de gestionar la comunicación con el computador servidor, de solicitar un servicio concreto y de recibir los datos enviados por éste; y por otra, es la herramienta que presenta al usuario los datos en pantalla y que le ofrece los comandos necesarios para utilizar las prestaciones que ofrece el servidor.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, por ejemplo: ASP, PHP, JSP.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente “digeridos” por el navegador y no necesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.

Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

5.2 Elementos de Programación

PHP (acrónimo de “PHP: Hypertext Preprocessor”) es un lenguaje interpretado de alto nivel embebido en páginas HTML y ejecutado en el servidor.

Para ejemplificar como se estructura un programa en PHP, checaremos el siguiente código para probar nuestro primer programa. El cual, muestra el himno del Tecnológico de Veracruz.

Los programas en PHP inician con ‘<!–?php ‘ y terminan con el tag ‘?>‘. En el código la instrucción echo imprime en pantalla la cadena encerrada entre pares de ‘. Note que entre las líneas encontramos el tag html ‘

‘ lo cual regresa un retorno de línea.

Las variables en PHP no necesitan, a diferencia de otros lenguajes de programación ser declaradas específicamente dado que cuando a una variable se le asigna un valor esta se inicializa en forma automá;tica determinando la cantidad de memoria necesaria para dicha variable.

Los nombres de las variables van precedidas del signo ‘$‘. Los nombres de las variables son sensibles al uso de las mayúsculas y minúsculas. De tal forma que la sintaxis correcta es:

$nombreVariable = valor;

El nombre de una variable también se conoce como identificador y debe cumplir las siguientes normas:

Sólo puede estar formada por letras y números y los símbolos ($ dólar y _ guión bajo).

El primer cará;cter del nombre del identificador o varible debe ser estrictamente el signo de dólar.

Tipos de datos

PHP soporta los siguientes tipos y son definidos en tiempo de ejecución

integer. Son datos de tipo numérico entero

double. Datos numéricos en coma flotante ( manejo de decimales)

string. Cadenas alfanuméricas.

boolean. Valores de tipo Verdadero o Falso como resultado de evaluar una condición, estado de una variable, etc.

array. Matrices

object. Estructuras complejas de datos.

class. Moldes mediante los cuales se crean los objetos

unknown type. Tipo desconocido

NULL.Es el tipo de una variable a la que aún no se le asigna valor alguno.

Para forzar una variable a un tipo concreto use la función settype()

Dado que las variables no se declaran, el tipo se adquiere en tiempo de ejecución al tipo que usted quiera. Dependiendo de la información que contenga, una variable puede ser considerada de uno u otro tipo.

Las cadenas (string) de caracteres se especifican entre uno de dos tipos de delimitadores (‘ o ‘). Encerrada entre doble comillas ‘es posible emplear los siguientes caracteres especiales.

Caracteres especiales o protegidos

Son caracteres de impresión que nos permiten dar formato a un texto.

Nuevamente, si intenta escapar cualquier otro cará;cter, la barra invertida será; impresa también! Antes de PHP 5.1.1, la barra invertida en \{$var} no venía imprimiéndose.

Variables predefinidas

PHP dispone de una gran cantidad de variables que ya está;n definidas, y que tenemos a disposición para usarlas dentro de nuestros script. Para ver todas las variables que tenemos disponibles en nuestro servidor y versión de PHP, es necesario hacer un llamado a la función predefinida phpinfo().

Para obtener las variables predifinidas usaremos. $_SERVER. El cual es un array que contiene información, tales como cabeceras, rutas y localizaciones del código. Las entradas en este array son creadas por el servidor web. No existe garantía que cada servidor web proporcione todas estas entradas, ya que existen servidores que pueden omitir algunas o proporcionar otras que no se encuentran recogidas aquí. Un gran número de estas variables se encuentran recogidas en » especificación CGI 1.1, así que al menos debe esperar encontrar estas entradas. continuación se presentan algunas de las variables predefinidas. El resto de las variables las puede obtener de la pá;gina resultado del programa anterior.

Con los índices de la variable $_SERVER se pueden hacer cosas interesantes, como por ejemplo pedir laHTTP_ACCEPT_LANGUAGE y dependiendo de su contenido, enviar a los usuarios a sitios en su idioma. 

5.3 Aplicación

Con los índices de la variable $_SERVER se pueden hacer cosas interesantes, como por ejemplo pedir laHTTP_ACCEPT_LANGUAGE y dependiendo de su contenido, enviar a los usuarios a sitios en su idioma.

<head>

<meta charset='utf-8'/>

<title>Combox Dependientes</title>

<link href='../../../css/estilo.css' rel='stylesheet' />

<script src='js/jquery-1.10.1.min.js'></script>

<script src='js/js.js'></script>

</head>

<body>

<p><label>Estado</label>

<select class='styled-select' id='estado'></select></p>

<p><label>Municipio</label>

<select class='styled-select' id='municipio'></select></p>

<div id='colonias'>

</div>

</body>

</html>

conexion.php

<?php 

$ruta = 'localhost';

$usuario = 'Usuario';

$key = 'Password';

$db = 'Tu base de datos';

$conexion = mysql_connect( $ruta, $usuario, $key) or die(mysql_error());

mysql_select_db( $db, $conexion ) or die(mysql_error()); 

mysql_query("SET NAMES 'utf8'");

?>

comboEstado.php

<?php

$query = 'SELECT idEstado, estado 

FROM estado ORDER BY estado';

include('conexion.php');

$estados = mysql_query($query, $conexion) 

or die(mysql_error()); 

mysql_close($conexion);

$html = '';

while ($estado = mysql_fetch_assoc($estados)) {

$html.= '<option value="'.$estado['idEstado'].'">';

$html.= $estado['estado'].'</option>'; 

}

echo $html; 

?>

• 
  

UNIDAD 4 Programación del lado del cliente

4.1 Introducción al Lenguaje


JavaScript es un lenguaje de programación usado principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones activadas al pulsar botones y ventanas con mensajes de aviso al usuario.


Técnicamente, JavaScript es un lenguaje de programación interpretado, y no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.


A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems. Su nombre es exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la época de desarrollo.


Cómo incluir JavaScript en documentos XHTML


La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web en esta sección solo se presentaran dos de ellas.


Incluir JavaScript en el mismo documento XHTML


El código JavaScript se encierra entre etiquetas <script></script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (dentro de la etiquetas <head></head>):


Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.


El principal inconveniente es que si se quiere hacer una modificación en el bloque de código, es necesario modificar todas las páginas que incluyen ese mismo bloque de código JavaScript.


Definir JavaScript en un archivo externo.


Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML enlazan mediante las etiquetas <script></script> . Colocadas entre las etiquetas <head></head>.


Se pueden crear todos los archivos JavaScript (*.js) que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.


Este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.


Los archivos de tipo JavaScript son simples documentos de texto con la extensión js que se pueden crear con cualquier editor de texto como Notepad, Wordpad, UltraEdit, Vi, etc.


La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código XHTML de la página, además de la capacidad de reutilizar el mismo código JavaScript en páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se refleja inmediatamente en todas las páginas XHTML que lo enlazan





4.2 Elementos de Programación


Variables


Las variables o identificadores se utilizan para almacenar valores en un programa; cada variable tiene un nombre que permite referenciarla, nombre que se da en base a unas reglas. En JavaScript un nombre o identificador debe comenzar siempre con una letra o un subrayado; los siguientes caracteres pueden ser dígitos o letras; y nunca se puede usar una palabra reservada como identificador (por ejemplo: true, false, null y undefined).


Una variable se puede declarar en JavaScript, de dos formas:


Forma explícita: var nombre_Variable;
Forma implícita: var nombre_Variable = valor;
En el último caso no es imprescindible escribir var, pero es necesario por razones de compatibilidad entre navegadores.


Tipos de variables
Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (números, textos, etc.).


Variables numéricas


Almacenan valores numéricos enteros (integer en inglés) o decimales (float en inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales usan el carácter ( . punto) en vez de ( , coma) para separar la parte entera y la parte decimal:


JavaScript define 3 valores especiales muy útiles cuando se trabaja con números. En primer lugar se definen los valores ±Infinity para representar números demasiado grandes (positivos y negativos) y con los que JavaScript no puede trabajar.


El otro valor especial definido por JavaScript es NaN, cuyo nombre viene de “Not a Number”. De esta forma, si se realizan funciones matemáticas con variables no numéricas, el resultado será de tipo NaN.


Cadenas de texto


Almacenan caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:


Algunos caracteres especiales son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.) Por otra parte, como las comillas se utilizan para definir el contenido de la variable, no es posible incluir comillas dentro de la propia cadena de texto.


Variables de tipo boolean


Son un tipo de variables que solo pueden tomar uno entre dos valores especiales que representan el valor 'verdadero' y el valor'falso'.


JavaScript convierte automáticamente el resto de variables a sus valores boolean si es necesario. En el caso de los números, el 0 se convierte en false y cualquier otro número distinto de 0 se convierte en true.


Conversión entre tipos de variables


JavaScript incluye un método llamado toString() que permite convertir variables de cualquier tipo a variables de cadena de texto.


JavaScript también incluye métodos para convertir los valores de las variables en valores numéricos. Los métodos definidos son parseInt() y parseFloat(). Cada uno de ellos convierte la variable que se le indica en un número entero o un número decimal. La conversión numérica de una cadena se realiza carácter a carácter empezando por el de la primera posición. Si ese carácter no es un número, la función devuelve el valor NaN.


Si el primer carácter es un número, se continúa con los siguientes caracteres mientras estos sean números.


En el caso de parseFloat(), el comportamiento es el mismo salvo que también se consideran válidos los caracteres que indican la parte decimal del número.


Palabras reservadas
Son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores.




Constantes
Se definen con la palabra clave const. La sintaxis de un identificador de constante es la misma que la de un identificador de variable: debe empezar con una letra o un guión bajo '_' [underscore] y puede contener caracteres alfanuméricos y/o guiones bajos.


const x = 48;


Una constante es asignada en el momento de la declaración y no puede cambiar el valor mediante una asignación o ser re-declarada mientras el script está en ejecución.


Las reglas de ámbito [scope] para constantes son las mismas que para las variables, excepto que la palabra clave const es siempre requerida, incluso para constantes globales. Si la palabra clave es omitida, se asume que el identificador representa a una variable.


No se puede declarar una constante con el mismo nombre de una función o de una variable en el mismo ámbito [scope].


Existen tres constantes predefinidas: true, false y undefined.


Expresiones
Una expresión es cualquier conjunto válido de literales, variables, operadores y expresiones que se evalúan como un único valor; el valor puede ser un número, una cadena o un valor lógico (booleano).


Conceptualmente, hay dos tipos de expresiones: las que asignan un valor a una variable y las que simplemente tienen un valor.


Por ejemplo, la expresión x = 7 es una expresión que asigna a x el valor 7. Esta expresión se evalúa como siete. Dicha expresión usa un operador de asignación.


Por otra parte, la expresión 3 + 4 simplemente se evalúa como siete; no se realiza ninguna asignación. Los operadores usados en dichas expresiones se les llaman simplemente operadores.


JavaScript tiene los siguientes tipos de expresiones:


Aritméticas: se evalúan como un número, por ejemplo 3.14159. (Generalmente usan operadores aritméticos.)
De cadena: se evalúan como una cadena de caracteres, por ejemplo, 'Sofía' o '234'. (Generalmente usan operadores de cadena de caracteres (string).)
Lógicas: se evalúan como verdadero o falso. (A menudo emplean operadores lógicos.)
De objeto: se evalúan como un objeto.
Operadores
Símbolo matemático que denota un conjunto de operaciones que han de realizarse. En JavaScript los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas o de manejo de texto con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.


Operador de asignación.


Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho. El operador básico de asignación es el igual (=), el cual asigna el valor de su operador derecho a su operador izquierdo. Esto es, x = y asigna el valor de y a x.


Operadores de comparación


Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación es verdadera.


Los operandos pueden ser valores numéricos, de cadena de caracteres, lógicos u objetos. Las cadenas se comparan basándose en el orden lexicográfico estándar, usando los valores Unicode.


Si dos operandos no son del mismo tipo, JavaScript intentará convertir los operandos a un tipo apropiado para la comparación, excepto para los operandos === y !==. Esto acostumbra a resultar en una comparación numérica.


Operadores aritméticos


Los operadores aritméticos toman valores numéricos (tanto literales como variables) como operandos y devuelven un único valor numérico. Los operadores aritméticos estándar son el de suma (+), el de resta (-), el de multiplicación (*) y el de división (/). Estos operadores trabajan igual que en la mayoría de lenguajes de programación, excepto el operador / que devuelve la división real (de coma flotante), no la división entera como sucede en C o en Java.


Operadores lógicos


Los operadores lógicos son generalmente empleados con valores lógicos (booleanos); estos operadores devuelven un valor booleano. Sin embargo, los operadores && y || realmente devuelven el valor de uno de sus operandos, por esto si se emplean con valores no booleanos, podrían devolver un valor no booleano.


Operadores de cadena de caracteres (String)


Además de los operadores de comparación, los cuales pueden ser empleados con los valores de cadena, el operador de concatenación (+) genera otra cadena que es la unión de los dos operandos de tipo cadena. Por ejemplo, 'mi ' + 'cadena' retorna la cadena 'mi cadena'.


El operador abreviado de asignación += también puede usarse para concatenar cadenas. Por ejemplo, si la variable micadena tiene el valor 'Vera', la expresión micadena += 'cruz' se evalúa como 'Veracruz' y asigna este valor a micadena.


Sentencias condicionales
En JavaScript, como en muchos lenguajes, la sentencia para verificar si una condición se cumple y realizar una acción u otra es if.


switch


Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.


Ciclos
Los ciclos son sentencias esenciales en cualquier lenguaje de programación. JavaScript cuenta con tres: while, do while y for. Hay cuatro partes en todos los bucles. Inicialización, cuerpo, iteración y condición.


while: Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de terminación.


do..while: Como mínimo siempre se ejecutará el cuerpo del bucle una vez, en el bucle while es posible que no se ejecute ni una sola vez el contenido de este.


for:Es el ciclo más común, en el una variable se fija a un valor inicial, que se actualiza con cada ciclo, y cuando el valor cumple una determinada condición, el ciclo se termina.


Hay dos formatos más de ciclos for, aunque no todas se aplican en todos los navegadores y se expondrán en incisos posteriores.


break: La sentencia break se puede colocar dentro de un ciclo o ciclos anidados. Cuando se ejecuta la sentencia break se abandona el ciclo más interno. A todos los efectos la sentencia breakactúa como un salto a la instrucción siguiente al ciclo en el que se ejecuta.


continue: La sentencia continue, no abandona el ciclo si no hace que se ejecute la siguiente iteración. En el ciclo whilela ejecución del continue hace que el flujo del programa salte a la condición. En el bucle for la ejecución del continue ejecuta la expresión de incremento (decremento), para después continuar normalmente con la condición. Es decir, la ejecución del continue evita que se ejecute durante una interacción el resto del cuerpo del ciclo.


Funciones
Una función es un bloque de código con un nombre. Cada vez que se usa el nombre, se llama a la función y el código de la función es ejecutado. Las funciones pueden llamarse con valores, conocidos como parámetros, que se usan como variables.


Las funciones tienen dos objetivos: organización del programa (archivo o documento) y ejecución del código de la función.


El nombre de una función se escribe inmediatamente después del comando function. Todos los nombres de funciones deben ser únicos y diferentes de los nombres de los comandos que usa JavaScript. No puede haber dos funciones con el mismo nombre.


La lista de parámetros (argumentos) de una función se separa por comas. La función usa esos parámetros en las sentencias de su cuerpo que la configuran.


Los argumentos que se le pasan a una función no pueden ser cambiados en su interior pues se pasan por valor.


Hay tres enfoques principales para la creación de funciones en JavaScript: declarativo/estático, dinámico/anónima, y literal.


Muchas tareas de programación que se puede lograr con el enfoque declarativo. Sin embargo es importante comprender el impacto de cada tipo de declaración antes de usarlas.


Los parámetros de una función se pasan por valor, los arrays se pasan por referencia.


Nota:Las funciones pueden regresar más de un valor en la versión 1.7. Sin embargo Internet Explorer no acepta completamente esta especificación.


Javascript tiene por característica no tipificar sus variables y cuando de operaciones matemáticas en particular en la suma dicha característica podría producirnos errores inesperados





4.3 Manipulación de Objetos


El Modelo de Objetos de Documento (DOM - Document Object Model -) describe cómo todos los elementos en una página HTML, tales como campos de entrada, imágenes, etc, se relacionan con la estructura más alta: el propio documento. Llamando al elemento por su nombre correcto DOM, podemos influir en él mediante un lenguaje de programación, e,g. Javascript, Java, etc.


JavaScript por si solo tiene muchas limitaciones pero se han desarrollado muchas y excelentes librerias que le han dado realmente contenido dinámico al desarrollo web. jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.


jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API de funciones, útiles en la mayoría de proyectos web.


write
Permite escribir texto html desde Javascript. El texto se escribe directamente el body del html.


Es la forma más fácil de escribir HTML desde Javascript, lo cual no quiere decir que es la mejor manera de escribir código HTML desde Javascript o incluso que va a trabajar en todas las situaciones. De hecho, el método document.write es muy limitado en lo que puedes hacer con él.


El lector debe considerar que document.write sólo funciona con las página que el navegador procesa como HTML.


innerHTML


Sirve para obtener o modificar el HTML del documento HTML. Se utiliza la propiedad InnerHtml para modificar mediante programación el contenido interno entre las etiquetas de apertura y cierre de un control de servidor HTML.


La propiedad InnerHtml no codifica automáticamente los caracteres especiales en entidades HTML, es el programador el responsable de hacerlo.


Crear y accesar elementos


Para crear etiquetas "tag" html debemos usar el método createElement(). Cuya sintaxis es la siguiente:


createElement( tag )


Donde tag es una etiqueta valida en html.


Si necesitamos agregar un nodo es necesario usar el método appendChild(). El cual agrega un nodo al final del arbol. La sintaxis es


appendChild( tag )


El método insertBefore tiene un comportamiento similar al de appendChield, solo que el nodo agregado es puesto antes del padre. La sintaxis es


insertBefore( nuevo tag, referencia )


Ejemplo: Agregar elementos a un documento


HTML


Los elementos son agregados mediante el evento onclick (Línea 7)
La línea 8 declara un elemento div vacio cuya función es servir de contenedor
Javascript


En la línea 5 se crea un objeto de tipo div
El objeto nuevoElemento hereda todas las características de div, por ejemplo innerHTML, color, fontSize.
Se crea una instancia del contenedor
Para agregar los elementos al contenedor usamos appenChild

UNIDAD 3

3.1 Introducción

Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un número de reglas sintácticas para poder crear documentos. Uno de los lenguajes más comunes para presentar información web es HTML.

El lenguaje de presentación es aquel que indica el formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información.

El marcado de presentación resulta más fácil de elaborar, sobre todo para cantidades pequeñas de información. Sin embargo resulta complicado de mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en favor de otros tipos de marcado más estructurados.

Se puede tratar de averiguar la estructura de un documento de esta clase buscando pistas en el texto. Por ejemplo, el título puede ir precedido de varios saltos de línea, y estar ubicado centrado en la página. Varios programas pueden deducir la estructura del texto basándose en esta clase de datos, aunque el resultado suele ser bastante imperfecto.

3.2 Sintaxis

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto y otros elementos en la página.

La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </etiqueta>

3.3 Selectores

Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son sólo los más elementales.

La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos. En esta sección se explican los llamados selectores simples

3.4 Tipos de Medios

HTML permite a los autores diseñar documentos que saquen partido de las características de los medios en los que el documento vaya a ser representado (p.ej., pantallas gráficas, pantallas de televisión, dispositivos de mano, navegadores basados en voz, dispositivos táctiles Braille, etc.). Al especificar el atributo media, los autores permiten a los agentes de usuario cargar y aplicar las hojas de estilo de manera selectiva.

Las siguientes declaraciones de ejemplo se aplican a elementos H1.

Cuando se proyecten en una reunión de negocios, todos ellos aparecerán en azul. 

Cuando se impriman, aparecerán centrados.

<HEAD> <STYLE type="text/css" media="projection"> H1 { color: blue } </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE>

Este ejemplo añade efectos de sonido a los vínculos para su uso en salidas por voz: <STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD> 

El control de medios es particularmente interesante cuando se aplica a hojas de estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen de la red únicamente aquellas hojas de estilo que se apliquen el dispositivo actual.

Por ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas de estilo diseñadas para la representación visual. Hay dos maneras de especificar las hojas de estilos dependientes de los medios: 

· Desde una hoja de estilo con las reglas: 

@import o @media @import url("archivo.css" ) tipo de medio; @media tipo de medio{/* la hoja de estilo para el tipo de medio va aquí */}

 · Especificando el medio de destino dentro del lenguaje del documento <html> <head> <title>Vínculo a un tipo de medio</title> <link rel="stylesheet" type="text/css" media= "tipo_medio1, tipo_medio2" href="archivo.css"> </head> <body> <p>Texto, texto, texto</p> </body> </html> 

Los posibles valores para tipos de medios: 

all | brille | embossed | handheld | print | projection | screen | speech | tty | tv Una regla @media especifica los tipos de medios. Veamos unos ejemplos del uso de la regla @media:  · @media print{body { font-size: 10pt }}  · @media screen{body { font-size: 12px }}

3.5 Modelo de Caja

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. La siguiente imagen muestra las cajas que forman la página web de http://www.alistapart.com/ después de forzar a que todas las cajas muestren su borde

3.6 Aplicación en Documento Web

La implementación de un lenguaje es la que provee una manera de que se ejecute un programa para una determinada combinación de software y hardware. Existen básicamente dos maneras de implementar un lenguaje: Compilación e interpretación. Compilación es la traducción a un código que pueda utilizar la máquina. Los programas traductores que pueden realizar esta operación se llaman compiladores.

Éstos, como los programas ensambladores avanzados, pueden generar muchas líneas de código de máquina por cada proposición del programa fuente.

Se puede también utilizar una alternativa para traducir lenguajes de alto nivel. En lugar de traducir el programa fuente y grabar en forma permanente el código objeto que se produce durante la compilación para utilizarlo en una ejecución futura, el programador sólo carga el programa fuente en la computadora junto con los datos que se van a procesar. A continuación, un programa intérprete, almacenado en el sistema operativo del disco, o incluido de manera permanente dentro de la máquina, convierte cada proposición del programa fuente en lenguaje de máquina conforme vaya siendo necesario durante el procesamiento de los datos. El código objeto no se graba para utilizarlo posteriormente.

La siguiente vez que se utilice una instrucción, se la deberá interpretar otra vez y traducir a lenguaje máquina. Por ejemplo, durante el procesamiento repetitivo de los pasos de un ciclo o bucle, cada instrucción del bucle tendrá que volver a ser interpretada en cada ejecución repetida del ciclo, lo cual hace que el programa sea más lento en tiempo de ejecución (porque se va revisando el código en tiempo de ejecución) pero más rápido en tiempo de diseño (porque no se tiene que estar compilando a cada momento el código completo). El intérprete elimina la necesidad de realizar una compilación después de cada modificación del programa cuando se quiere agregar funciones o corregir errores; pero es obvio que un programa objeto compilado con antelación deberá ejecutarse con mucha mayor rapidez que uno que se debe interpretar a cada paso durante una ejecución del código.

La mayoría de lenguajes de alto nivel, permiten la programación multipropósito, sin embargo, muchos de ellos fueron diseñados para permitir programación dedicada, como lo fue PASCAL con las matemáticas en su comienzo. También, se han implementado lenguajes educativos infantiles como LOGO que mediante una serie de simples instrucciones, permitía mover una tortuga entre otras cosas. En el ámbito de infraestructura de internet, cabe destacar a Perl con un poderoso sistema de procesamiento de texto y una enorme colección de módulos.

avance de curso de asistente web

Uso de los principales formatos básicos de Internet

Se muestra el uso y conversión de los formatos de archivo más utilizados en Internet para integrar documentos, imágenes, audio y vídeo a una página Web.

AVANCE DE CURSO

UNIDAD 2

El lenguaje de marcas de hipertexto es un lenguaje de marcacion diseñado para estructurar  textos y presentarlos en forma de hipertexto  que es el formato estandar de las paginas web su ventaja respecto a otros lenguajes y es  de los mas facil de aprender.

el lenguaje html puede ser creado por cualquier editor de texto como bloc de notas  de windows  o permite edor que admita texto sin formato.

es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

El lenguaje de marcado, también conocido como HTML, se trata de un sistema de etiquetas que manejan instrucciones de creación de documentos web, la representación de las etiquetas es; ‹ html ›, las instrucciones son definidas en ingles y delimitan el tamaño del documento, el color de fondo, las imágenes que utilizara, el orden de los menús que presentara, entre otras opciones más
Los sistemas de programación que utilizan el lenguaje de mercado son varias por lo que a continuación se presentan algunos de los más utilizados para los medio web; • HTML • XML • XHTML Se determinan estos lenguajes como base por la gran compatibilidad que se tiene entre los distintos compiladores de los sistemas como; Mac, Windows, Linux, Android, etc. Todos los atributos que se presentan en estos lenguajes pueden ser representados con diferentes nombres, pues las estructuras cambian en conjunto con los sistemas, actualmente el lenguaje de base que se utiliza en este tipo de documentos es HTML5 que se aplica para la correcta aparición de la información en los dispositivos móviles, como en los teléfonos inteligentes o los sistemas Tablet, que por presentarse en dispositivos mas “ligeros”, por el cambio en sus sistemas operativos ya que presentan cientos de diferencias que los hace más ligeros y veloces para la capacidad que presentan en estos dispositivos a comparación de los sistemas aplicados a las computadoras de sobremesa o portátiles.

En el mundo de los documentos en papel, el término marcado hace referencia a la manera en la que el editor anota los manuscritos con especificaciones tipográficas y otros datos sobre su presentación. En los documentos electrónicos, el marcado es el término empleado para describir los códigos, denominados también etiquetas, añadidos al texto electrónico que definen la estructura y el formato en el que tiene que aparecer. Puede ser utilizado, además, para propósitos muy diferentes como son la escritura, la impresión, el intercambio, la presentación de pantallas, etc. La gran variedad de lenguajes de marcado y su patente incompatibilidad constituyen la causa de los problemas que se plantean al intercambiar un documento entre plataformas heterogéneas. Los lenguajes estándar proporcionan una manera de solventar este hecho, ya que son independientes de la aplicación y de la plataforma hardware, empleando para marcar el documento, en la mayoría de los casos, código ASCII. Cuando se habla de lenguajes de marcado, es importante distinguir entre la estructura lógica y física del documento. En la figura 1 se pueden ver algunos de los componentes que describen la lógica y la estructura física del documento. En este capítulo se presentan un conjunto de lenguajes de marcado que se utilizan habitualmente en los entornos Web y algunos lenguajes de presentación que permiten adaptar la presentación de la información contenida en esos documentos. Además, y para finalizar, se presenta el VRML como lenguaje de modelado que permite la definición de mundos virtuales que permiten al usuario navegar por la información en tres dimensiones. DEFINICIÓN: La estructura lógica. • La estructura lógica está formada por las partes que lo componen y por sus relaciones. DEFINICIÓN: La estructura física. • La estructura física indica la apariencia del documento, ya sea en el papel o sobre la pantalla, incluyendo sus componentes físicos, el posicionamiento de los elementos y la tipografía empleada.
HTML es una aplicación de SGML que incluye tipos de documentos predefinidos. Por ello, todos los documentos de tipo HTML contienen los mismos elementos y los mismos atributos, es decir todos los documentos de este tipo tienen la misma estructura pero no los mismos contenidos. La última versión de HTML es la 4.01 siendo una recomendación no una especificación ya que no se llegó a un acuerdo total sobre ella. Esta norma ha ido desvirtuándose de tal manera que además de elementos conceptuales como pueden ser los enlaces, contiene también elementos de presentación (por ejemplo, el elemento para poner en negrita un texto). Todos los documentos que cumplen la norma HTML, por tanto, siguen la especificación de una DTD concreta que es interpretable por los navegadores que existen en la actualidad. En este proceso de interpretación, el navegador se encarga de transformar cada una de las marcas que definen la estructura del documento en una representación física que el usuario pueda comprender. Todo documento HTML está formado por una cabecera (HEAD) y un cuerpo (BODY). En la cabecera se incluye toda la información relativa al documento como puede ser meta-información que es información sobre la información o un título que se utilizará por el navegador en la lista de páginas visitadas o como título de la ventana que muestra el documento. En la parte del cuerpo se incluirá toda la información relativa al documento junto con las etiquetas que dan forma al mismo. En el ejemplo anterior, la etiqueta
sirve para que la imagen que aparece a continuación del texto se muestre en la línea siguiente, mientras que la etiqueta se utiliza para incluir la imagen que se indica en el atributo src.
XML (Extensible Markup Language) XML :es una aplicación de SGML, lo que significa que en su especificación se indican como se deben describir los elementos que participan en el hiperdocumento pero no los elementos en sí. Por tanto, cuando se quiere describir un documento mediante XML hay que describir en primer lugar el tipo de documento en que se basa, es decir la DTD, y a continuación los contenidos concretos asociados a cada elemento. Un ejemplo de construcción de aplicaciones con XML es el desarrollo de normas para tipos concreto de documentos, como puede ser un libro electrónico. Una iniciativa en este campo, el desarrollo de una DTD para libros electrónicos a partir de XML, es OpenEBook, un estándar en el que numerosas empresas del sector bibliográfico están trabajando de manera que con una misma plataforma se puedan leer, comprar, distribuir, etc. libros electrónicos que tengan un formato común.
XHTML (The Extensible Hypertext Markup Language) :XHTML es una nueva definición de HTML a partir de XML. Este lenguaje se basa en la redefinición de las DTDs de HTML versión 4 mediante XML lo que permite entre otras cosas que los documentos siguiendo XHTML se puedan visualizar tanto en navegadores de HTML como en los de XML. Por otro lado, como los documentos XHTML son documentos XML deben estar bien formados, es decir deben cumplir exactamente con la especificación, cosa que no ocurre con los documentos HTML que los navegadores lo visualizan correctamente aunque el documento no cumpla exactamente la norma. Otras diferencias entre un documento HTML y un documento XHTML son: • El orden de apertura de un elemento debe corresponder con el orden de cerrado del mismo. • Las etiquetas deben de estar escritas en minúsculas.

Un “Lenguaje de marcado” o “lenguaje de marcas” se puede definir como una forma de codificar un documento donde, junto con el texto, se incorporan etiquetas, marcas o anotaciones con información adicional relativa a la estructura del texto, su presentación,..

Los lenguajes de marcado permiten hacer explícita la estructura de un documento, su contenido semántico o cualquier otra información lingüística o extralingüística que se quiera hacer patente Ejemplos: • El día 22/11/2006 tuvo lugar ... • Móstolesa2 de noviembre Lenguajes de marcado • Los lenguajes de marcado se pueden clasificar en: • Procedimental: – Describen operaciones tipográficas • Estructural: – Describen la estructura lógica de un documento, pero no su tipografía 

• • Híbrido: – Combinación de ambos – Las hojas de estilo o lenguajes de transformación permiten la “traducción” de anotaciones de tipo estructural a anotaciones de carácter tipográfico. }Los lenguajes de marcado se pueden clasificar en:
•  Procedimental: – Describen operaciones tipográficas 
•  Estructural: – Describen la estructura lógica de un documento, pero no su tipografía
•   Híbrido: – Combinación de ambos – Las hojas de estilo o lenguajes de transformación permiten la “traducción” de anotaciones de tipo estructural a anotaciones de carácter tipográfico.
• Algunos lenguajes de marcado específicos: – Documentación electrónica 
• • RTF • TeX • Wikitexto • DocBook – Tecnologías de internet 
• • HTML, XHTML
•  • RDF (recurso-propiedad(relación)-valor) 
• • RSS – Otros lenguajes especializados 
• • MathML
•  • VoiceXML 
• • SVG
•  • MusicXML Lenguajes de marcado • Haciendo un poco de historia.. – La idea de introducir un marcado en un documento electrónico viene heredada de la corrección manual de manuscritos – En la década de los 60' se empieza a desarrollar la idea de separar presentación y estructura. – Desde IBM se implusa la creación del lenguaje GML, que resultó se la semilla de una versión posterior estándarizada: SGML. – La potencia de SGML implica una dificultad en su aprendizaje y uso. – El HTML se crea a partir del SGML. – XML surge como respuesta al desorden que supuso el rápido crecimiento del HTML. Leng

Introduccion

Los lenguajes de marcas ,tambien denominados lenguaje de marcado o lenguajes de descripcion de documentos ,definen la estructura,la semantica y controlan el procesamiento de un documento de un documento digital.
En un docuemento existen distintos niveles de informacion:por un lado, los datos que conforman el contenido de un documento(caracteres de contenido), y por otro una informacion superpuesta al contenido, que es lo que contruye el etiquetado, marcado o markup(caracteres de etiqueta).
un lenguaje de marcado cumple con dos objetivos esenciales a la hora de diseñar y procesar un documento digital:

• Especifica las operaciones tipograficas y las funciones que deben ejecutar el programa navegador/visualizar sobre dichos elementos.
• Separar un texto en los elementos de los que se compone, como un parrafo, un capitulo ,un encabezado.

En los documentos existen varios niveles de información, estos son los que determinan las características y atributos de la misma. Estos lenguajes de programación en los que se basan los documentos son conocidos como “markups” que se representan por etiquetas. Cuando se aplican los lenguajes de marcado se cumplen con objetivos esenciales.

• Determina la tipografía y as funciones que ejecuta al momento de la visualización de los elementos que se diseñaron anteriormente. 
• Estructura los elementos en la pantalla, ya sean los párrafos, imágenes, menús, etc.
• Presenta características para la impresión de documentos. • Separa los elementos para tener un orden y los gestiona al momento de la visualización para tener una más rápida descarga. 
• Crea el lazo de conexión del servidor y el cliente. La utilización de los medios mencionados son principalmente en tres aspectos; • Sirve para describir elementos del contenido.
• Define el formato.
• Realiza funciones del lenguaje HTML.

Un lenguaje de marcado o de marcas se basa en instrucciones “WEB”, es decir, etiquetas de programación que podemos estructurar de manera manual o automática mediante programas de diseño como Adobe Dreamweaver, Adobe Muse, Web Evolution x6, etc. En los cuales por tratarse de programas visuales los elementos crean las instrucciones de marcado al situar los elementos en cualquier parte del elemento que se desea crear, el desarrollo de aplicaciones web también se basa en lenguajes de marcas, ya que los Widgets pueden ser adquiridos desde una web exterior y ubicarla como elemento principal de un portal propio.

Algunas de sus ventajas son:


Código más sencillo y simplificado, las páginas cargan más rápido en el navegador.
La gran mayoría de los navegadores de los teléfonos Smartphone y las tabletas, son compatibles con HTML5
Los plugins, widgets y botones que ofrecen los desarrolladores de las redes como Facebook, Twitter y otras, escritos en HTML 5 funcionan excelentemente, con más opciones que los clásicos en XHTML o que los iframes.
Es posible insertar directamente videos en las páginas sin tener que acudir a los iframes o usar la etiqueta object.
HTML 5 incluye etiquetas orientadas principalmente a los buscadores, para facilitarles comprender el contenido de las páginas, lo que nos beneficia, por ejemplo: header, footer, article, nav, etc.
Permite la Geolocalizacion del usuario.
Otras de las razones es el empleo del microformato en las páginas web, que algunos son totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se use HTML5.

ARQUITECTURAS DE LAS APLICACIONES WEB

Una aplicación Web es proporcionada por un servidor Web y utilizada por usuarios que se Conectan desde cualquier punto vía clientes Web (browsers o navegadores). La arquitectura de un Sitio Web tiene tres componentes principales: 

Un servidor Web 

Una conexión de red 

Uno o más clientes 

El servidor Web distribuye páginas de información formateada a los clientes que las solicitan. Los requerimientos son hechos a través de una conexión de red, y para ello se usa el protocolo HTTP. Una vez que se solicita esta petición mediante el protocolo HTTP y la recibe el servidor Web, éste localiza la página Web en su sistema de archivos y la envía de vuelta al navegador que la solicitó.

Las aplicaciones Web están basadas en el modelo Cliente/Servidor que gestionan servidores web, y que utilizan como interfaz páginas web.

Las páginas Web son el componente principal de una aplicación o sitio Web. Los browsers piden páginas (almacenadas o creadas dinámicamente) con información a los servidores Web. En algunos ambientes de desarrollo de aplicaciones Web, las páginas contienen código HTML y scripts dinámicos, que son ejecutados por el servidor antes de entregar la página.

Una vez que se entrega una página, la conexión entre el browser y el servidor Web se rompe, es decir que la lógica del negocio en el servidor solamente se activa por la ejecución de los scripts de las páginas solicitadas por el browser (en el servidor, no en el cliente). Cuando el browser ejecuta un script en el cliente, éste no tiene acceso directo a los recursos del servidor. Hay otros componentes que no son scripts, como los applets (una aplicación especial que se ejecuta dentro de un navegador) o los componentes ActiveX. Los scripts del cliente son por lo general código JavaScript o VBSscript, mezclados con código HTML.

La colección de páginas son en una buena parte dinámicas (ASP, PHP, etc.), y están agrupadas lógicamente para dar un servicio al usuario. El acceso a las páginas está agrupado también en el tiempo (sesión). Los componentes de una aplicación Web son:

1. Lógica de negocio. 

Parte más importante de la aplicación. 

Define los procesos que involucran a la aplicación. 

Conjunto de operaciones requeridas para proveer el servicio. 

2. Administración de los datos. 

Manipulación de BD y archivos. 

3. Interfaz 

Los usuarios acceden a través de navegadores, móviles, PDAs, etc. 

Funcionalidad accesible a través del navegador. 

Limitada y dirigida por la aplicación. 

Las aplicaciones web se modelan mediante lo que se conoce como modelo de capas, Una capa representa un elemento que procesa o trata información. Los tipos son: 

Modelo de dos capas: La información atraviesa dos capas entre la interfaz y la administración de los datos. 

Modelo de n-capas: La información atraviesa varias capas, el más habitual es el modelo de tres capas. 

Modelo de dos Capas.

Gran parte de la aplicación corre en el lado del cliente (fat client).

Las capas son: 

Cliente (fat client): La lógica de negocio está inmersa dentro de la aplicación que realiza el interfaz de usuario, en el lado del cliente. 

Servidor: Administra los datos. 

Las limitaciones de este modelo son. 

Es difícilmente escalable 

Número de conexiones reducida 

Alta carga de la red. 

La flexibilidad es restringida 

La funcionalidad es limitada. 

Modelo de tres Capas.

Esta diseñada para superar las limitaciones de las arquitecturas ajustadas al modelo de dos capas, introduce una capa intermedia (la capa de proceso) Entre presentación y los datos, los procesos pueden ser manejados de forma separada a la interfaz de usuari o y a los datos, esta capa intermedia centraliza la lógica de negocio, haciendo la administración más sencil a, los datos se pueden integrar de múltiples fuentes, las aplicaciones web actuales se ajustan a este modelo.

Las capas de este modelo son:

1. Capa de presentación (parte en el cliente y parte en el servidor) 

Recoge la información del usuario y la envía al servidor (cliente) 

Manda información a la capa de proceso para su procesado 

Recibe los resultados de la capa de proceso 

Generan la presentación 

Visualizan la presentación al usuario (cliente) 

2. Capa de proceso (servidor web) 

Recibe la entrada de datos de la capa de presentación 

Interactúa con la capa de datos para realizar operaciones 

Manda los resultados procesados a la capa de presentación 

3. Capa de datos (servidor de datos) 

Almacena los datos 

Recupera datos 

Mantiene los datos 

segura la integridad de los datos 

1.1 Evolución de las aplicaciones web

La programación web es un término adecuado para describir el proceso general que engloba el diseño y la creación de un sitio web.
Hace algunos años, los sitios web no eran mucho más que folletos digitales. Actualmente los sitios son más grandes y complejos.
Con la introducción de comercio electrónico y las páginas dinámicas, los sitios ya han dejado atrás los folletos y han pasado a ser auténticas aplicaciones de software.

La web 1.0

La Web 1.0 (1991-2003) es la forma más básica que existe, con navegadores de sólo texto bastante rápidos ya que es de sólo lectura. El usuario no puede interactuar con el contenido de la página (nada de comentarios, respuestas, citas, etc), estando totalmente limitado a lo que el Webmaster sube a ésta.


Algunos elementos de diseño típicos de un sitio Web 1.0 incluyen:

Páginas estáticas en vez de dinámicas por el usuario que la visita.
El uso de framesets o Marcos.
Extensiones propias del HTML como <bilnk> y <marquee>, etiquetas introducidas durante la guerra de navegadores web.
Libros de visitas online o guestbooks
botones GIF, casi siempre a una resolución típica de 88x31 pixels en tamaño promocionando navegadores web u otros productos.
formularios HTML enviados vía email. Un usuario llenaba un formulario y después de hacer clic se enviaba a través de un cliente de correo electrónico, con el problema que en el código se podía observar los detalles del envío del correo electrónico.
No se podian adherir comentarios ni nada parecido
Todas sus páginas se creaban de forma fija y muy pocas veces se actualizaban.
No se trata de una nueva versión, sino de una nueva forma de ver las cosas.

La web 2.0

El término Web 2.0 comprende aquellos sitios web que facilitan el compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración en la World Wide Web. Un sitio Web 2.0 permite a los usuarios interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual, a diferencia de sitios web estáticos donde los usuarios se limitan a la observación pasiva de los contenidos que se han creado para ellos. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomías.


Servicios asociados:

Blogs: Un blog es un espacio web personal en el que su autor puede escribir cronológicamente artículos, noticias...(con imágenes y enlaces).
Wikis: Una wiki es un espacio web corporativo, organizado mediante una estructura hipertextual de páginas donde varias personas elaboran contenidos de manera asíncrona.
Redes sociales: Sitios web donde cada usuario tiene una página donde publica contenidos y se comunica con otros usuarios. Ejemplos: Facebook, Twitter, Tuenti, Hi5, Myspace, etc.
Entornos para compartir recursos: Entornos que nos permiten almacenar recursos o contenidos en Internet, compartirlos y visualizarlos cuando nos convenga. Existen de diversos tipos, según el contenido que albergan o el uso que se les da:
Documentos: Google Drive y Office Web Apps (SkyDrive), en los cuales podemos subir nuestros documentos, compartirlos y modificarlos.
Videos: Youtube, Vimeo, Dailymotion, Dalealplay... Contienen miles de vídeos subidos y compartidos por los usuarios.
Fotos: Picassa, Flickr... Permiten disfrutar y compartir las fotos también tenemos la oportunidad de organizar las fotos con etiquetas, separándolas por grupos como si fueran álbumes, podemos seleccionar y guardar aparte las fotos que no queremos publicar.
Agregadores de noticias: Digg, Meneame... Noticias de cualquier medio son agregadas y votadas por los usuarios.
Almacenamiento online: Dropbox, Google Drive, SkyDrive
Presentaciones: Prezzi, Slideshare.
Plataformas educativas
Aulas virtuales (síncronas)
Encuestas en línea

La web 3.0

Web 3.0 es una expresión que se utiliza para describir la evolución del uso y la interacción de las personas en internet a través de diferentes formas entre los que se incluyen la transformación de la red en una base de datos, un movimiento social hacia crear contenidos accesibles por múltiples aplicaciones non-browser, el empuje de las tecnologías de inteligencia artificial, la web semántica, la Web Geoespacial o la Web 3D.



Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales —que describen el contenido, el significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos. Con la web 3.0 se busca que los usuarios puedan conectarse desde cualquier lugar, cualquier dispositivo y a cualquier momento.


Entre sus innovaciones destacan:


Bases de datos
Inteligencia artificial
Web semántica y SOA
Evolución al 3D

La web 4.0

las aplicaciones ya no estarán en nuestras PC’s, estarán en la internet y por ende en todos lados. Pasaremos de una red “tonta” a una red “inteligente” donde el objetivo primordial será el de unir las inteligencias donde tanto las personas como las cosas se comuniquen entre sí para generar la toma de decisiones. Para el 2020 o quizás antes se espera que haya “agentes” en la Web que conozcan, aprendan y razonen como lo hacemos las personas.
La Web Ubicua es un concepto que está aún en desarrollo, pero me llama curiosamente la atención como se van complementando algunas tecnologías que nos permiten imaginar o soñar lo que podemos esperar en un futuro no muy lejano. Imagínese recibir información en su celular en la calle por la que camina y que su propio equipo le haga una reservación en el restaurant de la esquina con solo saber sus gustos.