<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Post</title>
<!-- Agregamos la hoja de Estilos de Materialize (Opcional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="row col s12">
<div id="post">
</div>
</div>
</div>
<!-- Agregamos la libreria de jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Agregamos la libreria de Materialize (Opcional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!-- Script que se ejecuta al iniciar la pagina y carga los posts a la misma -->
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "file.json",
type: "GET",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() {
$('#post').html("Cargando post, por favor, espere");
},
success: function(response) {
$('#post').html("");
$.each(response, function(i, post) {
$('#post').append(
"<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
+ "<div class='meta row col s6'>"
+ "<span class='chip waves-effect'>Autor: <b>"+post.Autor+"</b></span>"
+ "<span class='chip waves-effect'>Fecha: <b>"+post.Fecha+"</b></span>"
+ "<span class='chip waves-effect'>Hora: <b>"+post.Hora+"</b></span>"
+ "<span class='chip waves-effect'>Categoria: <b>"+post.Categoria+"</b></span>"
+ "</div>"
+ "<p class='row col s12'>"+post.Contenido+"</p>"
);
});
}
});
});
</script>
</body>
</html>
[
{
"Titulo" : "Conociendo sobre los efectos de transiciones CSS3",
"Categoria" : "CSS",
"Fecha" : "03-01-2017",
"Hora" : "14:55",
"Permalink" : "https://frikibloggeo.blogspot.com/2017/01/conociendo-sobre-los-efectos-de.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est ipsam nesciunt? Inventore distinctio hic iusto totam officia sed, veniam eum corporis, repellendus repudiandae, debitis voluptas quos, alias neque porro?"
},
{
"Titulo" : "Menu contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)",
"Categoria" : "JavaScript",
"Fecha" : "25-12-2015",
"Hora" : "17:06",
"Permalink" : "https://frikibloggeo.blogspot.com/2015/12/menu-contextual-sencillo-con-html5-css3.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas illo esse animi adipisci quia non tempore vero. Voluptatibus modi nesciunt ducimus quibusdam rerum, fugiat quo mollitia facilis, qui quidem veritatis."
},
{
"Titulo" : "Crear tu propio sistema de comentarios con MySQL y PHP",
"Categoria" : "PHP",
"Fecha" : "09-06-2016",
"Hora" : "14:14",
"Permalink" : "https://frikibloggeo.blogspot.com/2014/06/crear-tu-propio-sistema-de-comentarios.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quas, ea, recusandae laudantium non dolor ad repellat commodi sint? Fugit, voluptas minus aspernatur iste eius atque aliquid recusandae magnam, sunt."
}
]