Buscando artículos sobre "JQuery"
20-septiembre-2020
admin

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

13-septiembre-2020
admin

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 >

Fuente Pipe

6-septiembre-2020
admin

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());
    }
}
27-diciembre-2017
admin

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

Fuente

20-diciembre-2017
admin

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>
5-octubre-2016
admin

Bower

Bower es un gestor de dependencias para el desarrollo web frontend. Facilita la tarea de instalar y mantener al día las distintas librerías y frameworks del proyecto.

Instalación:
Primero se necesita instalar node.js. Se descarga de https://nodejs.org/ y se instala el *.msi en windows.
Puedes comprobar que se ha instalado bien ejecutando por consola el comando:

node -v



Después se instala git. Para ello hay que descargar y ejecutar https://git-scm.com/download/win



Por último se instala el bower. Para ello necesitamos el comando npm que ya nos instaló node.js.

npm install -g bower


Para crear por primera vez el archivo bower.json lo más cómodo es, desde la raíz de tu proyecto, lanzar el comando:

bower init

El fichero bower.json sera similar a este:

{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Yo "
  ],
  "dependencies": {
    "jquery": "~3.1.0"
  }
}

En «dependencies» se indican las distintas librerías y sus versiones. El símbolo ~ indica que bower instalará la 3.1.0 o una superior cuando salga siempre que sea de la 3.1.x

Guía de comandos de bower

7-junio-2016
admin

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.

6-diciembre-2013
admin

Obtener los parametros de las urls con javascript

Ejemplo 1:

function getURLvar(var_name){
  var re = new RegExp(var_name + "(?:=([^&]*))?", "i");
  var pm = re.exec(decodeURIComponent(location.search));
  if(pm === null) return undefined;
  return pm[1] || "";
}

//Ejemplo de uso:
//Suponiendo que la URL es http://www.unsitio.com/pagina.html?s=5
alert(getURLvar('s')); //Muestra 5

* La función devolverá undefined si no existe la variable, y cadena vacía en caso de que exista pero no contenga ningún valor

Ejemplo 2:

(function (){
  window.$GET = [];
  if(locaction.search){
    var params = decodeURIComponent(location.search)
                              .match(/[a-z_]\w*(?:=[^&]*)?/gi);
    if(params){
      var pm, i = 0;
      for(; i < params.length; i++){
        pm = params[i].split('=');
        $GET[pm[0]] = pm[1] || '';
      }
    }
  }
})();

//Ejemplo de uso:
//Suponiendo que la URL es http://www.unsitio.com/pagina.html?s=5
alert( $GET['s'] );  //Muestra 5

Fuente

6-diciembre-2013
admin

Consumir un Web Service con Ajax

Cómo ejemplo utilizaré un servicio soap que tengo creado con NUSOAP. http://genparte.disastercode.com.es/ws/servicioWsdl.php?wsdl

Se hace una petición al método getCalendarFestive del ws. A este método se le debe pasar un parámetro de entrada strName.

Tras hacer la petición, si todo va bien se ejecutará el evento success donde rellenamos un array con la información obtenida.

var soapMessage =
	'< soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
		'< soap:Body>'+
			'< getCalendarFestive xmlns="http://genparte.disastercode.com.es">'+
				'< strName>.....< /strName>'+
			'< /getCalendarFestive>'+
		'< /soap:Body>'+
	'< /soap:Envelope>';

$.ajax({
	url: 'http://genparte.disastercode.com.es/ws/servicioWsdl.php?wsdl', 
	type: "POST",
	dataType: "xml", 
	contentType: "text/xml",
	data: soapMessage, 
	success: function(data, status, req, xml, xmlHttpRequest, responseXML) {
		$(req.responseXML).find('return').each(function(){
		
			if( $(this).find('type')){
				var total = $(this).find("type").length;
				var days = new Array();
				for(i= 0; i < total; i++)  {
					var strType = $(this).find("type")[i].childNodes[0].nodeValue;
					var strDate = $(this).find("date")[i].childNodes[0].nodeValue;
					days[i] = strDate;
				}
			}
		});
	}, 
	error: function processError(data, status, req) {
		console.log(data);
		console.log(status);
		console.log(req);
	}
});

6-diciembre-2013
admin

Generador de partes de trabajo

Aplicación web que te genera los partes de horas mensuales en formato *.xls

DEMO: http://genparte.disastercode.com.es

GitHub: https://github.com/roberto-pf/GenParte

Tecnologías empleadas:
– Plugin Fullcalendar de Jquery para implementar el calendario.http://arshaw.com/fullcalendar/

– Nusoap, como servidor web para los días festivos.http://sourceforge.net/projects/nusoap/

– PHPExcel, como librería para generar la hoja de excel.http://phpexcel.codeplex.com/

– Diseño formularios:
Formly -> http://thrivingkings.com/read/Formly-The-form-glamorizer-for-jQuery
NiceForms -> http://www.emblematiq.com/lab/niceforms/

Pantalla Principal

Hoja de excel generada

Páginas:12»

Categorias

Linkedin