HTML + Material Design
Tutorial 3
Resumen Duración
40 min
En este tutorial conocerás cómo aplicar un estilo Material Design
a una página Web HTML básica; dotándola de una apariencia
Autor
cerca a la de una aplicación Web. Para esto usarás una librería de Juan Vicente Pradilla Cerón
componentes llamada Material Design Lite (MDL). Modificado por:
Fabian Posso
Además, conocerás los elementos básicos de [Link]; en especial:
Fecha de Creación
referencia del lenguaje de programación (JavaScript) y la
15/08/2020
estructura básica de programa.
Modificado en:
15/08/2024
Licencia
1. Introducción
Duración: 10 min
Introducción a HTML
El lenguaje de diseño Material Design, fue publicado por Google en el año 2014, y se ha extendido a
gran cantidad de aplicaciones móviles y Web; hasta ser un estándar de facto en varios ecosistemas. Por
este motivo existe una enorme cantidad de recursos asociados a este lenguaje de diseño. Tal es el caso
de Material Design Lite (MDL), el cual facilita la incorporación de Material Design a cualquier aplicación
Web que siga la estructura básica de un documento HTML.
Referencia al lenguaje de diseño Material Design
Para dominar el lenguaje de diseño Material Design, te invito a estudiar la referencia del lenguaje que
se ha publicado en el sitio oficial.
Referencia al librería de componentes MDL
Para facilitar el uso de MDL, te invito a estudiar la referencia del lenguaje que se ha publicado en el
sitio oficial.
Estructura básica de un documento HTML con Material Design Lite
En Material Design Lite (MDL), la estructura básica de un documento HTML aprovecha el atributo class
de los elementos para aplicar el lenguaje de diseño Material Design. A continuación se presenta la
estructura básica de documento HTML y posteriormente la estructura usando MDL:
Estructura básica de documento HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Tutorial 3</title>
</head>
<body>
<header>
<div>Cabecera del documento</div>
</header>
<nav>
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
</nav>
<main>
<div>Contenido del documento</div>
</main>
<footer>
<div>Pie del documento</div>
</footer>
</body>
</html>
Estructura básica de documento HTML usando MDL
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Tutorial 03</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="[Link]
/>
<link
rel="stylesheet"
href="[Link]
/>
<script defer src="[Link]
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Cabecera de la aplicación -->
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Título de la aplicación -->
<span class="mdl-layout-title">Tutorial 7</span>
</div>
</header>
<!-- Menú de la aplicación -->
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Enlace 1</a>
<a class="mdl-navigation__link" href="">Enlace 2</a>
</nav>
</div>
<!-- Contenido de la aplicación -->
<main class="mdl-layout__content">
<div class="page-content">Contenido del documento</div>
</main>
<!-- Pie de la aplicación -->
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
2. Conociendo [Link]
Duración: 10 min
¿Qué es [Link]?
[Link] es una librería Javascript libre y gratuita para la creación de aplicaciones Web creativas. Fue
ideada con el objetivo de facilitar la codificación a: artistas, diseñadores y estudiantes; permitiendo un
acceso sencillo y paulatino a los algoritmos de programación.
Página oficial de [Link]
Navega por el sitio oficial de [Link] y conoce, mediante ejemplos, las funcionalidades que ofrece esta
librería.
Referencia al lenguaje de programación
El lenguaje de programación empleado para utilizar p5 es JavaScript (JS), el cual es un lenguaje de
programación de alto nivel, interpretado (compilación en tiempo de ejecución) y multiparadigma,
(imperativo procedimental, imperativo orientado a objetos, declarativo funcional y dirigido por eventos),
que se encuentra ajustado a la especificación ECMAScript (ES), actualmente en su versión 12, también
conocida como ECMAScript 2021.
JavaScript fue inicialmente utilizado para proveer comportamientos dinámicos del lado del cliente en las
páginas Web; convirtiéndose en una de las tecnologías de núcleo, junto a HTML y CSS, del servicio
World Wide Web (WWW). En la actualidad, se utiliza del lado del cliente y del lado del servidor, en las
aplicaciones Web; en aplicaciones de escritorio; documentos PDF y aplicaciones para dispositivos
móviles.
Por su parte, [Link] ofrece un conjunto de objetos y funciones que facilitan el uso de JavaScript. Para este
tutorial debe estudiar con detenimiento la referencia oficial de [Link]. Encontrarás muchas similitudes
con lenguajes de programación que ya has aprendido cómo C# y Java.
Referencia al lenguaje de programación
Asegúrate de entender correctamente el lenguaje de programación, de forma que logres el mayor
nivel de comprensión en este tutorial.
Referencia al lenguaje de programación JavaScript
Para facilitar el uso de [Link] debes conocer el funcionamiento de JavaScript, te invito a estudiar la
referencia del lenguaje que se ha publicado en el sitio de Mozilla.
Estructura básica de programa
Generalmente a los programas realizados en JavaScript usando [Link] se les conoce como Sketch. Todos
los Sketch tienen la misma estructura básica:
Estructura básica de programa
//DECLARACIONES
// FUNCIÓN DE CONFIGURACIÓN
function setup () {
// FUNCIÓN DONDE SE PROGRAMA LAS ACCIONES DE PINTADO
function draw() {
Observe con detenimiento que la estructura planteada contiene tres bloques bien diferenciados:
declaraciones, función setup y función draw. Note, además, que setup y draw son funciones, no
métodos de una clase. Detallamos ahora cada uno de los bloques:
● Declaraciones: este bloque es aprovechado para declarar constantes, variables, objetos,
estructuras y otras funciones (diferentes a setup y loop).
● Función setup: se llama cuando el Sketch inicia, esto es, cuando un usuario inicia la aplicación
Web que lo contiene. La función setup se llama en una sola ocasión y se utiliza para programar
el código vinculado a: inicializar variables, establecer el tamaño de la pantalla y el color de fondo,
inicializar imágenes, sonidos y fuentes; o cualquier otra configuración necesaria para el
funcionamiento del Sketch. Solo puede existir una función setup por cada Sketch.
● Función draw: esta función se llama de forma automática, continua y consecutiva, es decir, el
código que se escribe dentro de esta función se llama una y otra vez mientras el usuario se
encuentre dentro de la aplicación Web. La función draw se llama por primera vez después de
ejecutar el código de la función setup; y se utiliza para programar el código que se encarga de
las acciones de pintado de la aplicación Web y la lógica para su funcionamiento. Existe cuatro
funciones asociadas a la función draw y que ayudan a controlar su funcionamiento: noLoop,
loop, redraw y frameRate
Estructura básica de programa
Navega por la documentación oficial de las funciones setup y draw para profundizar en su
funcionamiento.
3. Primera aplicación en HTML con MDL
Duración: 35 min
Creando un proyecto en CodeSandbox
En este tutorial utilizaremos el entorno de desarrollo CodeSandbox para trabajar con HTML, MDL y
[Link].
1. Desde el navegador Web accede a la página de Codesandbox ([Link]
2. Inicia sesión en la aplicación, mediante el botón superior derecho - Sign In (Fig. 1)
Figura 1. Iniciar sesión en CodeSandbox - Paso 1
3. En el formulario que se despliega selecciona Iniciar sesión con GitHub, usa las credenciales de
la cuenta que creaste anteriormente (Fig. 2)
Figura 2. Iniciar sesión en CodeSandbox - Paso 2
4. Dentro de CodeSandbox crea un nuevo proyecto, presionando en el botón “create a
devbox”(Fig. 3)
Figura 3. Crear un nuevo proyecto en CodeSandbox - Paso 1
5. Cree un proyecto nuevo y escriba p5 en el buscador y darle clic en on our Discover page. (Fig.
4)
Figura 4. p5 en el buscador
6. En el buscador escribe [Link] y abre el [Link]
7. Al abrir una plantilla [Link]
8. Inicia a modificar la plantilla
Modificando el documento HTML por defecto
1. Modifica el contenido del archivo [Link], usando el editor de código. Reemplaza el
contenido por el siguiente:
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Tutorial 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="[Link]
/>
<link
rel="stylesheet"
href="[Link]
/>
<script defer src="[Link]
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Cabecera de la aplicación -->
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Título de la aplicación -->
<span class="mdl-layout-title">Tutorial 03</span>
</div>
</header>
<!-- Menú de la aplicación -->
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Enlace 1</a>
<a class="mdl-navigation__link" href="">Enlace 2</a>
</nav>
</div>
<!-- Contenido de la aplicación -->
<main class="mdl-layout__content">
<!-- Div que contiene el lienzo de p5-->
<div class="page-content" id="canvas-container"></div>
</main>
<!-- Pie de la aplicación -->
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div>
</footer>
</div>
<script src="[Link]
<script src="[Link]"></script>
</body>
</html>
2. Guarda el archivo mediante el menú File/Save o usando el atajo de teclado Ctrl+s
3. Modifica el contenido del archivo [Link], usando el editor de código. Reemplaza el contenido
por el siguiente:
[Link]
/* eslint-disable no-undef, no-unused-vars */
//DECLARACIONES
// Variable donde se almacena el lienzo de p5
let canvas;
// FUNCIÓN DE CONFIGURACIÓN
function setup() {
// Crear un lienzo (área de dibujo) de 300x300
canvas = createCanvas(300, 300);
// Adiciona el lienzo al div con el atributo id igual a canvas-container
[Link]("canvas-container");
}
// FUNCIÓN DONDE SE PROGRAMA LA FUNCIONALIDAD
function draw() {
// Pinta el fondo del lienzo de color negro
background(0, 0, 0);
// Configura en blanco el color de relleno aplicado al texto
fill(255, 255, 255);
// Configura en negrilla el estilo del texto
textStyle(BOLD);
// Configura en 100 el tamaño del texto
textSize(100);
// Escribe el texto ASM
text("ASM", 30, 180);
}
// CAMBIA EL TAMAÑO DEL LIENZO SI LA VENTANA DEL NAVEGADOR WEB CAMBIA DE TAMAÑO
windowResized = function () {
resizeCanvas(windowWidth, windowHeight);
};
4. Guarda el archivo mediante el menú File/Save o usando el atajo de teclado Ctrl+s
5. Observa la salida del navegador y la consola (Fig. 5).
Figura 5. Resultado del código implementado
4. Retos
1. Cree dos páginas html adicionales y permita que se pueda navegar entre ellas
2. Para cada una de las páginas adicionales cree un sketch en Javascript que escriba una palabra
diferente
Creando un proyecto en VisualCode
En este tutorial utilizaremos el entorno de desarrollo ViscualCode para trabajar con HTML, MDL y [Link].
1. Instalación de Visual Studio Code
2. Si aún no tienes Visual Studio Code instalado, sigue estos pasos:
3. Ve al sitio oficial de Visual Studio Code.
4. [Link]
5. Descarga la versión adecuada para tu sistema operativo (Windows, macOS, o Linux).
6. Sigue las instrucciones de instalación según tu sistema operativo.
Figura 6. Pagina oficial visual
7. Instalación de la extensión [Link] en Visual Studio Code
8. Abre Visual Studio Code.
9. Ve a la pestaña de Extensiones en la barra lateral izquierda o usa el atajo Ctrl + Shift + X.
10. En la barra de búsqueda, escribe [Link].
11. Selecciona la extensión [Link] desarrollada por [Link] y haz clic en Instalar.
12. Esta extensión facilita el uso de [Link] en tus proyectos y proporciona comandos útiles.
Figura 7. Instalar extensión
13. Instalar las siguientes extensiones en visual Studio Code
14. HTML Snippets, HTML CSS Support, Live Server
15. Vamos al menu y abrimos Command Palette Ctrl + Shift + p
Figura 8. Instalar extensión
16. Escribimos en la barra
17. P5
Figura 9. Instalar extensión
18. Creamos una carpeta en el Computador cuando creemos el proyecto
19. Ir a la sección anterior de modificar el HTML