Todo el mundo debería aprender a programar

Lo dijo Steve Jobs:

Everybody in this country should learn how to program a computer… because it teaches you how to think.

Traducido:

Todo el mundo en este país debería aprender a programar un ordenador… porque te enseña a pensar.

Un vídeo sobre ello de code.org, What Most Schools Don’t teach:

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

Y otro más, “Code Stars” – Short Film:

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

Las direcciones IP y el sistema de nombres de dominio

Las direcciones IP y el sistema de nombres de dominio:

[kml_flashembed movie=”http://www.youtube.com/v/kCLTBOYxMXg” 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 hablar de las direcciones IP y del sistema de nombres de dominio.

En el vídeo “Los nombres de dominio” te expliqué que son los nombres de dominio.

Recuerda que el nombre de dominio puede identificar a toda una red o a un ordenador o dispositivo de red en particular.

En ese vídeo vimos que los nombres de dominio se tienen que transformar en direcciones IP, ya que ese es el sistema que se emplea para identificar un ordenador en Internet.

Pero, ¿cómo se realiza esa transformación?

Antes de explicarte cómo funciona te voy a hablar de las direcciones IP.

Una dirección IP identifica un ordenador o cualquier otro dispositivo de red, como un router o switch, en Internet.

Cualquier dispositivo que se conecta a Internet, ya sea un ordenador, una tableta o un teléfono móvil, tiene asignada una dirección IP.

En la actualidad existen dos sistemas de direccionamiento, dos conjuntos de direcciones IP, IPv4 e IPv6.

Las direcciones IPv4 se expresan por un número binario de 32 bits, permitiendo un espacio de direcciones de hasta 4.294.967.296. Todo esto seguramente te suena a chino pero lo que quizás no te suenan a chino son números como estos, alguna vez lo habrás visto en tu ordenador o en tu teléfono móvil.

¡Esto son direcciones IP, representadas de una forma más fácil de entender para nosotros los humanos!

Quizás pensarás que este número es muy grande, que es suficiente para asignar una dirección IP a cada dispositivo actual que se conecta a Internet, pero no es así.

¡Este número se ha quedado muy pequeño, así que se ha tenido que ampliar!

Para eso se ha desarrollado IPv6.

Las direcciones IPv6 se expresan por un número binario de 128 bits, permitiendo un espacio de direccionamiento de hasta 3.4×1038, lo que permite que cada persona en la Tierra pueda hacer uso de millones de direcciones IP.

Como las direcciones IPv6 son más largas se emplea la notación hexadecimal: cuatro dígitos hexadecimales separados por dos puntos. Se emplea esta notación porque si se siguiera utilizando la de IPv4 tendríamos que escribir números como estos.

IPv6 tiene que sustituir a IPv4, pero por diversas razones su implantación está siendo muy lenta.

Hasta ahora hemos visto que tenemos los nombres de dominio y también tenemos las direcciones IP, y entre ambos existe una correspondencia.

¿Cómo se realiza esa correspondencia?

Los nombres de dominio se transforman en direcciones IP mediante un sistema llamado DNS, Domain Name System o Sistema de Nombres de Dominio en español.

El funcionamiento de DNS es un poco complejo, básicamente es una base de datos distribuida entre diferentes ordenadores, los servidores de DNS, que se comunican entre sí.

Pero de forma simplificada cada servidor DNS posee una tabla con la correspondencia entre los nombres de dominio y las direcciones IP, y cuando un servidor no dispone de una correspondencia concreta, sabe a qué servidor le tiene que preguntar para obtener la respuesta, la correspondencia entre nombre de dominio y dirección IP.

El uso de DNS ofrece numerosas ventajas. Dos son muy fáciles de entender.

Por un lado, los nombres de dominio son más fáciles de recordar, aunque algunos nombres pueden ser realmente largos e inútiles.

Sí, este nombre de dominio existe y existe una página detrás de este nombre.

Por otro lado, el nombre de dominio es más fiable.

La dirección IP puede cambiar con el tiempo por diversas razones sin que tenga que cambiar el nombre de dominio.

Ya para terminar, te dejo un ejercicio.

¿Qué son los registros DNS?

¿Qué tipos de registros existen?

Cuando dispongas de tu propio nombre de dominio y tengas tu propio servidor web o tengas contratado un alojamiento necesitarás conocer los registros DNS.

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.

Los nombres de dominio

Los nombres de dominio:

[kml_flashembed movie=”http://www.youtube.com/v/7A2J57IuIQ0″ 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 hablar de los nombres de dominio.

Las URLs son las direcciones que se emplean para localizar los recursos en Internet.

Una URL se compone de varias partes. Aunque una URL se escribe de izquierda a derecha, vamos a analizarla al revés. De derecha a izquierda tenemos:

El documento.
La ruta al documento.
El nombre de dominio, que puede contener un subdominio.
Y el esquema, que suele ser el protocolo de acceso o de comunicación.

El nombre de dominio es un nombre único que normalmente se emplea para identificar un sitio web en Internet.
Hasta hace unos años, en los nombres de dominio sólo se podían usar los caracteres ASCII. La tabla ASCII contiene 128 caracteres, numerados del 0 al 127, pero sólo hay 95 caracteres ASCII imprimibles, numerados del 32 al 126. La tabla ASCII contiene las letras del alfabeto inglés, pero no contiene otras letras, como las vocales acentuadas o la eñe, lo cual plantea un problema para el español.

Debido a esto, antes no podían existir nombres de dominio como españa.es o coruña.es

Sin embargo, gracias a la introducción del Nombre de dominio internacionalizado, ya es posible utilizar nombres de dominio con caracteres en otros idiomas. Pero por ahora no está muy extendido su uso.

Aunque se pueda identificar un ordenador por su nombre de dominio, en realidad internamente en Internet se identifican los ordenadores por medio de la dirección IP.

La correspondencia que existe entre el nombre de dominio y la dirección IP te lo contaré en el vídeo el “Las direcciones IP y el sistema de nombres de dominio”.

Como existe una correspondencia entre los nombres de dominios y las direcciones IP, en una URL también se puede escribir una dirección IP en vez del nombre de dominio.

Un nombre de dominio puede ser el nombre de una empresa, el nombre de una institución, el nombre de una organización, el nombre de una persona o cualquier cosa que uno quiera.

Los nombres de dominio se organizan en diferentes niveles.

Los dominios de primer nivel se organizan en genéricos y territoriales.

Los genéricos son dominios de propósito general y eran inicialmente los que acababan en .com, .edu, .gob, .mil, .net y .org, pero posteriormente se han añadido otros
como .biz, .mobi y .xxx.

El registro de nombres de dominio bajo .com, .org y .net no está sometido a ningún tipo de comprobación previa, se asignan siguiendo el principio de “primero en llegar primero servido”.

Los territoriales son los que identifican el país, como .es para España, .ec para Ecuador, .fr para Francia o .de para Alemania.

El registro de nombres de dominio territoriales está sometido a las normas de cada país.

Por ejemplo, en España lo gestiona la organización red.es y podemos encontrar toda la información sobre su funcionamiento en dominios.es

Los dominios de nivel 2 son los que normalmente registramos al solicitar un domino, como por ejemplo idesweb.es o sergiolujanmora.es

En algunos países existe un tercer nivel de organización. Por ejemplo, en España existen los dominios controlados .com.es, .nom.es, .org.es, .gob.es y .edu.es que permiten que existan dominos como datos.gob.es o mecd.gob.es

Ya para terminar, vamos analizar una dirección o URL.

Por ejemplo, en esta dirección podemos distinguir los niveles:

.es como nivel 1 o de nivel superior, dominio territorial.

.ua como nivel 2

y www.dlsi como nombre de máquina o host.

Por último, te propongo que averigües para qué sirven los dominios example.com y example.org y cuál es la organización que los gestiona.

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.

Las URLs

Las URLs:

[kml_flashembed movie=”http://www.youtube.com/v/qqJf0EK0aFs” 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 qué son las URLs.

Seguro que estás cansado de escribir URLs, las direcciones que se emplean para localizar los recursos en la Web, pero…

¿Cuánto sabes sobre las URLs?

¿Quién inventó las URLs?

Tim Berners-Lee es considerado el padre de la Web, ya que 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.

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.

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

En este vídeo te voy a explicar cómo funcionan las URLs.

Este es el formato básico de una URL, aunque también puede incluir otros datos, como el nombre de usuario y la contraseña de acceso a un ordenador, el puerto de conexión, o una combinación de todo lo anterior.

Por ejemplo, esta URL está formada por estas partes: el esquema, la máquina, el directorio y el archivo.

¿Qué es el esquema en una URL?

El esquema suele representar el protocolo, es decir, el mecanismo o método que se emplea para recuperar un recurso a través de una red de ordenadores.

A veces, en vez de esquema se emplea el término servicio, en el contexto de una URL son equivalentes.

Los esquemas más conocidos son http, https, ftp, mailto y file.

Las URLs son un elemento básico de la Web, ya que son las que definen los hiperenlaces o hipervínculos y permiten definir el hipertexto, que permite relacionar información de diversas fuentes por medio de enlaces.

Hay que ser muy cuidadosos a la hora de definir una URL.

Tim Berners-Lee, el padre de la Web, nos avisa de ello con la siguiente frase:

Es el deber de un webmaster asignar URIs que sean capaces de ser válidas durante 2 años, 20 años, 200 años.

¿Qué es lo que quiere decir Tim Berners-Lee con este consejo?

Un sitio web no es algo estático, un sitio web evoluciona con el tiempo, se modifican las páginas, se eliminan las páginas y se añaden páginas nuevas.

Cuando se asigna una URL a una página web, esa URL debe ser válida durante toda la existencia de esa página web.

No se debe de modificar por posibles cambios que afecten a otras páginas del sitio web. Si una URL deja de ser válida, los visitantes de un sitio web se pueden encontrar con la desagradable sorpresa de “página no encontrada”, el famoso error 404.

A veces, una URL puede ser muy larga y complicada, por lo que puede ser difícil de memorizar, de copiar o de comunicar. Para solucionar este problema se emplean los
acortadores de URL, un mecanismo que permite convertir una URL larga en una URL corta.

Estos sistemas se han popularizado en los últimos años debido a la aparición de sistemas como Twitter, que limitan la longitud de los textos que se pueden escribir.

Los acortadores de URL más populares en la actualidad son el de Google, el de bitly y el de owly.

Hay más cosas que deberías saber sobre las URLs, por ejemplo, deberías saber qué son las URLs amigables y porqué son importantes, pero eso te lo dejo como ejercicio para que lo investigues.

Ya por último, una precisión.

Desde 1994, en los estándares de Internet, el concepto de URL ha sido incorporado dentro del más general de URI (Uniform Resource Identifier, en español identificador uniforme de recurso), pero el término URL aún se utiliza ampliamente.

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.

El hipertexto y la hipermedia

El hipertexto y la hipermedia:

[kml_flashembed movie=”http://www.youtube.com/v/APBWeiNmkco” 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 qué es el hipertexto y la hipermedia.

En este curso te vamos a enseñar a crear páginas web.

Las páginas web son el ejemplo más conocido de hipertexto e hipermedia, pero existen otros sistemas que también se basan en estos dos conceptos.

Mucha gente cree que Tim Berners-Lee, el padre de la Web, fue también el inventor del hipertexto. Pero no es así.

Él mismo lo aclara en su libro “Tejiendo la Red”: Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto ya la luz. La tarea que me correspondía era hacer que casaran.

Efectivamente, Tim Berners-Lee no inventó ni el hipertexto ni Internet.

Por cierto, el nacimiento de Internet te lo explico en el vídeo “Historia de Internet: su nacimiento”.

Y el nacimiento de la Web te lo cuento en las dos partes del vídeo “Historia de la Web: su nacimiento”

Entonces, ¿quién inventó el hipertexto?

El hipertexto no tiene un padre evidente, porque fueron varias las personas que idearon sistemas similares al hipertexto en los últimos 100 años.

Una de las primeras referencias del concepto de hipertexto se atribuye a Paul Otlet, que es considerado el fundador de la Bibliografía y la Documentación.

A principios del siglo XX, Paul Otlet imaginó Mundaneum, un archivo centralizado en el que se recogiese todo el conocimiento de la humanidad.

A principios del siglo XX no existían los ordenadores, así que el sistema se basaba en el empleo de fichas.

En estas fichas existían enlaces que permitían conectar las fichas entre sí, como si fueran las páginas web actuales.

Mundaneum ofrecía un servicio de búsqueda que admitía solicitudes de búsqueda por correo, correo postal de toda la vida, no correo electrónico actual.

En el año 1934, Paul Otlet imaginó una red global que permitiría a la gente buscar y navegar a través de millones de documentos, imágenes y vídeos interconectados. ¿Te recuerda esto a algo?

Fíjate, fíjate lo que decía:

“Desde su sillón, todo el mundo oirá, verá, participará, incluso será capaz de aplaudir, dar ovaciones, cantar en el coro, añadir sus gritos de participación a los de todos los demás”.

¿Es posible hacer todo esto hoy en día?

Otro precedente de lo que entendemos en la actualidad por hipertexto lo encontramos en Vannevar Bush.

Vannevar Bush fue un visionario para su época. 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).

En este vídeo se muestra una recreación de la máquina memex. Esta máquina era bastante tosca y rudimentaria porque estaba limitada por la tecnología que existía en el momento en que fue concebida.

Pero no fue hasta 1963, cuando Ted Nelson acuñó los términos hipertexto e hipermedia. Ted Nelson es considerado un visionario y también un vendedor de humo por su Proyecto Xanadú, el primer sistema basado en hipertexto que 50 años después todavía está en desarrollo.

Además del hipertexto y la hipermedia, Ted Nelson también ha desarrollado otras ideas geniales, como la teledildónica, pero esto no te voy a explicar lo que es, te dejo que lo investigues por tu cuenta.

Pero, ¿qué es el hipertexto?

Según el diccionario de la lengua de la Real Academia Española, hipertexto es:

Conjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.

Un texto normal, como por ejemplo un libro, normalmente está limitado a una organización lineal o secuencial.

Sin embargo, el hipertexto permite saltar de un punto a otro en un mismo texto, o a otro texto, a través de referencias.

De este modo, en lugar de leer el texto de forma continua, en el hipertexto ciertos términos están relacionados y el texto se puede leer siguiendo diferentes caminos.

Las relaciones en el hipertexto se establecen entre lo que se suele llamar como referencias, enlaces, vínculos o hipervínculos.

¿Y qué es la hipermedia?

El término hipermedia no figura en el diccionario de la lengua española de la RAE.

Pero podemos buscar un término relacionado con hipermedia, multimedia.

Según el diccionario de la lengua española, multimedia es un adjetivo que significa:

Que utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información.

Por tanto, un sistema multimedia es un sistema de comunicación en el que se emplean dos o más medios de comunicación, distintos, de forma concurrente.

Un sistema multimedia puede integrar texto, voz, audio, fotografías, gráficos interactivos, vídeos, realidad virtual y otros.

Un sistema multimedia proporciona una gran riqueza y una mayor flexibilidad a la hora de comunicar la información.

La calidad de multimedia no está restringida al mundo de los ordenadores. Así, por ejemplo, un libro acompañado de un cd de música ya es una obra multimedia.

Para algunos autores, hipermedia es un término que nace de la unión del hipertexto más la multimedia.

Por tanto, si juntamos las definiciones de hipertexto y multimedia, podemos obtener la siguiente definición de hipermedia:

Conjunto estructurado de diversos medios, como textos, gráficos, imágenes y sonidos, unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información.

Si la multimedia proporciona una gran riqueza a la información, el hipertexto aporta una estructura que permite que la información pueda presentarse y explorarse siguiendo distintas secuencias, de acuerdo a las necesidades y preferencias del usuario.

Existen muchos sistemas que se basan en el hipertexto y la hipermedia, pero la Web es el sistema más conocido y por eso la Web se ha convertido en sinónimo de hipertexto e hipermedia.

Por último, si los conceptos de hipertexto e hipermedia no fueron inventados por Tim Berners-Lee, ¿qué inventó Tim Berners-Lee?

Tim Berners-Lee tiene la respuesta:

Sólo tenía que tomar la idea del hipertexto y conectarlo a las ideas de TCP y DNS y ¡ta chan! – La Web

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.

Internet y la Web

Internet y la Web:

[kml_flashembed movie=”http://www.youtube.com/v/Puzwh7eI0DE” 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 diferencias que existen entre Internet y la Web.

Desgraciadamente, mucha gente confunde Internet y la Web. Espero que al acabar este vídeo tú ya no estés en ese grupo.

Por ejemplo, en esta entrevista a Vinton Cerf, uno de los padres de Internet, los redactores confunden Internet y la Web y llegan a afirmar que “Vinton Cerf ideó la mayor aportación que se ha dado en el mundo de la comunicación: La Web”. Eso es falso.

O en la página about.com, se afirma que Tim Berners-Lee es el padre de Internet, cuando en realidad es el padre de la Web.
¿Qué es Internet? ¿Qué es la Web?

Internet, también conocida como la Red de redes o simplemente la Red es un conjunto descentralizado de redes de comunicación interconectadas.

Internet permite que redes de diferentes tipos, lo que se llaman redes físicas heterogéneas, puedan conectarse entre sí.

Eso permite que un usuario se pueda conectar a Internet a través de una red cualquiera de comunicación, como por ejemplo, una red de telefonía por cable, una red de telefonía celular, una red de radio, o una red de comunicación satelital.

Todo ello es posible porque lo importante en Internet no es la forma de conexión física, lo importante es que la red permita una comunicación mediante el protocolo TCP/IP.

Para que lo entiendas fácilmente, un protocolo, en este caso TCP/IP, es el idioma o lenguaje que emplean dos sistemas, en este caso dos ordenadores, para hablar entre sí.

Igual que ocurre con las personas, para que dos sistemas se puedan entender es necesario que hablen el mismo idioma, aunque a veces, al igual que con las personas, se puede hacer uso de un traductor para que dos sistemas se entiendan entre sí.

Internet se puede entender como una red de carreteras por la que circulan los datos que se transmiten.

Los datos que se transmiten emplean diferentes idiomas, diferentes protocolos.

La World Wide Web, la Web, es simplemente un sistema más con su protocolo, el protocolo HTTP, que hace uso de Internet para la transmisión de los datos, en este caso las páginas web.

Pero además del protocolo HTTP, además de la Web, por Internet circulan más cosas.

Por ejemplo, el protocolo FTP se emplea para la transmisión de ficheros.

Los protocolos SMTP y POP se emplean para el envío y la recepción de correos electrónicos.

Y el protocolo Telnet se emplea para establecer conexiones remotas con otros ordenadores.

Sin embargo, la Web es el sistema más famoso de todos ellos, y por eso mucha gente cree que Internet y la Web son lo mismo, pero no es así.

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.

Maquetación de páginas web

CSS: la web única (one web):

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

 

CSS: diseño adaptable, adaptativo o flexible:

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

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 1):

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

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2):

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

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3):

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

HTML5: de HTML4 a HTML5

[kml_flashembed movie=”http://www.youtube.com/v/vRqQRrULSxI” 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 emplear los nuevos elementos semánticos de HTML5 para transformar la estructura de una página web de las versiones antiguas de HTML a la última versión.

En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, así que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar.

En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas.

Incluso en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas.

Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta.

O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web.

Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span.

Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces.

Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div.

En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.

Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5.

Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene:

Una cabecera.
Una barra o menú de navegación.
Un panel con información adicional, como por ejemplo noticias.
La zona de contenido principal formada por
dos entradas o artículos.
Una imagen en una de las entradas.
Y un pie de página.

Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web.

La cabecera se etiqueta con header.
La barra o menú de navegación con nav.
Un panel con información adicional con aside.
La zona de contenido principal con main.
Las entradas o artículos con article.
Una imagen con figure.
Y el pie de página con footer.

En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web.

Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web.

A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5.

En primer lugar vamos a ver el código HTML de la cabecera.

Este es el típico código de una cabecera de una página web: un div y un h1.

En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header.

Ahora la barra o menú de navegación del sitio web.

Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.

Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios.

Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.

Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos.

La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article.

Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura.

Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.

Por último, el pie de página.

En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar.

En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.

Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una página web.

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.

HTML5: introducción

[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.