(Ver Imagen)

Artículos relacionados

• España, eurocampeona!!
• DaVinci Code Theme para WordPress
• Promesas para el año que viene
• Mapas vectoriales de los municipios de España
• Frase #13

Popcorn

XML

<video width="530px" height="299px" controls="" data-timeline-sources="xml/webMadeMovies.xml">
 <source type="video/ogg; codecs="theora, vorbis" src="wmmjuly6.ogv"></source>
 <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2" src="wmmjuly6.mp4"></source>
</video>

<popcorn>
 <manifest>
 <people>
 <person id="celine" name="Celine" salutation="Miss." >
 <resource id="celinehomepage" src="http://www.celinecelines.com/" description="Celine's Homepage" />
 </person>
 <person id="brian" name="brian" >
 </person>
 <person id="SteveSong" name="Steve Song" >
 </person>
 [...]
 </people>
 <places>
 <place id="saopaulo" type="city" name="Sao Paulo">
 <resource id="saopaulowiki" src="http://en.wikipedia.org/wiki/S%C3%A3o_Paulo" description="Sao Paulo city, Brazil"/>
 </place>
 <place id="CapeTown" type="city" name="Cape Town">
 <resource id="capetownwiki" src="http://en.wikipedia.org/wiki/Cape_Town" description="Cape Town, South Africa"/>
 </place>
 [...]
 </places>
 <attributions>
 <attribution id="yacht1attrib" nameofwork="Don't Fight The Darkness" copyrightholder="Yacht" copyrightholderurl="http://www.teamyacht.com/" nameofworkurl="http://freemusicarchive.org/curator/WFMU/blog/Join_YACHT_See_Mystery_Lights_instrumentals" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
 <attribution id="yacht2attrib" nameofwork="Psychic City Voodoo City" copyrightholder="Yacht" copyrightholderurl="http://www.teamyacht.com/" nameofworkurl="http://freemusicarchive.org/curator/WFMU/blog/Join_YACHT_See_Mystery_Lights_instrumentals" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
 <attribution id="attrib" nameofwork="A Shared Culture" copyrightholder="Jesse Dylan" license="CC-BY-NC" licenseurl="http://creativecommons.org/licenses/by-nc/2.0/"/>
 [...]
 </attributions>
 <articles>
 <resource id="theinternet" src="http://en.wikipedia.org/wiki/internet" description="The Internet"/>
 <resource id="villagetelco" src="http://en.wikipedia.org/wiki/Village_telco" description="The Village Telco"/>
 <resource id="oilspill" src="http://en.wikipedia.org/wiki/Deepwater_Horizon_oil_spill" description="Deepwater Horizon Oil Spill"/>
 [...]
 </articles>
 </manifest>

 <timeline>
 <footnotes>
 <footnote in="00:00:00" out="00:14:00" target="footnotediv">Look around the page as info is updated!</footnote>
 </footnotes>
 <resources>
 <attribution in="00:00:05:02" out="00:00:34:00" target="container5" resourceid="yacht1attrib"></attribution>
 <attribution in="00:00:34:01" target="container5" resourceid="yacht1attrib"></attribution>
 <footnote in="00:00:00" out="00:15:00" target="footnotediv">Look around the page!</footnote>
 <videotag in="00:00:05:02" out="00:00:10:07">Steve Song</videotag>
 <attribution in="00:00:05:02" out="00:00:10:07" target="container5" resourceid="villagetelcoattrib"></attribution>
 <twitter in="00:00:05:02" out="00:00:10:07" title="Steve Song" source="from:stevesong" target="personaltwitter" width="238" height="120" overlay="images/overlay/twitter.png" />
 <wiki in="00:00:05:02" out="00:00:10:07" resourceid="villagetelco" numberOfWords="200" target="wikidiv" overlay="images/overlay/wiki.png"/>
 <flickr in="00:00:05:02" out="00:00:10:07" target="personalflickr" userid="78868639@N00" numberofimages="8" padding="4px" overlay="images/overlay/flickr.png"/>
 <googlenews in="00:00:05:02" out="00:00:10:07" target="googlenewsdiv" topic="Village Telco"/>
 [...]
 </resources>

 <map>
 <location resourceid="capetownwiki" in="00:00:03:00" out="00:00:11:07" lat="-33.9238" long="18.4233" target="container2" zoom="8"/>
 <location resourceid="grandislewiki" in="00:00:11:07" out="00:00:19:07" lat="29.2720" long="-90.0233 " target="container2" zoom="8"/>
 <location resourceid="mitmedialabhome" in="00:00:19:08" out="00:00:27:00" lat="42.3613" long="-71.0863" target="container2" zoom="12"/>
 [...]
 </map>
 <subtitles>

 <subtitles language="en" align="center">
 <subtitle in="00:00:00:03" out="00:00:01:06">All right let's take a look and show me some</subtitle>
 <subtitle in="00:00:01:06" out="00:00:03:00">of the neat things you can do on the internet</subtitle>
 [...]
 </subtitles>

 <subtitles language="fa" align="center">

 <subtitle in="00:04:00:08" out="00:04:01:09">My name is Mona Kasra</subtitle>

 <subtitle in="00:04:01:10" out="00:04:03:11">and I'm building a better Internet</subtitle>
 [...]
 </subtitles>

 </subtitles>
 <credits></credits>
 </timeline>
</popcorn>

Artículos relacionados

• 557 herramientas para la Web semántica
• Tabulator: un navegador para la web semántica
• HTML5 video con problemas en todos los navegadores
• Más sobre el contenido multimedia, HTML5 y WebKit
• Ambilight para HTML5 Video

<img src="//domain.com/img/logo.png">

.omgomg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

Artículos relacionados

• Lost.in, acorta y protege URL’s
• Jugando con WP_Rewrite API y las URL’s amigables
• ¿Cual es el tamaño máximo de las URL’s?
• Conversor PX a EM
• Yo soy friki,… ¿y tu?

¿Comas antes o después de la línea en objetos JSON para definiciones múltiples?

// commas antes
var vampyre = {
    teeth: 'sharp'
  , blood: 'stale'
  , age: 320
}

// commas despues
var vampyre = {
    teeth: 'sharp',
    blood: 'stale',
    age: 320
}

// commas despues
var vampyre = {
    teeth: 'sharp',
    blood: 'stale', // Esta coma hay que borrarla
 //   age: 320
}

Artículos relacionados

• WordPress 2.9 con papelera de reciclaje
• Problema con Regulus
• Los programadores y el Vodka
• bip bip … “Tendrás un em@il”
• Ya he vuelto!!! Menos mal

(Ver Imagen)

¿Como?

<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />

(function () {
var canvas = document.createElement('canvas'),
    ctx,
    img = document.createElement('img'),
    link = document.getElementById('favicon').cloneNode(true),
    day = (new Date).getDate() + '';

if (canvas.getContext) {
  canvas.height = canvas.width = 16; // set the size
  ctx = canvas.getContext('2d');
  img.onload = function () { // once the image has loaded
    ctx.drawImage(this, 0, 0);
    ctx.font = 'bold 10px "helvetica", sans-serif';
    ctx.fillStyle = '#F0EEDD';
    if (day.length == 1) day = '0' + day;
    ctx.fillText(day, 2, 12);
    link.href = canvas.toDataURL('image/png');
    document.body.appendChild(link);
  };
  img.src = 'ical-icon.png';
}

})();

Artículos relacionados

• Favicons dinámicos
• Canvas 3D, gráficas 3D basadas en Canvas y Javascript
• NetVibes añade Favicons
• Bomomo, dibuja con Canvas
• Canvas para WordPress, disponible

(Ver Imagen)

(jQuery convertido a PNG :D)

La idea

var x = function(z, m, ix ) { // image, callback, chunk index
  var o = new Image();
  o.onload = function() {
    var s = "",
        c = d.createElement("canvas"),
        t = c.getContext("2d"),
        w = o.width,
        h = o.height;
    c.width = c.style.width = w;
    c.height = c.style.height = h;
    t.drawImage(o, 0, 0);
    var b = t.getImageData( 0, 0, w, h ).data;
    for(var i= 0; i <b.length; i += 4) {
      if( b[i]> 0 )
        s += String.fromCharCode(b[i]);
    }
    m(s, ix);
  }
  o.src = z;
}

¿Como se crean esas PNG's?

def string2png( string, output )
  image = Magick::Image.new 1,string.length
  for i in 0 .. string.length
    color = '#%02X0000' % string[i]
    pixel = Magick::Pixel.from_color color
    image.pixel_color 0, i, pixel
  end
  image.compression = ZipCompression
  image.write("png8:"+ output)

  image = nil
end

¿Por que usar esto?

Conclusiones

Artículos relacionados

• Canvas 3D, gráficas 3D basadas en Canvas y Javascript
• Bomomo, dibuja con Canvas
• Canvas para WordPress, disponible
• Tutorial de Canvas
• Increible canvas 3D

Poniendonos en situación

(Ver Imagen)

• Velocidad: 1/20 seg
• Apertura: f/4.0
• ISO: 1600
• Focal: 10mm

(Ver Imagen)

4-5 mejor que 1

Photoshop

(Ver Imagen)

(Ver Imagen)

Modo de apilamiento

(Ver Imagen)

(Ver Imagen)

(Ver Imagen)

(Ver Imagen)

Artículos relacionados

• 12 galerías de Imagenes en Javascript
• 101 galerías de imagenes en javascript/flash/css
• Precarga de Imagenes con CSS
• Redimensiona las imagenes de tus posts
• Transparencias en tus imagenes con CSS

0) Introducción

1) El viaje de la luz

2) Conceptos

• Obturador: Se encarga de establecer el tiempo durante el que la luz llega al sensor. Este tiempo se mide en fracciones de segundos o segundos. (Ej: 1/250, 1/125,...)
• Diafragma: Su función es la de definir la apertura de la óptica del objetivo, haciendo que entre más o menos luz. Se mide mediante el famoso número f, y a mientras mayor número f, menor apertura. (Ej: f/1.8 > f/16)
• Sensor: El sensor es el encargado de recibir esa luz y procesarla para que la cámara pueda trabajar con ella.

3) Exposición: El lenguaje de programación de la fotografía

1. Velocidad de obturación.
2. Apertura de diafragma.
3. Sensibilidad ISO.

3.1) Velocidad de obturación

Congelando el momento.

Larga exposición

3.2) Apertura de diafragma

Muy poca profundidad de campo

Más profundidad de campo

3.3) Sensibilidad ISO

El ISO muy alta genera mucho ruido

3.4) Subexposición y Sobreexposición

Sobreexpuesta

Subexpuesta

4) Composición: Como hablar con imágenes

4.1) Regla de los tercios

(Ver Imagen) Imagen de la Wikipedia

4.2) Regla del horizonte

Usando la línea horizontal inferior

Usando la línea horizontal superior

4.3) Regla del movimiento

4.4) Regla de la mirada

Artículos relacionados

• Opera para desarrolladores
• DZone, digg/meneame clon para desarrolladores
• Herramientas para desarrolladores web
• Recursos para desarrolladores web
• Los nuevos desarrolladores, ¿más preparados?

// Ejemplo de uso
SWYM.Eval(codigo);

Int.toBits: [1,2,4,etc..<=this].Where{(this/it)%2 >= 1};
89.toBits
// [1,8,16,64]

List.MyPrefix: LazyList(.length)
{
 [this.at(0..it)]
}

each-MyPrefix-of[100..106]
// [100]
// [100,101]
// [100,101,102]
// [100,101,102,103]
// [100,101,102,103,104]
// [100,101,102,103,104,105]
// [100,101,102,103,104,105,106]

Artículos relacionados

• Necesitas alguna versión concreta de WordPress
• El viaje más largo jamás contado
• Hay días que te sientes Grissom
• La lectura es vivir otros mundos
• Mostrar los suscriptores de Feedburner en tu WordPress

Rendimiento

Objetos literales frente a clásicos

// Más lento
function literals(){
 var a = [], o = {};
}
// Más rápido
function classic(){
 var a new Array, o = new Object:
}

Loops

var test = '';
for (var i = 0; i<10000; i++)
 test = test + str;

var test = '', i = 10000;
while(i--) test = test + str;

// Más lenta
function normalLoop(){
 var i = 60, j = 0;
 while(i--) j++;
}

// Más rápida
function unrolledLoop(){
 var j = 0;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
 j++; j++; j++; j++; j++; j++;
}

Cachear variables globales

// Más rádida
function cache(){
 var w = window, i = 10000;
 while(i--) w.test = 'test';
}

// Más lenta
function nocache(){
 var i = 10000;
 while(i--) window.test = 'test';
}

Acceder a atributos de un objeto frente a with()

// Más lento
function conwith(){
 var obj = { prop: 'test', str: '' };
 with(obj){
 var i = 10000;
 while(i--) str += prop;
 return str;
 }
}

// Más rápido
function sinwith(){
 var obj = { prop: 'test', str: '' }, i = 10000;
 while(i--) obj.str += obj.prop;
 return obj.str;
}

Pasar a bits frente a parseInt()

// Más lenta
parseInt(12.50);

// Más rápida
~~(1 * "12.5");

Curiosidades del lenguaje

Diferencia entre && y ||

var n = 1;
if (true && (n=2)) ...;
console.log(n);
// --> n = 2
if (true || (n=3)) ...;
console.log(n);
// --> n = 2

(...).toString()

(function(){ return 2 * 3; }).toString();

// IE, Safari y Google Chrome
function(){ return 2 * 3; }

// Firefox
function(){ return 6; }

Más info

1. Extreme Javascript Perfomance (Thomas Fuchs)
2. JsRocks

Artículos relacionados

• 25 juegos en javascript que son interesantes conocer
• Pruebas de rendimiento de JS en navegadores
• Canvas 3D, ¿el futuro del javascript?
• 3D Tomb II, un FPS en Javascript de solo 4003bytes
• Prueba el rendimiento de tu Servidor