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:

http://pencil.evolus.vn/

Otras son de pago, como Balsamiq:

http://balsamiq.com/

o Gliffy:

http://www.gliffy.com/

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.