Bienvenidos sean a este post, hoy comenzaremos una serie orientada a usar jQuery con Ajax.
Pero que es Ajax? En una forma muy resumida es una combinacion de lenguajes que permite la creacion de una forma de procesar la informacion en una pagina web, su nombre viene de los siguientes elementos:
- Asynchromus
- Javascript
- And
- Xml
Es decir mediante el uso asincronico de xml y javascript podremos hacer requests o solicitudes al server sin interrumpir su ejecucion y procesar la informacion que nos devuelve sin necesidad de recargar la pagina, por ejemplo, esta forma de trabajo se popularizo mucho en muchos sitios pero principalmente es utilizada por Google para su Google Workspace (Gmail, Docs, Sheets, etc), asi como muchas apps de browsers, pero aqui no ahondaremos en este tema, si les interesa aprender mas sobre Ajax les recomiendo visitar la seccion donde hablo sobre este tema:
https://tinchicus.com/category/ajax/
Aqui hago una breve explicacion y tambien hay un post dedicado a como utilizarlo de forma practica, o por lo menos como me resulta mas practico implementarlo, con todo esto comentado volvamos al tema de hoy.
Comencemos creando un directorio donde almacenaremos todos los archivos, en este directorio crearemos el primer archivo llamado indice.html y le agregaremos el siguiente codigo:
indice.html
<html>
<head>
<title>Yog-sotheria</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="codigo.js"></script>
</head>
<body>
<div id="contenedor">
<div id="header">
<h2>Yog-sotheria</h2>
<div class="autor">por H.P. Lovecraft</div>
</div>
<div class="mitos">
<div class="dioses" id="primigenios">
<h3><a href="dios-prim.html">Dioses Primigenios</a></h3>
</div>
<div class="dioses" id="exteriores">e
<h3><a href="dios-ext.html">Dioses Exteriores</a></h3>
</div>
<div class="dioses" id="arquetipicos">
<h3><a href="dios-arq.html">Dioses Arquetitpicos</a></h3>
</div>
</div>
<div id="diccionario">
</div>
</div>
</body>
</html>
Al igual que siempre cargaremos la libreria desde su sitio, tendremos dos archivos mas para el codigo y el css que aplicaremos, despues tendremos varios div en body, el primero sera un contenedor para todos, el segundo sera uno para el encabezado, despues tendremos otro para los links que usaremos, observen que dentro cada uno tendra el suyo y todos con sus respectivas clases, para finalmente tener uno vacio llamado diccionario, esto es basicamente la estructura base de nuestra pagina, pero ya trabajaremos sobre todo esto, nuestro siguiente paso sera crear un archivo con el nombre de estilo.css y le agregaremos el siguiente codigo:
estilo.css
ehtml, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
font-size: 1.2em;
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
a {
color: #06581f;
}
#header {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.entrada {
padding: 1em 0em;
border-bottom: 1px solid #eee;
}
.entrada .nombre {
display: inline;
font-weight: bold;
}
.entrada .resumen {
padding: .5em;
}
.mitos {
float: left;
width: 25%;
padding-right: 5%;
}
.dioses {
margin: 10px;
}
#diccionario {
float: left;
width: 60%;
}
Al comienzo tendremos algunos estilos para la pagina que creamos anteriormente, despues tendremos tres clases para un archivo que crearemos a continuacion, por ultimo las clases que tenemos dentro del div contenedor, con nuestros estilos establecidos pasemos al siguiente archivo y este debemos crearlo en el mismo directorio con el nombre de p.html y le agregaremos el siguiente codigo:
p.html
<div class="entrada">
<h3 class="nombre">cthulhu</h3>
<div class="resumen">
Cthulhu es un Dios Primigenio, una criatura extraterrestre que tiene características físicas y habilidades que los hacen algo parecido a un dios para los humanos. La forma más apropiada de decir su nombre no puede ser pronunciada por el aparato fonológico humano. Esta pronunciación no es más que lo más cercano que el aparato vocal humano puede llegar a reproducir de las sílabas de una lengua extraterrestre.
</div>
</div>
<div class="entrada">
<h3 class="nombre">dagon</h3>
<div class="resumen">
Es mencionado como padre y/o dios de los Profundos. Vive en el fondo del mar acompañado de su cónyuge, la Madre Hidra y guarda algún parentesco con Cthulhu. Se sirve de sus súbditos para controlar el pueblo costero de Innsmouth y su puerto, así como para reprimir a los curiosos que se acercan demasiado a su secreto. Vive bajo el Arrecife del Diablo y es adorado por la Orden Esotérica de Dagón.
</div>
</div>
<div class="entrada">
<h3 class="nombre">hidra</h3>
<div class="resumen">
Hidra, La Madre Hidra o Madre Hidra es una de las deidades de los Profundos. Se refieren a ella como la consorte de Dagón. Es considerada la gran madre ancestral de estos. Hay dos maneras de representar a la Madre Hidra: siguiendo el diseño tradicional de la Hidra de Lerna; y la que propone asemejarla a sus hijos, de manera que la mostrarían simplemente como un Profundo de gran tamaño
</div>
</div>
<div class="entrada">
<h3 class="nombre">k'thun</h3>
<div class="resumen">
K'thun, Madre de las Razas, es una diosa poco conocida. Las antiguas tribus asiáticas la representaban como un horrido árbol gris pálido con tentáculos en vez de ramas y raíces y con unas gigantescas fauces con un ojo en su interior situadas donde habría de estar la copa. K'thun pasa su existencia buscando materia viva para luego emplearla para fabricar criaturas mediante complejos procesos de partenogénesis, o sea, de fecundación sin gameto masculino.
</div>
</div>Aqui agregamos cuatro div con la clase entrada y en ella tendremos a cuatro dioses primigenios de la yog-sotheria de Lovecraft, tenemos el nombre y un resumen del mismo, si abrieran la pagina se veria de la siguiente manera
Pero este no sera su verddero uso, para utilizarla correctamente debemos crear el ultimo archivo al cual llamaremos codigo.js y le agregaremos el siguiente codigo:
codigo.js
$(document).ready(function() {
$('#primigenios a').click(function(e) {
e.preventDefault();
$('#diccionario').load('p.html');
});
});En nuestro codigo asociaremos el evento click al link dentro del div primigenios, en este caso usaremos un argumento para el evento y lo primero que haremos es usar a preventDefault para que al apretar el link no cargue la pagina que tiene asignada, pero despues seleccionamos a diccionario y a traves de load cargamos la pagina anteriormente creada dentro de este, si lo probamos trabajara de la siguiente manera
En el video podemos ver como al hacer click nos muestra el contenido de p.html y con los estilos que creamos en estilo.css, a diferencia de como vimos la pagina directamente, esto es gracias a load que no solamente carga el contenido sino que ademas de estar en la misma pagina se le aplican los estilos, pero esto puede fallar porque si lo haces desde tu pc al momento de querer cargar a p.html no hara nada porque la carga mediante load desde un archivo como file:///el archivo… esta desactivada por seguridad y para que funcione como se ve en el video deben hacerlo desde un servidor, si no tienes alguno para probar te dejo dos posts para ello, el primero es para crear una pc virtual e instalar un linux debian:
Y en este post les explico como instalar un Apache, PHP y mariadb en el virtual anterior:
En este aparte de instalar el apache instalaremos php, va a ser mas util adelante, y mariadb que no lo necesitaremos pero nunca esta de mas 😅, esto se los recomiendo para que puedan usarlo y probarlo tal como se ve en el video, con esto ya tenemos una pagina que aplica Ajax a traves de jQuery pero este es el comienzo en los proximos posts veremos mas opciones para trabajar de esta forma, antes de finalizar les dejo un link con todos los archivos realizados en este post y pueden probarlo:
En resumen hoy hemos visto como cargar datos desde una pagina, hemos creado la base del mismo con su pagina, sus estilos, una pagina con la informacion y el codigo para cargarlo y mostrarlo en un div, por ultimo les comparti dos posts para poder crear una virtual con linux y despues instalar todo un servidor web y poder probarlo, les recomiendo hacerlo para poder trabajar tranquilo en los siguientes posts, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 