JSINER es una librerÃa de Javascript que pretende facilitar la programación orientada a objetos y la dependencia en la gestión de scripts en ficheros externos.
Para el tema de la herencia, el autor define una herencia lazy, cuyas caracterÃsticas son las siguientes:
Tiene las mismas caracterÃsticas que la herencia mediante prototype.
No es necesario orden alguno en la declaración de los scripts externos.
En la mayorÃa de los casos la carga del HTML es más rápida, ya que los scripts se cargan solo en el momento en el que se necesitan.
Las dependencias se declaran en un modo más especÃfico y las dependencias entre clases solo en scripts concretos.
Esta parte es solo frontend, aún no está configurado para que interactúe con el servidor.
Lo más destacado de este ejemplo es el uso de vue-router, paquete que permite la realización de SPA de forma sencilla. Como la aplicación será gestionada por un único fichero (index.html), es necesario configurar el servidor de webpack para que gestione las URLs que acceden a otras partes de la aplicación para que no devuelva un error 404.
Esto es fácil, tan solo hay que añadir historyApiFallback y ponerlo a true en la configuración del servidor.
Lógicamente habrá que instalar el paquete vue-router.
Vale, ya está todo instalado, ahora solo hace falta configurar vue-router para que acepte distintas URLs y que muestre distintos controladores según sea el caso.
Para ello creamos un fichero router.js que posteriormente añadiremos a nuestra instancia de Vue:
Es fácil de entender, importamos los distintos controladores y configuramos las rutas (‘/‘ y ‘/login‘), a las que les asignaremos el controlador correspondiente.
Para indicar a Vue que vamos a usar vue-router, debemos importarlo en la instancia de la aplicación:
import App from './components/App.vue';
import router from './router';
Vue.use( VueRouter );
new Vue( {
el: '#app',
router,
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
El siguiente paso es modificar el controlador principal de la aplicación (App.vue) para que muestre la cabecera (que tendrá su propio controlador) y la vista principal de vue-router (<router-view>):
Como no soy diseñador, pues usaré Buefy (basado en Bulma) y Material Design icons (no sé por qué le tengo algo de manía a FontAwesome).
Existe un paquete especial para usar Material Design en vue (vue-material-design-icons), que para funcionar con Buefy necesitará usar la fuente de letras de Material Design (@mdi/fonts). Instalamos todo y ya estará todo listo para empezar a diseñar nuestra página.
La cabecera (<v-header>) mostrará el logo, el menú principal y otro secundario para loguearse. No explicaré ni las clases Bulma (que yo casi ni conozco) y cómo se muestra el menú al clickar en el burger icon, ya que estos tutoriales son para llevar yo un diario de cómo desarrollar una app web con Hapi.js y Vue.js.
Stanford Javascript Crypto Library es una librería Javascript que permite encriptar y desencriptar de forma muy segura, potente, rápida, sencilla, ligera y compatible con navegadores.
Usa el algoritmo estándar AES de 128, 192 o 256 bits, la función hash SHA256, el código de autenticación HMAC, PBKDF2, y los modos CCM y OCB… vamos, todo muy seguro.
Interesante librería que nos permite crear ficheros ZIP desde Javascript, con unas simples líneas de código podemos crear zips con ficheros de texto, imágenes, crear directorios…
var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;
El único problema que hay es a la hora de generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.
jQSlickWrap es un plugin jQuery que nos permite mostrar el texto según el contorno de una imagen. Para ello hace uso del objeto CANVAS.
Yo no soy muy partidario de usar estas funcionalidades, pero en diseños vistosos puede quedar muy bien. Independientemente de su funcionalidad, el script es impresionante.
El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.
Un truqui para evitarlo que en su día lo descubrimos en 604th.net:
function nospam(name,domain){
window.location = 'mailto:' + name + '@' + domain;
}
Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.
Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:
Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email: