sábado, 26 de diciembre de 2015

2.1. Presentación

2.1. Presentación

Los objetivos de este módulo son:
  • Conocer las principales fases que existen en el desarrollo de un sitio o aplicación web.
  • Conocer la estructura básica de una página web.
  • Aprender a crear páginas web sencillas con encabezados, párrafos y listas.
  • Aprender a crear enlaces entre las distintas páginas que forman un sitio web.
  • Conocer algunos editores de código HTML.
Además, Sergio Luján te proporciona el consejo para aprender en este curso: practica, practica y practica.

2.2. Cómo se escribe una página web

2.2. Cómo se escribe una página web

En el módulo anterior has aprendido a crear páginas web mediante Blogger, un sistema gestor de contenidos, un programa específico para la creación de páginas web. Pero, ¿realmente tú estás creando la página web, o la está creando el programa en base a las acciones que realizas en el programa?
Cuando creas una página web con Blogger o algún programa similar, el programa te impone una serie de limitaciones: estás limitado a hacer aquello para lo que el programa ha sido programado. ¿No te gustaría tener un control total sobre lo que puedes hacer?
En este módulo vas a comenzar a aprender a hacer páginas web por ti mismo, sin ayuda de nada. Para lograrlo debes aprender HTML (HyperText Markup Language), el lenguaje con el que se escriben las páginas web.
Aprender HTML es muy parecido a aprender un idioma. Cuando te propones aprender un idioma nuevo, no esperas aprenderlo en 21 días, en tres meses o en un año: lo normal es que tardes varios años. HTML no es tan difícil como un idioma, no te llevará toda la vida aprenderlo, pero sí que necesitarás meses o años.
Por otro lado, cuando te propones aprender un idioma nuevo, no empiezas aprendiendo todas las palabras del diccionario: vas aprendiendo palabras nuevas poco a poco. Con HTML ocurre lo mismo: no intentes aprender todo el lenguaje a la vez, tienes que aprenderlo poco a poco. En este módulo y en los siguientes irás aprendiendo poco a poco las principales características de HTML.
Nota: Te hemos dicho HTML no es tan difícil como un idioma, no te llevará toda la vida aprenderlo, pero sí que necesitarás meses o años. En realidad, sí que te va a llevar toda la vida aprenderlo, porque el lenguaje HTML está en constante evolución. Los idiomas también evoluciona, ¡pero HTML lo hace mucho más rápido!

2.3. El desarrollo web

2.3. El desarrollo web

Muchas veces se confunden los términos desarrollo web y diseño web y se piensa que el diseño web incluye el desarrollo completo de una página web. Y no es así.
El siguiente vídeo aclara la confusión que existe entre diseño web y desarrollo web, explica las características principales del diseño web, las características principales del desarrollo web, las principales tecnologías que se emplean en el desarrollo web, y el ciclo de desarrollo de un sitio web (contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento).

2.4. Prototipado: wireframes, mockups y prototipos

2.4. Prototipado: wireframes, mockups y prototipos

En el vídeo El desarrollo web se han mostrado las principales fases del desarrollo de un sitio web. En la segunda fase, "Planificación", aparecían los hitos "Wireframes" y "Revisión Wireframes".
En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.
En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.

2.4. Prototipado: Wireframes, mockups y prototipos. Actividad

2.4. Prototipado: Wireframes, mockups y prototipos. Actividad

Antes de crear la primera página web de un sitio web deberías tener claro a dónde quieres llegar, lo que quieres construir. El primer paso es que desarrolles los prototipos de tu sitio web y de tus páginas web.
Los prototipos los puedes hacer a mano, con lápiz y papel. O también puedes usar un programa específico para crear prototipos.
Existen multitud de herramientas en la Web que puedes emplear para crear todo tipo de diagramas, incluidos los diferentes tipos de prototipos que se te han explicado (wireframes, mockups).
Algunas son gratuitas, como Pencil Project:
Otras son de pago, como Balsamiq:


o Gliffy:


2.5. El lenguaje HTML

2.5. El lenguaje HTML

HTML son las siglas de HyperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.
El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:
  • Ver código fuente de la página en Google Chrome y Mozilla Firefox.
  • Ver código fuente en Internet Explorer y Opera.
El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:
  • html
  • head
  • meta
  • title
  • link
  • style
  • script
  • body
  • p
  • a
  • strong
  • em
  • img
  • form
  • input
  • select
  • textarea
  • table
  • tr
  • th
  • td
  • blockquote
  • hr
  • ul
  • ol
  • li
  • div
  • span
En las siguientes lecciones vas a aprender la estructura básica de una página web y el uso de las etiquetas que más se suelen utilizar. Pero antes, te proponemos que aprendas algunas cosas de la historia de HTML.

2.6. Historia de HTML

2.6. Historia de HTML

El lenguaje HTML, al igual que los lenguajes o idiomas que hablan las personas, evoluciona con el tiempo.
En el siguiente vídeo se explica la historia del lenguaje HTML durante sus primeros años y su relación con otros lenguajes, como SGML, XML, HTML+ y HTML5. Además, sabrás por qué el W3C abandonó el desarrollo de XHTML y apostó por HTML5.


2.7. Sobre HTML5

2.7. Sobre HTML5

El 28 de octubre de 2014 el W3C publicó HTML5. A vocabulary and associated APIs for HTML and XHTML. W3C Recommendation 28 October 2014, lo que supone que HTML5 ya tiene el rango de estándar.
¿Significa esto que ya se puede utilizar HTML5 sin problemas? No, algo ha cambiado, ya tenemos una versión estable de HTML5, pero eso no significa que de un día para otro todos los navegadores web lo soportarán mágicamente. Los navegadores web actuales, y no digamos los que tienen varios años, no soportan muchas cosas de HTML5, así que se debe utilizar con precaución.
Si quieres saber algo más sobre la publicación de HTML5 consulta la nota de prensa del W3C HTML5 is a W3C Recommendation.
Importante: el material educativo de este curso fue preparado antes de la publicación de HTML5 como estándar, por lo que a veces se puede indicar que HTML5 no es un estándar.

2.8. HTML: conceptos básicos (parte 1)

2.8. HTML: conceptos básicos (parte 1)

Los comienzos siempre son difíciles... ¿Qué programa necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me equivoco? ¿Puedo romper algo?
Poco a poco, antes de correr hay que aprender a caminar.
En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).

Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.

2.9. HTML: conceptos básicos (parte 2)

HTML: conceptos básicos (parte 2)

En el siguiente vídeo se explica la creación de una página sencilla con el Bloc de Notas de Microsoft Windows. ¿A que nunca hubieses imaginado que con el humilde Bloc de Notas se podían crear páginas web?


2.9. Actividad

Actividad

1. En el código base que se te proporciona debes realizar los siguientes cambios:
  • Las siglas HTML deben aparecer como texto destacado en toda la página.
  • Tim Berners-Lee debe aparecer como texto enfatizado en toda la página.
  • Debes añadir el siguiente contenido:
    • Un encabezado de nivel 1 con el texto "HTML" antes de "HTML son las siglas de..."
    • Un encabezado de nivel 2 con el texto "Historia de HTML" antes de "Los inicios del lenguaje HTML..."
    • Un encabezado de nivel 2 con el texto "Versiones de HTML" antes de dos nuevos párrafos que contienen el texto "Tim Berners-Lee definió la primera versión de HTML en el año 1991" y "En la actualidad, la última versión de HTML es HTML5".

    Editor 

    <html>
    <head>
    <title>El título de la página</title>
    </head>
    <body>

    <p><strong>HTML</strong> son las siglas de <em>HyperText Markup Language</em>, que puede traducirse como lenguaje de marcas o marcado de hipertexto.
    </p>

    <p>El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar.
    </p>

    <p>HTML se compone de etiquetas que se escriben entre los símbolos menor que y mayor que.</p>

    <p>Los inicios del lenguaje HTML se remontan al año 1990, cuando Tim Berners-Lee creó la primera página web.</p>

    </body>
    </html>

    SOLUCIÓN

    <!-- SOLUCIÓN -->
    <html>
    <head>
    <title>HTML</title>
    </head>
    <body>

    <h1>HTML</h1>

    <p><strong>HTML</strong> son las siglas de <em>HyperText Markup Language</em>, que puede traducirse como lenguaje de marcas o marcado de hipertexto.
    </p>

    <p>El lenguaje <strong>HTML</strong> se emplea para crear las páginas web. Es muy fácil ver el código <strong>HTML</strong> de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar.
    </p>

    <p><strong>HTML</strong> se compone de etiquetas que se escriben entre los símbolos menor que y mayor que.</p>

    <h2>Historia de HTML</h2>

    <p>Los inicios del lenguaje <strong>HTML</strong> se remontan al año 1990, cuando <em>Tim Berners-Lee</em> creó la primera página web.</p>

    <h2>Versiones de HTML</h2>

    <p><em>Tim Berners-Lee</em> definió la primera versión de <strong>HTML</strong> en el año 1991.</p>

    <p>En la actualidad, la última versión de <strong>HTML</strong> es HTML5.</p>

    </body>
    </html>


2.10. HTML: conceptos básicos (parte 3)

2.10. HTML: conceptos básicos (parte 3)

Los comienzos siempre son difíciles... ¿Qué programa necesito para escribir una página web? ¿Por dónde empiezo? ¿Qué pasa si me equivoco? ¿Puedo romper algo?
Poco a poco, antes de correr hay que aprender a caminar.
En el siguiente vídeo se explica que HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML (esto es muy importante que lo recuerdes, no lo olvides). También se muestra la estructura de un elemento (etiqueta) y se explican las etiquetas básicas (html, head, title, body, h1, h2, h3, h4, h5, h6, p, strong, em).
Nota: Si la presentación visual no se define con HTML, ¿entonces con qué se define? Se define con CSS (Cascading Style Sheets), y no te preocupes, eso te lo explicaremos más adelante. Ahora, recuerda, poco a poco.


2.10. Actividad

Actividad

1. A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Tim Berners-Lee.
  • El texto "Tim Berners-Lee" como encabezado de nivel 1.
  • El texto "Biografía" como encabezado de nivel 2.
  • Todas las siglas, como HTTP, W3C o MIT deben aparecer como texto destacado.
  • Los nombres de las instituciones o empresas, como Consorcio de la World Wide Web o Universidad de Oxford, deben aparecer como texto enfatizado.

Editor

Tim Berners-Lee


Sir Timothy "Tim" John Berners-Lee (Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico, conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989. En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.


Biografía

Nació en el sudoeste de Londres en 1955. Sus padres eran matemáticos y formaron parte del equipo que construyó el Manchester Mark I (una de las primeras computadoras). Durante el tiempo que estuvo en la universidad, construyó una computadora con una soldadora, circuitos TTL, un procesador Motorola 68000 y un televisor viejo. Se graduó en física en 1976 en el Queen's College de la Universidad de Oxford. Conoció a su primera esposa en este periodo. En 1978, trabajó en D.G. Nash Limited (también en Poole) escribió un sistema operativo.
Desarrollo de su carrera
Berners-Lee trabajó en el CERN desde junio hasta diciembre de 1980. Durante ese tiempo, propuso un proyecto basado en el hipertexto para facilitar la forma de compartir y la puesta al día de la información entre investigadores. En este periodo también construyó un programa llamado Enquire que no llegó a ver la luz.
Después de dejar el CERN, en 1980, se fue a trabajar a la empresa de John Poole Image Computer Systems Ltd., pero regresó al CERN otra vez en 1984.
En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet y el hipertexto (HTTP y HTML), de lo que surgiría la World Wide Web. Desarrolló su primera propuesta de la Web en marzo de 1989, pero no tuvo mucho eco, por lo que en 1990 y con la ayuda de Robert Cailliau, hicieron una revisión que fue aceptada por su gerente, Mike Sendall. Usó ideas similares a las que había usado en el sistema Enquire para crear la World Wide Web, para esto diseñó y construyó el primer navegador (llamado WorldWideWeb y desarrollado con NextStep) y el primer servidor web al que llamó httpd (HyperText Transfer Protocol daemon).
Fuente: Wikipedia

SOLUCIÓN:

<!-- SOLUCIÓN -->
<html>
<head>
<title>Tim Berners-Lee</title>
</head>
<body>

<h1>Tim Berners-Lee</h1>

<p>
Sir Timothy "Tim" John Berners-Lee (Londres, Reino Unido, 8 de junio de 1955) es un científico de la computación británico, conocido por ser el padre de la Web. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo <strong>HTTP</strong> en noviembre de 1989. En octubre de 1994 fundó el <em>Consorcio de la World Wide Web</em> (<strong>W3C</strong>) con sede en el <strong>MIT</strong>, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.
</p>

<h2>Biografía</h2>

<p>
Nació en el sudoeste de Londres en 1955. Sus padres eran matemáticos y formaron parte del equipo que construyó el Manchester Mark I (una de las primeras computadoras). Durante el tiempo que estuvo en la universidad, construyó una computadora con una soldadora, circuitos <strong>TTL</strong>, un procesador Motorola 68000 y un televisor viejo. Se graduó en física en 1976 en el <em>Queen's College</em> de la <em>Universidad de Oxford</em>. Conoció a su primera esposa en este periodo. En 1978, trabajó en <em>D.G. Nash Limited</em> (también en <em>Poole</em>) escribió un sistema operativo.
</p>

<h2>Desarrollo de su carrera</h2>

<p>
Berners-Lee trabajó en el <strong>CERN</strong> desde junio hasta diciembre de 1980. Durante ese tiempo, propuso un proyecto basado en el hipertexto para facilitar la forma de compartir y la puesta al día de la información entre investigadores. En este periodo también construyó un programa llamado Enquire que no llegó a ver la luz.
</p>

<p>
Después de dejar el <strong>CERN</strong>, en 1980, se fue a trabajar a la empresa de <em>John Poole Image Computer Systems Ltd.</em>, pero regresó al <strong>CERN</strong> otra vez en 1984.
</p>

<p>
En 1989, el <strong>CERN</strong> era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet y el hipertexto (<strong>HTTP</strong> y <strong>HTML</strong>), de lo que surgiría la World Wide Web. Desarrolló su primera propuesta de la Web en marzo de 1989, pero no tuvo mucho eco, por lo que en 1990 y con la ayuda de Robert Cailliau, hicieron una revisión que fue aceptada por su gerente, Mike Sendall. Usó ideas similares a las que había usado en el sistema Enquire para crear la World Wide Web, para esto diseñó y construyó el primer navegador (llamado WorldWideWeb y desarrollado con NextStep) y el primer servidor web al que llamó httpd (HyperText Transfer Protocol daemon).
</p>

<p>Fuente: <em>Wikipedia</em></p>

</body>
</html>

 



2.11. HTML: Conceptos básicos (parte 4)

2.11 HTML: conceptos básicos (parte 4)

En el siguiente vídeo se explican las reglas básicas que se deben aplicar en la creación de una página web:
  • Etiquetas siempre cerradas.
  • Documentos bien formados.
  • Etiquetas en minúsculas.
  • Valores de los atributos siempre entre comillas.
También se dan algunas recomendaciones sobre los caracteres válidos en los nombres de los ficheros.


2.11. Actividad

1. Corrige los errores que presenta el código base que se te proporciona.

Editor

<html lang=es>
<head>
<title>World Wide Web</title>
</head>
<body>

<h1>World Wide Web</h1>

<p>
En informática, la <strong><em>World Wide Web</strong></em> (WWW) o Red informática mundial comúnmente conocida como la web, es un sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.

<h2>Historia</h2>

<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992.
</p>

<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una web semántica.
</p>

<p>Fuente: <em>Wikipedia</p></em>

</html>

RESULTADO

World Wide Web

En informática, la World Wide Web (WWW) o Red informática mundial comúnmente conocida como la web, es un sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.

Historia

La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992.
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una web semántica.
Fuente: Wikipedia


 SOLUCIÓN

<!-- SOLUCIÓN -->
<!-- Los valores de los atributos tienen que llevar siempre comillas -->
<html lang="es">
<head>
<title>World Wide Web</title>
</head>
<body>

<h1>World Wide Web</h1>

<p>
<!-- Los documentos tienen que estar bien formados -->
En informática, la <strong><em>World Wide Web</em></strong> (WWW) o Red informática mundial comúnmente conocida como la web, es un sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, y navega a través de esas páginas usando hiperenlaces.
<!-- Las etiquetas siempre se tienen que cerrar -->
</p>

<h2>Historia</h2>

<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992.
</p>

<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una web semántica.
</p>

<p>
<!-- Los documentos tienen que estar bien formados -->
Fuente: <em>Wikipedia</em></p>

<!-- Las etiquetas siempre se tienen que cerrar -->
</body>
</html>


2.12. HTML: listas (1)

HTML: listas (1)

En el siguiente vídeo se explican los diferentes tipos de listas que existen en HTML (ul, ol, dl) y la creación de listas anidadas.



2.12. Actividad

2.12. Actividad

1. A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

 Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Curriculum Vitae de Bruce Wayne.
  • El resto de la estructura de la página debes deducirlo a partir de la imagen proporcionada.

Editor

Curriculum Vitae de Bruce Wayne
Datos personales
Nombre completo:  Bruce Wayne
Fecha de nacimiento: 1/5/1939
Lugar de nacimiento:  Gotham City
Formación académica
1956-1961: Universidad del Espantapájaros
1952-1956: Instituto de Dos Caras
1944-1952:  Escuela Primaria del Joker
Experiencia laboral
1975-1985: En el paro
1965-1975: Cazavillanos y demás chusma
1962-1965: Aprendiz de superhéroe

 

Solución 

<!-- SOLUCIÓN -->
<html>
<head>
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo:  <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento:  <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952:  <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>

2.13. HTML: listas (2)

2.13. HTML: listas (2)

Las listas son un elemento muy importante para estructurar correctamente el contenido de una página web. Como autor de páginas web debes seleccionar el tipo de lista adecuado para cada situación. En la siguiente actividad te proponemos que escribas una página web en la que se deben emplear todos los tipos de listas.

2.13. Actividad

2.13. Actividad
1. Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

 Solución:

<!-- SOLUCIÓN -->
<html>
<head>
<title>Internet</title>
</head>
<body>

<h1>Internet</h1>

<h2>Contenido</h2>

<ol>
<li>Principales protocolos</li>
<li>Formas de conectarse</li>
</ol>

<h2>1. Principales protocolos</h2>

<ul>
<li>Transmisión de ficheros:
<ul>
<li>FTP</li>
</ul>
</li>
<li>Correo electrónico:
<ul>
<li>IMAP</li>
<li>POP</li>
<li>SMTP</li>
</ul>
</li>
</ul>

<h2>2. Formas de conectarse</h2>

<dl>
<dt>Red Telefónica Conmutada (RTC)</dt>
<dd>La línea telefónica de toda la vida.  Para acceder a Internet es necesario un módem.</dd>

<dt>Red Digital de Servicios Integrados (RDSI)</dt>
<dd>Una línea telefónica especial. Para acceder a Internet es necesario un módem RDSI.</dd>

<dt>Línea de Abonado Digital Asimétrica (ADSL)</dt>
<dd>Se basa en la conversión de una línea RTC en una línea de alta velocidad. Para acceder a Internet es necesario un módem ADSL.</dd>

<dt>Fibra Óptica</dt>
<dd>Una línea de fibra óptica. Normalmente la fibra óptica no llega hasta el usuario final, por lo que el término más apropiado es Fibra híbrida coaxial.</dd>
</dl>

</body>
</html>

2.14. HTML: enlaces

HTML: enlaces

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.



2.14. Actividad

1. A partir del texto que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:





Además, tienes que tener en cuenta los siguientes requisitos:
  • El título de la página debe ser Los tres pilares de la Web.
  • Los enlaces que aparecen en la página deben tener los siguientes destinos:
    • Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee
    • Web → http://es.wikipedia.org/wiki/World_Wide_Web
    • HTML → enlace intradocumental al epígrafe HTML
    • HTTP → enlace intradocumental al epígrafe HTTP
    • URL → enlace intradocumental al epígrafe URL
    • Fuente: HTML → http://es.wikipedia.org/wiki/HTML
    • Fuente: HTTP → http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
    • Fuente: URL → http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
Consejo: para comprobar que los enlaces intradocumentales funcionan correctamente, aumenta el tamaño o zoom de la página con "Control +"
 

Editor

Los tres pilares de la Web
Tim Berners-Lee es considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la Web
HTML
HTTP
URL
HTML
HTML, siglas de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web
Fuente: HTML, Wikipedia
HTTP
Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1.
Fuente: HTTP, Wikipedia
URL
Un localizador de recursos uniforme o URL —siglas en inglés de Uniform Resource Locator— es un identificador de recursos uniforme (URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo. Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.
Fuente: URL, Wikipedia

Solución

<!-- SOLUCIÓN -->
<html>
<head>
<title>Los tres pilares de la Web</title>
</head>
<body>
<h1>Los tres pilares de la Web</h1>
<p>
<a href="http://es.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a> es considerado el padre de la Web porque desarrolló los tres elementos básicos para el funcionamiento de la <a href="http://es.wikipedia.org/wiki/World_Wide_Web">Web</a>:
</p>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#http">HTTP</a></li>
<li><a href="#url">URL</a></li>
</ul>
<h2 id="html">HTML</h2>
<p>
HTML, siglas de <strong>HyperText Markup Language</strong>, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.
</p>
<p>
Fuente: <a href="http://es.wikipedia.org/wiki/HTML">HTML</a>, Wikipedia
</p>
<h2 id="http">HTTP</h2>
<p>
<strong>Hypertext Transfer Protocol</strong> o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica la versión 1.1.
</p>
<p>
Fuente: <a href="http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a>, Wikipedia
</p>
<h2 id="url">URL</h2>
<p>
Un <strong>localizador de recursos uniforme</strong> o URL —siglas en inglés de <em>Uniform Resource Locator</em>— es un identificador de recursos uniforme (URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo. Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.
</p>
<p>
Fuente: <a href="http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme">URL</a>, Wikipedia
</p>
</body>
</html>

 

2.15. HTML Problemas con los editores


HTML: problemas con los editores

En el siguiente vídeo se muestran algunos problemas que se pueden tener en Microsoft Windows con el editor Bloc de Notas y en Apple Macintosh con el editor TextEdit.

2.16. HTML: tres errores típicos

HTML: tres errores típicos
En el siguiente vídeo se muestran tres errores (confusiones o malas prácticas) que hasta gente que lleva muchos años creando páginas web comete de vez en cuando:
  • Saltos de línea.
  • Espacios en blanco.
  • Referencias de caracteres (caracteres especiales).
Después de ver este vídeo esperamos que tú no cometas estos errores.


2.20 [A+] Prototipos visuales de alta fidelidad

2.20 [A+] Prototipos visuales de alta fidelidad

En el vídeo Prototipado: wireframes, mockups y prototipos se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.
En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).