• Blog
  • Historia de la Web
    • Presentación
    • La Web
    • Los 25 años de la Web
    • ¿Cómo me ha cambiado la vida la Web?
    • Internet y la Web
    • Internet en el mundo
    • La familia de protocolos de Internet
    • Historia de Internet: su nacimiento
    • Historia de la Web: su nacimiento (parte 1)
    • Historia de la Web: su nacimiento (parte 2)
    • ¿Ya sabes quién inventó Internet y la Web?
    • Los primeros servidores web de España
    • Historia de los navegadores web (1)
    • Historia de los navegadores web (2)
  • Cómo funciona la Web
    • Evolución de la Web:
    • El hipertexto y la hipermedia
    • Las URLs
    • Las URLs amigables
    • Los nombres de dominio
    • Los nuevos nombres de dominio
    • El dominio .es
    • Las direcciones IP y el sistema de nombres de dominio
    • Sistema de gestión de contenidos
    • Creación de una página web con Blogger (1): estructura de un blog
    • Creación de una página web con Blogger (2): configuración básica
    • Creación de una página web con Blogger (3): edición básica de una entrada
    • Creación de una página web con Blogger (4): edición avanzada de una entrada
    • Creación de una página web con Blogger (5): diseño y gadgets
    • Presentación del proyecto
    • Arquitectura de la World Wide Web
    • Cómo nos conectamos a internet
    • Guía para principiantes para nombres de dominio
    • ¿Cómo funciona el DNS?
    • Los registros DNS
  • Cómo se escribe una p.web
    • Presentación
    • Cómo se escribe una página web
    • El desarrollo web
    • Prototipado: wireframes, mockups y prototipos
    • El lenguaje HTML
    • Historia de HTML
    • Sobre HTML5
    • HTML: conceptos básicos (parte 1)
    • HTML: conceptos básicos (parte 2)
    • HTML: conceptos básicos (parte 3)
    • HTML: conceptos básicos (parte 4)
    • HTML: listas (1)
    • HTML: listas (2)
    • HTML: enlaces
    • HTML: problemas con los editores
    • HTML: tres errores típicos
    • Presentación del proyecto
    • Prototipos visuales de alta fidelidad
  • Cómo se publica un sitio web
    • Presentación
    • Un sitio web tiene que estar en la Web
    • Los nombres de dominio
    • Cómo comprar un dominio de Internet
    • ¿Dónde compro mi nombre de dominio?
    • El secuestro de los nombres de dominio
    • El alojamiento (hosting)
    • Cómo publicar un sitio web: Alojamiento (hosting) (1/3)
    • Cómo publicar un sitio web: Alojamiento (hosting) (2/3)
  • Cómo se escribe una p.web correcta
Desarrollo Web: HTML y CSS
La Web se basa en dos conceptos que han sido explicados en el primer módulo de este curso: el hipertexto y la hipermedia.

El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.

En el siguiente vídeo se explica qué es el hipertexto, los tipos de enlaces que se pueden crear (intradocumental, extradocumental) en las páginas web, el concepto de URL (Uniform Resource Locator) que ya debes conocer y se proporcionan algunos consejos para crear enlaces correctos.

Video: HTML: enlaces

Los enlaces son el elemento principal que confiere a la Web su carácter de hipertexto.

El hipertexto se puede definir como un documento digital que se puede leer de forma no secuencial y que está compuesto de nodos o secciones, de enlaces o hipervínculos y de anclajes.

Los nodos son las partes del hipertexto que contienen información accesible para el usuario.

Por otro lado, los enlaces son las uniones o vínculos que se establecen entre nodos y facilitan la lectura secuencial o no secuencial por los nodos del documento. Por último, los anclajes son los puntos de activación de los enlaces.

La Web está formada por los millones de nodos, los documentos o páginas web, interconectados por millones de enlaces.

En las páginas web se pueden crear dos tipos de enlaces, los enlaces intradocumentales y los enlaces extradocumentales.

Un hiperenlace puede hacer referencia a un punto determinado de la página que lo contiene, a otra página HTML o a un punto determinado de otra página HTML. En los dos últimos casos, la página destino puede residir en el mismo servidor que la página que contiene el hiperenlace o en un servidor distinto.

La etiqueta que se utiliza en HTML para definir un hiperenlace es <a>…</a>. Todo aquello que aparezca en el código HTML entre la etiqueta de inicio y la etiqueta de cierre aparecerá en la página web como un enlace (será el objeto sensible que al ser pulsado producirá el salto al destino del enlace). Normalmente, suele utilizarse texto o imágenes como contenido de un enlace.

Un enlace intradocumental es un enlace a un punto en el mismo documento en el que se define el enlace. Por un lado, con la etiqueta se define el enlace y se emplea el atributo href para indicar el destino del enlace.

Por otro lado, tradicionalmente se empleaba la etiqueta <a> pero con el atributo name para definir el destino del enlace. Sin embargo, en la actualidad se emplea el atributo id que se puede definir en cualquier etiqueta de HTML, como por ejemplo en una etiqueta de encabezado o en un párrafo de texto. 

Por supuesto que en una página web se pueden definir varios enlaces a un mismo destino, pero no se pueden crear varios destinos con el mismo nombre. El nombre debe ser único. Muy importante: el nombre del destino en el enlace va precedido del símbolo #, mientras que en el destino no se pone.

Enlace Intradocumental
·        Enlace a un punto en el mismo documento

--Enlace:      <a href="#nombre"> …</a>
--Destibo:    <a name="nombre"> …</a>
                    <h1 id="nombre"> …</h1>
                    <p id="nombre"> …</p>

Un enlace extradocumental es un enlace a otro documento, normalmente a otra página web. En el atributo href se tiene que indicar la URL de acceso al otro documento.

Enlace extradocumental
·        Enlace a otro documento

--  <a href="http://es.wikipedia.org/wiki/HTML"> …</a>

URL es el acrónimo de Uniform Resource Locator, Localizador uniforme de recurso, y es la forma estandarizada de hacer referencia a un documento, a un recurso, en la Web.

<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/<recurso>

Una URL se compone de: El servicio o protocolo que se está empleando,  de las credenciales, nombre de usuario y contraseña, con las que se realiza la conexión al servicio, el host o servidor al que se accede, el puerto al que se realiza la conexión, la ruta de acceso al recurso, y finalmente, el nombre del recurso, que suele ser una página web, pero que podría ser cualquier tipo de documento.

Aquí tenemos tres ejemplos de URL, una del servicio web, otra del servicio de FTP y la última del servicio de correo.

URL

Web: http://idesweb.es/temario
FTP: ftp://ftp.ua.es/pub/software/listado.txt
Email: mailto:sergio.lujan@ua.es

Si quieres aprender más cosas sobre URL, te aconsejo que consultes el documento original deTim Berners-Lee del año 1994 en el que se especificaba la sintaxis y la semántica de URL.

Por último, también existe el enlace extradocumental a un punto en otro documento. En este tipo de enlace se combinan los dos enlaces anteriores.

Enlace extradocumental
•        Enlace a un pinto en otro documento

--Enlace:      <a href="pagina.html#nombre"> …</a>
                            --Destibo:    <a name="nombre"> …</a>
<h1 id="nombre"> …</h1>
                                                 <p id="nombre"> …</p>

Por un lado tenemos el enlace, en el que se tiene que indicar tanto la URL del documento como el nombre del punto en el otro documento.

Por otro lado, en el destino del enlace se debe definir el punto al que se hace referencia mediante un nombre, ya sea con el atributo name, el método antiguo, o mediante el atributo id.

Para finalizar este tema, te ofrezco tres consejos que debes de tener en cuenta a la hora de crear un enlace.

  1. Lleva mucho cuidado con los nombres de los ficheros, con las mayúsculas y minúsculas, yo te aconsejo que lo escribas todo en minúsculas.                               
  2. Leva también mucho cuidado con los caracteres extraños, utiliza sólo las letras del alfabeto inglés, los números y algún carácter más como el guion o el guion bajo. Y nada de espacios en blanco en el nombre de los ficheros o en el nombre de los directorios.                                                                                                           
  3. Lleva mucho cuidado con las rutas que escribas en los enlaces: que no sean rutas físicas a documentos que se encuentran en tu ordenador, ya que al publicar tus páginas en un servidor web, los enlaces no funcionarán.



¿Qué son las URLs? ¿Qué partes componen una URL? En el siguiente vídeo aprenderemos algunas  cosas que quizás no sepamos sobre las URLs, el sistema que se emplea para localizar un recurso, como por ejemplo una página web o un vídeo, en la Web.
Video: Las URLs
Transcripción

URL es el acrónimo de (Uniform Resource Locator), localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la WWW.
Ejemplo: Por ejemplo, una URL está formada por estas partes: el esquema, la máquina, el directorio y el archivo.

Esquema://máquina/directorio/archivo

El esquema o servicio (se puede llamar de las dos formas) 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.
Los esquemas más conocidos son http, https, ftp, mailto y file.


http://dominio.com/es/html/una-pagina.html

Maquina: define el nombre del dominio
Directorio o ruta: define el camino o subdirectorio en el servidor. Si es omitido, el documento debe encontrarse en el directorio principal, de lo contrario no será localizado.
Nombre de archivo: define el nombre del documento. Se usan como nombres de archivo por defecto default.htm o index.htm.


URL Amigable:  Las URLs 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.
Ejemplo:  www.fotografía.jc62hp.es



Primer-Navegador-Web-sin-interfaz


En este primer vídeo sobre la historia de la Web se muestran algunos antecedentes, como Vannevar Bush y el memex o Ted Nelson y el hipertexto y la hipermedia, que influyeron en la propuesta de Tim Berners-Lee para la creación de un sistema de hipertexto para compartir información en el CERN.

Video: Historiade la Web: su nacimiento (parte 1)

Si tienes problemas para ver el video,  puedes leer su contenido en el siguiente link.  Transcripción

Las personas normalmente acostumbramos a llamar las cosas por el nombre más fácil posible, pero a veces nos confundimos y mezclamos una cosa con otra. Es lo que sucede con “La Web” y con  “Internet”, lo vemos como si fuesen  lo mismo, cuando en realidad no lo son.

Nosotros tenemos una tubería y esa tubería puede llevar agua, petróleo, gas, etc. A modo de ejemplo, la tubería es internet y en vez de llevar  agua, gasolina, petróleo…lleva  la Web, correo electrónico, chat o cualquier otro servicio.

Internet conecta millones de ordenadores en todo el mundo a través de una red que permite que cualquier computador pueda comunicarse con otro sin importar en qué lugar del planeta se encuentren, siempre y cuando los dos estén conectados a Internet. (Imagínate que es una red de tuberías).

 Y la Web es sólo una de las maneras en las que la información puede fluir a través de Internet (Por dentro de esas tuberías cono si fuera agua).

Tim Berners-Lee.  En 1988, mientras trabajaba en el Laboratorio Europeo de Física para el Estudio de las Partículas (CERN), Tim Berners-Lee propuso un proyecto global de hipertexto, que sería conocido como World Wide Web (www) (literalmente, Telaraña de Alcance Mundial). Basado en su anterior proyecto, llamado “Enquire”, la www fue diseñado para permitir que la gente trabajara junta combinando su conocimiento en una web de documentos de hipertexto. Él escribió el primer servidor www, “httpd”, y el primer cliente, “WorldWideWeb”, un buscador/editor de hipertexto “lo-que-ves-es-lo-que-obtienes”, el cual corría en el ambiente de NeXTStep. Este trabajo comenzó en octubre de 1990, y el programa “WorldWideWeb” estuvo disponible por primera vez dentro del CERN en diciembre, y en internet en el verano de 1991.

HTML: HyperText Markup Language, es 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.

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.


Programación de aplicaciones web historia principiosbásicos  y clientes web.

Vannevar Bush

Memex:  se trata de un dispositivo de base de datos, que nunca fue materializado por nadie, en el que se almacenarían todo tipo de documentos. Este dispositivo constaría de una mesa con un teclado y palancas que permitiría la consulta de datos almacenados en microfilms que serían proyectados en unas pantallas translúcidas.

Cómo podríamos pensar, de Vannevar Bush. La World Wide Web ha realizado el sueño de Bush hasta un extremo que ni siquiera él se había atrevido a imaginar.

Ted Nelson

Proyecto Xanadú

Information Management: A Proposal  Hoy en día la primera página web ya no existe, se perdió, pero podemos encontrar esta página sobre el nacimiento dela web.

Tim Berners-Lee remembers the moment he switched on theweb  A mí no me funcionan estos videos de la BBC. Se puede ver en su lugar



Entradas antiguas Inicio

Visita mi fotoblog : "Iniciandome en la fotografía"

Visita mi fotoblog : "Iniciandome en la fotografía"
Visita mi fotoblog : "Iniciandome en la fotografía"

Buscar en este blog

Datos personales

juan carlos
Ver todo mi perfil

Etiquetas

&nbsp; <br/> 25 años acceso ADSL alojamiento alta fidelidad Amaya anidadas Apache aplicación web aprender Architecture WWW Arqueología digital arquitecto ASCII atributos Backend baja fidelidad Blogger bloguear blueprint body brainstorming browser Browser Wars cabecera cable CERN CMS código comenarios Compartido configuración Contacto contenido cuerpo dd dedicado Desarrollo DHCP Digital Revolution Dirección Diseñador diseño dl DNS DOCSIS dominio dominio .es dominios Dreamweaver edición editor editores elementos em enlaces entradas espacios estructura etiqueta etiquetas extradocumental fibra FTP FTTH gadgets Garrett Global Internet Report Google gramática gTLDs h1 h2 h3 h4 h5 h6 HdtTML head hipermedia hipertexto hipervínculos Historia de Internet Historia de la Web homenaje HotDog Professional Housing HTML HTML5 HTTP ICANN ID Information M Proposal Internet Internet Explorer intradocumental IP IP Privada IP Pública IPv4 IPv6 JavaScript KompoZer lanzamiento layout LDAP li lineas links listas Microsoft MINETUR mixto mockups Modulo 0 Mosaic Multimedia Mundaneum navegadores Netscape NeXTcube Notepad Notepad++ Objetivos ol Olé p Pareto Paul Otlet penetración Pep Vallés permisos planificación plano POP Presentación Propósito prototipar prototipos proyecto Recommendation Red.es Redes de acceso Redes Hibridas reversed saltos secuestro-dominios servidores SGML sketching SMTP SSH start strong Sublime Text Tim Berners-Lee title Título type ul URI URL URL Amigable URL estructura URL semántica velocidad video Vídeo vínculos Vinton Cerf W3C W3Schools Web WHATWG Wireframes WorldWideWeb WWW WYSIWYG XHTML XML

Entradas populares

  • Historia de los navegadores web (1)
    Un elemento esencial en el crecimiento de la Web fue el desarrollo de los navegadores web. Un navegador web (web browser) es un progr...
  • El desarrollo web
    En el vídeo El desarrollo web se ha mostrado las principales fases del desarrollo de un sitio web. En la segunda fase, "Planificac...
  • Las URLs
    ¿Qué son las URLs? ¿Qué partes componen una URL? En el siguiente vídeo aprenderemos algunas  cosas que quizás no sepamos sobre las UR...
  • Historia de los navegadores web (2)
    En esta segunda parte de la historia de los navegadores web conocerás el nacimiento y muerte de Netscape Communications, sabrás quién fue...
  • El dominio .es
    En julio de 2014 se cumplieron los 25 años del dominio territorial .es. Para celebrarlo, se realizó un homenaje a las empresas e instit...
  • La Web
    Nota: Antes de aprender a crear páginas web  vamos a ver ciertas cosas sobre el entorno del desarrollo web que  deberías de conocer para...
  • Creación de una página web con Blogger (1): estructura de un blog
    Antes de crear tu primer blog te vamos a explicar la estructura básica de un blog. Como verás, un blog no es una página web muy complej...
  • HTML: listas (1)
    Etiquetas vistas hasta el momento Etiquetas vistas hasta el momento: Nombre Etiqueta inicial ...
  • Un sitio web tiene que estar en la Web
    Tu sitio web va creciendo poco a poco. Por ahora, tu sitio web está alojado en tu ordenador, sólo lo puedes usar tú. ¿Qué hay que hac...
  • Evolución de la Web: de la página web a la aplicación web
    En el siguiente vídeo se explica cómo ha evolucionado la Web, desde el concepto inicial de página web hasta el concepto actual de aplic...

Advertisement

Con la tecnología de Blogger.
Copyright Carlos Hernández©2014 Desarrollo Web: HTML y CSS.
jc62hp@gmail.com