HTML5: introducció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/DdXBcoaFPro” 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 ayudar con tus primeros pasos con el lenguaje de etiquetado HTML5.

En el vídeo “Historia de HTML”, te expliqué la evolución del lenguaje de marcado o etiquetado HTML, el lenguaje con el que se crean las páginas web desde que Tim Berners-Lee creó la primera página web a finales de 1990 en el CERN.

Recuerda que después de HTML4, el W3C, el organismo que desarrolla los estándares de la Web inició el desarrollo de XHTML. Sin embargo, unos años después, el W3C canceló el desarrolló de XHTML y se unió a un grupo independiente de desarrolladores web con el objetivo de desarrollar HTML5.

Mucha gente tiene una gran confusión con HTML5, se piensa que es algo totalmente distinto a HTML4 y XHTML. Y no es así.

Fijémonos en este gráfico: cada rectángulo representa una etiqueta de HTML 4.

En HTML5, algunas de las etiquetas han desaparecido porque se han quedado viejas y ya no se deben emplear.

Otras etiquetas han variado un poco su funcionamiento o incluyen atributos nuevos.

Y por último, se han añadido etiquetas y atributos nuevos. Pero como podemos ver, la mayor parte de HTML5 sigue siendo lo mismo que ya existía en HTML4.

Por ejemplo, si consultamos una referencia de las etiquetas de HTML5, como ésta que existe en W3Schools, veremos que hay etiquetas como frame, frameset o noframes que aparecen marcadas como “no soportadas en HTML5”, ya no se deben emplear.

También hay etiquetas como header, keygen, main, mark, menuitem, meter y nav que aparecen marcadas como etiquetas nuevas de HTML5.

En el momento de grabar este vídeo, HTML5 todavía sigue en desarrollo.

La última versión publicada tiene fecha del 16 de septiembre de 2014 y posee el estado de “recomendación propuesta”, lo que significa que es ya casi la versión final.

¿Cuándo se espera que esté terminado HTML5?

El W3C tiene publicado un plan u hoja de ruta en el que se explica el proceso de estandarización de HTML5. Según este plan, se espera que HTML5 adopte el estado de recomendación durante el último cuatrimestre del año 2014.

El W3C no para, y aunque no esté finalizado HTML5, ya está trabajando en la próxima versión, la versión 5.1.

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.

Aunque todavía no esté terminada su especificación, ya puedes empezar a usar HTML5, aunque con mucho cuidado.

¿Por qué con cuidado?

Porque no todos los navegadores admiten las nuevas características de HTML5.

Existen varios sitios web en los que se puede comprobar la compatibilidad de los navegadores con HTML5.

Por ejemplo, en HTML5Test, el test indica que la versión 37 de Google Chrome, la última versión en el momento de grabar este vídeo, obtiene 512 puntos de compatibilidad de un máximo de 555 puntos, lo cual está muy bien.

Sin embargo, Internet Explorer 11 obtiene un pobre resultado, sólo 365 puntos del máximo de 555, un resultado muy muy muy malo.

En HTML5Test también es posible encontrar una comparativa de distintos navegadores.

También existe el sitio web Can I use?, en el que se puede consultar la compatibilidad de las novedades de HTML5 y CSS3 con los distintos navegadores.

Por ejemplo, el nuevo control input type date tiene como propósito visualizar un calendario para que el usuario pueda seleccionar una fecha.

Según Can I use?, este control sólo se puede emplear en Google Chrome y Opera, pero no funciona en Internet Explorer, Firefox y Safari. Me estoy refiriendo a las versiones de estos navegadores de escritorio, de ordenador.

¿Lo podemos verificar?

Sí, por ejemplo en el sitio web “The Current State of HTML5 Forms” podemos verificar el funcionamiento de los nuevos controles de los formularios.

Efectivamente, el control de tipo date se visualiza correctamente en Google Chrome, pero en Mozilla Firefox se visualiza simplemente como un cuadro de texto, igual que en Internet Explorer.

Para empezar a aprender HTML5 puedes consultar documentación sobre HTML5 o sobre las versiones anteriores de HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que hay entre unas y otras, porque ahí fuera, en Internet, te vas a encontrar de todo. Para ser un buen profesional del desarrollo web necesitas conocer las tres versiones.

De todo ello te hablo en el vídeo “¿Cuál es el mejor: HTML, XHTML, HTML5?”.

Una vez que ya conozcas las versiones anteriores de HTML, ya puedes pasar a aprender HTML5. Existen muy buenos recursos para ello.

El primero que te recomiendo es “Dive into HTML5”, de Mark Pilgrim. Este sitio web se comenzó a desarrollar en el año 2009 y no se actualiza desde el 2011, pero en HTML5Doctor existe una copia que sí que se intenta actualizar con las últimas novedades del lenguaje.

También te recomiendo que consultes el sitio web W3Schools, que contiene tanto un tutorial como una referencia de todas las etiquetas de HTML5.

Y por supuesto, también puedes consultar el resto de vídeos del curso iDESWEB.

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.

CSS: definir el estilo de una lista (2)

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/hz731_o6gcU” 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 las principales propiedades de CSS que se existen para definir el estilo del texto.

En la primera parte de este vídeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.
En este vídeo vamos a ver unas propiedades de CSS que comienzan con el prefijo text-.

En concreto, vamos a ver las propiedades text-align, text-indent, text-decoration y text-transform.

La propiedad text-align se emplea para definir la justificación o alineación del texto.

Esta propiedad puede tomar los valores left, a la izquierda, right, a la derecha, center, centrado y justify, justificado, es decir alineado a la izquierda y a la derecha a la vez.

En este ejemplo podemos ver el mismo párrafo alineado a la izquierda y a la derecha.

Y en este otro ejemplo, el primer párrafo está centrado y el segundo justificado, está alineado a la izquierda y a la derecha.

La propiedad text-indent especifica la sangría de la primera línea de un bloque de texto.

La sangría se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

En este ejemplo, el primer párrafo no posee sangría en la primera línea, mientras que en el segundo se ha definido una sangría de un 1cm.

En este otro ejemplo, la primera línea posee una sangría relativa del 50%, el 50% del ancho disponible para mostrar el texto.

La propiedad text-decoration se emplea para definir algunos adornos que se pueden añadir al texto.

Esta propiedad puede tomar los valores none, ninguno, underline, subrayado, overline, para el subrayado por la parte superior, line-through para el tachado y blink para el parpadeo.

En este ejemplo se muestra el uso de la propiedad text-decoration con cuatro valores: underline, overline, line-through y blink.

Por último, la propiedad text-transform se emplea para convertir en mayúsculas o minúsculas un texto.

Esta propiedad puede tomar los valores capitalize, uppercase, lowercase y none.

En este ejemplo se muestra el uso de la propiedad text-decoration con los valores capitalize, uppercase y lowercase.

El valor capitalize coloca en mayúsculas la primera letra de cada palabra, mientras que uppercase transforma a mayúsculas todo el texto y lowercase a minúsculas.

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.

CSS: definir el estilo de una lista (1)

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.

HTML: listas

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.

Próxima edición de iDESWEB

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.

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

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.

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

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

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 (2)

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)

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.