Wadtly

x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x Antes que nada, este es mi primer post y ultimo. Solo lo hago para devolver algo a la comunidad de todo lo que he tomado de ella. Así que no quiero puntos, ni comentarios solo lean y si les sirve disfruten gente. Gracias x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x ¿Que es Inkscape? nkscape es un editor de gráficos vectoriales de código abierto, con capacidades similares a Illustrator, Freehand, CorelDraw o Xara X, usando el estándar de la W3C: el formato de archivo Scalable Vector Graphics (SVG). Las características soportadas incluyen: formas, trazos, texto, marcadores, clones, mezclas de canales alfa, transformaciones, gradientes, patrones y agrupamientos. Mas información: Inkscape Oficial Inkscape Wikipedia x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x ¿Que es Sozi? es un software open source, que corre bajo la plataforma GNU/Linux. Funciona como una extensión para Inkscape Mas información: Sozi Oficial Ingles x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x ¿Cual es el resultado final? A diferencia de una presentación tradicional, hecha con PowerPoint o Impress, Sozi trabaja con un archivo .SVG y una secuencia de planos, por lo que la presentación se convierte en una animación que va fluyendo por las distintas partes de la misma. Un ejemplo de la pagina oficial Presentación Sozi Oficial Ingles x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x ¿Como instalar? Solo en Arch porque es el que uso. Pero seguro se puede en Debian y derivados. Instalar Inkscape; recuerden ejecutar como administrador su o sudo dijo:pacman -S inkscape[/quote] Instalar Sozi dijo:yaourt -S sozi[/quote] x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x ¿Como crear una presentación? Podría crear un tutorial... Pero seguro existen muchos por Internet, así que vamos a aprovechar el esfuerzo de otros Tutorial Oficial Ingles x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x Controles: Flecha izq, Flecha arriba : Cuadro anterior Flecha der, Flecha abajo : Cuadro siguiente Home: Inicio presentación End: Final Presentación Zoom: + / - Girar: R / r Mostrar todo: F / f Lista de Controles Ingles x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x Bueno gente, creo que eso es todo, espero que a alguien le interese.

Gracias por todos los comentarios y los puntos del post pasado en verdad no lo esperaba Antes que nada quisiera aclarar algo, soy desarrollador web pero no aplico mi carrera porque “No tengo experiencia laboral” lo que si, me encanta programar en cualquier lenguaje... Claro mientras sea libre hahahaha así que disculpen algún error de código o algo que se me pueda pasar. Aqui la primera parte http://www.taringa.net/posts/linux/17832037/HTML5-Canvas-Basico-1-X.html Y recuerden esta no es “la manera” solo es una de tantas, mi interés de estos post es que vean como lo hago y comiencen a crear las cosas a su manera Ahora hay algo que todos tenemos claro, una animación es una sucesión de imágenes con 24 fps se logra la sensación de movimiento, vayamos a el inicio de los tiempos hay que volver a ver a el plano cartesiano. Estoy seguro que todos lo recuerdan que depende de la coordenada (X,Y) sera el lugar donde el punto se posicionara pues el movimiento en canvas es muy similar a el ubiquemos el frame de canvas en el 4to cuadrante solo que en lugar de que el eje de las Y sea negativo es positivo... Si tenemos un punto en (2,2) y queremos moverlo a la derecha comenzamos a incrementar el valor de X y a la velocidad correcta creara el movimiento que buscamos Comenzamos con un background (esta en el post anterior) pero vamos a hacer algo diferente lo vamos a agregar el código de background a una función (para que tenga un poco de estructura... ) no es nada de otro mundo solo declaramos function nombre(){ ... Acá va el código ... } y para que se ejecute el código solo llamamos la función nombre(); Ahora vamos a crear un hermoso píxel azul para esto crearemos un objeto existen diferentes formas yo usare la literal, estos llevan una sintaxis similar a esta. var miObjeto = { propiedad1: valor, propiedad2: “valor”, propiedad3: 93 } Ahora llevemos el ejemplo a lo que los maestros nos explican en las aulas (que por cierto siempre odie... ) miAuto = { numeroDeLlantas: 4, color: “negro”, puertas: 4 } y para mostrar cierto valor por ejemplo usaremos una alerta para mostrar en numero de llantas: alert(miAuto.numeroDeLlantas); esto mostrara una cuadro de alerta que mostrara un 4. No es nada del otro mundo lo hago así para que sea fácil de entender bueno crearemos nuestro píxel ahora que medio sabemos que es un objeto y como declararlo este objeto tendrá su posición X, Y, su Width y Height ( Ancho y Altura ) y ya que estamos aquí también crearemos una función dentro del objeto que dibuja el píxel. Llamamos la función para dibujar el píxel pixel.draw(); en este caso. Y si todo sale bien debe ser posible ver ese lindo pixel azul ( si por algún motivo no se ve... Te recomiendo que abras el depurador de javascript de cualquier navegador y veas que linea esta mal Ahora si, viene lo interesante como movemos el píxel ya vimos explique de manera rápida como generar movimiento ahora apliquemoslo a código 1.- Crearemos otra función fncPixelMove que solo aumentara en 1 el valor de pixel.X 2.- Crearemos una función donde fncUpdate que llamara todas las funciones y objetos para dibujar ( para que se entienda mas facilmente ) 3.- Asignaremos un intervalo de tiempo para que se actualice la función update setInterval(function, tiempo); function: se puede usar como una función completa y llamar alli todos los componentes algo así setInterval(function(){ ... Muchas LoC ... }, 1000); Pero intento explicarlo de la manera mas clara sin tantos trucos de magia tiempo: es el tiempo en milisegundos 1000 milisegundo = 1 segundo Y tenemos ese lindo pixel que se mueve a la derecha y se pierde en el infinito... Pero al menos ya se mueve hahaha Intenta cambiar agregar código en la función fncPixelMove, aumenten en uno el eje Y o eliminen X y dejen Y jueguen con los intervalos de actualización Eso es todo por hoy en la siguiente explicare colisiones para que el píxel no se vaya de largo y parezca que rebote con el borde de canvas y también como mover el objeto con las teclas. Acá dejo el mini-proyecto en JSFiddle http://jsfiddle.net/z94WY/

Estaba aburrido, así que pensé en hacer algo de provecho entre tanta basura que agregan en taringa... Es como usar Canvas con Javascript, sin mas que decir inicio. Canvas: (En español lienzo) Es un elemento de HTML recién agregado en HTML5 que permite generar gráficos por medio de lenguajes scripting (Como Javascript). Permite crear juegos, animaciones, composición de imagenes, entre otras cosas. Hoy como es el primer post (si no me da pereza explico como hacer el juego snake) comenzare con un Hola Mundo! como con cualquier lenguaje de programación: >> Comenzamos agregado una estructura básica HTML5 >> Agregamos entre las body el tag de canvas y le asignamos un id en este ejemplo myCanvas >> Abrimos tags para el script bajo la de canvas, debe cargar antes de que JS busque donde esta canvas y/o accionar los valores >> Ahora comienza lo divertido 1.- Comenzamos asignando a una variable nuestro elemento canvas y también asignamos en otra variable getContext, ¿Por que? Porque al necesitar una propiedad 2d de canvas es mas fácil llamar: ctx.propiedad que document.getElementById("myCanvas";).getContext("2d";).propiedad 2.- Establezco los valores de dos variables mas W (Width en español Ancho) y H (Height en español Alto) en 300, en el proceso se darán cuenta que es para ahorrar caracteres. 3.- Y para finalizar por el momento... Al ancho y alto de canvas asigno las variables antes declaradas >> Y al abrirlo en el navegador tenemos un hermoso cuadro de nada... (No lo olviden guardarlo como ejemplo.html y abrirlo con algún navegador web IE no es un navegador...) >> Somos desesperados por naturaleza queremos ver que hemos hecho ya, voy a agregar un background a el canvas que he creado, asignamos la propiedad fillStyle en la variable ctx y agregamos el color en este caso "#151515", e indicamos el lugar donde queremos colorear con fillRect. Explicación de fillRect: fillRect(Numero X, Numero Y, Numero W, Numero H) donde: Con Numero X y Y se refiere a posición. Con Numero W y H se refiere a ancho y alto (Width, Height) de la figura. Entonces lo que básicamente pasa es que creamos un rectangulo de cierto color que abarca desde la posicion 0,0 de canvas hasta el tamaño del canvas 300 asignados en las variables W y H. >> Ahora así al actualizar vemos un hermoso cuadro negro generado solo con Scripting >> Ahora para terminar por hoy hay que agregar un texto todo lo vamos a hacer desde nuestro ctx. ctx.font = Agregamos el tamaño y la fuente a utilizar ctx.fillStyle = Exactamente igual que la vez pasada, agrego el color de el texto ctx.textAlign = Simplemente para alinear el texto, intenten comentar o cambiar el valor a left o right ctx.fillText("Texto entre comillas", numero X, Numero Y) Numero X y Y igual que antes se refiere a posición Para aclarar en ctx.fillText("Texto", W/2, 25); tomo el valor de W que es el ancho total del canvas, y lo divido entre dos para obtener la mitad (hahahahaha lo explico considerando que lo hago a una persona que se cayó muchas veces de cabeza) 300/2 = 150 y 25 entonces son 150px de izquierda a derecha y 25px de arriba hacia abajo. Aunque no inicia el texto justamente en la mitad es por la propiedad textAlign que hace que el punto se posicione en la mitad de nuestra frase. >> Y listo tenemos nuestro primer mensaje en canvas >> Solo para aclarar dijimos que le dimos a canvas posición 0, 0 en X y Y pero ¿Por que aparece un margen blanco y no esta pegado con los bordes del navegador? Simple los navegadores por lo general tienen por defecto margin y/o padding entonces solo creamos un style en nuestro head y agregamos: * { padding: 0px; margin: 0px } Para que el documento no tenga borde ni relleno, por cierto el aterisco ( * ) es conocido como un comodín, y lo que hace es aplicar a todas los tags las propiedades asignadas. >> Asi queda sin margenes ni rellenos. Eso es todo por el momento gente, es muy básico lo hice pensando en algún alma solitaria que quiere comenzar su aventura creando juegos en HTML5 hahahaha nos leemos gente El código para los holgazanes http://paste.desdelinux.net/4988 Acá la parte dos http://www.taringa.net/posts/linux/17836151/HTML5-Canvas-Basico-2-X.html

Warning No tenia nada mejor que hacer mas que hacer capturas de mi desk así que sin mas que agregar lo dejo aquí. Mi desktop recien iniciado... Los Widgets (Arriba/Derecha) muestran información al colocar el puntero encima de ellos. Acá el area de desarrollo, hahaha basicamente vim + plugins MPD+NCPCPP (Reproductor) | Vifm (Navegador de archivos tema oscuro por mi) | cmatrix (para sorprender) | dwb (navegador web) | Y como se puede apreciar un widget el la barra de abajo que muestra la canción en reproducción Ahora deben pensar... ¿Y las aplicaciones graficas? Claro aqui estan también ¿Imágenes? ¿Vídeos? Claro tambien se pueden apreciar muy bien Ese es mi desktop bueno es mas un Window Manager... Y no, no uso un Desktop Enviroment Información: Distribución: Archlinux WM: Awesome Theme Awesome: Nath (Propio) Font Awesome: ProFont Font Terminal: Terminus Terminal: Urxvt Iconos: Faenza Theme GTK: Zukitwo Font GTK: Ubuntu