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
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
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.
Link relacionado
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
Links relacionados:
2.5 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 del 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
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.
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)
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.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.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.
https://es.wikipedia.org/wiki/HTML
http://www.w3.org/community/webed/wiki/HTML/Training
http://www.w3schools.com Para ver tutoriales de HTML
2.12 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.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.14 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.
http://www.w3.org/Addressing/URL/url-spec.html
https://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
2.15 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
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.
Ver: http://www.cristalab.com/tutoriales/configurar-tu-web-para-usar-utf-8-c42532l/
2.17 Presentación del proyecto
Los objetivos del proyecto de este módulo son:
- Crear un sitio web formado por varias páginas conectadas mediante enlaces.
2.18 Lista de reproducción (Todos los videos de este modulo)
2.19 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).
No hay comentarios.:
Publicar un comentario