Presentacion

Me considero un apasionado de la informática y me encantan los desafíos, desarrollar sistemas complejos, encontrarme con tecnologías nuevas y aprenderlas. Comencé mis primeras pruebas de programación cerca del año 1990 cuando empecé a compilar mis primeros códigos en BASIC. Luego con Windows programé un poco de C++ pero me afirmé en el software y la web dada la demanda laboral del momento y hace ya 20 años que me dedico a la investigación tecnológica y la programación para diversas plataformas.

Lo invito a visitar mi Currículum Vitae

El método «arc» en un objeto canvas

EL método «arc» se utiliza para dibujar en pantalla arcos con determinados parmámetros. En nuestro ejemplo dibujaremos un círculo completo.
Los parámetros son: arc(posicionX,posicionY,radio,angulos,circunferencia)

//llamo al canvas en la variable c:
var c = document.getElementById("circulo");

var ctxt = c.getContext("2d");
//comienza a dibujar
ctxt.beginPath();
//llama a arc(posicionX,posicionY,radio,angulos)

context.arc(x,y,r,anguloInicio,anguloFin,sentidoHorario);
ctxt.arc(100,100,50,0,2*Math.PI);
//dibuja
ctxt.stroke();

See the Pen
eqzrWX
by Germán Wasem (@germ-n-wasem)
on CodePen.

 

¿Qué es Canvas de HTML5?

Personalmente  siempre fui un programador de ActionScript orientado a objetos,  hasta que llegó el día: Adobe anunció la muerte de flash . A todos los que aún programan en AS3, los aliento a migrar cuanto antes sus trabajos a este nuevo objeto que pasaré a explicar, el Canvas, de HTML5.

Mediante el uso de librerías, sprites y JavaScript se puede hacer un juego igual de complejo y entretenido que cualquier juego en flash. Las posibilidades de ahora son muy competentes, y más rápidas. Cualquier juego empleando canvas y javascript es muchísimo más liviano que su homólogo con flash. Además  no necesita  plugin, este maravilloso canvas está integrado en las etiquetas del lenguaje.

Básicamente con algunas imágenes, algo de javascript, css y una etiqueta canvas, podemos lograr si no un juego, al menos algo llamativo.

Insertando el canvas

Dentro del body del documento, el objeto se declara así:

<canvas id="testCanvas" width="500" height="500">
El texto contenido dentro de la etiqueta se muestra en los navegadores que no soporten esta función.</canvas>

Luego  insertar el contenido (en este caso dibujando en JavaScript)

 


var canvas = document.getElementById("testCanvas");
var contexto = canvas.getContext('2d');
/*con este código, indicamos que queremos dibujar un rectángulo en el x=0, y=50,ancho=10, alto=150*/
contexto.fillRect(50, 0, 10, 150);

See the Pen
Html5Test1
by Germán Wasem (@germ-n-wasem)
on CodePen.

Diseño responsivo de interfases: ¿Qué es y por qué es tan importante?

Se escucha hablar en el entorno de desarrollo acerca del diseño responsivo, pero muchas veces no se sabe exactamente de qué se habla cuando se toca el tema.

En sus inicios cerca del año 2002, con la aparición de CSS2/XHTML se comenzó a reformular la forma de hacer webs adaptativas a diferentes resoluciones de pantalla. En esos momentos no era tan común como ahora que los usuarios de telefonía emplearan teléfonos inteligentes para navegar, por lo que estos nuevos estándares estaban orientados sobre todo a navegadores web empleados en monitores simples de escritorio.

Luego, no muchos años después llegaron los smartphones a un alto porcentaje de usuarios. La W3C (institución encargada de definir los estándares para la web) repensó el sistema de maquetación y estructuracion  para los sitios web y actualizó sus tecnologías a una nueva versión orientada a la libertad de uso de porcentajes  y píxels en el diseño web, sumando librerías como fluxbox y w3.css.

Básicamente, el diseño responsivo aplicado tanto a la web como al desarrollo de software es organizar (mediante las nuevas herramientas) las diferentes secciones de la web para que sea adaptable a cualquier tipo de resolución, por lo que estaría perfectamente visible y legible en cualquier dispositivo que disoponga de navegador web.

Es redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada display permitiendo una correcta visualización. Se caracteriza porque los contenidos e imágenes son fluidos y se usa código media-queries (opciones de tamaño condicional en CSS3).

La importancia del diseño responsivo reside en la capacidad de adaptación y la posibilidad de hacer viral el contenido de la web dada su simpleza al compartirlo en la web.

 

Adiós, Flash Player!

Adobe anunció oficialmente que dejará de dar soporte a Flash Player, plugin empleado para la mayoría de los videojuegos en línea.

Páginas como www.friv.com  dejarán de funcionar a partir del 2019, y muchos de los juegos de facebook también. Esto genera preocupación entre los programadores de ActionScript por lo siguiente:
Google Chrome dejará de ejecutar Flash completamente en 2020. Firefox anunció que desactivará por defecto el player en 2019; Microsoft Edge dejará gradualmente de dar la funcionalidad, restringiendo con el tiempo cada vez más su contenido hasta eliminarlo totalmente.

La alternativa:

La migración y la nueva era de los juegos interactivos en linea, es el objeto «canvas» de HTML5 cuya sintaxis y manejo es muy similar al ActionScript pero usando JavaScript. En experiencia personal he encontrado muy simple la migración de proyectos de un lenguaje a otro, pues el «canvas» y el «MovieClip» son de propiedades muy similares.
Bienvenido sea el ECMAScript,  estádar usado en muchos lenguajes de programación.
No todo está perdido. Hay que migrar los sitios en flash a HTML5 y JavaScript.

 

 

Como utilizar sudo sin contraseña en cualquier versión de linux

Como sabemos, Linux siempre fue considerado uno de los mejores sistemas (si no el mejor) en cuanto a seguridad. Pero en determinadas situaciones, sobre todo de desarrollo para aplicaciones en Kiosk-Mode u otro tipo, es necesario acceder como superusuario sin ingresar contraseña por cuestiones de comodidad.
De ningún modo se recomienda hacer esto en sistemas de uso hogareño o empresarial. Está orientado más que nada hacia entornos de desarrollo.

Abrir una terminal, y escribir la siguiente línea:

sudo visudo

Ahora, en el archivo abierto hay que buscar la siguiente línea:

root ALL=(ALL) ALL

E introducir ésta, sustituyendo el nombre de usuario por el tuyo:

nombre_usuario ALL=(ALL) NOPASSWD: ALL

Guradar y reiniciar. Luego ya se nos daría la posibilidad de emplear sudo sin necesidad de ingresar un password

Uso de QueueLoader para carga progresiva de archivos II – Eventos

Continuando con el uso de la librería QueueLoader, ahora veremos cómo se usan los detectores de eventos en ésta.

Recargando la clase anterior:

package {
	//importamos las clases necesarias
	import flash.display.MovieClip;
	import flash.events.Event;
	import com.hydrotik.queueloader.QueueLoaderEvent;
	import com.hydrotik.queueloader.QueueLoader;
	public class Main extends MovieClip {
		public function Main() {
			trace("hola desde constructor");
			//creamos una instancia del QueueLoader
			var _loader: QueueLoader = new QueueLoader();
			for (var s:int=1; s<5; s++) {
				//Recorremos las imagenes que estan en la carpeta "images"
				var url:String="images/"+s+".png";
				//creamos un contenedor para agregar la imagen cargada
				var container:MovieClip = new MovieClip();
				container.y = 170*(s-1);
				//hacemos addItem y le pasamos, el url a cargar, el mc donde se cargará
				_loader.addItem(url, container, {title:"Image1"});
				//y finalmente ejecutamos la cola de carga:
				_loader.execute();
				//Agregamos el contenedor al DisplayList:
				addChild(container);
				//Agregamos los detectores de eventos
				_loader.addEventListener(QueueLoaderEvent.QUEUE_START, onQueueStart);
				_loader.addEventListener(QueueLoaderEvent.ITEM_START, onItemStart);
				_loader.addEventListener(QueueLoaderEvent.ITEM_PROGRESS, onItemProgress);
				_loader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete);
				_loader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress);
				_loader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete);
				_loader.addEventListener(QueueLoaderEvent.ITEM_HTTP_STATUS, onHTTPError);

			}
			function onQueueStart(ev:QueueLoaderEvent) {
				trace("la cola de descarga ha comenzado");
			}
			function onItemStart(ev:QueueLoaderEvent) {
				trace("la descarga de un item comenzada");
			}

			function onItemProgress(ev:QueueLoaderEvent) {
				trace("onItemProgress");
				trace(Math.round((ev.percentage * 100)).toString() + "% Completado de un Item");
			}
			function onItemComplete(ev:QueueLoaderEvent) {
				trace("Se ha descargado correctamente un Item");

			}
			function onQueueProgress(ev:QueueLoaderEvent) {
				trace("onQueueProgress");
				trace(Math.round((ev.queuepercentage * 100)).toString() + "% Completado de la cola de descargas");
			}
			function onQueueComplete(ev:QueueLoaderEvent) {
				trace("Cola de descargas completa");
			}
			function onHTTPError(ev:QueueLoaderEvent) {
				trace("Error en el URL o en el server");
			}

		}
	}
}

Descargar el ejemplo: queueLoaderEventsSample

Full Stack Developer / Tecnologías de la información y contenidos