Author: Sergio Luján Mora

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/ixgxusIl66I” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se define con CSS el estilo del texto.

En CSS existen muchas propiedades para definir el estilo del texto, en este vídeo vamos a ver el conjunto de propiedades que comienzan con el prefijo font-.

En la recomendación de CSS1, que se publicó en diciembre de 1996, se definían las propiedades font-family, font-style, font-variant, font-weight y font-size, que son las que vamos a ver en este vídeo.

La propiedad font es un resumen de las anteriores y permite modificar las anteriores con una sola regla.

CSS3 es muy complejo y se ha dividido en varios módulos.

Existe un módulo específico para el tipo de letra llamado “CSS Fonts Module Level 3”, que añade propiedades nuevas. La mayoría de los navegadores actuales no admiten estas propiedades. Además, estas propiedades son muy específicas y es muy improbable que las vayas a utilizar alguna vez.

Las nuevas propiedades de CSS3 permiten un ajuste tipográfico muy fino y tienen sentido en la actualidad porque la resolución de los dispositivos de visualización ha aumentado considerablemente.

Por ejemplo, compárese la resolución VGA de 640×480, tan común hace 15 años, con la resolución FullHD 1920×1080 que se ha convertido en el estándar actual.

Las propiedades que vamos a ver a continuación son font-family, font-size, font-weight, font-style y font-variant.

Font-family permite modificar la familia tipográfica, el tipo de letra.

Existen miles y miles de familias tipográficas. Como existen tantas familias tipográficas, se han propuesto varias clasificaciones para poder ordenarlas y compararlas.

Una de las más conocidas es la clasificación tipográfica de Francis Thibaudeau, que divide las familias tipográficas en tres grupos: con serifas, sin serifas y otras tipografías.

Las serifas son las terminaciones, las decoraciones o adornos que aparecen en los extremos de algunas letras, como en este ejemplo la letra s, la r, la i y la f.

Estas terminaciones proporcionan un aspecto más elegante y clásico y facilitan la lectura en los documentos impresos.

En los tipos de letra sin serifas estas terminaciones no aparecen. Los tipos de letra sin serifas también se conocen en español como de “palo seco”.

A la hora de especificar la familia tipográfica que se quiere emplear se puede indicar una lista de tipos de letra.

Por ejemplo, en este código, para el elemento h1, se ha indicado el tipo de letra Times New Roman y el tipo Georgia. Y para el elemento p, un párrafo, el tipo de letra Arial y el tipo Helvetica.

Un navegador web intentará emplear el primer tipo de letra definido. Si no puede utilizarlo, pasará al segundo tipo de letra, después al tercero y así sucesivamente hasta el final. Si ninguno de los tipos de letra definidos puede ser utilizado, el navegador utilizará un tipo de letra por defecto. Pero quizás el tipo de letra no se ajuste a nuestro diseño.

Para solventar este problema, se recomienda indicar siempre un tipo genérico al final de la lista de tipos de letra.

Las familias o tipos genéricos son serif y sans-serif para los tipos de letra con serifas y sin serifas.

cursive para tipografías que simulan la escritura a mano, como por ejemplo Lucida Handwriting.

fantasy para tipografías exageradas que se emplean en anuncios y pósteres.

Y monospace para las tipografías en las que cada carácter ocupa exactamente la misma cantidad de espacio horizontal.

Font-size especifica el tamaño de la letra, que se puede especificar de muchas formas.

Existen cuatro formas, de forma absoluta, relativa, mediante un tamaño especificado con distintas unidades de medida y mediante un porcentaje.

Font-weight permite seleccionar el peso del tipo de letra.

El peso es el grosor de los caracteres.

La propiedad font-weight puede tomar todos estos valores, pero normalmente sólo se emplean normal y bold.

La razón de ello es que, normalmente, una familia tipográfica no incluye todos los pesos existentes, sólo unos pocos. Por tanto, cuando se emplea una familia tipográfica conviene conocer sus características para saber lo que se puede usar.

Font-style permite seleccionar el estilo de la fuente, del tipo de letra.

La propiedad font-style puede tomar estos tres valores: normal, italic y oblique.

En esta imagen se representan dos letras con los tipos de letra Palatino y Baskerville.

El estilo oblicuo suele ser el estilo de letra normal que se ha inclinado, como si fuera una figura geométrica que ha sufrido una transformación.

Sin embargo, el estilo cursiva, italic, es un diseño específico de las letras con una inclinación y una forma distinta a la normal.

La última propiedad, font-variant, permite seleccionar variaciones del tipo de letra.

Esta propiedad puede tomar dos valores, normal y small-caps.

Small-caps en español es el tipo de letra versalita, letras mayúsculas cuyo tamaño es similar al de las minúsculas.

Antes de terminar, te invito a que utilices este configurador de tipos de letra que puedes encontrar en el Mozilla Developer Network.

Por ejemplo, aquí he elegido como variante versalitas, small-caps.

El tamaño lo he fijado a 24 pixels.

Y la familia tipográfica seleccionada es serif.

Este es un ejemplo de texto con el tipo de letra seleccionado.

En este otro ejemplo, he elegido el estilo cursiva, italic.

El peso es negrita y el tamaño 24 pixels.

La familia tipográfica seleccionada es sans-serif.

Por último, este es un ejemplo de texto con el tipo de letra seleccionado.

Ahora te invito a que veas la segunda parte de este vídeo.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/V2ImdQdPqNE” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se escriben las listas en HTML.

El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas.

Las listas no ordenadas, las listas ordenadas y las listas de descripción.

Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada y <dl> para la lista de descripción.

Los elementos de las listas se definen de la siguiente forma.
Para la lista no ordenada y la lista ordenada se emplea el elemento <li>.
Para la lista de descripción se emplean los elementos <dt> y <dd>.
Vamos a verlo con detalle.

Ul es el acrónimo de unordered list, lista no ordenada.
En una lista no ordenada, el orden de aparición de los elementos no es importante.
Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos.
Por ejemplo, todo esto es una lista no ordenada.

En el siguiente ejemplo, a la izquierda tenemos el código HTML que produce como resultado la lista no ordenada que aparece a la derecha.

El estilo de una lista se puede cambiar, para que en vez de un círculo relleno, un disco, sea el contorno del círculo o un rectángulo el elemento marcador.

Antiguamente existía el atributo type en HTML que permitía cambiar el estilo de una lista no ordenada. Pero ese atributo ahora está obsoleto y no se debe de usar.
En su lugar se debe emplear CSS, pero eso se verá en otro vídeo.

Ol es el acrónimo de ordered list, lista ordenada.
En una lista ordenada, el orden de aparición de los elementos es importante.
Cada elemento de la lista se define con <li>, que es el acrónimo de list item.
Los elementos de la lista se indican con números o letras.
Por ejemplo, todo esto es una lista ordenada.

En el siguiente ejemplo, a la izquierda tenemos el código HTML que produce como resultado la lista ordenada que aparece a la derecha.

Una lista ordenada puede hacer uso de los siguientes atributos que modifican su comportamiento.
En HTML4 y HTML5 se puede emplear el atributo start que permite indicar el valor inicial en el que debe comenzar la lista. También está el atributo type que permite indicar el tipo de numeración, como por ejemplo letras o números romanos.
En HTML5 se ha añadido el atributo booleano reversed, que permite indicar que la numeración debe ser descendente.

En el siguiente ejemplo se muestran cinco listas ordenadas.
En la primera lista simplemente se ha empleado la etiqueta <ol> para definir la lista ordenada.
En las otras cuatro listas, se ha empleado el atributo type para modificar la numeración de las listas: letras mayúsculas, letras minúsculas, números romanos en mayúsculas y números romanos en minúsculas.

En el siguiente ejemplo se muestra el uso del atributo reversed para invertir el orden de numeración de las listas.
El atributo reversed es un atributo booleano, lo que significa que sólo puede tomar un valor que es el mismo nombre del atributo.

En este ejemplo se muestra el efecto del atributo reversed combinado con el atributo type.

Dl es el acrónimo de description list, lista de descripción, que se compone de términos. Cada término puede poseer cero o más descripciones.
Cada término de la lista se define con <dt>.
Cada descripción de un término se define con <dd>.
Y los elementos no se indican con símbolos, números o letras, sino con un aumento del margen izquierdo, de la sangría izquierda.

La lista de descripción se emplea normalmente para definir un glosario o un diccionario.
En el siguiente ejemplo, este código genera la lista que se muestra a la derecha.
Podemos apreciar como las definiciones de cada término poseen una sangría o margen izquierdo.

En una lista de descripción, un término puede tener cero o varias descripciones.
Por ejemplo, este código genera la lista de descripción que se muestra en la parte superior de la pantalla. En esta lista de descripción hay tres términos, el primero y el tercero poseen dos descripciones, pero el segundo una sola descripción.

Por último, en HTML también se pueden crear listas anidadas.
Una lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que está dentro de otra se llama sublista.

En el siguiente ejemplo, este código genera la lista que se muestra en la parte superior de la imagen. Esta lista posee tres niveles de anidamiento y está formada por tres listas no ordenadas.
En el primer nivel se emplea como símbolo un disco, en el segundo un círculo y en el tercero un cuadrado solido.

Y en este último ejemplo, se ha anidado una lista ordenada dentro de una lista no ordenada.
A la derecha se muestra el resultado.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

En muy poco tiempo, quizás en una semana, comenzará la nueva edición de iDESWEB que traerá numerosas novedades. La principal, el curso se ofrecerá a través de la iniciativa Actívate patrocinada por Google. Esta iniciativa se describe como:

El futuro del trabajo está en el mundo online, un mundo lleno de posibilidades donde puedes conseguir todo lo que te propongas.

En Actívate encontrarás cursos de formación que te ayudarán a ampliar conocimientos en temas que te interesan, información que te permitirá optimizar la forma en la que te presentas a una oferta de trabajo y recursos para poner en marcha tu propio proyecto emprendedor.

Durante las próximas semanas publicaré los nuevos vídeos de iDESWEB que se han realizado para Actívate.

Vídeo: PHP: ejemplo de página web con orientación a objetos (parte 2)

Descarga de ficheros del ejemplo: iDESWEB: PHP: ejemplo de página web con orientación a objetos

[kml_flashembed movie=”http://www.youtube.com/v/M-hlzCzw7TA” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a mostrar un ejemplo de desarrollo de una página web con orientación a objetos.

En la primera parte de este vídeo, vimos un pequeño programa que estaba escrito con el estilo procedural y que trabajaba con datos almacenados en un array.

En esta segunda parte, voy a transformar ese código en orientado a objetos, con clases y objetos.

Algo muy importante en la programación orientada a objetos es el diseño orientado a objetos.

Utilizar la programación orientada a objetos sin un buen diseño previo es el camino adecuado para que cualquier proyecto acabe en un desastre.

En mi ejemplo el diseño es muy sencillo. Tenemos una clase llamada Persona, que posee dos propiedades ocultas llamadas nombre y apellidos.

De esta clase hereda la clase Profesor, que añade la propiedad cargo. Y también existe la clase Estudiante, que añade la propiedad curso.

Pasemos a ver el ejemplo.

Aquí en el editor muestro en paralelo los dos ficheros que he realizado. A la izquierda tenemos el ejemplo realizado con arrays, con el estilo procedural, es decir, con funciones sueltas, el ejemplo que mostré en el vídeo anterior. Y a la derecha tenemos el ejemplo realizado con orientación a objetos, es decir, con clases y con objetos.

Lo he puesto así en paralelo para comparar el código en una opción y en la otra, procedural a la izquierda y en orientado a objetos a la derecha.

Aquí tenemos otra vez la función e() que usaba en el ejemplo anterior.

En primer lugar tengo definida la clase Persona. La clase Persona tiene el constructor, tiene el destructor que no hace nada, pero lo he puesto porque ahora vamos a ver una traza de ejecución de los constructores y destructores.

Fíjate que en la función constructor y en la función destructor llamó a la función e(), esta función que tengo declarada aquí, para simplemente mostrar un mensaje y saber que se ha ejecutado el constructor de la clase Persona o el destructor de la clase Persona.

Lo importante es que la clase Persona tiene un constructor que inicializa el nombre y los apellidos que están declarados como protected.

Protected recuerda que es lo mismo que privado, private, pero permite el acceso desde las clases heredadas, pero desde el exterior de la clase no se puede acceder a estas propiedades. Y luego también tenemos la función toString() que me va a convertir una Persona en una cadena, toString(). Y aquí igual que hacía antes compruebo si tiene nombre y apellidos; si no tiene devolveré desconocido, y si tiene devolveré el nombre y los apellidos.

De la clase Persona hereda la clase profesor como podemos ver aquí. La clase profesor va a ser todo lo que sea la clase Persona más ciertas cosas. En concreto la clase Profesor añade una propiedad más, en este caso privada, llamada cargo. Tenemos el constructor, tenemos el destructor. En el constructor voy a llamar al constructor de la clase base, de la clase padre, es decir el constructor de la clase Persona. Y yo le paso el nombre y los apellidos. Yo aquí no tengo que inicializarlo a mano, digamos, yo se lo puedo pasar al constructor de la clase base y entonces se ejecutará este código. Lo mismo con el destructor, yo en el destructor de la clase Profesor puede invocar el destructor de la clase base, es decir, Persona. En este ejemplo no realiza nada, pero en ejemplos más complejos podría ser necesario invocar al destructor.

Y luego tenemos la función toString(). Fíjate aquí ya aparece una ventaja: yo no tengo que volver a escribir el código necesario para mostrar el nombre y los apellidos puede invocar al método toString() de la clase base y simplemente añadirle aquello que añade la clase profesor, aquello que es particular de la clase Profesor.

Esto mismo he realizado con la clase Estudiante que también hereda de la clase Persona y en este caso le añade la propiedad Curso.

Otra vez tenemos el constructor de la clase Estudiante, que invoca el constructor de la clase base, es decir, Persona y le pasa nombre y apellidos para que se inicialice. Y luego le asigna un valor a su propiedad particular que es curso. Otra vez tenemos el destructor y otra vez tenemos el método toString() que llamará al método toString() de la clase base, de Persona y a lo que devuelve le añade el curso.

Fíjate que tanto la clase Profesor como la clase Estudiante, invocan las dos al método toString() de la clase base Persona.

Bien, una vez visto el código de estas tres clases vamos a ver nuestros datos. Nuestros datos los almaceno en un array. En realidad, podría aquí, si hubiese sido orientación a objetos pura, debería de haber creado otra clase de tipo contenedor o lista para almacenar todos estos objetos que estoy creando. Pero no quería complicar el ejemplo creando una cuarta clase. Pero como digo, se podría haber hecho.

En el array almacenamos nuestros objetos que se crean con new y el nombre de la clase. Aquí tenemos dos objetos de tipo Profesor y tres objetos de tipo Estudiante. Y le paso los parámetros para inicializar cada uno de los objetos.

Fíjate que el código, personalmente yo creo que es más fácil de leer que el código del estilo procedural con el array, y además hay que escribir menos. Vale, antes he tenido que escribir más con las clases, pero luego veremos la ventaja.

Lo primero que voy a hacer es mostrar, con un print_r() voy a mostrar el array y vamos a ver su contenido. Me lo guardo y me voy al navegador y recargo la página y vemos aquí en primer lugar temor la traza de las llamadas a los constructores. Fíjate que aparece por cada objeto dos constructores. Aparece el constructor de la clase Profesor y el constructor de la clase base Persona. Estudiante y llama al constructor de la clase base Persona. Y así se repite para los cinco objetos.

Esto mismo luego se repite al final del código, al final de la página pero con la llamada a los destructores. Se invoca al destructor del objeto Profesor y luego dentro de ese destructor invocamos al destructor de la clase base que siempre es Persona, el destructor de la clase Persona.

Bien, fíjate el array tiene cinco posiciones, de la cero a la cuatro, cinco objetos, en cada posición tenemos un objeto. Aquí nos dice que es un objeto de tipo Profesor y aquí nos dice que es un objeto de tipo Estudiante.

Y cada uno tiene pues sus campos, sus propiedades. El profesor tiene nombre, apellidos y cargo; y el estudiante tiene nombre, apellidos y curso.

Bien, volvamos ahora al código y voy a descomentar este fragmento. Bien, fíjate este fragmento es un bucle foreach que me recorre el array $comunidad para mostrarme cada uno de los objetos. Para mostrar cada objeto, $miembro es un objeto, esta posición del array, simplemente tengo que invocar el método toString() que lo he declarado siempre como público, lo puedo invocar desde fuera de la clase.

Este código de aquí equivale a este bucle que tenía aquí. Fíjate que ya tenemos un ahorro, un ahorro de código, de líneas.

En la orientación objetos yo no me tengo que preocupar por el tipo del objeto. Sí he definido bien mis clases, he hecho un buen diseño, como todas las clases tienen el método toString(), yo lo invoco y el intérprete de PHP sabrá en cada momento qué método toString() tiene que invocar; si tiene que invocar el método toString() de la clase Estudiante o tiene que invocar el método toString() de la clase Profesor.

Yo aquí, no me tengo que preocupar de ello, PHP es el que se preocupa de ello.

Sin embargo en el estilo procedural, en el estilo con arrays, yo me tenía que preocupar de ello yo tenía que comprobar en cada momento
si tenía miembro de tipo Profesor o tenía un miembro de tipo Estudiantes e invocar en cada caso el método, el procedimiento adecuado, porque si no lo hacía así pues se cometía un error o el resultado final no era el esperado.

Vamos a ejecutarlo, este código y veremos que funciona correctamente. Y aquí lo tenemos, aquí se visualiza cada uno de los objetos, de tipo Profesor o de tipo Estudiante.

Y ahora otra ventaja de la orientación a objetos. En la orientación a objetos, otra vez, si he hecho un buen diseño, puedo evitar que se comentan, que se hagan cosas que yo no quiero permitir. Por ejemplo, en mi diseño nombre y apellidos los he definido como protegidos, significa que desde fuera de la clase no se pueden modificar. Por tanto, este bucle no se va a ejecutar correctamente, yo estoy intentando cambiar el nombre, ponerle un nombre vacío a todos mis objetos.

Este código debe de fallar. Sin embargo, esto en el estilo procedural, antes vimos en el otro vídeo que sí que era posible, vimos aquí como era posible a todos los miembros cambiarle el tipo, ponerle “estudiante” o oponerle un curso cinco, quinto que no es posible.

Esto, en orientación a objetos, se puede evitar, se fue impedir que se haga.

Bien, vamos a probarlo y veremos como PHP me tiene que mostrar un mensaje de error.

Vamos a recargarlo y ahí aparece el mensaje de error. El mensaje de error me dice que no se puede acceder a la propiedad protegida nombre.

Bien, para finalizar, pues hemos visto dos ventajas importantes de la orientación a objetos. Sí, hay que escribir quizás al principio un poco más de código, pero nos reporta el beneficio de que podemos, por ejemplo, luego escribir código más sencillo y significativo, más fácil de leer y también podemos controlar situaciones que no se deben de dar en nuestro código.

Ya para finalizar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Vídeo: PHP: ejemplo de página web con orientación a objetos (parte 1)

Descarga de ficheros del ejemplo: iDESWEB: PHP: ejemplo de página web con orientación a objetos

[kml_flashembed movie=”http://www.youtube.com/v/ZIdQstGwoxQ” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a mostrar un ejemplo de desarrollo de una página web con orientación a objetos.

Si no conoces la sintaxis de la orientación a objetos en PHP, te invito a que veas los vídeos “PHP: orientación a objetos (PHP4)”, y “PHP: orientación a objetos (PHP5)”. En estos dos vídeos te explico lo mínimo que necesitas conocer sobre la orientación a objetos en PHP.

El siguiente ejemplo que te voy a mostrar lo voy a realizar con la sintaxis de orientación a objetos de PHP5.

En esta primera parte del vídeo voy a desarrollar el ejemplo con el estilo procedural. En el estilo procedural el código se encuentra en procedimientos o funciones.

Para almacenar los datos del programa que voy a realizar voy a utilizar arrays.

En el siguiente vídeo, transformaré este ejemplo en orientado a objetos y los arrays los sustituiré por clases y objetos.

¿Cuál de los dos estilos es el mejor, el procedural o el orientado a objetos?

Desde hace años, el estilo de programación que se aconseja es el orientado a objetos. Es el mejor para grandes proyectos en los que trabajan muchas personas al mismo tiempo. Pero esto no significa que el estilo procedural ya no se deba usar. En este ejemplo vamos a ver algunos de los problemas del estilo procedural, pero en ciertas situaciones es una muy buena opción.

Pasemos a ver el ejemplo.

Aquí tenemos el ejemplo que te voy a mostrar. El código ya lo tengo escrito para ir más rápido y también para no cometer errores durante la grabación del video.

Fíjate que no voy a construir una página web real, es decir, no voy a preocupar por ponerle el DOCTYPE, el <html>, etcétera, ya que el objetivo del vídeo no es hacer una página web real sino trabajar con PHP con las clases, con los objetos, etcétera.

He puesto aquí esta etiqueta <pre> para activar la visualización de texto preformateado. Esto me va a permitir que los saltos de línea que yo escriba, muestre desde PHP se respete.

En PHP primero he declarado una función llamada “e” que va a ser un alias de la función eco de PHP. Es la función que voy a emplear para mostrar, para visualizar algo en la página. Esta función añade a lo que yo quiero mostrar, a la cadena, le añade un salto de línea.

A continuación tengo declarado el array $comunidad. Este array es multidimensional, tiene en concreto dos dimensiones. En la primera dimensión vamos a encontrar una serie de arrays. Cada array representa un miembro de la comunidad universitaria.

Tenemos dos tipos de miembros: el tipo profesor y el tipo estudiante. Los dos tipos comparten alguna información, los dos tienen nombres y apellidos, como podemos ver aquí. Sin embargo, el tipo profesor tiene un campo propio, el cargo que ocupa el profesor y el tipo estudiante tiene un campo propio, el curso en el que estudia el estudiante.

Tenemos aquí cinco miembros de la comunidad universitaria. Fíjate que he empleado arrays asociativos, esta posición, este índice en el array no es un número sino que es una cadena. Lo primero que voy a hacer es visualizar este array en la página web para ver si se muestra como yo espero. Así que me voy a la página web y aquí lo tenemos, tal como se muestra.

Fíjate algo muy importante, la página que estoy haciendo la estoy ejecutando a través de localhost, no la puedo ejecutar directamente porque tiene código PHP. El array, como puedes ver, tiene cinco posiciones que van de la posición cero a la posición cuatro.

Lo siguiente que voy a hacer, voy a quitar este comentario, lo siguiente que voy a hacer es mostrar el array con un formato que yo quiero. Para ello voy a recorrer el array, el array $comunidad con un bucle foreach. Y entonces aquí nos encontramos el primer problema del estilo procedural. Tenemos dos tipos de miembros, el tipo profesor y el tipo estudiante. Cada uno tiene información diferente, así que vamos a necesitar dos funciones para mostrar cada uno de ellos. Si tuviésemos diferentes tipos, tres, cuatro, cinco, seis, necesitaríamos tres, cuatro, cinco, seis funciones para cada uno de los tipos.

Aquí tengo la primera función para mostrar el tipo profesor, la he llamado ProfesorToString(), es decir, me va a convertir un array de este tipo me lo va a convertir en una cadena, es lo que va a devolver esta función. $p va a ser el array de tipo profesor que va a recibir la función y se tienen que hacer algunas comprobaciones para hacer el código “a prueba de bombas”, para que no surjan problemas. Así que lo primero que voy a comprobar es si el array que me pasan es realmente un array; si la variable, el parámetro que han pasado $p es realmente un array.

Si es un array, lo siguiente que compruebo es que exista una posición llamada tipo, y si existe esa posición, lo siguiente que compruebo es que sea de tipo profesor, porque esta función es para mostrar un profesor. Y si es así entonces ya viene el código concreto para mostrar un profesor. Primero compruebo si tiene nombre y apellidos, si no tiene nombre y apellidos entonces el resultado, lo que voy a mostrar, es desconocido, no sabemos su nombre y sus apellidos y a continuación el cargo. Si no es así, si el nombre y los apellidos es distinto de cadena vacía, entonces el resultado es el nombre, coma apellidos, coma cargo.

Esto mismo lo tengo que repetir con el tipo estudiante. EstudianteToString recibe $e, recibe este parámetro y otra vez volvemos a realizar las mismas comprobaciones. Primero compruebo que sea un array, luego compruebo que esté definida la posición tipo, luego compruebo que sea de tipo estudiante y finalmente, si es así, ya muestro, en realidad ya devuelvo una cadena con el resultado y otra vez, si no hay nombres y apellidos, devuelvo desconocido y si sí que hay, pues devuelvo nombre, apellidos y el curso del estudiante que es lo que va a devolver la función EstudianteToString.

Bien, esto ya lo podemos probar, voy a poner ahora aquí un comentario, esto lo veremos después, así que ahora se va a ejecutar este código, va a recorrer el array y para cada miembro vamos a ver si tenemos que llamar a ProfesorToString si es de tipo profesor o a EstudianteToString si es de tipo estudiante.

Como he dicho antes, si tuviésemos más tipos, lo tendría que ir añadiendo aquí uno tras uno.

Bien, grabo el fichero y ejecuto la página. Me sale el array con el print_r() que ya lo teníamos antes, y aquí ya me sale la visualización en mi formato. Aquí tenemos un profesor, aquí tenemos un estudiante, otro estudiante, aquí tenemos un profesor y por último aquí tenemos este estudiante del cual no sabemos ni su nombre y apellidos ni su curso.

Bien, ahora ya empiezan los problemas. ¿Qué ocurre si en mi código pues por error, por ejemplo, realizo este bucle?

Con este bucle voy a cambiar todos los miembros de la comunidad universitaria y les voy a poner tipo estudiante. Pero quizás eso no se debería de poder hacer, quizás se debería comprobar que por ejemplo este miembro, que es de profesor, no puede cambiar de tipo.

Esto, en la programación procedural con arrays, es imposible, esto no se puede controlar, no se puede impedir que se hagan cosas como ésta. Y tampoco se puede impedir que se haga esto, por ejemplo le podemos poner que el curso de los estudiantes es quinto, cuando en realidad a lo mejor no es posible, no existe, el curso solamente existe de uno a cuatro, de primero a cuarto.

Como he dicho antes, todo esto no lo podemos impedir en la programación procedural, pero luego ya veremos que en la programación orientada a objetos si que lo podemos controlar.

Bien, vamos a probarlo y ahora veremos, bien primero tenemos que mostrarlo, voy a quitar este comentario, ahora explicaré esto para qué está, y vamos a probarlo.

Y ahora vemos como todos nuestros miembros, todo el contenido de nuestro array ha cambiado a tipo estudiante y a todos le ha puesto el curso quinto.

Y si ahora lo visualizamos pues efectivamente nos lo saca como que todos son estudiantes.

Bien, para finalizar este vídeo, te he dicho que te iba a comentar esto para qué estaba puesto. Bueno, no te lo digo, te lo dejo como ejercicio que averigües por qué está puesto esto aquí y qué ocurre si no lo ponemos, qué ocurre si yo esta línea la quito.

Como pista, fíjate que aquí le había puesto un ampersand en el bucle foreach. Este ampersand hace que miembro sea una referencia a las posiciones del array. Este ampersand está relacionado con esto y como digo, si no se pone, aquí ocurre algo curioso.

Ya para finalizar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Historia de HTML:

[kml_flashembed movie=”http://www.youtube.com/v/EEttUcYhv30″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar de la historia del lenguaje HTML.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Si ya has visto las dos partes del vídeo “Historia de la Web: su nacimiento”, sabrás que Tim Berners-Lee es considerado el padre de la Web porque desarrolló las tres tecnologías fundamentales en las que se basa la Web:

HTML, HyperText Markup Language, el lenguaje de marcado o etiquetado que se emplea para crear, para escribir, los documentos o páginas web.
URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o direccionamiento de los documentos web.
Y HTTP, HyperText Transfer Protocol, el protocolo o lenguaje con el que se comunican el navegador y el servidor web y que se emplea para transmitir los documentos web por Internet.

Lo que nos interesa para este vídeo es que Tim Berners-Lee desarrolló la primera versión del lenguaje HTML. En este vídeo te voy a explicar la evolución del lenguaje HTML durante sus primeros años.

La mejor información sobre los primeros años del lenguaje HTML la podemos encontrar en el libro “Raggett on HTML4”, del año 1998.

Afortunadamente, existe una versión online del capítulo 2 de este libro, el capítulo que está dedicado a contar la historia de HTML.

Dave Raggett, uno de los autores de este libro, fue el editor de la especificación del lenguaje HTML durante muchos años, así que lo que nos cuenta en su libro lo sabe por haber sido protagonista de ello en primera persona.

Tim Berners-Lee desarrolló el lenguaje HTML a partir de SGML, Standard Generalized Markup Language, un estándar ISO del año 1986 que se emplea para la organización y etiquetado de textos.

El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en sí ningún conjunto de etiquetas en especial. Por tanto, SGML es equivalente al actual XML.

Como podemos ver en este ejemplo, un documento creado según SGML se parece bastante a HTML, o mejor dicho, HTML se parece a SGML, ya que SGML es anterior a HTML. El uso de una pareja de etiquetas para marcar partes del texto en HTML está tomado directamente de SGML, al igual que ciertas etiquetas como <p>, los encabezados <h1>, <h2>, etc., o las etiquetas de lista como <ol>, <ul> y <li>, que eran muy comunes en lenguajes creados a partir de SGML.

Sin embargo, lo que SGML no incluía, y sí que es una invención propia de Tim Berners-Lee es la etiqueta <a> con el atributo href para los enlaces o hipervínculos.

Recordemos que noviembre de 1990 se suele fijar como el nacimiento de la Web: Tim Berners-Lee publicó su primer sitio web y realizó la primera conexión desde un navegador mientras trabaja en el CERN, el laboratorio europeo de investigación en física de partículas en Suiza.

Voy a emplear el siguiente diagrama para seguir la evolución del lenguaje HTML. En la parte superior se muestra la evolución del lenguaje HTML, mientras que en la parte inferior se muestra la evolución de los navegadores más populares. Por ahora nos vamos a fijar en los primeros años del lenguaje HTML, hasta la publicación de la versión 4.

Las primeras versiones de HTML no fueron estandarizadas, en parte porque su uso no estaba muy extendido, así que no era necesaria una estandarización formal.

El primer intento de estandarización lo encontramos en el borrador “Hypertext Markup Language” de junio de 1993, escrito por Tim Berners-Lee y Daniel Conolly. Este documento se considera la primera versión del lenguaje HTML, la 1.0. Daniel Conolly desarrolló el primer DTD de HTML, como podemos leer en este mensaje de junio de 1992. Esta primera versión de HTML no disponía de algunos elementos que son imprescindibles hoy en día en las páginas web, como las tablas y los formularios.

Y por otro lado, permitía crear documentos que hoy en día no son válidos, como este ejemplo en el que no aparecen ni la etiqueta <head> ni la etiqueta <body>, y la etiqueta <title> está escrita al mismo nivel que el resto del contenido de la página.

En julio de 1993 se comenzó a trabajar en la especificación de la siguiente versión de HTML, que dio lugar a HTML+ en noviembre de 1993, que nunca llegó a estandarizarse. HTML+ estaba compuesto de encabezados, párrafos, listas, figuras, tablas, formularios, texto preformateado y fórmulas matemáticas. La principal novedad de HTML+ es que incorporaba por primera vez las tablas y los formularios.

Por cierto, si se revisa el documento de HTML+ se pueden encontrar algunas cosas curiosas, como la propuesta de la etiqueta <FIG> con la etiqueta <CAPTION> para definir figuras. ¿Y por qué es curioso?

Muy sencillo, estás dos etiquetas finalmente no formaron parte del estándar de HTML, sin embargo, en HTML5, la nueva versión de HTML, incorpora como novedades las etiquetas <figure> y <figcaption>, que son muy parecidas a <fig> y <caption>.

Otra curiosidad de HTML+ es que incorporaba la posibilidad de definir ecuaciones matemáticas en HTML.

Esta característica al final no se incluyó en HTML, pero dio lugar a un lenguaje totalmente independiente, llamado MathML que ya va por la tercera versión.

Quizás te estés preguntando, ¿llegó a existir un navegador que aceptase las nuevas etiquetas de HTML+?

Sí, por supuesto, se llamaba Arena, y era un navegador desarrollado como prueba de concepto para mostrar las nuevas posibilidades de HTML.

En octubre de 1994 se funda el W3C, el World Wide Web Consortium, que a partir de entonces se encargará del desarrollo de las tecnologías que mueven la Web.

Y por fin llegamos a noviembre de 1995, cuando se publica HTML 2.0, la primera versión de HTML que fue realmente un estándar, en concreto, fue un Request for Comments, aún no era una recomendación del W3C.

Mientras tanto, empezó a fraguarse la primera guerra de los navegadores, entre Microsoft y Netscape.

Un elemento de esa guerra fue la inclusión de ciertas características especiales en los navegadores para distinguirlos de la competencia. Así, por ejemplo, Netscape inventó la etiqueta <blink>, mientras que Microsoft inventó la etiqueta <marquee>. Ambas etiquetas no han formado parte del estándar en ningún momento y no se deben emplear.

En enero de 1997 se publicó HTML 3.2, la primera versión estandarizada por el W3C.

Y en diciembre de 1999 se publicó la última revisión, HTML 4.01.

¿Qué pasó a continuación?

El W3C abandonó el desarrolló de HTML y concentró todos sus esfuerzos en el desarrollo de XML, un metalenguaje que define unas reglas para definir otros lenguajes.

En enero de 2000 se publicó XHTML 1.0, una reformulación de HTML 4 utilizando como base XML 1.0. XHTML 1.0 era como HTML 4.01, tenía las mismas etiquetas, pero imponía unas reglas más estrictas para que los documentos fueran válidos.

Y una revisión de XHTML 1.0 fue publicada en agosto de 2002.

Sin embargo, XHTML no triunfó y la gente seguía usando HTML. ¿Por qué? Seguramente porque XHTML era muy estricto y la gente no estaba preparada para ello.

Así que, en el año 2004, un grupo llamado WHATWG y formado por Apple, Mozilla y Opera, se forma y comienza el desarrollo de un HTML más cercano a la gente. El W3C rectifica, cancela el desarrollo de XHTML, y se une a WHATWG para desarrollar HTML5.

Si quieres saber más sobre el nacimiento de HTML5 y cómo fue que el W3C canceló el desarrollo de XHTML, te recomiendo la lectura del artículo “The Web is Reborn”.

En la actualidad, enero de 2013, HTML5 se encuentra en el estado de recomendación candidata y aunque todavía no es un estándar, ya se está trabajando en la siguiente versión 5.1, que incorporará aquello que no esté incluido en la versión 5.

La hoja de ruta que se ha marcado el W3C establece que HTML 5.0 será una especificación oficial a finales del año 2014, y la versión 5.1 a finales del año 2016.

Y ya por último, si quieres leer alguna cosa más sobre la historia del lenguaje HTML, por ejemplo, para contrastar todo lo que te he contado aquí, te recomiendo estas dos lecturas.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Historia de los navegadores web (2):

[kml_flashembed movie=”http://www.youtube.com/v/L5kM3GKrPa4″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo te voy a presentar algunos recursos que te van a ayudar a conocer los acontecimientos más importantes de la reciente historia de los navegadores web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Si no has visto la primera parte de este videotutorial, te aconsejo que lo hagas antes de ver esta parte.

En el vídeo anterior nos habíamos quedado en el año 1993, con la aparición de Mosaic, y ninguno de los navegadores que usamos hoy en día existía. ¿Qué pasó a continuación? Me voy a ayudar del siguiente gráfico extraído de la revista Wired para explicar los principales acontecimientos de la historia de los navegadores web.

En el año 1993, Marc Andreessen y Eric Bina, los que aparecen en la placa en conmemoración del navegador Mosaic, abandonan NCSA y se marchan a California con su código fuente a buscar fortuna. Allí conocen a James Clark, fundador de la empresa Silicon Graphics, y juntos crean una nueva compañía, que inicialmente se llamó Mosaic Communications Corporation, pero que por problemas legales por el uso de la palabra Mosaic, al final acabó llamándose Netscape Communications.

En el año 1994, lanzaron la versión 1.0 de su navegador Netscape Navigator. Netscape Communications querían vender su navegador por $50 la unidad. Al principio, la estrategia comercial de Netscape fue convencer a las grandes corporaciones norteamericanas, como IBM, Ford y otras, que Mosaic no era bueno. ¡La misma gente que había construido Mosaic, ahora lo atacaba!

Netscape anunciaba que su navegador Netscape Navigator era la mejor opción, con una conexión propietaria navegador-servidor, con su propio protocolo, que permitía desarrollar aplicaciones maravillosas.

El propósito de Netscape era desarrollar una solución completa propietaria para dominar la Web.

Y por un poco de tiempo casi lo consiguieron, ya que llegaron a tener casi un 80% del mercado de los navegadores web. Pero entonces algo pasó y lo cambió todo.

En la Wikipedia existe un artículo dedicado al navegador Netscape en el que se explica su historia y se detallan todas sus versiones, cosa que no voy a hacer en este vídeo. Por cierto, Netscape fue quién inventó el lenguaje JavaScript que hoy en día todavía utilizamos.

En concreto, se lo debemos a Brendan Eich, que, según nos cuenta en este vídeo que te recomiendo que veas, lo desarrolló en sólo 10 días, ¡toma ya!, y le pidieron que hiciera algo así como “el hermano tonto de Java”.

¿Qué ocurrió para que Netscape pasará de estar en la cumbre a bajar a los infiernos y finalmente desaparecer? Pasó, lo que tenía que pasar.

El gigante del software, Microsoft, se dio cuenta de que un nuevo enemigo había aparecido: gracias a la Web, el sistema operativo estaba perdiendo importancia, y eso era un grave problema para Microsoft, que tenía centrado su negocio en la venta de sus sistemas operativos.

Así que, en el verano de 1995, Microsoft sacó al mercado su navegador Internet Explorer 1.0. Microsoft Internet Explorer 1.0 apareció con Microsoft Plus! Para Windows 95. Pero antes de seguir con la historia de Internet Explorer tenemos que volver al NCSA, en la Universidad de Illionis en Urbana-Champaign, y a su navegador Mosaic. Como NCSA era y sigue siendo una entidad pública, no podía comercializar su navegador.

Así que, una compañía llamada Spyglass licenció el código de Mosaic de NCSA para su distribución y comercialización. Spyglass tenía los derechos de la marca registrada Mosaic, así que Netscape no la podía usar en el nombre de su compañía.

Microsoft licenció a Spyglass el código de Mosaic. Así que, la primera versión de Internet Explorer era un Mosaic transformado.

Internet Explorer 1.0 y las subsiguientes versiones hasta la 6 contenían código del navegador Mosaic. Por ejemplo, aquí tenemos el cuadro de diálogo de “Acerca de” de Internet Explorer 5, en el que se puede ver la referencia a NCSA Mosaic y a la compañía Spyglass.

Microsoft licenció el código de Mosaic de Spyglass inicialmente por dos millones de dólares. Sin embargo, Spyglass vió que aquí había mucho negocio, presentó una demanda contra Microsoft y después de una pequeña “pelea en los tribunales”, llegaron a un acuerdo y Microsoft pagó 8 millones de dólares a Spyglass para firmar la paz.

En la Wikipedia existe un artículo dedicado a la historia de Internet Explorer en el que se explican muchos otros detalles y se detallan todas sus versiones.

Microsoft publicó Internet Explorer 1 en agosto de 1995 de dos formas: como un componente más de Microsoft Plus! para Windows 95, y como una versión OEM del sistema operativo.

En noviembre de 1995, Microsoft publicó la versión 2 de Internet Explorer, que ya incluía soporte para SSL, cookies y visualización de tablas.

Y en agosto de 1996, Microsoft publicó la versión 3 de Internet Explorer, que incluía el soporte de plugins, de ActiveX, de marcos y un motor de JavaScript llamado Jscript que se desarrolló mediante técnicas de ingeniería inversa a partir del motor de Netscape.

En el siguiente gráfico podemos ver la distribución de las diferentes versiones de Internet Explorer a lo largo del tiempo. Desafortunadamente, destacan los 5 horribles años de reinado de Internet Explorer 6, quizás el peor navegador web de la historia.

La aparición del navegador Internet Explorer supuso la primera guerra de los navegadores, entre Microsoft y Netscape.

Esta guerra duró menos de 5 años y acabó con Internet Explorer como vencedor indiscutible.

En el año 1998, Netscape, que ya veía que tenía graves problemas y que estaba perdiendo la guerra contra Microsoft, realizó un movimiento muy extraño y sorprendente: liberó el código fuente de su navegador Netscape, de su producto estrella. Nunca antes, una compañía de software había hecho algo parecido.

Si quieres saber más sobre este extraño movimiento, que fue el nacimiento de la fundación Mozilla y de su producto estrella, el actual navegador Firefox, te recomiendo que veas el siguiente documental. Te recomiendo que te fijes en lo que comen los programadores en este documental.

En marzo de 1999, America Online compró Netscape por la escandalosa cifra de 10 mil millones de dólares. Ese es un claro ejemplo de lo que pasó durante la famosa burbuja de las empresas .com: empresas que ya no tenían un valor real, compradas por cifras millonarias por alguna oscura razón.

En lo que falta por ver de este gráfico, lo más destacable es el nacimiento de Mozilla Firefox en el año 2004, gracias al extraño movimiento que realizó Netscape en el año 1998.

Si quieres saber más sobre la guerra de los navegadores, tanto sobre la primera como la segunda, te recomiendo esta infografía que te habla de las dos.

Afortunadamente, esta guerra no parece que haya ocasionado ningún muerto, simplemente el hundimiento y desaparición de alguna compañía.

La primera guerra la ganó Microsoft de forma abrumadora con su navegador Internet Explorer. Sin embargo, esta victoria y la posición de dominio y control que Microsoft logró con su navegador Internet Explorer le salió un poco cara, aunque tampoco mucho. Por un lado, en Estados Unidos, Microsoft ha tenido que soportar un largo proceso judicial de varios años por sus prácticas monopolísticas, tanto por su sistema operativo Windows como por su navegador Internet Explorer.

Por cierto, en Internet se pueden encontrar fácilmente los vídeos de Bill Gates declarando por este caso. ¡No tienen desperdicio!

Pero además, en Europa también ha tenido varios problemas.

En el año 2010, la Unión Europea obligó a Microsoft a que ofreciese al usuario en su sistema operativo Windows la posibilidad de seleccionar fácilmente la instalación de diferentes navegadores.

Sin embargo, los líos de Microsoft con la Unión Europea no acabaron con las varias multas que le han impuesto durante los últimos años, algunas multas verdaderamente millonarias.

El 17 de julio de 2012, la Comisión Europea anunció que Microsoft estaba incumpliendo sus compromisos, ya que la ventana de selección del navegador no le había aparecido a 22 millones de usuarios, y la Unión Europea amenazó con que quizás le iban a poner otra multa millonaria a Microsoft.

En el siguiente vídeo del 17 de julio de 2012, podemos ver a nuestro compatriota Joaquín Almunia, vicepresidente de la Comisión Europea y comisario de la competencia, anunciar en un inglés perfectamente entendible, que la Comisión Europea está investigando a Microsoft por incumplir sus compromisos.

¿Y cómo va la guerra de los navegadores en la actualidad?

Pues continúa, y después de la primera guerra de los navegadores contra Netscape, vino la segunda guerra de los navegadores, primero con la aparición de Mozilla Firefox en el año 2004 y después con la aparición de Google Chrome en el año 2008.

En la página web “Current status of the ‘Browser Wars’” podemos encontrar un análisis de la penetración de los diferentes navegadores por continente en el verano del año 2012. En este análisis, podemos comprobar que existen diferencias apreciables, a veces muy acusadas, entre diferentes continentes.

En mayo de 2012 se produjo un momento histórico en la guerra de los navegadores, porque después de muchos, muchos años, Internet Explorer dejó se ser el navegador más usado, pasando a ser el primero Google Chrome.

Por cierto, si se consultan las estadísticas que ofrece este sitio web, se pueden descubrir cosas curiosas: los hábitos de uso de los navegadores de las personas no son los mismos de lunes a viernes que los fines de semana.

Sin embargo, esta victoria de Google Chrome sobre Internet Explorer no está tan clara según algunos expertos, y si se consultan otras estadísticas, Internet Explorer sigue siendo el rey, por ahora.

Bueno, ya se sabe lo que se dice, “La verdad es la primera víctima en una guerra”.

Para terminar, un pequeño vídeo, en el que Brendan Eich, recuerdas, el creador de JavaScript, nos explica que este estado de guerra entre los fabricantes de los navegadores es bueno: “la competencia es buena para los usuarios y para los desarrolladores web”.

Por último, unos recursos adicionales en los que puedes ampliar todo lo contado en este vídeo. Por un lado, en la Wikipedia puedes encontrar un artículo dedicado a la historia de los navegadores web.

También puedes consultar esta línea de tiempo, este timeline de los navegadores web.

También te recomiendo que explores el sitio web “La evolución de la Web” que creo que te sorprenderá. La cantidad de información que puedes encontrar en esta hermosa infografía interactiva es espectacular.

Esta infografía tiene un apartado dedicado a la evolución de los navegadores y a la evolución de las tecnologías web.

También puedes encontrar varias infografías sobre la historia de los navegadores web, y sobre las variaciones del uso de los navegadores web.

Por último, también te recomiendo la infografía “The Internet: A Decade Later”, en la que se analiza cómo ha cambiado Internet en los últimos 10 años, y entre otras cosas, se muestra este gráfico en el que se compara el porcentaje de mercado de los navegadores web en el año 2002 y en el año 2012. Como dice Brendan Eich, “la competencia es buena para los usuarios y para los desarrolladores web”.

Y así termina este vídeo en el que hemos repasado rápidamente la apasionante historia de los navegadores web, que incluye hundimientos de empresas, guerras y multas millonarias.

¿Y cuál es la lección más importante que podemos sacar de la historia de los navegadores web?

Un diamante es para siempre, pero un navegador web, no. Así que, nunca hagas una página web pensando en un navegador concreto.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Historia de los navegadores web (1):

[kml_flashembed movie=”http://www.youtube.com/v/v_466xI3bZ8″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo te voy a presentar algunos recursos que te van a ayudar a conocer los acontecimientos más importantes de la reciente historia de los navegadores web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Puede ser un poco pretencioso hablar de la historia de los navegadores web, cuando el primer navegador web apareció en el año 1990, hace 22 años, pero en informática el tiempo no corre, vuela.

Antes de ver este vídeo deberías haber visto el vídeo sobre la historia de la Web, que consta de dos partes, ya que en este vídeo se nombran algunos hechos que están explicados en esos vídeos.

Sin duda alguna, los navegadores web han sido un elemento clave en la evolución de la Web. ¿Qué sería la Web sin los navegadores?

¿Cuál fue el primer navegador de la historia? ¿Internet Explorer? ¿Firefox? ¿Opera? Pues no.

Tim Berners-Lee, el padre de la Web, tuvo que desarrollar el primer navegador web para poder probar y demostrar su idea.

En el primer sitio web que se publicó, en el que podemos encontrar información sobre el nacimiento de la Web, también podemos encontrar información sobre el primer navegador web de la historia, que fue desarrollado por Tim Berners-Lee.

Esta es una captura de pantalla de la primera versión del navegador web, que podemos ver que se llamaba “WorldWideWeb”, y, muy importante, era navegador y editor a la vez. En esta captura de pantalla de una de las primeras versiones del programa de Tim Berners-Lee podemos ver cómo se está creando un enlace:

En primer lugar, se ha seleccionado un texto.
Luego, a tavés de un menú contextual, se emplea la opción “Link to marked” para señalar el destino del enlace.

Como vemos, no era necesario escribir código HTML, todo se podía hacer a través del interfaz gráfico. Y recuerda, estamos hablando del año 1990.

Tim Berners-Lee desarrolló este navegador web con una estación de trabajo NeXT Cube, que empleaba el sistema operativo NeXTStep. Los padres de la Web, Tim Berners-Lee y Robert Cailliau suelen comentar que pudieron desarrollar la Web gracias a las excelentes características que ofrecía el sistema NeXT que facilitaban mucho la programación.

Aquí tenemos algunas capturas de pantalla adicionales de versiones posteriores del navegador de Tim Berners-Lee.

Seguramente, sin el ordenador y sin el sistema operativo NeXT quizás la Web no habría nacido o no sería como la conocemos hoy en día.

Un momento muy importante en la historia de la Web, y desconocido por la mayor parte de la gente, es el 30 de abril de 1993.

Ese día, el CERN puso en el dominio público el software cliente y servidor de la Web, con lo que garantizaba la gratuidad de la Web y que nadie se apoderase de la idea.

Como podemos leer en este documento, el CERN renunciaba a todos los derechos de propiedad intelectual sobre el código, y otorgaba el permiso a cualquiera para usarlo, duplicarlo, modificarlo y redistribuirlo.

Y así hicieron numerosas personas y organizaciones por todo el mundo y usaron el código del CERN para desarrollar sus propios navegadores y servidores web.

Una organización que hizo eso, reutilizar el código del CERN, fue el National Center for Supercomputing Applications en la Universidad de Illinois en Urbana-Champaign. En este centro de supercomputación desarrollaron el navegador Mosaic. Su desarrolló comenzó a finales de 1992, a principios de 1993 se publicó la primera versión y su desarrollo continuó hasta enero de 1997.

Mosaic fue el primer navegador famoso y contribuyó enormemente al desarrolló de la Web, ya que fue el primer navegador multiplataforma: estaba disponible para los sistemas operativos Unix, Windows y Macintosh.

Ahora te recomiendo que veas el vídeo “The History of the Mosaic Web Browser”, de casi 9 minutos de duración, en el que Joseph Hardin, director del NCSA, nos explica cómo se gestó el desarrollo de Mosaic.

Después de ver el vídeo, realiza el siguiente test para comprobar que has asimilado los conceptos clave del vídeo.

A las puertas de un edificio del NCSA en la Universidad de Illinois se encuentra esta placa en conmemoración del navegador web Mosaic y de sus creadores Marc Andreessen y Eric Bina. Quiero que te quedes con estos nombres, porque ahora después volverán a aparecer.

Yo llegué a probar el navegador Mosaic para Windows, y en el año 2002 realicé una prueba para ver cómo se comportaba con páginas modernas de aquella época. Aquí podemos ver cómo se visualizaba la página principal de mi departamento con el navegador Netscape 4.7 en aquella época. Y así es cómo se veía con Mosaic 1.0.

Podemos ver que las diferencias son brutales: en 10 años, el lenguaje HTML había evolucionado tanto que el navegador era incapaz de mostrar la página web con unas condiciones aceptables. Era incapaz de mostrar las imágenes en formato JPG o las tablas.

Por cierto, en NCSA también desarrollaron su propio servidor web, NCSA HTTPd, basado en el código del servidor web de Tim Berners-Lee. Este fue el primer servidor web que ofreció soporte para CGI, Common Gateway Interface, lo que abrió la posibilidad de crear páginas web dinámicas en el servidor con, por ejemplo, acceso a bases de datos.

Durante los años 1994-1995, el 95% de los servidores web de todo el mundo utilizaba este software.

Y el famoso servidor web Apache, que hoy en día es el más utilizado, comenzó a desarrollarse a partir del código de NCSA.

Si quieres saber algo más sobre el nacimiento del servidor web Apache, te recomiendo la visualización de este vídeo en el que Brian Behlendorf, uno de los fundadores de la Apache Foundation, nos habla de la historia de Apache.

¿Y qué pasó a continuación? ¿Qué pasó después del éxito de Mosaic? A partir de entonces, todo empezó a ir mucho más rápido.

Te lo contaré en la segunda parte de este vídeo, en el que repasaremos acontecimientos muy interesantes de la historia de los navegadores, como la aparición del navegador Internet Explorer, y el estallido de la primera guerra de los navegadores web.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Historia de la Web: su nacimiento (2):

[kml_flashembed movie=”http://www.youtube.com/v/n7L6qhT3Dzg” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante. Bienvenido a la segunda parte del vídeo “Historia de la Web: su nacimiento”. En este vídeo te voy a presentar algunos recursos que te van a ayudar a conocer los personajes y los hechos más importantes de la reciente historia de la Web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recordemos que la primera parte de este vídeo acababa con la publicación en noviembre de 1990 de la primera página web en un servidor del CERN.

Desgraciadamente la primera página web ya no existe y sólo podemos tener acceso a una versión posterior de la misma del año 1992.

Tim Berners-Lee, el padre de la Web, desarrolló el primer editor de páginas web, el primer navegador web y el primer servidor web.

Esta es una captura de pantalla de la primera versión del navegador web, que podemos ver que se llamaba “WorldWideWeb” todo junto, y era navegador y editor de página web a la vez. Y aquí tenemos unas capturas de pantalla de versiones posteriores.

Tim Berners-Lee utilizó una estación de trabajo NeXT Cube, que empleaba el sistema operativo NeXTStep. Los creadores de la Web suelen comentar que pudieron desarrollar la Web gracias a las excelentes características que ofrecía el sistema NeXT que facilitaban mucho la programación.

El ordenador NeXT de Tim Berners-Lee fue una pieza clave en el desarrollo de la Web. Posiblemente, sin este ordenador, la Web no habría nacido o no sería tal y como la conocemos hoy en día.

La compañía NeXT fue fundada por Steve Jobs después de que le echaran de su compañía Apple en 1985. Desgraciadamente, el gran público normalmente no reconoce la gran contribución que tuvieron los ordenadores NeXT, y por tanto Steve Jobs, en el nacimiento de la Web.

Aunque no esté directamente relacionado con la historia de la Web, te recomiendo que veas este vídeo del año 1985 sobre el nacimiento de la compañía NeXT. Es un documento excepcional que nos permite ver a Steve Jobs trabajando y creando su nueva compañía. Me ha sorprendido especialmente la visión que tenía de que los ordenadores podrían ayudar a mejorar el proceso educativo.

En diciembre de 1991, Tim Berners-Lee presentó en la Hypertext Conference la World Wide Web. A partir de ese momento, la World Wide Web comenzó a ser conocida fuera del CERN.

Por cierto, en esa conferencia, a Tim Berners-Lee no le aceptaron un artículo, sino un simple póster. ¡Qué ojo más bueno tuvieron los revisores de la conferencia! Un poco más, y nos quedamos sin la Web.

A principios de 1993, se instala el primer servidor web en España, en la Universitat Jaume I de Castellón. Te recomiendo que leas este artículo en el que uno de los protagonistas de ese hecho nos cuenta la historia de ese primer servidor web en España.

Un momento muy importante en la historia de la Web, y desconocido por la mayor parte de la gente, es el 30 de abril de 1993.

Ese día, el CERN puso en el dominio público el software cliente y servidor de la Web, con lo que garantizaba la gratuidad de la Web y que nadie se apoderase de la idea. Esta decisión, dar la Web al mundo, fue sin duda una de las claves para que realmente triunfase.

Ahora quiero que veas el vídeo “The Invention of the World Wide Web”, de poco más de dos minutos de duración.

Y después realiza este pequeño test que he preparado para comprobar que has asimilado bien los conceptos clave del vídeo.

En toda esta historia falta alguien, Robert Cailliau, que trabajó codo con codo con Tim Berners-Lee en el desarrollo e implantación de la Web en el CERN.

Ahora quiero que veas este vídeo de poco más de nueve minutos de duración, en el que Robert Cailliau nos da su visión del nacimiento de la Web.

A continuación realiza este pequeño test que he preparado para comprobar que has asimilado los conceptos clave del vídeo.

También te recomiendo que veas el vídeo “Tim Berners-Lee on the World Wide Web”, de tres minutos y medio de duración. En este fragmento de vídeo Tim Berners-Lee describe la Web como una plataforma que permite crear conexiones de diferentes formas y reconoce que hace 20 años, cuando nació, nadie podía predecir en lo que se iba a convertir la Web.

El 25 de mayo de 1994 se celebró la primera conferencia sobre la World Wide Web en Ginebra, organizada por el CERN.

Desde entonces no han parado de celebrarse conferencias sobre la Web. Por ejemplo, la del año 2009 se celebró en Madrid.

En octubre de 1994, Tim Berners-Lee abandona el CERN y funda en el MIT el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web.

Tim Berners-Lee ha sido su director desde su fundación hasta la actualidad. El W3C aparecerá a lo largo de este curso en numerosas ocasiones, ya que es un organismo clave en el desarrollo web y se encarga de estandarizar tecnologías esenciales como el lenguaje de marcado HTML, el lenguaje de presentación CSS o el interfaz de programación DOM. En la actualidad el W3C cuenta con más de 370 miembros repartidos por todo el mundo. En España hay 22 organizaciones que forman parte del W3C.

Para repasar todo lo visto hasta ahora, puedes ojear la presentación “How It All Started” que Tim Berners-Lee utilizó para contar la historia de la Web durante la celebración del décimo aniversario del W3C en el año 2004. En esta presentación se repasa la historia de Internet, de la Web, y del World Wide Web Consortium.

También te aconsejo que leas el documento “The World Wide Web: A very short personal history”, es muy corto y fácil de leer.

En este documento, Tim Berners-Lee nos ofrece su visión personal sobre el nacimiento de la Web y sobre el futuro de la Web.

También te aconsejo que veas el Timeline que se creó por el décimo aniversario del W3C y que cubre los acontecimientos más importantes de la historia de la Web, desde la publicación del artículo de Vannevar Bush hasta la celebración del décimo aniversario del W3C en el año 2004.

Sin duda alguna, el impacto que ha tenido el invento de Tim Berners-Lee en nuestras vidas ha sido tremendo y se ha ganado por ello un hueco importante en la historia de la humanidad. Debido a ello, Tim Berners-Lee ha recibido numerosos premios.

En España, como reconocimiento al cambio que la Web ha producido en todos los niveles de la sociedad, el 23 de mayo de 2002, se le concedió a Tim Berners-Lee el Premio Príncipe de Asturias de Investigación Científica y Técnica, junto con Lawrence Roberts, Robert Kahn y Vinton Cerf, que se les considera los padres de Internet, en representación de las miles de personas y muchas instituciones que han hecho posible este avance de nuestro tiempo. Según la resolución del jurado, “Se les otorga el premio por haber diseñado y realizado un sistema que está cambiando el mundo al ofrecer posibilidades antes impensables para el progreso científico y social”.

¿Cuál fue el secreto del éxito de la Web?

En una entrevista que le hicieron a Steve Jobs y que se publicó en la revista Wired en febrero de 1996, a Steve Jobs le preguntaron “¿Por qué cree que la Web ha crecido tan rápidamente?”

Y Steve Jobs contestó:

Una de las razones principales para la proliferación de la Web hasta el momento es su simplicidad. Mucha gente quiere hacer la Web más complicada. Quieren poner capacidad de procesamiento en el cliente, quieren poder hacer esto y aquello. Espero que no mucho de todo eso ocurra pronto.

Es muy parecido al antiguo esquema de los grandes ordenadores, cuando un navegador web es como un terminal tonto y el servidor web es como el ordenador central en el que se hace todo el procesamiento. Este sencillo modelo ha tenido un profundo impacto y se ha hecho omnipresente.

También te recomiendo que explores el sitio web “La evolución de la Web” que creo que te sorprenderá. La cantidad de información que puedes encontrar en esta hermosa infografía interactiva es espectacular.

Por ejemplo, tenemos este gráfico con la evolución del número de usuarios en Internet. O este otro gráfico, con la evolución de los navegadores y de las principales tecnologías de la Web.

Después de ver todos estos recursos, realiza este pequeño test para comprobar que has asimilado los conceptos clave de la historia de la Web.

Sin duda alguna, otro elemento clave en la evolución de la Web son los navegadores web. Pero eso lo veremos en otro vídeo que te invito a ver sobre la historia de los navegadores web.

Y con esto finaliza este vídeo en el que te he mostrado cómo fue el nacimiento de la Web. Hemos visto cómo Tim Berners-Lee desarrolló la World Wide Web mientras trabajaba en el CERN, pero no lo hizo sólo, sino que lo desarrolló con otras personas y se inspiró en el trabajo de varios visionarios. Hemos visto también el nacimiento del World Wide Web Consortium, el organismo internacional que dirige el desarrollo de la Web.

Para finalizar, si quieres ampliar todo lo que te he contado en este vídeo, te recomiendo el libro “Tejiendo la Red”, de Tim Berners-Lee. En este libro, Tim Berners-Lee te cuenta, mucho mejor que yo, cómo fueron los primeros años del nacimiento de la Web y cuál era la visión que le guió.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Historia de la Web: su nacimiento (1):

[kml_flashembed movie=”http://www.youtube.com/v/cCHzhQVqEyI” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo te voy a presentar algunos recursos que te van a ayudar a conocer los personajes y los hechos más importantes de la reciente historia de la Web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

¿Sabes cuándo nació la World Wide Web? ¿Sabrías decirme quién inventó la Web?

Tim Berners-Lee es considerado el padre de la Web.

¿Y por qué Tim Berners-Lee es considerado el padre de la Web? Tim Berners-Lee desarrolló las tres tecnologías fundamentales de la Web:

HTML, HyperText Markup Language, el lenguaje de marcado o etiquetado que se emplea para crear, para escribir, los documentos o páginas web.

URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o direccionamiento de los documentos web.

Y HTTP, HyperText Transfer Protocol, el protocolo o lenguaje con el que se comunican el navegador y el servidor web y que se emplea para transmitir los documentos web por Internet.

De estas tres tecnologías, la que más nos interesa y que vamos a estudiar con detalle en este curso es HTML. No obstante, también necesitas poseer unas nociones mínimas de URL y HTTP, así que, si no sabes que es URL y HTTP, te aconsejo que busques algo de información sobre ello en la Web, por ejemplo, en la Wikipedia.

Antes de continuar, me gustaría dejar bien claro, por si no lo sabías, que Internet y la Web son dos cosas distintas.

Internet es la conexión de múltiples redes de ordenadores. Sobre esas redes de ordenadores se ejecutan múltiples servicios, como el correo electrónico, la transmisión de ficheros o el chat. La Web es un servicio más, el más popular.

Sin embargo, no todo el mundo lo tiene muy claro, y es muy normal que a Tim Berners-Lee le llamen “el inventor o el creador de Internet”, como en el caso de un canal de televisión de los Estados Unidos llamado PBS.

Pero también ocurre al revés, y por ejemplo a Vint Cerf, que sí que es uno de los padres de Internet, a veces ha sido confundido como el padre de la Web, como podemos ver en esta entrevista que le realizaron en la emisora Radio Nacional de España. Para estos periodistas, Vinton Cerf unas veces era el padre de Internet y otras el padre de la Web.

Volviendo a la historia de la Web, noviembre de 1990 se suele fijar como el nacimiento de la Web: Tim Berners-Lee publicó su primer sitio web y realizó la primera conexión desde un navegador mientras trabaja en el CERN, el laboratorio europeo de investigación en física de partículas.

Pero antes de ello tuvieron que ocurrir algunas cosas más que te voy a contar a continuación en este vídeo.

Un resumen de lo que te voy a contar lo puedes encontrar en mi libro “Programación de aplicaciones web: historia, principios básicos y clientes web”, que lo puedes descargar de forma gratuita en formato PDF desde esta dirección. Lo escribí en el año 2002, pero la historia de la Web no ha cambiado, así que lo que te cuento en este libro sigue siendo totalmente válido. Lo que sí que puede ser es que contenga algún error. Si encuentras alguno, escríbeme y me lo cuentas, te lo agradeceré.

En mi libro, de la página 15 a la 24, encontrarás una sección dedicada a la historia de la Web.

Muchos autores suelen citar a Vannevar Bush, un visionario para su época, como uno de los antecedentes de la Web. Ingeniero e inventor, durante la Segunda Guerra Mundial fue administrador del proyecto Manhattan que desarrolló las dos primeras bombas nucleares.

En julio de 1945, Vannevar Bush publicó el artículo “As We May Think” en The Atlantic Monthly sobre un dispositivo fotoeléctrico y mecánico, llamado memex, capaz de crear y seguir enlaces entre distintos documentos almacenados en microfichas (en definitiva, un sistema muy parecido a lo que hoy conocemos como hipertexto).

Este artículo lo podemos encontrar en la Web traducido al castellano con el título “Cómo podríamos pensar”.

En su artículo, Vannevar Bush nos dice:
Tomemos en consideración un aparato futuro de uso individual que es una especie de archivo privado mecanizado y biblioteca. Como necesita un nombre, y por establecer uno al azar, podríamos denominarlo “memex”. Un memex es un aparato en el que una persona almacena todos sus libros, archivos y comunicaciones, y que está mecanizado de modo que puede consultarse con una gran velocidad y flexibilidad. En realidad, constituye un suplemento ampliado e íntimo de su memoria.

Y más adelante escribe:

Todo lo que acabo de describir es bastante convencional, teniendo en cuenta que se trata de una proyección en el futuro de los mecanismos y artilugios varios de que disponemos hoy en día. No obstante, representa un paso inmediato hacia la indización o archivado de tipo asociativo, cuya idea básica consiste en posibilitar que cada uno de los elementos pueda seleccionar o llamar, según nuestra voluntad, a otro elemento de una manera inmediata y automática. Esta constituye la característica esencial del memex; el proceso de enlazar dos elementos distintos entre sí es lo que le otorga su verdadera importancia.

El siguiente personaje importante es Ted Nelson, que acuñó los términos hipertexto e hipermedia en el año 1965.

Ted Nelson también es famoso por el Proyecto Xanadú, un revolucionario sistema de hipertexto mucho mejor que la actual Web, pero que nunca ha visto la luz.

Para no alargarlo más, volvamos a Tim Berners-Lee, el padre de la Web, y al CERN.

El CERN es el laboratorio en el que hace poco se detectaron unas partículas, los neutrinos, que parecía que se movían más rápido que la luz, violando así los principios básicos de la física actual, pero que al final se descubrió que todo había sido un error debido a un cable mal conectado.

¿Y por qué nació la Web en el CERN? Se podía pensar que fue una casualidad, pero no es así.

En el CERN trabajaban y siguen trabajando miles de científicos provenientes de todo el mundo.

Estos científicos generaban miles de informes, documentos, diseños y resultados que estaban distribuidos por todo el mundo.

Desgraciadamente, todos estos científicos tenían un grave problema para compartir toda la información que generaban, ya que se encontraba distribuida en miles de ordenadores de los que hacía falta conocer su dirección IP, su protocolo de comunicación, el nombre de usuario y contraseña y la aplicación cliente específica para realizar la conexión.

Y aquí es donde aparece Tim Berners-Lee, que trabajaba en el CERN como ingeniero de software.

En 1980 Tim Berners-Lee ya soñaba con un sistema de hipertexto que acabaría siendo la actual Web y desarrolló un sistema denominado ENQUIRE, un sistema de hipertexto para almacenar información. Aquí tenemos unas imágenes del manual original de octubre de 1980.

Desgraciadamente, el sistema era un poco complejo de usar y su uso no prosperó.

Tim Berners-Lee siguió trabajando en la idea de desarrollar un sistema de hipertexto fácil de usar, y en marzo de 1989, escribió su propuesta ”Information Management: A proposal”.

En el resumen podemos leer el objetivo de su propuesta:

Esta propuesta se refiere a la gestión de la información general sobre aceleradores y experimentos en el CERN. Se analizan los problemas de pérdida de información sobre los sistemas de evolución compleja y elabora una solución basada en un sistema de hipertexto distribuido.

Sorprende lo que escribió Mike Sendall el jefe de Tim Berners-Lee después de leer esta propuesta: “Impreciso pero interesante”. Un poco más y nos quedamos sin la Web.

En esta dirección podemos encontrar una copia en formato HTML de la propuesta original. Tim Berners-Lee inicialmente no le puso un nombre a su propuesta, pero al poco tiempo lo llamó “Mesh”, que en castellano significa “malla”.

Después en 1990, cuando comenzó a programar el sistema, le cambió el nombre, primero a “WorldWideWeb” todo junto y finalmente el actual “World Wide Web”.

Recordemos que el objetivo que se buscaba era que los miles de científicos que trabajaban en el CERN pudieran compartir toda la información que generaban. Para ello, Tim Berners-Lee tuvo que crear un formato para escribir los documentos, el lenguaje de marcado HTML.

Desarrollar un método para representar los enlaces entre los documentos, el localizador de recursos uniforme o URL.

Así como definir un protocolo de red para transmitir los documentos de un ordenador a otro, el protocolo HTTP.

En noviembre de 1990, que se suele fijar como el nacimiento de la Web, Tim Berners-Lee publicó su primer sitio web y realizó la primera conexión desde un navegador mientras trabaja en el CERN.

Esta es la dirección de la primera página web que se publicó, una página web dedica a explicar su invento.

Hoy en día la primera página web ya no existe, se perdió, pero podemos encontrar esta página web de homenaje en la que se nos indica que aquí estuvo el primer servidor web de la historia y también podemos encontrar un enlace a una copia de esa primera página, no la primera, sino una versión posterior del año 1992.

Te recomiendo que veas este pequeño fragmento de vídeo de menos de un minuto en el que Tim Berners-Lee recuerda cómo fueron los primeros momentos del nacimiento de la Web. Como puedes suponer, no hubo ni flashes, ni música, ni miles de llamadas de teléfono de felicitación, ni grandes titulares en los periódicos, su nacimiento pasó bastante desapercibido.

Con esto finaliza la primera parte del vídeo sobre la historia de la Web. Ahora te invito a ver la segunda parte.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.