Skip to content

Instantly share code, notes, and snippets.

@elaval
Last active December 20, 2015 08:38
Show Gist options
  • Save elaval/6101427 to your computer and use it in GitHub Desktop.
Save elaval/6101427 to your computer and use it in GitHub Desktop.
Desarrollo Web 0 - HTML & DOM

#Desarrollo con Estandares Web ##Presentando información en el DOM

Una de las maravillas del desarrollo Web es que existe es posible escribir aplicaciones a través de un estandard de marcado (HTML) y programación (Javascript) que correrán cualquier Navegador moderno (que siga los estándares) y funcionar en una variedad de dispositivos (teléfonos, televisores, tablets, notebooks, computadores de escritorio, ...).

En HTML se define una serie de elementos, que pueden tienen distintos tags (h1, div, table, a, ...) y pueden contener atributos (id, class, href, ...) y contenido. Por ejemplo:

<a href="./test.html">Haga click acá</a>

Mucho desarrollo Web tradicional asume que existe un servidor de aplicaciones que utiliza un lenguaje de servidor (Ej. Java, .Net, PHP, Python, ...) que construye páginas HTML que son enviadas a los clientes (navegadores) para que construyan los elementos del DOM representaos en el HTML y se los presenten al usuario.

Pero también existe otro enfoque de desarrollo que ha tomado mucha fuerza en los últimos años: desarrollo de aplicaciones en el lado del cliente. Este enfoque implica que el cliente puede cargar y ejecutar un programa en lenguaje Javascript (que debiera interpretarse en forma estandard por cualquier navegador) para crear y modificar los elementos del DOM.

En esta serie de docuemntos se presentan distintas herrameintas que permiten administrar y presentar información en una Aplicación desarrollada en un cliente.

El caso básico es una página escrita directamente en HTML. Acá presentamos una página Web que presenta dos contenedores principales - <div class="lista escuela"></div> y <div class="detalle escuela"></div> - que presentan un listado de escuelas y el detalle de uan de ellas respectivamente.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
</script>
<body>
<div class="lista escuela">
<h1>Lista de Escuelas</h1>
<ul>
<li>LICEO POLITECNICO ARICA </li>
<li>PARVULARIO LAS ESPIGUITAS</li>
<li>ESC. PEDRO VICENTE GUTIERREZ TORRES</li>
<li>LICEO OCTAVIO PALMA PEREZ</li>
<li>JOVINA NARANJO FERNANDEZ</li>
<li>L. POLI. ANTONIO VARAS DE LA BARRA</li>
<li>COLEGIO INTEGRADO EDUARDO FREI MONTALVA</li>
<li>ESCUELA REPUBLICA DE ISRAEL</li>
<li>ESCUELA REPUBLICA DE FRANCIA</li>
<li>ESC. GRAL. PEDRO LAGOS MARCHANT</li>
<li>ESCUELA GRAL JOSE MIGUEL CARRERA</li>
</ul>
</div>
<div class="detalle escuela">
<h1>Detalle</h1>
<div>Nombre</div>
<div>LICEO POLITECNICO ARICA</div>
<div>RBD</div>
<div>1</div>
<div>Comuna</div>
<div>Arica</div>
<div>Región</div>
<div>DE ARICA Y PARINACOTA</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment