Clase 3

Módulo 1: Creación de aplicaciones básicas

Semana 3: Intercambio de datos y registro de acciones

1. Obtención de información del servidor.
2. Envío y almacenamiento de datos en un servidor.
3. Registro de acciones por medio de Google Analytics.

Práctica:

Crear una aplicación que envíe y reciba información de un servidor remoto con una base de datos y que todas las acciones sean registradas en Google Analytics.

Guía de la clase

Obteniendo información de un servidor

Ejemplo básico para obtener información desde otra página

<html>
    <head>
        <title>Ajax Simple</title>
        <script src="jquery-2.2.3.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#enlaceajax").click(function (evento) {
                    evento.preventDefault();
                    $("#destino").load("http://ubicaciones.paginasweb.cr/");
                });
            })
        </script>
    </head>
    <body>
        <a href="#" id="enlaceajax">Haz clic!</a>
        <br>
        <div id="destino"></div>
    </body>
</html>

Sin embargo no se debería páginas web enteras por lo que en el desarrollo de aplicaciones deberíamos utilizar el formato JSON para recibir información

En el siguiente link hay un ejemplo de que tipo de datos nos debe devolver nuestro servidor y como utilizarlos: Lista de provincias, cantones y distritos de Costa Rica en formato JSON

function loadCantones(element) {
                console.debug(element.value);
                var id = element.value;
                $.ajax({
                        dataType: "json",
                        url: "https://ubicaciones.paginasweb.cr/provincia/"+id+"/cantones.json",
                        data: {},
                        success: function (data) {
                            var html = "<select onchange='loadDistritos()'>";
                            for(key in data) {
                                html += "<option value='"+key+"'>"+data[key]+"</option>";
                            }
                            html += "</select";
                            $('#cantones').html(html);
                        }
                    });
            }

Apps para tabletas y teléfonos

Con media queries de CSS nosotros podemos utilizar nuestra misma aplicación para teléfonos y para tabletas en vez de crear dos aplicaciones distintas. Un ejemplo de uso de media queries es el siguiente:

<style>
        @media (max-width: 400px) {
            body {
                background-color: red;
            }
        }
</style>

Registrando nuestras acciones

Plugin de Google Analytics

Tarea

Vamos a utilizar el API de WordPress que nos deja obtener la información de un sitio en formato JSON desde el siguiente link sustituyendo la variable ~~$site~~:

https://developer.wordpress.com/docs/api/1.1/get/sites/$site/posts/

por ejemplo si quisiéramos obtener los post de este sitio utilizaríamos algo como lo siguiente:

https://public-api.wordpress.com/rest/v1.1/sites/programando.paginasweb.cr/posts/?fields=title,ID,featured_image

y una vez que tengamos la lista la idea es que cuando uno le da clik a una noticia despliegue el contenido de la misma y eso lo podemos obtener del siguiente link:

https://public-api.wordpress.com/rest/v1.1/sites/programando.paginasweb.cr/posts/40