Buscando artículos sobre "Javascript"
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>
10-noviembre-2017
admin

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);
1-noviembre-2017
admin

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
	});
}

Ejemplos

14-julio-2017
admin

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}'

Fuente Json

1-diciembre-2016
admin

Handlebars como sistema de templates en jQuery

HandlebarsJS es un sistema de plantillas Javascript y una herramienta esencial. Está basado en la sintaxis de “Mustache Templates“, a las que han agregado algunas funcionalidades extra.

Documentación Oficial

Ejemplo de uso para intentar explicar como funciona:

1 – Añadimos dentro de nuestra página html el siguiente template y le asignamos un id.

< script type="text/x-handlebars-template" id="templateEx">
{{# each elementos}}
Name: {{name}} 
{{/each}} < /script>

En esta plantilla se recorre la lista elementos y se escribe el valor de su propiedad name

2 – En nuestro fichero js cuando queramos cargar la pagina tenemos que decirle que compile la plantilla para ello primero tenemos que obtener el código del a plantilla.

var stemplate = $("#templateEx").html();
//Y una vez obtenido poedemos compilar la plantilla:
var tmpl = Handlebars.compile(stemplate);

3 – Ahora solo faltaría asignar los datos al contexto de la plantilla:

var ctx = {};
ctx.elementos = [{"name":"elemento1"},{"name":"elemento2"}];
html = tmpl(ctx);

4 – Ahora añadimos el contenido de la plantilla al html.

$("#content").append(html);
$("#content").show(); 

En este ejemplo se ha usado jQuery para tratar con el DOM pero puede usarse cualquier otra librería.


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.

25-junio-2015
admin

Crear una sencilla cuenta atrás con javascript

Para este ejemplo suponesmos que el id “cuentaAtras” se corresponde por ejemplo con un div.

    var totalTiempo=50;//total de segundos a contar
	
    function actualizaCuenta(){
        document.getElementById('cuentaAtras').innerHTML = totalTiempo;

        if(totalTiempo==0) {
           document.getElementById('cuentaAtras').innerHTML = "FIN";
        }else{
            totalTiempo-=1;
            setTimeout("actualizaCuenta()",1000);

        }

    }

    window.onload=actualizaCuenta;
30-noviembre-2014
admin

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.

Wikipedia

Páginas:1234»

Categorias

Linkedin