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 >
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 }); }
Herramientas para testeo de Microsoft Edge
Microsoft nos facilita una serie de herramientas gratuitas para mejorar el diseño y la accesibilidad de nuestros sitios web en las distintas plataformas.
Virtual machines
Te permite probar tu aplicación web desde cualquier versión de internet explorer mediante máquinas virtuales gratuitas que se pueden descargar. Disponibles para cualquier tipo de sistema operativo.
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/windows/
RemoteIE
Mediante esta herramienta puedes probar de forma remota gratis con Azure RemoteApp en Windows, Mac, iOS o Android.
https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/
Generate screenshots
Herramienta que te muestra como se ve tu sitio web a través de 9 navegadores y dispositivos más comunes.
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/
F12 Dev Tools
Uso de las propias herramientas de desarrollo de Microsoft Edge.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
Site Scan
Herramienta que permite analizar tu sitio web. Detecta problemas de diseño y accesibilidad.
Analiza el código HTML, CSS y JavaScript de un sitio o aplicación web. Se advierte acerca de las prácticas tales como la especificación incompleta de las propiedades CSS, doctypes no válidos o incorrectos, y las versiones obsoletas de JavaScript populares de libraries.
https://developer.microsoft.com/en-us/microsoft-edge/tools/staticscan/
Otras Herramientas que pueden resultar útiles:
BrowserStack: Prueba todos los navegadores y dispositivos de forma interactiva desde su dispositivo preferido
Borland Silk Test: Asegura la calidad de la aplicación web a través de navegadores de escritorio y móviles.
Kraken.io: Permite optimizar sus imágenes, ahorrar ancho de banda y mejorar los tiempos de carga.
Web Components
Web Components son un conjunto de normas que actualmente se producen por el W3C que permiten la creación de widgets o componentes reutilizables en los documentos web y aplicaciones web. La intención detrás de ellos es llevar a la ingeniería del software basada en componentes para la World Wide Web. El modelo de componentes permite la encapsulación y la interoperabilidad de los elementos HTML individuales.
El apoyo a la Web Components está presente en algunos navegadores basados en WebKit como Google Chrome y Opera y se encuentra en la versión de Mozilla Firefox Nightly (requiere un cambio de configuración manual). Internet Explorer de Microsoft no ha implementado ninguna especificación de componentes web todavía. [1] la compatibilidad hacia atrás con los navegadores más antiguos se implementa utilizando polyfills basadas en JavaScript.
Web Components consta de 4 elementos principales que se pueden usar por separado o todos juntos:
– Custom Elements: Se trata de utilizar elementos personalizados.
– Shadow DOM: es un DOM encapsulado que coexiste dentro del DOM padre y permite definir elementos complejos como componentes de video, entre otros, y poder tanto reutilizar estos componentes como personalizar los existentes.
– HTML Imports: Importar ficheros html.
Ejemplo de uso:
< head> //referenciamos el fichero html warnings.html //dentro de ese fichero hay una estructura DOM < link rel="import" href="warnings.html"> < /head> < body> ... < script> //importamos a la variable content el fichero html var link = document.querySelector('link[rel="import"]'); var content = link.import; //recuperamos a la variable domAux el DOM del fichero warning.html //deseado. //en este caso es el DOM de un div cuyo class es warning var domAux = content.querySelector('.warning'); //añadimos al body el DOM recuperado document.body.appendChild(domAux.cloneNode(true)); < /script> < /body>
– HTML Templates: Son platillas en HTML que se completan o utilizan con un modelo o colección de datos externa.
Como usar la API de Twiter (parte 1)
Si tienes una cuenta de twiter y quieres realizarte una aplicación personalizada que utilice toda la información que hay en twiter (número de seguidores, amigos, tweets, etc), la gente de Twiter nos facilita una serie de llamadas rest que podemos utilizar para interactuar con ellos. Más información aquí.
En primer lugar decir que a día de hoy la versión de la API de twitter es la 1.1 (la 1.0 ya está deprecada). Esta versión 1.1 requiere usar autentificación OAUTH, de otra forma no podremos poner a funcionar la aplicación.
Por lo tanto para poder utilizar la api se deben seguir estos pasos:
1/ Crear una cuenta de desarrollador: esto se hace en https://dev.twitter.com/
2/ Una vez creada la cuenta de desarrollador ya podrás crear una nueva aplicación en la zona de «Mis Aplicaciones«.
3/ Tras crear la aplicación lo siguiente es crear los Tokens de acceso. (API keys y Access Tokens)
4/ Llegados a este punto ya podriamos utilizar la api. Existen ya un gran número de librerias que nos facilitaran el uso del api twiter para no tener que implementarlo de cero. Además, hay librerías para casi cualquier lenguaje posible. (Ver aquí)
XDK intel
Gracias a XDK intel podemos desarrollar aplicaciones en HTML 5 para luego generar aplicaciones para distintas plataformas:
Aplicaciones móviles: iOS, Android (nativo, Cordova, Crosswalk), Windows 8 Store, Windows Phone 8, Tizen, y Nook.
Aplicaciones web: Web, Chrome App, Fracebook App.
El XDK permite emular apps en dispositivos virtuales en distintos dispositivos (iPhone, Microsoft Surface, Google Nexus, …). Además, ofrece la capacidad de que los desarrolladores puedan almacenar su código en la nube de manera gratuita.
Video donde se puede ver la configuración de XDK y Demo de aplicativo
Making Native Mobile Apps with HTML5 Using the appMobi XDK
Write once and deploy to multiple platforms with HTML5 and Intel® XDK
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