Correcciones en la documentacion y actualizacion de entradas en el blog
This commit is contained in:
212
Documentacion/analisis.html
Normal file
212
Documentacion/analisis.html
Normal file
@@ -0,0 +1,212 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user