Souvenirs de IT

1. Creamos un proyecto nuevo con NPM. Para ello ejecutamos el comando npm init, el cual nos solicita información opcional del proyecto paso a paso. Podemos dejar todas las opciones por defecto, o ajustar lo que necesitemos según el caso. Para este ejemplo se modificó el Entry point de "index.js" a "leerHtml.js", para describir el contenido del script. También se cambió la licencia a MIT. El cambio de nombre y licencia solo son una convención personal, no son obligatorios. Por otra parte, cabe mencionar que para este ejemplo se utilizará Node v10.15.0 con NPM v6.4.1, que es la versión con soporte de largo plazo (LTS) al momento de escribir esta entrada.
2. Instalamos los paquetes request-promise, jsdom y jquery. El primer paquete nos permitirá obtener el HTML desde la web; el segundo paquete nos servirá para modelar el DOM del documento HTML en JavaScript puro; y el tercero es el que utilizaremos para examinarlo y extraer contenido.
3. Creamos el archivo leerHtml.js, en el que realizaremos el proceso de extracción de datos del HTML. Para este ejemplo, obtendremos los textos alternativos de todas las imágenes de un artículo de Wikipedia. Se listarán solamente aquellas imágenes que posean el atributo alt, y que este no se encuentre vacío. El código fuente y la descripción de cada paso se muestran a continuación:
Cabe notar algunos puntos:
• Es necesario crear el objeto jQuery a partir del DOM generado con JSDOM.
• Los métodos auxiliares de jQuery, como find y each, nos retornan objetos HTML, por lo que es necesario crear objetos de jQuery a partir de estos. Tal es el caso de las variables imagen e imagenes, a las cuales fue necesario aplicar la función $.
4. Finalmente, para ejecutar el script, escribimos en la terminal node leerHtml.js Podremos ver como se muestra en la línea de comandos el listado de los textos alternativos de las imágenes que se encontraron en la página web.
   
   

Índice:

• Parte 1: Qué es Vue.js y preparación del entorno
• Parte 2: Creación de proyecto desde plantilla

Hola nuevamente, en esta ocasión continuaré con la segunda entrega del tutorial de Vue.js 2. En esta ocasión trataremos los siguientes puntos:

• Definición general del ejemplo
• Descarga de plantilla WebPack.
• Ejecución de proyecto de ejemplo.
• Introducción a la estructura del proyecto

$ vue init webpack vue2-tutorial-contactos

Ejecución del proyecto de ejemplo

Introducción a la estructura del proyecto

• src: contiene el código fuente de Vue del proyecto.
• index.html: es la página de inicio de la aplicación.

Índice:

• Parte 1: Qué es Vue.js y preparación del entorno
• Parte 2: Creación de proyecto desde plantilla

¿Qué es Vue.js?

Preparación del entorno de desarrollo

npm install -g vue-cli

¡Hola nuevamente! Tenía un rato de no escribir por acá, pero es que han sucedido varias cosas en los últimos meses... mis disculpas por ello. En realidad desde hace algún tiempo quería mostrar una forma de hacer ventanas con DIV, basándome en el diseño que utilizamos para nuestro proyecto de graduación. Luego de organizar un poco mis ideas, decidí hacer  una serie de posts en donde explicara como hacer una ventana DIV, e ir mejorando el diseño en cada uno de ellos. Este es el primer post de la serie.

Partes de ventana DIV.

function VentanaDiv(idventana, idfondo) {
  //Obteniendo las referencias a los DIV que utilizaremos
  this.ventana = window.document.getElementById(idventana);
  this.fondo = window.document.getElementById(idfondo);

  //Creando funciones para manipular la ventana
  this.mostrar
    = function() {
        this.fondo.style.visibility = 'visible';
        this.ventana.style.visibility = 'visible';
      };
  this.ocultar
    = function() {
        this.fondo.style.visibility = 'hidden';
        this.ventana.style.visibility = 'hidden';
      };
}

/* Clase CSS que define el fondo oscuro */
div.fondoventana
{
    /* Para que el DIV aparezca oculto inicialmente */
    visibility:hidden;

    /* Para que el DIV cubra toda el área de la página web */
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    /* Fondo negro con opacidad del 60%, que da un efecto de transparencia */
    background-color:#000000;
    /* Opacidad para Internet Explorer */
    filter:alpha(opacity=60);
    /* Opacidad en CSS3 estándar */
    opacity:0.6;

    /* Este índice debe ser mayor que el del resto de los demás elementos de la página web, para que aparezca sobre ellos */
    z-index:9;
}

/* Clase CSS que define el formato de la ventana */
div.ventana
{
    /* Para que el DIV aparezca oculto inicialmente */
    visibility:hidden;

    /* Para que la ventana aparezca centrada en la página web, con un tamaño de 300x160 píxeles */
    position:fixed;
    left:50%;
    margin-left:-150px;
    top:50%;
    margin-top:-80px;
    width: 300px;
    height:160px;

    /* Borde gris de la ventana */
    border-width:5px;
    border-color:#999999;
    border-style:solid;

    /* Color de la ventana */
    background-color:#FFFFFF;

    /* Espacio de 10 píxeles desde el borde de la ventana hasta el texto interno */
    padding:10px;

    /* Este índice debe ser mayor que el del fondo, para que la ventana esté sobre él */
    z-index:10;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Ventana DIV 1 - Ventana DIV simple</title>

    <!-- Importando archivos CSS y Javascript - Inicio -->
    <link rel="stylesheet" type="text/css" href="ventanadiv.css" />
    <script language="javascript" type="text/javascript" src="ventanadiv.js" ></script>
    <!-- Importando archivos CSS y Javascript - Fin -->
  </head>
  <body>
    <!-- Contenido de la página web - Inicio -->
    <h1>Ejemplo de ventana DIV 1</h1>
    <br />
    <a href="#" onclick="ventana.mostrar()">Haga click aquí para mostrar la ventana</a>
    <!-- Contenido de la página web - Fin -->

    <!-- DIV de fondo - Inicio -->
    <div id="divfondo"></div>
    <!-- DIV de fondo - Fin -->

    <!-- DIV de ventana - Inicio -->
    <div id="divventana">
      <p>
        <center><h3>Ventana modal</h3></center>
        <br />Bienvenido a mi primera ventana modal web.
      </p>
      <p><center><a href="#" onclick="ventana.ocultar()" >Cerrar</a></center></p>
    </div>
    <!-- DIV de ventana - Fin -->
  </body>
  <script type="text/javascript" >
    //Creación de la ventana
    var ventana = new VentanaDiv("divventana", "divfondo");
  </script>
</html>

Ventana DIV en funcionamiento.

Esto es todo por hoy. En los siguientes artículos mostraré como crear métodos para permitir establecer el tamaño de la ventana mediante código javascript, así como incluir un botón de cierre y efecto de sombra para ésta.
Que Dios les bendiga.

Referencias

• Wikipedia - Ventana (informática)
• 3 ways to define a Javascript class