Portafolio del curso de Introducción al Desarrollo Web: HTML y CSS: 2016

16 dic 2016

Uniform Resource Locator. URL

Estamos todos habituados a escribir direcciones o URLs para localizar páginas que nos interesan, pero en mi caso concreto desconozco que son las URLs y eso es lo que voy a intentar aprender.

Tim Berners-Lee es considerado padre de la Web, ya que desarrollo las tres tecnologías fundamentales de la Web:

HTML:

sigla en inglés de HyperText Markup Language (lenguaje de marcas o etiquetado de hipertexto), hace referencia al lenguaje de marcado para la elaboración de 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 video del profesor Lujan dentro del curso de idesweb: Introducción al desarrollo Web: HTML y CSS, APRENDEREMOS QUE ES UNA URL viendo este video:

Una URL o Uniform Resource Locator (del inglés, localizador de recursos uniforme) nos es más que la dirección de un recurso en Internet, como lo es una página, una imagen o un video. Lo puedes entender como una dirección física, pero aplicada al mundo online.

Su formato nos es familiar a todos:

http://www.example.com/directorio/pagina.html

¿Pero sabes distinguir cada una de sus partes? ¿Y sabías que una URL no es lo mismo que un dominio? Veamos sus componentes:

http:// – Indica el protocolo utilizado para acceder al recurso, en este caso Hypertext Transfer Protocol o protocolo de transferencia de hipertexto. Es el protocolo más común en Internet, aunque también son populares otros como FTP.
www – Es el subdominio donde se encuentra el recurso, que en este caso indica Word Wide Web. Al contrario de lo que muchos piensan, no es obligatorio y tampoco tiene por qué llamarse así. Fíjate que en el caso de los sitios alojados en WordPress.com y Blogger.com el subdominio es el nombre del blog.
example – Es el nombre del dominio, sin más.
.com – Es el nombre del dominio de nivel superior, que puede ser .com, .es, .net, .org o cualquier otro. A día de hoy existen más de 300 extensiones.
/directorio – Una carpeta de la que pueden colgar páginas y otros directorios.
/pagina – El nombre del documento.
.html – La extensión del documento, en este caso HTML pero no tiene por qué llevarla.

En vez de esquema a veces 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.

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.

URLs amigables.

Deberíamos saber que son y las URLs amigables, también llamadas URLs semánticas y a veces URLs bonitas.

Para aprender que son las URLs semánticas consultamos el articulo de la Wikipedia, sobre ellas:

Las URL semánticas o URL amigables son aquellas URLs que son, dentro de lo que cabe, entendibles para el usuario. Lejos de las clásicas URLs de las páginas dinámicas llenas de variables GET y números difíciles de recordar, las URL semánticas están formadas con palabras relacionadas con el contenido de la página y fáciles de recordar. Estas se utilizan en los sitios web dinámicos (no estáticos). Por ello se están utilizando mucho más que las URL extensas.

En la siguiente tabla se muestran varios ejemplos de URLs amigables:

URL no amigable	URL amigable
`http://example.com/index.php?pagina=contacto`	`http://example.com/contacto`
`http://example.com/index.php?pagina=consulting&seccion=marketing`	`http://example.com/consulting/marketing`
`http://example.com/productos?categoria=2&pid=25`	`http://example.com/productos/2/25`
`http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss`	`http://example.com/news.rss`
`http://example.com/servicios/index.jsp?id=legal&subid=patentes`	`http://example.com/servicios/legal/patentes`
`http://example.com/kb/index.php?cat=8&id=41`	`http://example.com/kb/8/41`
`http://example.com/index.php?mod=perfiles&id=193`	`http://example.com/perfiles/193`

La URL amigable

Supongamos que planeas comprarte una cámara fotos y has dado con dos tiendas que tienen el modelo que buscas.

La dirección del producto en la primera tienda es esta:

http://www.example.com/B001G5ZTLS/ref=sr_1_5?s=foto&ie=UTF8&qid=1365525726&sr=1-5

Y la dirección de la segunda esta:

http://www.example.com/camaras/reflex/canon-eos-5d-mark-2/

¿Cuál serías capaz de recordar? ¿La que incluye parámetros indescifrables, o la que está escrita en nuestro idioma?

Creo que la respuesta es obvia.

La primera es lo que se conoce como URL dinámica, y es un tipo de URL diseñada para ser manejada por máquinas. La segunda en cambio, es más apropiada para personas, y no es casualidad que sea la que prefieren los buscadores.

Es accesible. Es corta. Es fácil de recordar. De ahí que se denomina, URL amigable.

Ventajas de usar direccions URL amigables

Tras lo anterior es normal que prefieras una URL amigable frente a una dinámica, pero veamos sus ventajas en detalle:

Tiene sentido – La URL amigable es fácil de entender. Un usuario no necesita visitar la página para saber qué contiene porque ya lo describe claramente.
Es pertienente – Una URL legible te confiere más posibilidades de atraer tráfico orgánico, dado que las palabras que contiene son usadas para calcular la relevancia de la página (junto con otros factores como la etiqueta de título).
Proporciona mejores enlaces – Una buena URL tiene el beneficio adicional de servir de texto de enlace o anchor text cuando son copiadas y pegadas en otro sitios, como foros, blogs, etc. Por ejemplo, la URL amigable que hemos visto para la tienda de fotografía (http://www.example.com/camaras/reflex/canon-eos-5d-mark-2) da crédito al enlace para las palabras “camaras”, “reflex”, “canon”, “5d”, etc.

9 dic 2016

El hipertexto y la hipermedia.

Tim Berners-Lee el padre de la Web, no fue el inventor del hipertexto. El mismo nos 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.

ANTECEDENTES del 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 videos conectados. Esto es lo que decía Paul Otlet:(The New York Times)

“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”.

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).
Esta máquina era bastante rudimentaria porque estaba limitada por la tecnología que existía en el momento en que fue concebida. En este video se muestra una recreación de la máquina memex.

En 1963, fue 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.

El nombre del proyecto, Xanadu, fue tomado al parecer de un poema de Samuel Taylor Coleridge; Nelson interpretó la palabra como "Ese mágico sitio de la memoria literal donde nada se pierde nunca" (en el poema era el palacio de Kublai Khan). La idea fue concebida en 1967 y expuesta en su libro "Literary Machines".El proyecto Xanadú nunca llegó a terminarse, pero Nelson ha demostrado que con la aparición de la   World Wide Web, su idea no era ninguna utopía. De hecho, actualmente sigue trabajando en ella. No se puede negar la influencia que de estas ideas han llegado en la evolución de los sistemas del hipertexto tal y como se conciben hoy día.

Además del hipertexto y la hipermedia, Ted Nelson también ha desarrollado otras ideas geniales, como la teledildónica, en el enlace descubriréis que es la práctica del sexo en una realidad virtual, simulada por ordenador y muchas cosas más.

¿Que es el Hipertexto?

Según la Real Academia de la Lengua Española:

Hipertexto:  (1. m. Inform.) 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.

¿Que es la Hipermedia?
Hemos encontrado en Wordreference.com una definición de Hipermedia : (1.m. Inform.) hipertexto que no se limita a documentos escritos: el hipermedia puede vincular sonidos gráficos etc.
El término Hipermedia no lo recoge la RAE. Pero podemos buscar un término relacionado con hipermedia, Multimidia.
Según la RAE. Multimedia: (1. adj.) Que utiliza conjunta y simultaneamente diversos medios, como imagenes, sonidos, y textos, en la transmisión de la 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 uso multimedia puede integrar texto, voz. audio, fotografías, gráficos interactivos, videos, 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 de hipertexto y la multimedia. 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, imagenes 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.

Como indicábamos al inicio de esta entrada, los conceptos de hipertexto e hipermedia no fueron inventados por Tim Berners-Lee.
El mismo -Tim Berners-Lee nos da la respuesta: Solo tenia que tomar la idea del hipertexto y conectarlo a las ideas de TCP y DNS y ¡¡¡¡¡TA CHAN!!!!! La Web.
Ahora veré este video del profesor Sergio Lujan, profesor de la UA y del curso de iDESWEB, dónde lo explica fenomenal.

Esta es la parte final de la página. Por cierto, según Tim Berners-Lee, utilizó el ordenador NEXT, en el CERN,cuando el creo la página Web, y llegó a ser el primer servidor Web del mundo.
NeXT fue fundada en 1985 por el co-fundador de Apple, Steve Jobs después de su renuncia forzada de Apple.NeXT introdujo el primer NeXT Computer en 1988, y el NeXTstation en 1990.

Aplicaciones de Software[editar]

Muchos desarrolladores utilizaron la plataforma de NeXT para escribir programas pioneros. Tim Berners-Lee usó un NeXT Computer en 1991 para crear el primer navegador y el servidor web.

Mike Sendall (jefe de Tim Berners-Lee) compró un NeXTcube para la evaluación, y se lo dio a Tim [Berners-Lee]. La implementación del prototipo de Tim en NeXTStep se hizo en pocos meses, gracias a las cualidades del sistema de desarrollo de software NeXTStep. ¡Este prototipo ofrecía navegación / escritura WYSIWYG ! Los navegadores web actuales utilizados para "navegar por Internet" no son más que ventanas pasivas, privando al usuario de la posibilidad de contribuir. Durante algunas sesiones en la cafetería del CERN, Tim y yo tratamos de encontrar un nombre para el sistema de captura. Estaba decidido de que el nombre no se debería tomar de la mitología griega. Tim propuso "World-Wide Web". Me gustó mucho esa idea, sólo que es difícil de pronunciar en francés ...

Robert Cailliau, 2 de noviembre de 1995

4 dic 2016

Evolución de la Web: De la página web a aplicación web

En este curso aprenderé a crear una página web, pero no aplicaciones web.
Una aplicación web es un programa, un software que se puede utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador web.
El desarrollo de una aplicación web requiere conocimientos avanzados como programación y manejo de bases de datos.
Para aprender más sobre aplicaciones web y su desarrollo te recomiendo que consultes

Aplicaciones web
Aspectos básicos de las aplicaciones web

Y el estupendo video del profesor Luján de U. de Alicante sobre: Evolución de la Web.

3 dic 2016

Navegadores Web. Aprendiendo +

Un elemento esencial en el conocimiento de la Web fue el desarrollo de los navegadores Web.
Un navegador Web (web browser) es un programa que permite acceder a los contenidos publicados en la Web, es capaz de interpretarlos y visualizarlos para que un usuario pueda interactuar con ellos.

En el próximo videos: Historia de los navegadores (Parte I)
Aprenderemos que el primer navegador Web fue desarrollado por Tim Berners-Lee, el padre de la Web. Ademas conoceremos el navegador Mosaic, el primer navegador multiplataforma que supuso una revolución.

En este segundo video de Historia de los navegadores Web (Parte II)
En este segunda parte conoceremos el nacimiento y muerte de la Compañia Netscape Comunications, sabremos quien fué el vencedor de la primera guerra de los navegadores y al final aprenderemos la lección más importante de la Historia de los navegadores Web.