Buscando artículos sobre "HTML"
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

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.

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

1-septiembre-2014
admin

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í)

29-marzo-2014
admin

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

12-enero-2014
admin

Usar HTML para formatear textos en Android

Cuando en Android quieres incluir un texto HTML en la aplicación aplicación se debe utilizar el paquete android.text.html.

Documentación Oficial

Ejemplo de uso:

//Asigna texto con formato HTML
txtTexto.setText(
     Html.fromHtml("prueba"), BufferType.SPANNABLE);

Funciona perfectamente con opciones de formato básicas, como son: negritas, cursivas, subrayado o colores de texto. Alguna como el tamaño del texto sí funciona correctamente con el método toHtml(), sin embargo con el método fromHtml() no. También, permite incluir imágenes.

En esta página hay una buena introducción de los objetos span de android. A través de los cuáles también se pueden formatear textos usando html.

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

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

17-noviembre-2013
admin

Android Web Generator

Ahora puedes convertir una página web (Responsive web design) en una aplicación Android con solamente usar la URL de la página.

La aplicación resultante funcionará sin problemas como mínimo en todos los dispositivos android 2.2 o superior. Y tendrá la siguiente estructura:

Android Web Generator Diseño

Para ello tienes que bajarte estos dos proyectos preparados para el eclipse de mi repositorio de GitHub:

Proyecto AppWebGenerator
Este proyecto es el que contiene la aplicación android resultante. Se deben seguir los siguientes sencillos pasos:

  • Paso 1:
    •   – Renombrar el nombre del proyecto por el nombre que prefieras.
    •   – Renombrar el nombre del pakete es.com.disastercode.appwebgenerator
    •   – Renombrar el nombre del pakete es.com.disastercode.appwebgenerator.menu
    •  
    •  Nota: hacerlo en este orden y usar el refactor que proporciona el eclipse.
    •  
    •  
  • Paso 2:
    •   Ir a res/values/strings.xml y dar valor a las siguientes variables:
    •   URL_DIR -> será la dirección web de la página que se quiere usar como si fuera una aplicación.
    •   TITLE_APP -> título que quieres que aparezca en la barra superior.
    •   myAdUnitId -> si deseas ponerle publicidad de admob aquí va el código de anuncio que corresponda. Dejarlo en blanco si no deseas que salga publicidad.
  •  
  •  
  • Paso 3:
    •   Sustituir las imágenes ic_launcher.png de los directorios, por las del logo que tendrá tu aplicación:
    •   – res/drawable-hdpi
    •   – res/drawable-ldpi
    •   – res/drawable-mdpi
    •   – res/drawable-xhdpi
    •   – res/drawable-xxhdpi
    •  
    • Es recomendable sustituirlos por otros que tengan el mismo tamaño.
    •  
    •  

Proyecto library
Este proyecto contiene la version 4.2 del actionbarsherlock.
Más info en: http://actionbarsherlock.com/

Se usa esta barra para la parte superior de la aplicación. Si se desea cambiar el color se configura en el fichero res/drawable/background.xml

Ejemplo de uso:

Web EcoDom: http://disastercode.com.es/appecodom
Se trata de una web (responsive web design) para llevar un control de gastos. Está realizada con el Framework de PHP Codeigniter junto con la extension Grocery Crud.
Además, se ha utilizado para dibujar las gráficas con estadísticas la libreria JGraph.

Aplicación android resultante

1-noviembre-2013
admin

Sencha Touch

Se trata de un framework para HTML5 que está pensado para desarrollar aplicaciones web para dispositivos móviles. Además, consigue efectos que aparentan ser los nativos tanto de dispositivos iOS como Android.

Sencha Touch nos permite aprovechar la potencia y flexibilidad de HTML5, CSS3 y JavaScript. Para ello hace uso de los nuevos elementos disponibles en la nueva especificación del estándar para utilizar video, audio, guardar datos offline. También consta de una librería con múltiples widgets de usuario y control para los eventos táctiles de los dispositivos. Además de los métodos estándares de eventos como touchstart y touchend, el framework añade una extensa lista de eventos útiles como tap, double tap o rotate entre muchos otros.

Enlaces de interes:
Sencha Touch
Documentación
Ejemplos
Tutoriales
Integración de Sencha Touch con PhoneGap

Páginas:«12345»

Categorias

Linkedin