Dynamic Angular Gallery
Aplicación web realizada en Angular 10 que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.
El código se encuentra subido en el siguiente repositorio:
https://github.com:roberto-pf/DynamicAngularGallery
Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicAngularGallery/
Demo funcionando en este enlace: http://gallery.disastercode.com.es
Además, se ha generado una rama swiperjs_version en el repositorio. En dicha rama, la presentación de las imágenes se realiza con el componente Swiperjs
Demo funcionando en este enlace: http://galleryswiper.disastercode.com.es
Ejemplo para creación de Pipe personalizado en Angular
Primero vamos a crear un Pipe llamado NewLine con el comando ng que lo que va a hacer es sustituir los saltos de linea por saltos html.
//Comando de creación Pipe ng g pipe pipes\NewLine //código de la clase import { Pipe, PipeTransform } from '@angular/core'; /** * Pipe que convierte los saltos de linea en saltos html. */ @Pipe({ name: 'newLine' }) export class NewLinePipe implements PipeTransform { /** * Metodo que realiza la transformación * @param value * @param args */ transform(value: string, args: string[]): any { return value.replace(/(?:\r\n|\r|\n)/g, ' '); } }
Ejemplo de uso:
< div [innerHtml]= "description | newline"> < /div >
Quitar la URL Case Sensitive en el Router de Angular
Para evitar que en Angular (probado en angular 10) el Router no haga diferenciacion de las rutas en función de si está en mayúsculas/minúsculas, una posible solución es la siguiente:
En el fichero module.app.ts añadimos lo siguiente:
import { UrlSerializer } from '@angular/router'; import { LowerCaseUrlSerializer} from './lower-case-url-serializer' ... providers: [HttpClientModule, { provide: UrlSerializer, useClass: LowerCaseUrlSerializer }], ...
Y debemos crear la clase definida antes (LowerCaseUrlSerializer). Esta clase debe extender de DefaultUrlSerializer e implementar el método parse. En ese método lo que se puede hacer es pasar toda la url a minúsculas.
import { DefaultUrlSerializer, UrlTree } from '@angular/router'; /** * Elimina el case-sensitive de la url pasándola a minúsculas. */ export class LowerCaseUrlSerializer extends DefaultUrlSerializer { /** * Método que realiza la conversión de la url a minúsculas. * * @param url - dirección a tratar. */ parse(url: string): UrlTree { return super.parse(url.toLowerCase()); } }
Leer fichero json local con Angular
Un ejemplo de como se puede acceder a un fichero *.json ubicado en local con Angular (probado con angular 10) es el siguiente:
//Contenido del fichero data.json { "titleSite" : "Dynamic Angular Gallery", "descriptionSite" : "Galeria dinámica en angular 10+" }
import { Injectable } from '@angular/core'; import webData from '../../../_files/data.json'; /** * Servicio que realiza el acceso a la información del data.json. */ @Injectable({ providedIn: 'root' }) export class JsonDataService { /** * Objeto en el que se va a volcar la información del fichero data.json. */ public info:{ titleSite:string, descriptionSite:string, } = this.getInfoJson(); /** * Método que devuelve el contenido del fichero data.json * @returns - data.json */ public getInfoJson(){ return webData; } }
Por defecto, Angular no lee el archivo JSON. Así que debemos crear un archivo llamado ‘json-typings.d.ts’ dentro de la carpeta de la aplicación del proyecto. Tal que así:
declare module "*.json" { const value: any; export default value; }
Ahora para recuperar el contenido del fichero simplemente seria invocar al servicio JsonDataService y la variable info.
Añadir a angular las dependencias de Bootstrap y FontAwesome
Bootstrap
Para instalar el framework de Bootstrap la forma más rápida es mediante npm. Con el comando siguiente:
npm install bootstrap jquery @popperjs/core
Mediante este comando se instalan las dependencias de bootstrap, jquery y de @popperjs/core que son necesarios para mejorar el funcionamiento de Bootstrap.
Para su uso basta con referenciar en el archivo angular.json los objetos styles y scripts de dichas dependencias.
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/@popperjs/core/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
FontAwesome
Esta fuente se instala con npm así:
npm install @fortawesome/angular-fontawesome@version //Adicionalmente se pueden instalar otros iconos que contiene. //Por ejemplo: free-solid-svg-icons npm install @fortawesome/free-solid-svg-icons //O tambien, free-brands-svg-icons, usando ng ng add @fortawesome/free-brands-svg-icons
Para usarla simplemente se realizan los imports necesarios.
... import { FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { fas } from '@fortawesome/free-solid-svg-icons'; import { fab } from '@fortawesome/free-brands-svg-icons'; /** * Componente principal * * @example * */ @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { /** * constructor del componente * @param libray - librería de iconos */ constructor( private library: FaIconLibrary) { /** * añadir a la libreria de iconos los que vamos a necesitar. */ library.addIconPacks(fas, fab); } ... } //Su uso sería tal que así: < fa-icon [icon]="['fas', 'star']">< /fa-icon> < fa-icon [icon]="['fab', 'twitter']">< /fa-icon>
Primera aplicación con IONIC
Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.
Se trata de una tecnología muy valida siempre que se impongan al cliente ciertas restricciones en las versiones de los dispositivos soportados. Es decir: Android 4.4+, IOS 8+ y Windows 10+ (Phone y Desktop).
Requisitos previos
– Tener instalado jdk 1.8
– Para android, tener instalado la sdk android (puedes usar el Android Studio)
– Tener instalado Gradle (descargar, descomprimirlo y luego meterlo al path)
Instalamos el framework
npm install -g ionic@beta npm install -g ionic npm install -g cordova
Creamos la primera aplicación de ejemplo, podemos elegir uno de estos tipos:
– tabs : a simple 3 tab layout
– sidemenu: a layout with a swipable menu on the side
– blank: a bare starter with a single page
– super: starter project with over 14 ready to use page designs
– tutorial: a guided starter project
ionic start AppExampleIonic sidemenu --typescript
Comandos a conocer:
//Lanza la aplicación en el emulador ionic serve //Lanza la aplicación en varios tipos de plataformas en el navegador ionic serve --lab //añade las plataformas a utilizar ionic cordova platform add ios android windows //Lanza la aplicación android ionic cordova run android //cosntruye la apliación android ionic cordova build android //Generar una version de android para producción ionic cordova build android --release //Generar una version de android para producción ionic cordova build ios --prod
Transiciones CSS. Mejorando el diseño.
A continuación se muestran dos links con información sobre transiciones.
https://www.bootply.com/tagged/transition
Se trata de una web que contiene diferentes ejemplos de transiciones realizadas con Bootstrap.
https://daneden.github.io/animate.css/
Se trata de una css que contiene un monton de animaciones muy interesantes. Se instala con npm mediante:
npm install animate.css --save
Y luego solo tienes que incluirla:
< head> < link rel="stylesheet" href="animate.min.css"> < /head>
Carga de una imagen para previsualizarla
Ejemplo de como podriamos cargar en una página HTML una imagen obtenida desde el disco y hacer una previsualización de ella usando javascript.
En la pagina podemos añadir un objeto de formulario de tipo file, así como una imagen donde cargaremos la que seleccionemos:
< input type="file" id="files" name="files[]" class="btn btn-default btn-file" / > < img src="" id="imgPrevisualizacion" class="img-rounded" height="50" width="50" / >
Ahora sobre ese objeto programamos con javscript el evento change. De tal forma que cada vez que se seleccione una imagen se lance al detectar ese cambio.
function archivo(evt) { var files = evt.target.files; //obtenemos la lista de archivos for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { //comprobamos de que es una imagen continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { //asignamos la imagen seleccionada document.getElementById("imgPrevisualizacion").src = e.target.result; }; })(f); reader.readAsDataURL(f); } } //creamos el evento document.getElementById('files').addEventListener('change', archivo, false);
Exportar código HTML a imagen con html2canvas
Gracias a la librería html2Canvas se pueden exportar el código html como si fuera una imagen.
Dado este código html:
< div id="convierteImagen"> < b>Hola Mundo< /b> < /div>
Voy a poner dos ejemplos de uso.
Ejemplo 1 – Si simplemente queremos que en la propia página se cargue una imagen igual al trozo html con html2Canvas sería tan fácil como:
1.1 – Ponemos un botón que será el encargado de lanzar la función JavaScript que realice la tarea.
1.2 – Cómo se puede ver en la función a html2Canvas basta con indicarle el objeto que se quiere capturar.
function renderImg(type) { html2canvas(document.getElementById(type), { onrendered : function(canvas) { document.body.appendChild(canvas); }, width : 470 }); }
Ejemplo 2 – Vamos a suponer que queremos que se descarge el codigo html anterior como si fuera una imagen al hacer click en un boton. Para ello:
2.1 – Creamos un botón y en su evento onclick invocamos a la función que crea la imagen y la lanza para descargar. Además, ponemos una etiqueta < a > cuyo id será downloadLink (no se vera en la página pero la usaremos para lanzar la imagen).
2.2 – Creamos la función JavaScript que utiliza html2Canvas para crear la imagen.
function downImg(type) { html2canvas(document.getElementById(type), { onrendered : function(canvas) { var dato = canvas.toDataURL("image/png"); var anchor = document.getElementById("downloadLink"); //asignamos un nombre al link anchor.setAttribute('download', 'NombreParaImagen.png'); //asignamos la imagen anchor.setAttribute('href', dato); anchor.click(); //forzamos el click }, width : 470 }); }
Objeto JSON en javascript: JSON.stringify vs JSON.parse
El objeto JSON contiene los métodos necesarios para analizar el JavaScript Object Notation (JSON) y, a su vez, convertir valores a JSON. A continuación se esponen los métodos de los que consta:
JSON.parse(text[, reviver])
Convierte una cadena de texto en un objeto de javascript.
Parámetros
– text: La cadena que convertirá a JSON. Vea el objeto JSON para una descripción de la sintaxis JSON.
– reviver (Opcional): Función que sobreescribe cómo se transforma el valor producido por el parsing.
Retorna el objeto que se corresponde con el texto JSON entregado.
JSON.parse('{"p": 5}', function (key, value) { if(key === "") return value; return value * 2; }); // { p: 10 }
JSON.stringify(valor[, remplazo [, espacio]])
Convierte un valor dado en javascript a una cadena JSON.
Parámetros
– valor: El valor que será convertido a una cadena JSON.
– función de remplazo (Opcional): Es una función que altera el comportamiento del proceso de conversión a cadena de texto, o un array de objetos String o Number que representan una lista de elementos validos que se incluyen en la cadena JSON.
– espacio (Opcional): Es un objeto de tipo String o Number que es usado para insertar un espacio en blanco dentro de la cadena de salida JSON para su mejor comprensión. Si es un número, se entiende que representa el numero de espacios a agregar; este numero tiene un limite de 10 espacios; numeros menores que 1 inplican que no se utiliza espacio alguno. Si es un cadena (sólo los 10 primeros caracteres son tomados en cuenta), esta es usada como espacios en blanco. Si este parámetro no se define o este es nulo no se agrega ningun espacio.
Retorna un string JSON representando el valor dado.
function replacer(key, value) { // Filtrando propiedades if (typeof value === "string") { return undefined; } return value; } var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; var jsonString = JSON.stringify(foo, replacer); // '{"week":45, "month":7}'
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- apache (1)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- Cámara (1)
- chrome (3)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (25)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (3)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (6)
- flash (1)
- freecad (1)
- Git (12)
- GitHub (4)
- gpg (2)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (50)
- HTML 5 (26)
- Impresión 3D (9)
- Inkscape (1)
- IOS (2)
- ireports (3)
- Java (44)
- Javascript (55)
- JBoss (5)
- JPA (2)
- JQuery (20)
- Json (7)
- JSP (6)
- Keycloak (1)
- Lamp (1)
- LDAP (2)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (13)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (8)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (6)
- Patrones de Diseño (1)
- Photoshop (2)
- php (20)
- PostgreSQL (1)
- python (19)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- React (6)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (29)
- Spring (17)
- spring-boot (3)
- SQL (7)
- SQLServer (1)
- SSO (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (6)
- unity (3)
- Visual Studio Code (2)
- vmware (5)
- Web Services (11)
- windows (18)
- wordpress (10)
- Xiaomi (1)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Dynamic React Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places