{"id":471,"date":"2022-10-06T19:47:25","date_gmt":"2022-10-06T17:47:25","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=471"},"modified":"2022-10-13T09:49:49","modified_gmt":"2022-10-13T07:49:49","slug":"anexo-5-el-archivo-html-base","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/anexo-5-el-archivo-html-base\/","title":{"rendered":"Anexo 5. El archivo HTML base"},"content":{"rendered":"

Nuestros proyectos de P5.js se van a ver dentro de una p\u00e1gina web. Y para ello, debemos prepararla. Vamos a crear una p\u00e1gina web que cargue la librer\u00eda de P5.js y nuestro programa.<\/p>\n

En la carpeta Programaci\u00f3n crearemos un nuevo archivo, poni\u00e9ndonos, en el editor de c\u00f3digo, encima de la carpeta y haciendo clic con el bot\u00f3n derecho del rat\u00f3n. Nos aparecer\u00e1 un men\u00fa en el que se nos permite crear un nuevo fichero. Cuando nos lo pidan, le daremos el nombre de index.html.<\/p>\n

\"\"
Figura 141
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

En ese nuevo archivo copiamos el siguiente c\u00f3digo:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n   <head>\r\n      <meta charset=\"utf-8\">\r\n      <meta name=\"viewport\" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>\r\n      <style> body {padding: 0; margin: 0;} <\/style>\r\n      <script src=\"js\/p5.min.js\"><\/script>\r\n      <script src=\"js\/sketch.js\"><\/script>\r\n   <\/head>\r\n   <body>\r\n   <\/body>\r\n<\/html><\/pre>\n
\u00a1Una vez copiado el texto debemos guardarlo!<\/p>\n
En este c\u00f3digo HTML hay dos l\u00edneas que nos interesan especialmente. En la primera est\u00e1 la instrucci\u00f3n:<\/p>\n
<script src=\"js\/p5.min.js\"><\/script><\/pre>\n
que sirve para indicar que debe cargarse la biblioteca de p5.js que nos hemos descargado. La segunda es esta:<\/p>\n
<script src=\"js\/sketch.js\"><\/script><\/pre>\n
que lo que hace es cargar un archivo llamado sketch.js que estar\u00e1 guardado en la carpeta js, y que es donde se guardar\u00e1 nuestro programa.<\/p>\n","protected":false},"excerpt":{"rendered":"
Nuestros proyectos de P5.js se van a ver dentro de una p\u00e1gina web. Y para ello, debemos prepararla. Vamos a crear una p\u00e1gina web que cargue la librer\u00eda de P5.js y nuestro programa. En la carpeta Programaci\u00f3n crearemos un nuevo archivo, poni\u00e9ndonos, en el editor de c\u00f3digo, encima de la carpeta y haciendo clic con […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/471"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=471"}],"version-history":[{"count":4,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/471\/revisions"}],"predecessor-version":[{"id":593,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/471\/revisions\/593"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}