212 lines
11 KiB
HTML
212 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSDoc: Home</title>
|
|
|
|
<script src="scripts/prettify/prettify.js"> </script>
|
|
<script src="scripts/prettify/lang-css.js"> </script>
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="main">
|
|
|
|
<h1 class="page-title">Home</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3> </h3>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
<article>
|
|
<h1>El juego de la vida. Una reescritura en vainilla javascript.</h1>
|
|
<h1 id="analisis-de-la-situacion">Analisis de la situacion</h1>
|
|
<h2 id="tabla-de-contenidos">Tabla de contenidos</h2>
|
|
<ul>
|
|
<li><a href="#analisis-de-la-situacion">Analisis de la situacion</a>
|
|
<ul>
|
|
<li><a href="#tabla-de-contenidos">Tabla de contenidos</a></li>
|
|
<li><a href="#introduccion">Introduccion</a></li>
|
|
<li><a href="#codigo-heredadolegado">Codigo Heredado/Legado</a>
|
|
<ul>
|
|
<li><a href="#estructura-básica-de-una-pagina-web">Estructura básica de una pagina
|
|
web.</a></li>
|
|
<li><a href="#el-archivo-indexhtml">El archivo Index.html</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#bibliografia">Bibliografia</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h2 id="introduccion">Introduccion</h2>
|
|
<p>Cuando quise este estudiar este codigo, pense que solo seria cuestion de copiar y pegar para verlo
|
|
funcionando, pero me encontré que he compartido irresponsablemente algo que no le seriviria a nadie.
|
|
Muy especialmente es notable que falten grandes trozos de codigo y que no haya comentarios
|
|
significativos. Por eso y como practica para mi, he decidido explorarlo y reescribirlo en vainilla
|
|
javascript, agregando comentarios detallados que permitan a los interesados en estudiar el codigo
|
|
aprender mas facilmente como funciona.</p>
|
|
<p>Mientras realizaba este analisis, tambien fui descubriendo que podia agregar nuevas cosas
|
|
interesantes, que describire mas adelante, pero por el momento, el primer desafio era, el codigo en
|
|
el que me basé para hacer el mio.</p>
|
|
<h2 id="codigo-heredado-legado">Codigo Heredado/Legado</h2>
|
|
<p>Segun la wikipedia:</p>
|
|
<blockquote>
|
|
<p>Legacy code o código heredado es código fuente relacionado con un sistema operativo o una
|
|
tecnología de computación sin soporte técnico. El término también puede aplicarse a código
|
|
insertado en software más moderno para integrar u ofrecer soporte a una función creada en el
|
|
pasado; por ejemplo dar soporte a una interfaz en serie incluso aunque muchos sistemas modernos
|
|
no tienen un puerto serial. (wikipedia,2021)</p>
|
|
</blockquote>
|
|
<p>Luego de investigar con mas empeño este codigo y su autor, he encontrado un repositorio de GitHub. Si
|
|
bien este codigo puede encontrarse en <a href="https://github.com/jpulgarin/canvaslife">aqui</a>,
|
|
solo está el codigo javascript, sin el archivo index.html necesario para poder ejecutar la practica.
|
|
en el mismo repositorio es posible encontrar un enlace a un servidor actualmente inactivo.</p>
|
|
<blockquote>
|
|
<p>Titulo: El sitio de Pulgarín esta muerto desde quien sabe cuando
|
|
<img src="images/sitio_pulgarin.png"
|
|
alt="El sitio de Pulgarín esta muerto desde quien sabe cuando">
|
|
</p>
|
|
<p><strong>Fuente:</strong> Elaboración propia</p>
|
|
</blockquote>
|
|
<p>Por esta razon, comenzaremos analizando las partes necesarias para la creacion de una pagina web con
|
|
javascript.</p>
|
|
<h3 id="estructura-b-sica-de-una-pagina-web-">Estructura básica de una pagina web.</h3>
|
|
<p>Una pagina web no es mas que un documento escrito con HTML.</p>
|
|
<p>HTML es un lenguaje de etiquetas con las que se define la estructura del documento. Se caracteriza
|
|
por ser facil de interpretar, tanto por maquinas como por humanos y es el estandar para las paginas
|
|
web hasta el momento. A pesar de que es un estandar, sufre cambios a lo largo del tiempo para poder
|
|
agregar y quitar caracteristicas que le permitan funcionar mejor en diferentes dispositivos, por lo
|
|
que un codigo muy antiguo podria no funcionar en navegadores muy modernos. </p>
|
|
<p>La version mas actual de HTML es la 5 y la que uso actualmente. Publicada en el año 2014, estandarizo
|
|
muchas etiquetas nuevas que hasta ese momento podrian estar limitadas solo a ciertos navegadores que
|
|
las interpretaran correctamente. En este caso, la etiqueta canvas existe desde el año 2004 de la
|
|
mano de Apple en su navegador Safari, y entre el año 2005 y 2006 fue adoptado por los motores de
|
|
gecko y opera, obviamente dejando a internet explorer al margen de su uso <a
|
|
href="https://en.wikipedia.org/wiki/Canvas_element">wikipedia,2021</a></p>
|
|
<p>La estructura básica de un documento HTML es la siguiente:</p>
|
|
<pre><code><span class="hljs-section"><html></span>
|
|
<span class="hljs-section"><head></span>
|
|
|
|
<span class="hljs-section"></head></span>
|
|
<span class="hljs-section"><body></span>
|
|
|
|
<span class="hljs-section"></body></span>
|
|
<span class="hljs-section"><foot></span>
|
|
|
|
<span class="hljs-section"></foot></span>
|
|
<span class="hljs-section"></html></span>
|
|
</code></pre>
|
|
<p>Las etiquetas se caracterizan por estar cerradas entre <a
|
|
href="https://es.wikipedia.org/wiki/Signo_mayor_que#Par%C3%A9ntesis_angulares">parentesis
|
|
angulares</a> "<>" donde la primera palabra dentro de ellas es el nombre de la
|
|
etiqueta que los identifica. las palabras que se agreguen a la etiqueta seran considerados
|
|
atributos, por ejemplo \<html lang='es'> donde el par "lang='es'" permite al
|
|
navegador determinar el idioma del documento.</p>
|
|
<p>Las etiquetas html tienen una jerarquia, donde cada elemento puede contener otros elementos. para
|
|
eso, cada etiqueta que abre, debe cerrar con otra con el mismo nombre, pero usando una barra
|
|
diagonal antes de el. por ejemplo \
|
|
|
|
</html>
|
|
</p>
|
|
<p>Hay mas cosas para abarcar sobre html, especialmente sobre la <a
|
|
href="https://es.wikipedia.org/wiki/Web_sem%C3%A1ntica">web semantica</a>, la cual es una buena practica para
|
|
todo tipo de paginas web si quieren ser lo mas accesibles posible, pero por ahora nos vamos a concentrar en la
|
|
reconstruccion del codigo que nos interesa.</p>
|
|
<h3 id="el-archivo-index-html">El archivo Index.html</h3>
|
|
<p>El punto de inicio de todo sitio web es el archivo index.html, aunque esto puede cambiar de acuerdo al servidor. En
|
|
realidad el archivo puede tener cualquier nombre siempre y cuando se comience a navegar por el, pues es quien
|
|
contiene los enlaces iniciales para la primera navegacion.</p>
|
|
<p>Dado que carecemos de un archivo html del cual partir, construiremos uno propio, sin grandes pretenciones para ver
|
|
nuestro codigo funcionar.</p>
|
|
<pre><code><span class="hljs-section"><html></span>
|
|
<span class="hljs-section"><head></span>
|
|
<span class="hljs-section"></head></span>
|
|
<span class="hljs-section"><body></span>
|
|
<span class="hljs-section"></body></span>
|
|
<span class="hljs-section"></html></span>
|
|
</code></pre>
|
|
<p>Hay que recordar que los documentos html se cargan en la memoria haciendo un barrido desde el principio hasta el
|
|
final del mismo, por lo que cada etiqueta solo tendra disponible en la memoria del dispositivo, solo lo que haya
|
|
sido cargado hasta el momento en el que ella sea cargada. por lo que, por ejemplo, si hay elementos con estilos css
|
|
en la etiqueta body y los archivos CSS no han sido cargados todavia, apareceran sin formato alguno. De la misma
|
|
forma, el codigo javascript no podra acceder a etiquetas que no existan hasta el momento en el que ellas sean
|
|
cargadas.</p>
|
|
<p>Por esta razon, cualquier script que se desee ejecutar, deberia ser cargado hasta el final del documento;</p>
|
|
<pre><code><span class="hljs-tag"><<span class="hljs-name">html</span>></span>
|
|
...
|
|
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>></span><span class="handlebars"><span class="xml">
|
|
<span class="hljs-tag"></<span class="hljs-name">html</span>></span></span></span>
|
|
</code></pre>
|
|
<p>O en su defecto, utilizar un metodo onLoad en javascript que permita esperar a que se cargue todo el documento antes
|
|
de intentar acceder al mismo.</p>
|
|
<h2 id="bibliografia">Bibliografia</h2>
|
|
<p><a href="https://es.wikipedia.org/wiki/C%C3%B3digo_heredado">Código Heredado(2021), Obtenido de la wikipedia</a></p>
|
|
<p><a href="https://en.wikipedia.org/wiki/Canvas_element">Canvas Element(2021), Obtenido de la wikipedia</a></p>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav>
|
|
<h2><a href="index.html">Home</a></h2>
|
|
<h3>Classes</h3>
|
|
<ul>
|
|
<li><a href="graficos.html">graficos</a></li>
|
|
<li><a href="Punto.html">Punto</a></li>
|
|
</ul>
|
|
<h3>Global</h3>
|
|
<ul>
|
|
<li><a href="global.html#_contarvecinos">_contarvecinos</a></li>
|
|
<li><a href="global.html#getPuntoBajoMouse">getPuntoBajoMouse</a></li>
|
|
<li><a href="global.html#iniciar">iniciar</a></li>
|
|
<li><a href="global.html#init">init</a></li>
|
|
<li><a href="global.html#limpiar">limpiar</a></li>
|
|
<li><a href="global.html#parar">parar</a></li>
|
|
<li><a href="global.html#procesarCelula">procesarCelula</a></li>
|
|
<li><a href="global.html#siguiente_generacion">siguiente_generacion</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<br class="clear">
|
|
|
|
<footer>
|
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Fri Sep 10 2021 08:16:05
|
|
GMT-0500 (GMT-05:00)
|
|
</footer>
|
|
|
|
<script> prettyPrint(); </script>
|
|
<script src="scripts/linenumber.js"> </script>
|
|
</body>
|
|
|
|
</html> |