El Software Ha Muerto

Programación de Software Para Audio

Rafael Vega — Tue, 16 Aug 2011 03:38:56 +0000

Estoy a cargo de un grupo de estudio de programación de software para audio. Actualmente nos estamos encontrando los Jueves de 6 a 8 pm en La Miscelánea. La entrada es libre y están tod@s muy invitad@s!
Si quieren mas info o seguir los temas que tocamos en el grupo, suscríbanse a la lista de correos.

Volantes anteriores:

Una lista de comandos y trucos.

Rafael Vega — Wed, 16 May 2012 14:33:04 +0000

Comandos y trucos que siempre olvido

Administración de usuarios y grupos en Linux

1
2
3
4
5
6
7

useradd mombre_usuario
groupadd nombre_grupo
passwd mombre_usuario
cat /etc/passwd
cat etc/group
usermod -a -G nombre_grupo nombre_usuario # Agrega el usuario al grupo secundario
usermod -g nombre_grupo nombre_usuario # Cambia el grupo primario del usuario

Postgres

1
2
3
4
5
6
7
8
9
10

# Server:
sudo -u postgres service postgresql start|stop|restart
sudo -u postgres createdb dbname

#Client:
sudo -u postgres pqsl

#Set password
$ sudo -u postgres psql template1
template1=# \password

Buscar y remplazar texto en muchos archivos

1	find ruta/archivos -type f -exec sed -i 's/busqueda/remplazo/g' {} \;

Crear thumbnails de una imagen

1	convert Aab_001.jpg -resize 29x29^ -gravity center -extent 29x29 Aab_001.small.jpg

Copia de archivos a un servidor remoto

1 2	rsync -avzu /ruta/local usuario@host:/ruta/en/servidor #Preserva usuarios, grupos, fechas rsync -rvzu /ruta/local usuario@host:/ruta/en/servidor #No preserva usuarios, grupos, fechas

Renombrar muchos archivos

1	for i in *; do j=`echo $i \| cut -d . -f 1`; j=$j"_32.png"; mv $i $j; done

Limpiar cache de iconos en gnome

1	sudo gtk-update-icon-cache --force <nombre del theme>

Cambiar los atajos de teclado de cualquier aplicación en Ubuntu 12.04 y Unity

Tomado de aqui.

Usando gconf-editor, navegar a org->gnome->desktop->interface y activar la opción can-change-accels.

Luego inicie la aplicación que quiere configurar con la opción UBUNTU_MENUPROXY=0. Por ejemplo UBUNTU_MENUPROXY=0 nautilus. Ahora puede poner el mouse sobre cualquier opción del menu y teclear el atajo deseado.

Instalar varias versiones de Ruby con rbenv

1. Instalar rbenv y el plugin ruby-build

1
2
3
4
5
6
7
8
9

cd
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

mkdir -p ~/.rbenv/plugins
cd ~/.rbenv/plugins
git clone git://github.com/sstephenson/ruby-build.git
exec $SHELL

2. Instale la versión de ruby que quiera

1 2	rbenv install 1.9.2-p290 --with-openssl-dir=/usr/local rbenv rehash

3. Use la nueva versión de ruby

1 2	rbenv global 1.9.2-p320 ruby -v

Cómo evitar que nautilus dibuje el fondo del escritorio en XFCE.

Rafael Vega — Mon, 20 Feb 2012 13:07:13 +0000

gsettings set org.gnome.desktop.background show-desktop-icons false

3. Programación gráfica con

Rafael Vega — Tue, 31 Jan 2012 17:09:11 +0000

SVG

1
2
3
4
5

Canvas 2D

1
2
3
4
5
6
7
8
9
10
11
12
13

<canvas id="canvas" width="838" height="220">canvas>

<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
script>

Canvas 3D

Ejemplos en http://www.chromeexperiments.com/webgl

1
2
3
4
5
6
7

<canvas id="canvas" width="838" height="220">canvas>

<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
script>

APIs en Javascript para dibujar en

API nativa. Ej, para dibujar un circulo:

gDrawingContext.beginPath();
gDrawingContext.arc(x, y, radius, 0, Math.PI * 2, false);
gDrawingContext.closePath();

gDrawingContext.strokeStyle = "#000";
gDrawingContext.stroke();
Raphaeljs
Funciona incluso en browsers que no tienen soporte para

1
var circle = paper.circle(50, 40, 10);
Processingjs

Se puede escribir código en javascript o en processing. Se pueden cargar programas hechos en processing e interactuar con otros elementos de la página. Se tiene un poco mas de control sobre el proceso de dibujo y brinda APIs para dibujar, suscribirse a eventos, etc.

1	ellipse(56, 46, 55, 55);

Ejemplo en Processing.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Circulos</title>

<style type="text/css" media="screen">
#canvas1{
width:90%;
height:90%;
}
</style>
</head>
<body>

="canvas1"></canvas>

<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="processing-1.3.6.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function sketchProc(p) {
var columns = 6;
var rows = 6;
var columnWidth, rowHeight;
var margin = 50;

p.setup = function(){
var w = $(window).width();
var h = $(window).height();
p.size(w,h);

p.background(255);
p.colorMode('HSB', 1.0);
p.noStroke();
p.smooth();

columnWidth = (p.width - 2*margin) / (columns - 1);
rowHeight = (p.height - 2*margin) / (rows - 1);

for(var r=0;r<rows;r++){
for(var c=0;c){
drawCircle(r,c,p.width/2,p.height/2);
}
}
};

drawCircle = function(row, col, mouseX, mouseY){

var x = margin + columnWidth*col;
var y = margin + rowHeight*row;

var dx = Math.abs(x - mouseX);
var dy = Math.abs(y - mouseY);
var d = Math.sqrt((dx*dx) + (dy*dy));
var r = 0.6 * d;

p.fill(d/p.width, d/p.width, 1.0, 0.8);

p.ellipse(x, y, r, r);
};

p.mouseMoved = function(){
p.background(255);
for(var r=0;r<rows;r++){
for(var c=0;c){
drawCircle(r,c, p.mouseX, p.mouseY);
}
}
};
}

var canvas = document.getElementById("canvas1");
var processingInstance = new Processing(canvas, sketchProc);
</script>
</body>
</html>

Ejercicio

Programe un reloj análogo con Processing.js

2. Introducción a Javascript.

Rafael Vega — Tue, 31 Jan 2012 17:03:47 +0000

Lenguaje de scripting típicamente usado para controlar el funcionamiento de un navegador web y para agregar interactividad a documentos HTML.

También utilizado como lenguaje de scripting de propósito general y para programar lógica del lado del servidor en aplicaciones web. Ver Nodejs Muy recomendado!!! Por ejemplo: Crear un servidor web con javascript y nodejs es re-fácil:

1
2
3
4
5
6
7
8
9
10

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

Para correr el servidor, ponga el código anterior en un archivo llamado servidor.js y ejecute la siguiente línea en una terminal:

1	$ node servidor.js

Sintaxis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

// Tomado sin permiso de http://javascript.infogami.com/Javascript_in_Ten_Minutes

//////////////////////////////////////
// Basic Types
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";

///////////////////////////////////////
// Array
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];

///////////////////////////////////////
// Property Map
//
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
"two": "two",
"three": 3.0};

///////////////////////////////////////
// Functions as values
//
var callable = function (message) { // <-- notice assignment
window.alert("Callable called with message = "
+ message);
}

function createClosure(initial) {
var res = function () {
initial = initial + 1;
window.alert("Closure with modified state "
+ initial);
}
return res;
}

///////////////////////////////////////
// Functions as arguments
//
function callCallable(f, x) {
f(x);
}

function composeCallables(f, g, x) {
f(g(x));
}

///////////////////////////////////////
// Objects
//
function MyObject(name, value) {
this.name = name;
this.value = value;
}

///////////////////////////////////////
// Objects with Member Functions
//
function Message(message) {
this.message = message;
}

Message.prototype.show = function() {
window.alert("Message.show() with message = "
+ this.message);
}

Document Object Model

El DOM es una representación programática de un documento XML o HTML. En un navegador, se utiliza para acceder o modificar secciones del documento HTML que se está visualizando usando Javascript.

Un ejemplo simple:

1
2
3
4
5
6
7
8
9
10
11
12
13

id="primer_articulo">
<h1>Titulo del artículo</h1>
<p class="resumen"><img src="http://foo.com/bar.jpg" alt="Una foto cuadrada y nítida">Blah Blah Blah Blah</p>
</article>

<script type="text/javascript">
var image = document.getElementById('primer_articulo').childNodes[3].childNodes[0];
for( var x = 0; x < image.attributes.length; x++ ) {
if( image.attributes[x].nodeName.toLowerCase() == 'alt' ) {
window.alert('El alt de la imagen es: ' + image.attributes[x].nodeValue );
}
}
</script>

jQuery

El problema con la API del DOM es que no es muy compacta y existen muchas diferencias entre las implementaciones en diferentes navegadores. Como ejemplo mire este artículo que discute en mas de 5000 palabras como suscribirse a un evento click

Una alternativa altamente adoptada es la librería jQuery que brinda una API mucho mas compacta, métodos que encapsulan las diferencias entre navegadores y otras APIs para diferentes tareas como ajax,

Un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Parrafos</title>

<style type="text/css" media="screen">
p {
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
font-size:18px;
color: #333;
border: 1px solid #AAA;
width:400px;
margin:20px auto;
cursor: pointer;
}
</style>
</head>
<body>

<p> Readymade quinoa beard shoreditch bicycle rights. Synth tofu ethical, biodiesel before they sold out PBR messenger bag readymade mcsweeney’s seitan echo park brooklyn pitchfork wayfarers tumblr. Quinoa bicycle rights salvia, mlkshk carles yr tattooed marfa high life helvetica artisan wayfarers next level butcher gluten-free. </p>
<p> Readymade quinoa beard shoreditch bicycle rights. Synth tofu ethical, biodiesel before they sold out PBR messenger bag readymade mcsweeney’s seitan echo park brooklyn pitchfork wayfarers tumblr. Quinoa bicycle rights salvia, mlkshk carles yr tattooed marfa high life helvetica artisan wayfarers next level butcher gluten-free. </p>
<p> Readymade quinoa beard shoreditch bicycle rights. Synth tofu ethical, biodiesel before they sold out PBR messenger bag readymade mcsweeney’s seitan echo park brooklyn pitchfork wayfarers tumblr. Quinoa bicycle rights salvia, mlkshk carles yr tattooed marfa high life helvetica artisan wayfarers next level butcher gluten-free. </p>
<p> Readymade quinoa beard shoreditch bicycle rights. Synth tofu ethical, biodiesel before they sold out PBR messenger bag readymade mcsweeney’s seitan echo park brooklyn pitchfork wayfarers tumblr. Quinoa bicycle rights salvia, mlkshk carles yr tattooed marfa high life helvetica artisan wayfarers next level butcher gluten-free. </p>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.color.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('p').click(function(){
$('p').animate({
'color':"#333",
'font-size': '18px',
'padding': '0px'
});

$(this).animate({
'color':"#0000AA",
'font-size': '22px',
'padding': '10px'
});
});
});
</script>
</body>
</html>

Algunas cosas nuevas en HTML5

Almacenamiento local de datos

1 2	window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime());

Bases de datos locales

1
2
3
4

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

Cache de aplicaciones

Permite cargar un documento una vez y utilizarlo después cuando no haya conexión a internet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html manifest="cache.appcache">

---

window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
}, false);

---
cache.appcache:

CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

NETWORK:
*

Web workers

Permiten iniciar hilos de ejecución paralelos, haciendo que las aplicaciones respondan mucho mejor.

1
2
3
4
5
6
7
8
9
10

// En main.js:
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');

// En tasks.js
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data);
};

Web sockets

Permiten dejar establecida la comunicación con un servidor.

1
2
3
4
5
6

Notificaciones

Permiten mostrar un mensaje por fuera de la ventana del navegador, incluso cuando está minimizado.

1
2
3
4
5
6

if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification(imagen, titulo, texto).show();
}
else {
window.webkitNotifications.requestPermission();
}

Geo-locación

Permite preguntar al sistema operativo la ubicación geográfica del usuario.

1
2
3
4
5
6
7
8

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}

Ejercicios

Programe un carrusel de imágenes usando html, css y javascript.

Taller HTML5

Rafael Vega — Mon, 30 Jan 2012 22:36:24 +0000

Esquema del curso

Introducción a HTML y CSS.
Introducción a Javascript.
Programación gráfica con
Programación de aplicaciones estilo escritorio.
HTML5 como sistema de desarrollo para aplicaciones móviles y de escritorio.

1. Introducción a HTML y CSS.

Definición

Hipertext Markup Language es un lenguage para anotar texto de manera que sea sintácticamente distinguible de ese texto. Es usado por los navegadores web para describir e interpretar documentos de texto, imágenes y sonido y presentarlos como páginas web audibles o visibles.

Historia

1980 Tim Berners-Lee.
World Wide Web Consortium.
CSS + Javascript
HTML 4.01
XHTML.
AJAX y los desarrolladores haciendo aplicaciones con un lenguaje de marcado!!
HTML Semántico, CSS y el horror de las tablas.
2005 HTML5

La historia antediluviana de HTML: http://atendesigngroup.com/blog/brief-history-of-html

HTML5 ~= HTML + JavaScript + CSS

HTML5 No es una sola cosa. Así como la web, es un gran hack de tecnologías que en principio no fueron diseñadas para trabajar juntas.

Una Introducción al marcado de documentos con HTML5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html lang="es">
<head>
<meta charset="utf-8">
<title>Este es el título de la página</title>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Y aquí va un parrafo</p>

<h2>Otro encabezado de menor nivel</h2>
<p>
Y otro parrafo mas largo, con una imágen <img src="http://elsoftwarehamuerto.org/wp-content/uploads/2011/06/1-300x220.jpg">
y un <a href="http://elsoftwarehamuerto.org" target="_blank">link</a>. Craft beer art party vice, mcsweeney's mlkshk wayfarers lo-fi helvetica vegan stumptown. Williamsburg echo park banh mi whatever +1, next level VHS four loko sartorial. Freegan letterpress shoreditch gluten-free you probably haven't heard of them, jean shorts sustainable tattooed williamsburg. Wayfarers readymade locavore trust fund, mlkshk shoreditch brooklyn artisan next level. Cosby sweater locavore jean shorts mustache. Williamsburg cred cliche PBR thundercats carles artisan freegan, cardigan american apparel. High life farm-to-table brooklyn, sartorial shoreditch aesthetic sustainable lomo pitchfork mustache salvia skateboard terry richardson banh mi scenester.
</p>
</body>
</html>

1 2	<a href="http://elsoftwarehamuerto.org" target="_blank">Abre un vinculo externo en una nueva ventana del explorador</a> <a href="/contact".html">Abre un vinculo local en la misma ventana del navegador</a>

Imágen.

1	<img src="http://www.templatesheaven.com/blog/wp-content/uploads/2009/03/html.jpg" alt="Homeless guy holding a sign that reads 'Will code HTML for food'">

Un parrafo.

1	<p>Blah blah blah!<p>

,
, ... ,
Encabezados.

1
2
<h1>1. Título</h1>
<h2>1.1. Subtítulo</h2>

Listas

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ol>
<li>Una</li>
<li>Lista</li>
<li>Con</li>
<li>Números</li>
</ol>

<ol>
<li>Una</li>
<li>Lista</li>
<li>Con</li>
<li>Números</li>
</ol>

y son contenedores genéricos

1
2
3
4
<div id="seccion_1"> ... </div>

<span class="termino_glosario">...</span>

class y id

Documentación de todas las etiquetas disponibles

http://www.w3schools.com/http://www.w3schools.com/

Algunas etiquetas nuevas en HTML5

Representa una sección de un documento.
Representa la sección de un documento que contiene los vinculos de navegación de un sitio
Una composición auto-contenida como un artículo, página, aplicación, una entrada en un blog, etc.
El encabezado de una sección.
La "pata" de una página o sección.
Una hora o una fecha.

Mas info sobre etiquetas y semántica:

http://diveintohtml5.info/semantics.html

Algunas etiquetas nuevas en HTML5 (Para formularios/apps)

A+
3/4 complete

Mas info sobre formularios

http://diveintohtml5.info/forms.html#type-range

Etiquetas para multimedia

1
2
3
4
5

width="320" height="240" controls>
src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

1
2
3
4
5
="controls">
src="song.ogg" type="audio/ogg" />
src="song.mp3" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>
http://jplayer.org/

Mas Info

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

Una Introducción a los estilos con CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Selectores

1
2
3
4
5
6
p { /*...*/ }
p span { /*...*/ }
.azul { /*...*/ }
span.azul { /*...*/ }
#el_titulo { /*...*/ }
#el_titulo h2 { /*...*/ }

Block vs Inline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="el_div">lo que sea...</div>

<span id="el_span">lo que sea...</div>

/* OK: */
#el_div{
width:20px;
height:40px;
}

/* NO OK: */
#el_span{
width:20px;
height:40px;
}

Posicion absoluta vs Document Flow (ver #segundo_parrafo en el ej de arriba)
Referencia: http://www.w3schools.com/css/http://www.w3schools.com/css/

Nuevo en CSS3

Selectores

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.row:nth-child(even) {

  background: #dde;

}



.row:nth-child(odd) {

  background: white;

}



input[type="text"] {

  background: #eee;

}



:not(span) {

  display: block; 

}  



h2:first-child { ... }



div.text > div { ... } 



h2 + header { ... } /* Un header que esté precedido de un h2*/

Fuentes

1
2
3
4
@font-face {

    font-family: 'LeagueGothic';

    src: url(LeagueGothic.otf);

}

Gradientes, sombras, opacidad y esquinas redondas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Animaciones

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

h1{
color:#333333;
font-family: "Helvetica Neue", "Helvetica", "Verdana", "Arial", "sans-serif";
font-size: 22px;
-moz-animation-duration:1s;
-moz-animation-name: slidein;
}

@-moz-keyframes slidein{
from{
padding-left:100%;
width: 300%;
to{
padding-left:0%;
width: 100%;
}
}

Ejercicio

Escriba el código HTML y CSS para el siguiente formulario:

Solución al ejercicio.zip

Guardar archivo codificando como UTF-8 en VIM

Rafael Vega — Sun, 29 Jan 2012 00:09:26 +0000

En lugar de usar el habitual :w se debe usar :w ++enc=utf8 y eso es todo :)
Para mas info: :help ++enc

Como usar fuentes de Mac (dfont) en Linux

Rafael Vega — Sun, 08 Jan 2012 18:20:39 +0000

Utilice fondu para convertir los archivos dfont en archivos ttf y luego utilice fontmanager para instalar las fuentes en formato ttf.

Como montar imágenes dmg en Linux

Rafael Vega — Sun, 08 Jan 2012 16:27:13 +0000

Primero, toca determinar si la imágen esta comprimida o no usando el comando file: $ file nombre_imagen.dmg. Si devuelve algo como VAX COFF executable not stripped – version 376, la imágen está comprimida. Si devuelve algo como Macintosh HFS Extended version 4 data, la imágen no está comprimida.

Para montar una imágen no compprimida:

1 2	modprobe hfsplus mount -t hfsplus -o loop nombre_imagen.dmg /media/nombre_imagen

Y para montar una que no esté comprimida:

1
2
3

dmg2img -i nombre_imagen.dmg -o nombre_imagen-uncompressed.img
modprobe hfsplus
mount -t hfsplus -o loop nombre_imagen-uncompressed.img /media/nombre_imagen/nom

Incrementar o decrementar un numero en VIM

Rafael Vega — Tue, 20 Dec 2011 16:27:41 +0000

Simplemente ponga el cursor sobre un número y ó .

El Software Ha Muerto

Programación de Software Para Audio

Volantes anteriores:

Una lista de comandos y trucos.

Administración de usuarios y grupos en Linux

Postgres

Buscar y remplazar texto en muchos archivos

Crear thumbnails de una imagen

Copia de archivos a un servidor remoto

Renombrar muchos archivos

Limpiar cache de iconos en gnome

Cambiar los atajos de teclado de cualquier aplicación en Ubuntu 12.04 y Unity

Instalar varias versiones de Ruby con rbenv

1. Instalar rbenv y el plugin ruby-build

2. Instale la versión de ruby que quiera

3. Use la nueva versión de ruby

Cómo evitar que nautilus dibuje el fondo del escritorio en XFCE.

3. Programación gráfica con y Javascript.

SVG

Canvas 2D

Canvas 3D

APIs en Javascript para dibujar en

Ejemplo en Processing.js

Ejercicio

2. Introducción a Javascript.

Sintaxis

Document Object Model

jQuery

Algunas cosas nuevas en HTML5

Almacenamiento local de datos

Bases de datos locales

Cache de aplicaciones

Web workers

Web sockets

Notificaciones

Geo-locación

Ejercicios

Taller HTML5

Esquema del curso

1. Introducción a HTML y CSS.

Definición

Historia

HTML5 ~= HTML + JavaScript + CSS

Una Introducción al marcado de documentos con HTML5

Servicios de validación de marcado

Una herramienta indispensable

Algunas etiquetas y propiedades (clásicas)

, , ... , Encabezados. 12<h1>1. Título</h1> <h2>1.1. Subtítulo</h2>

, ... ,

Encabezados. 12<h1>1. Título</h1> <h2>1.1. Subtítulo</h2>

Documentación de todas las etiquetas disponibles

Algunas etiquetas nuevas en HTML5

Mas info sobre etiquetas y semántica:

Algunas etiquetas nuevas en HTML5 (Para formularios/apps)

Mas info sobre formularios

Etiquetas para multimedia

Mas Info

Una Introducción a los estilos con CSS

Nuevo en CSS3

Selectores

Fuentes

Gradientes, sombras, opacidad y esquinas redondas

Animaciones

Ejercicio

Guardar archivo codificando como UTF-8 en VIM

Como usar fuentes de Mac (dfont) en Linux

Como montar imágenes dmg en Linux

Incrementar o decrementar un numero en VIM

3. Programación gráfica con

,
, ... ,
Encabezados.

1
2
<h1>1. Título</h1>
<h2>1.1. Subtítulo</h2>

Encabezados.

1
2
<h1>1. Título</h1>
<h2>1.1. Subtítulo</h2>