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.
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?
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.
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.
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!
El desarrollo web
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.
La infografía está disponible en castellano y divide el desarrollo
de un sitio web en las siguientes fases: contacto inicial,
planificación, contenido, diseño, desarrollo y lanzamiento. (Actividad: Pero si hiciéramos un ejercicio de abstracción y permitiéramos que una o varias fases no se realizasen, ¿qué fase no se podría eliminar de este diagrama? Es decir, ¿qué fase es esencial?)
